/* CSS Document */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: rgb(225, 210, 191);
    display: flex;
    flex-direction: column;
}

.header-section {
	background-color: rgb(225, 210, 191, .8);
    font-size: 40px;
    z-index: 2;
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0%;
    left: 7vw;
    right: 7vw;
}

.logo {
	margin-left: 1%;
    width: 45%;
}

.logo-mobile
{
	display: none;
}

.header-options
{
	margin-top: 2vh;
	display: inline-flex;
	flex-direction: row;
    color: rgb(8, 8, 7);
	text-decoration: none;
}

.header-logo-div
{
	display: flex;
}

.header-options-div
{
	display: inline-flex;
}

nav {
    color: rgb(98,122,126);
}

ul{
    display: flex;
    list-style-type: none;
    width: 16vw;
    justify-content: space-between;
    font-size: 1.5vw;
}

.header-options-div-mobile
{
	display: none;
}

.header-options-div-mobile.show {
	display: block;
}

.header-options-div-mobile.hide {
	display: none;
}

li {
    margin-top: 3vh;
	transition: transform .25s ease-out;
	display: inline-block;
}

li:hover {
	transform: translate(0, -5px);
	color: rgba(75,94,97,1.00);
}

p11
{
	text-decoration: underline;
	text-decoration-color: rgb(135, 179, 74);
}

.projcts-section{
	margin-top: 0.75vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 13vh;	
}

.project-container{ 	
    margin-bottom: 2vh;
	margin-left: 7vw;
    margin-right: 7vw;
}

.project-colums{
    display: flex;
	padding-top: 10px;
}

.project-info-column-mobile
{
	display: none;
}

.horizontal-line 
{
    border: 0 solid rgb(135, 179, 74);
    border-top-width: 3px;
    border-radius: 1px;
    flex: 1;
    margin-bottom: 10px;
  }

.project-container-logo
{
    border: 3px solid rgb(237, 97, 46);
    border-radius: 5px;
	float: right;
	height: 100%;
    width: 100%;
	opacity: 1;
	display: block;
}

.overlay {
  position: absolute;
  float: right;
  top: 0.1vh;
  bottom: 0;
  left: -0.2vw;
  right: 0;
  height: 99.7%;
  width: 100.2%;
  opacity: 0;
  transition: .25s ease;
  background-color: rgb(237, 97, 46);
}

.unavailable-overlay {
  position: absolute;
  float: right;
  top: 0.1vh;
  bottom: 0;
  left: -0.2vw;
  right: 0;
  height: 99.7%;
  width: 100.2%;
  opacity: 0;
  transition: .25s ease;
  background-color: rgb(98,122,126);
}


.project-title:hover .unavailable-overlay {
  opacity: 0.9;
}

.project-title:hover .overlay {
  opacity: 0.9;
  cursor: pointer;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.project-container-logo-unavailable
{
	border: 3px solid rgb(98,122,126);
    border-radius: 5px;
	float: right;
	height: 100%;
    width: 100%;
}

.project-info-column
{
    width: 25%;
	position: relative;
}

.category-container
{
	display: table-cell;
	margin-right: 5vw;
  	vertical-align: bottom;
	position: absolute;
  	bottom: 0;
}

.project-title
{
	width: 75%;
	position: relative;
}

.project-title-text
{
	float: left;
	font-size: 2vw;
	margin-bottom: 1vh;
}

.project-info-year
{
	width: 100%;
	display: inline-flex;
	vertical-align: top;
	font-size: 1.2vw;
	float: left;
	color: rgb(116, 115, 115);
}

.project-info-category
{
	font-size: 1.2vw;
	
	background-color: rgba(0, 0, 0, 0);
    border: 2px solid rgb(135, 179, 74);
    border-radius: 100px; 
    padding: 8px 11px;
    text-decoration: none;
	margin-top: 1vh;
	margin-right: 0.5vw;
	float: left;
}

p7
{
	font-size: 1.2vw;
	color: rgb(98,122,126);
}

.footer-container
{
	background: white;
}

.footer-text-info
{
	padding-top: 1%;
	margin-left: 5vw;
    margin-right: 5vw;
}

.footer-name
{

}

.footer-email
{

}

.footer-divder
{
	margin-left: 5vw;
    margin-right: 5vw;
}

.footer-lower-section
{
	padding-top: 2vh;
	margin-left: 7vw;
    margin-right: 7vw;
	display: flex;
	height: 16vh;
}

.footer-logo
{
	height: 10vh;
}

.social-media-container
{
	margin-left: 20%;
	display: inline-flex;
	padding-top: 1vh;
	height: 5vh;
}

.social-media-icon
{
	width: 2vw;
}

.social-media-container-mobile
{
	display: none;
}

.footer-quote
{
	font-weight: 400;
	margin-left: 60vw;
	text-align: right;
}

p9
{
	font-size: 1vw;
}

p10
{
	display: block;
	font-size: 1.1vw;
	margin-top: 0.5vh;
}

.horizontal-footer-list
{
	background-color: red;
	display: inline-flex;
}

ul.horizontal-footer-list li
{
	
	vertical-align: bottom;
}

a {
    text-decoration: none;
	color: inherit; 
}

a1 {
	
    text-decoration: none;
}

a2
{
	text-decoration: none;
	color: inherit; 
}

a2:hover
{
	color: rgba(79,99,102,1.00);
	cursor: pointer;
}

.project-container-logo:hover
{
	background-color: red;
}

.hamburger-menu-section
{
	display: none;
}

@media only screen and (max-width: 1000px){
    .hamburger
	{
        display: flex;
        border: 0;
        background: transparent;
        color: white;
        font-size: 30px;
		margin-top: 3vh;
		margin-right: 2vw;
    }
	
	.header-section
	{
		background-color: rgb(225, 210, 191, .8);
		font-size: 40px;
		z-index: 2;
		backdrop-filter: blur(5px);
		position: fixed;
		top: 0%;
		bottom: 87vh;
	}
	
	.hamburger-menu-section
	{
		display: block;
	}
	
	.hamburger-menu-cancel
	{
		display: block;
		background: transparent;
		color: white;
		outline: none;
		border: 0;
		font-size: 1.5rem;
		height: 5vh;
		width: 5vw;
		margin-top: 4vh;
	}
	
	.hamburger-menu-options
	{
		display: block;
		background-color: white;
		z-index: 4;
		width: 50vw;
		height: 100vh;
		top: 0%;
		right: -6%;
		position: fixed;
	}
	
	.header-options-div
	{
		display: none;
	}
	
	
	.header-options-div-mobile
	{
		display: none;
		
		z-index: 3;
		backdrop-filter: blur(5px);
		position: fixed;
		height: 100vh;
		width: 55vw;
		top: 0%;
		right: -6%;
	}

	.header-options-div-mobile.show {
		display: block;
	}

    nav 
	{
		color: rgb(98,122,126);
    }
	
	ul
	{
		display: block;
		list-style-type: none;
		font-size: 5vw;
	}
	
	.horizontal-line-hamburger
	{
		border: 0 solid rgb(135, 179, 74);
		border-top-width: 2px;
		border-radius: 1px;
		flex: 1;
		margin-top: 2vh;
	}

    .logo 
	{
        display: none;
    }
	
	.logo-mobile
	{
		display: flex;
    	width: 40%;
		margin-left: 2vw;
	}

	.overlay, .unavailable-overlay {
        display: none;
    }
	
	.projcts-section
	{
    	display: flex;
    	flex-direction: column;
    	text-align: center;
    	padding-top: 12vh;		
	}
	
	.project-container
	{ 	
    	margin-bottom: 1vh;
		margin-left: 5vw;
    	margin-right: 5vw;
	}
	
	.project-colums
	{
		display: block;
	}
	
	.project-title
	{
		margin-left: 1vw;
		width: 100%;
	}
	
	.project-title-text
	{
		font-size: 5vw;
		padding-top: 1vh;
		font-weight: 500;
		margin-bottom: 3vh;
	}
	
	.project-container-logo
	{
		border: 3px solid rgb(237, 97, 46);
		border-radius: 5px;
		float: right;
		height: 100%;
		width: 100%;
	}
	
	.project-info-column
	{
		display: none;
		margin-top: 34vh;
		width: 100%;
	}
	
	.project-info-column-mobile
	{
		width: 100%;
		height: 5vh;
		display: flex;
	}
	
	.project-info-year-mobile
	{
		font-size: 5vw;
		text-align-last: right;
		color: rgb(116, 115, 115);
		position: absolute;
		right: 8vw;
		margin-top: 2vh;
	}

	.project-info-category-mobile
	{
		color: rgb(183, 123, 102);
    	border: 2px solid rgb(135, 179, 74);
    	border-radius: 100px; 
    	padding: 4px 11px;
    	text-decoration: none;
	}
	
	p7
	{
		font-size: 4vw;
		color: rgb(98,122,126);
	}
	
	.footer-lower-section
	{
		margin-top: 2vh;
		margin-left: 5vw;
    	margin-right: 5vw;
		height: 7vh;
		display: flex;
	}

	
	.footer-logo
	{
		padding-top: 0vh;
		margin-left: 2vw;
	    height: 80%;
	}
	
	.social-media-container
	{
		display: none;
	}
	
	.social-media-container-mobile
	{
		background-color: red;
	}
	
	.footer-quote
	{
		display: none;
	}
}