@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Exo:900|Merriweather:300,300i,400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Abel|BenchNine:700|Josefin+Sans:700|PT+Sans+Narrow:700|Roboto+Condensed:700|Teko');


/*
	font-family:'Merriweather', sans-serif

*/

body {
	width: 100%;
	left: 0px;
	top: 0px;
	height: 100vh !important;
	overflow: scroll !important;
	-webkit-overflow-scrolling: touch !important;
}




/*-- Navigation */
.video-container {
	text-align: center;
	padding-top:10vh;

}

.TitleSection
{
	  position:relative;
	font-size: 24px;
	font-weight: 600;
	margin-top: 5vh;
	margin-bottom: 5vh;
	text-align: center;
}




@media only screen and (max-width: 768px) {
  /* For mobile phones: */
    ul.index-nav li.right, 
  ul.index-nav li {float: none;}
	.index-logohov {
    margin-right: 0px;
	background: url(../images/enginepictures_logoWhiteW360.png) no-repeat;
	width: 360px;
	height: 83px;	
}
	nav {
		width:20%;
	}
	.video-containtop{
		padding-top: 80px;
	}
	#workoffset{
	padding-top:120px;
}
	a {
		font-size: 100%;
	}
	h1.img-text {
  opacity: 1;

}
	.index-logohov:hover {
    margin-right: 0px;
	background: url(../images/enginepictures_logoW360.png) no-repeat;
	width: 360px;
	height: 83px;	
}
.indiv-logo{
	margin-right: 0px;
}
	.hq-container {
		top: 10%;
	}
	.mmicons-container{
		padding-top: 10px;
	}
	.sk {
		font-size: 18px;
	}
	.index-nav {
	left:-460px;
}
	.home-desc {
		width: 380px;
		position:fixed;
  		bottom:0;
	    top: 100%;
		margin-bottom: -800px;
	}
	.ethos-container {
		position: relative;
		
	}	
	.ethos-container a:link{

}
	.scrap-container {
		position: relative;
		top: 20%;
	}
}

/*#  NAV FADE CODE sourceMappingURL=normalize.min.css.map */

.container-nav {
	width: 100%;
	height: auto;
	position: relative;
	font-family: 'Trebuchet Ms';
	color: #FFFFFF;
}

.bg {
  background: #000;
  width: 100%;
  height: 70px;
  opacity: 0;
}

.show {
  opacity: 0.9;
}

.transition {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	z-index: 999;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* Work Section */
#workoffset .col-md-3, #workoffset2 .col-md-3,
.work .col-md-3{
	padding:0;
	margin-bottom: 0;
	margin-top: 0;
	border: 0;
}
#workoffset .col-md-4, #workoffset2 .col-md-4,
.work .col-md-4{
	padding:0;
	margin-bottom: 0;
	margin-top: 0;
	border: 0;
}
#workoffset .col-md-6, #workoffset2 .col-md-6,
.work .col-md-6{
	padding:0;
	margin-bottom: 0;
	margin-top: 0;
	border: 0;
}
.img-wrapper{
	display:inline-block;
	overflow:hidden;
	margin-bottom: 0;
	float: left;
	width:100%;
	-webkit-webkit-transition:all 1s ease-in-out;
    -moz-webkit-transition:all 1s ease-in-out;
    -ms-webkit-transition:all 1s ease-in-out;
    -o-webkit-transition:all 1s ease-in-out;
		transition: all 1s ease-in-out;
}

.img-wrapper:hover img{
	-moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.img-wrapper:hover .img-text {
  opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.img-wrapper img, .img-text{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.img-text {
  opacity: .6;
}


#workoffset .col-md-3 h1, #workoffset2 .col-md-3 h1,
.work .col-md-3 h1{
	position: absolute;
	color: #eaeaea;
	width: 100%;
	text-align: center;
	transform: translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2px;
	top: 50%;
}
#workoffset .col-md-4 h1, #workoffset2 .col-md-4 h1,
.work .col-md-4 h1{
	position: absolute;
	color: #eaeaea;
	width: 100%;
	text-align: center;
	transform: translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2px;
	top: 50%;
}
#workoffset .col-md-6 h1, #workoffset2 .col-md-6 h1,
.work .col-md-6 h1{
	position: absolute;
	color: #eaeaea;
	width: 100%;
	text-align: center;
	transform: translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2px;
	top: 50%;
}
#workoffset .col-md-3 h1 b,#workoffset2 .col-md-3 h1 b,
.work .col-md-3 h1 b{
	color:#FFF;
	font-size:102%;
}
#workoffset .col-md-4 h1 b,#workoffset2 .col-md-4 h1 b,
.work .col-md-4 h1 b{
	color:#FFF;
	font-size:102%;
}
#workoffset .col-md-6 h1 b,#workoffset2 .col-md-6 h1 b,
.work .col-md-6 h1 b{
	color:#FFF;
	font-size:102%;
}
#workoffset .col-md-3 h2,#workoffset2 .col-md-3 h2,
.work .col-md-3 h2{
	position: absolute;
	left: 25px;
	color: lightgrey;
	width: 100%;
	text-align: center;
	transform: translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
	margin: 0;
	bottom: 20px;
	font-size: 12px;
	font-weight: bold;
}
#workoffset .col-md-4 h2,#workoffset2 .col-md-4 h2,
.work .col-md-4 h2{
	position: absolute;
	left: 25px;
	color: lightgrey;
	width: 100%;
	text-align: center;
	transform: translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
	margin: 0;
	bottom: 20px;
	font-size: 12px;
	font-weight: bold;
}
#workoffset .col-md-6 h2,#workoffset2 .col-md-6 h2,
.work .col-md-6 h2{
	position: absolute;
	left: 25px;
	color: lightgrey;
	width: 100%;
	text-align: center;
	transform: translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
	margin: 0;
	bottom: 20px;
	font-size: 12px;
	font-weight: bold;
}

.animate{
	-webkit-animation: bounce 2s ease-in-out 2;
    animation: bounce 2s ease-in-out 2;
    -moz-animation: bounce 2s ease-in-out 2;
}

@-webkit-keyframes bounce{0%,100%{transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}
50%{transform:translateY(10px);-ms-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px)}
}

a:link, a:visited, a:active {
  color: black; 
  text-decoration: none;
  display: inline-block;
}
a:hover {
  text-decoration: none;
  display: inline-block;
}

@media(min-width:940px){
	.fa-bars{
		display:none;
	}
	.overlay{
		width:100% !important;
	}
	.closebtn{
		display:none;
	}
	
}

@media(min-width:1000px){
nav ul li {
	padding-left:0px;
}
}

.nav-text {
	text-align: center;
}

@media(max-width:939px){
	#myNav.active.overlay{
		width:100%;
	}
	/* Navigation Overlay */
	.overlay {
		/* Height & width depends on how you want to reveal the overlay (see JS below) */
		height: 100%;
		width: 0;
		position: fixed; /* Stay in place */
		z-index: 9999; /* Sit on top */
		left: 0;
		top: 0;
		background-color: rgb(0,0,0); /* Black fallback color */
		background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
		overflow-x: hidden; /* Disable horizontal scroll */	
	    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

	.notransition {
		-webkit-transition: none !important;
		-moz-transition: none !important;
		-o-transition: none !important;
		transition: none !important;
	}

	/* Position the content inside the overlay */
	.overlay-content {
		position: relative;
		top: 25%; /* 25% from the top */
		width: 100%; /* 100% width */
		text-align: center; /* Centered text/links */
		margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	}
	.overlay-content ul{
		float:none;
		display:table;
		text-align:center;
		margin: 0 auto;
		padding: 0;
	}
	.overlay-content{
		display:table;
	}
	.overlay-content ul.social{
		display:table-footer-group;
		margin:0;
		padding:0;
	}

	.overlay-content ul.social li{
		display:inline-block;
		font-size:150%;
	}


	.overlay-content ul li{
		float:none;
		display:block;
		margin:0;
		padding:0;
		text-align:center;

	}
	/* The navigation links inside the overlay */
	.overlay a {
		padding: 0px;
		text-decoration: none;
		font-size: 36px;
		color: #818181;
		display: block; /* Display block instead of inline */
		transition: 0.3s; /* Transition effects on hover (color) */
	}

	/* When you mouse over the navigation links, change their color */
	.overlay a:hover, .overlay a:focus {

	}

	/* Position the close button (top right corner) */
	.overlay .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
		color: #FFF;
		cursor:pointer;
	}

	/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
	@media screen and (max-height: 450px) {
		.overlay a {font-size: 20px}
		.overlay .closebtn {
			font-size: 40px;
			top: 15px;
			right: 35px;
		}
	}
}

@media(min-width:1932px){

header{
	zoom:1.5;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
}
body{
font-size:200% !important;
}
#workoffset .col-md-6 h1, .work .col-md-6 h1,#workoffset2 .col-md-6 h1,
#workoffset .col-md-4 h1, #workoffset2 .col-md-4 h1, 
.work .col-md-4 h1,#workoffset .col-md-3 h1, #workoffset2 .col-md-3 h1, 
.work .col-md-3 h1{
	font-size:2.2rem !important;
}


}