html,body{
	font-family:'Overpass Mono', monospace;height:100%;width:100%;margin:0;padding:0;background:#ffffff no-repeat center center;background-attachment:fixed;background-size:cover;color:#000000;font-size:16px;line-height:24px;font-weight:400;min-height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html{overflow-y:scroll;overflow-x:hidden;}
img{border:0px none;}
input,select{font-family:inherit;font-weight:300;}


a{color:#d61628;text-decoration:none;
	-webkit-transition: color 0.3s ease-out;
	-moz-transition: color 0.3s ease-out;
	-o-transition: color 0.3s ease-out;
	transition: color 0.3s ease-out;
}
a:hover{
	color:#000000;
	text-decoration:none;
	background-color: transparent;
	text-decoration: none; 
	padding: 0px;
	}


.clear{clear:both;height:0px;}




#header{
	display: block;
	height:100%;
	width: 0;

	position:fixed;
	z-index:500;
	top: 0;
	left: 0;

	-webkit-transition: all .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all .7s cubic-bezier(0.645, 0.045, 0.355, 1);

}

#header:before {

	content: "";
	display: block;
	width: 100%;
	height: 100%;
	/* change color here */


	background:-moz-linear-gradient(left, rgba(38, 38, 38,.8), rgba(255, 255, 0,.75));
	background:-webkit-linear-gradient(left, rgba(38, 38, 38,.8), rgba(255,255,0,.75));
	background:-o-linear-gradient(left, rgba(38, 38, 38,.8), rgba(255,255,0,.75));
	background:linear-gradient(left, rgba(38, 38, 38,.8), rgba(255,255,0,.75));
	
	position: fixed;
	top: 0;
	left: -100%;

	-webkit-transform: translate3d(10%,0,0);
	-moz-transform: translate3d(10%,0,0);
	-ms-transform: translate3d(10%,0,0);
	transform: translate3d(10%,0,0);

	-webkit-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#headerIn{
	display: block;
	height:100vh;
	width:100vw;

	opacity: 0;
	visibility: hidden;

	position:fixed;

	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	transition: all .7s ease;
}
#header .logo {

	display: block;
	width: calc(25vw - 0px);
	margin:0;
	border-color: transparent;
	border:	none;

	position: relative;
	left: 50%;
	top: 60%;
	margin-top: 0;
	/* margin-left: -435px; */
	z-index: 502;

	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	ms-transform-origin: left top;
	transform-origin: left top;

	-webkit-transform: translate3d(calc(1vw - 0px),-50vh,0) scale(.5);
	-mmoz-transform: translate3d(calc(1vw - 0px),-50vh,0) scale(.5);
	-ms-transform: translate3d(calc(1vw - 0px),-50vh,0) scale(.5);
	transform: translate3d(calc(1vw - 0px),-50vh,0) scale(.5);

	-webkit-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1);

}


.burger{

	display: block;
	width: calc(6vw - 0px);
	height: calc(6vw - 0px);
	border: none;
	outline: none;
	border-color: transparent;
	border:	none;
	background: none;
	cursor:pointer;
	

	position:fixed;
	left: -5%;
	top: 50%;
	z-index: 501;

	-webkit-transform: translate(calc(8vw - 0px),-50%);
	-moz-transform: translate(calc(8vw - 0px),-50%);
	-ms-transform: translate(calc(8vw - 0px),-50%);
	transform: translate(calc(8vw - 0px),-50%);

	-webkit-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1), background .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1), background .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1), background .7s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform .7s cubic-bezier(0.645, 0.045, 0.355, 1), background .7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.burger span{

	display:block;
	height: calc(.5vw - 0px);
	width:50%;
	margin:auto;

	position:absolute;
	left:calc(3vw - 0px);
	top:50%;
	background:#000000;

	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);

	-webkit-transition: transform .4s ease, background .4s ease;
	-moz-transition: transform .4s ease, background .4s ease;
	-o-transition: transform .4s ease, background .4s ease;
	transition: transform .4s ease, background .4s ease;
}

.burger span:after, .burger span:before{
	content:"";
	display: block;
	height:100%;
	width:100%;

	background:#000000;

	position:absolute;
	top: 0;
	left: 0;

	-webkit-transition: transform .4s ease;
	-moz-transition: transform .4s ease;
	-o-transition: transform .4s ease;
	transition: transform .4s ease;
}

.burger span:after{
	-webkit-transform: translate(0,-200%);
	-moz-transform: translate(0,-200%);
	-ms-transform: translate(0,-200%);
	transform: translate(0,-200%);
}
.burger span:before{
	-webkit-transform: translate(0,200%);
	-moz-transform: translate(0,200%);
	-ms-transform: translate(0,200%);
	transform: translate(0,200%);
}
.burger:hover span:after{
	-webkit-transform: translate(0,-200%);
	-moz-transform: translate(0,-200%);
	-ms-transform: translate(0,-200%);
	transform: translate(0,-200%);
}
.burger:hover span:before{
	-webkit-transform: translate(0,200%);
	-moz-transform: translate(0,200%);
	-ms-transform: translate(0,200%);
	transform: translate(0,200%);
}



#header .menu{

	width: calc(50vw - 0px);
	box-sizing: border-box;
	margin-top:0;


	opacity:0;

	position:absolute;
	left:calc(40vw - 0px);
	top:calc(0vw - 0px);

	-webkit-transition: opacity .4s ease;
	-moz-transition: opacity .4s ease;
	-o-transition: opacity .4s ease;
	transition: opacity .4s ease;
}
#header .menu:after{content:"";display:block;clear:both;height:auto;}
#header .menu .principal{
	display: block;
	width: calc(40vw - 0px);
	max-width: auto;
	float: left;
}

#header .menu .principal > li + li{padding-top: calc(3vw - 0px);}
#header .menu .principal li a{display: block;font-family:'Overpass Mono', monospace;font-size:calc(4vw - 0px);color:#000000;

	position: absolute;
}

.menuOpened #headerIn {

	opacity: 1;
	visibility: visible;
}

.menuOpened #header:before{

	-webkit-transform: translate(100%,0);
	-moz-transform: translate(100%,0);
	-ms-transform: translate(100%,0);
	transform: translate(100%,0);
}

.menuOpened #header .logo{

	-webkit-transform: translate3d(calc(10vw - 0px),calc(-20vw - 30px),0) scale(1);
	-moz-transform: translate3d(calc(10vw - 0px),calc(-20vw - 30px),0) scale(1);
	-ms-transform: translate3d(calc(10vw - 0px),calc(-20vw - 30px),0) scale(1);
	transform: translate3d(calc(10vw - 0px),calc(-20vw - 30px),0) scale(1);
}

.menuOpened #header .menu{

	opacity:1;

	-webkit-transition-delay: .55s;
	-moz-transition-delay: .55s;
	-ms-transition-delay: .55s;
	transition-delay: .55s;
}
/*.menuOpened #header .burger{left:1000px;top:50%;margin-top:-350px;}*/
.menuOpened .burger {

	-webkit-transform: translate(calc(90vw - 0px),-70%);
	-moz-transform: translate(calc(90vw - 0px),-70%);
	-ms-transform: translate(calc(90vw - 0px),-70%);
	transform: translate(calc(90vw - 0px),-70%);
}
.menuOpened .burger span{background-color:transparent;}
.menuOpened .burger span:before{

	-webkit-transform: translate(0,0) rotate(45deg);
	-moz-transform: translate(0,0) rotate(45deg);
	-ms-transform: translate(0,0) rotate(45deg);
	transform: translate(0,0) rotate(45deg);
}
.menuOpened .burger span:after{

	-webkit-transform: translate(0,0) rotate(-45deg);
	-moz-transform: translate(0,0) rotate(-45deg);
	-ms-transform: translate(0,0) rotate(-45deg);
	transform: translate(0,0) rotate(-45deg);
}






/***************************************************************** BODY DIV INFORMATION */



body {

  font-family: 'Overpass Mono', monospace;

  font-size: 12px;

}


h1 {

	text-transform: uppercase;
	font-size: calc(1.5vw + 0px);
	
}

h2 {
    color: #1e2023;
    font-size: 18px;

}

p {
    color: #595959;
	font-size: 14px;

}


/***************************************************************** SITE DIV INFORMATION */


.site-content {
 
  margin-left: 15%;
  margin-right: 5%;
  z-index: 100;
}



img {
  max-width:100%;
  border: 1px dashed #808080;
  padding: 5px;
  border-width:1px;
}

/***************************************************************** PROJECT PAGE */


.left {
	position: float;
    margin-left: 0%;
    max-width: 45%;
	margin-bottom: -12%;
}

.middle {
    margin-top: 16%;
}

.right {
    position: float;
    margin-left: 50%;
    max-width: 45%;
	margin-bottom: -12%;
}

.left a:hover { 

	background-color: transparent;
	text-decoration: none;
	padding: 0px;	
}

.right a:hover { 

	background-color: transparent;
	text-decoration: none; 
	padding: 0px;
}

/***************************************************************** ENGINEERING LINK TABLE DIV INFORMATION */

table, th, td {
	font-size: calc(1.125vw + 5px);
    border: 1px solid #ffffff;
	border-collapse: collapse;
	padding: 10px;
	text-align: left;
	}	
	
a {
  color: black;
  text-decoration: none; /* no underline */
}

  
.table-content a:hover { 

	background-color: yellow;	/* background-color: yellow; */
	text-decoration: none; 
	padding: 5px;					/* padding: 5px; */

}

/***************************************************************** INSTAGRAM PAGE */



.instagram-content img {
  max-width:100%;
  border: 1px dashed #808080;
  padding: 5px;
  padding-bottom: 10px;
  border-width:1px;
}

.instagram-content a:hover { 

	background-color: transparent;
	text-decoration: none;
	padding: 5px;

}