body{width:100%; margin:0; background-color:#efefef; overflow-x:hidden; color:#111111; font-size: 15px; line-height:150%; font-family:'Roboto', sans-serif; !important}
.clear-fix{clear:both;}

h1{color:#ffffff; font-size: 75px; line-height:110%; font-weight:400; letter-spacing:0.1em; font-family:'Raleway'; !important }
h2, span.h2{font-size:40px; font-weight:400; letter-spacing:0.1em; font-family:'Raleway'; !important }
h3, span.h3{font-size: 22px; line-height:150%; font-family:'Roboto', sans-serif; !important font-weight:900;}
h4{font-size:18px; font-weight:400; line-height:150%; font-family:'Raleway'; !important }p{font-size: 18px; line-height:150%; font-family:'Roboto', sans-serif; !important }
span.strike{text-decoration:line-through;}

.nobr{
	white-space:nowrap;
}

.white{color:#ffffff;}

.logo-text{color:#ffffff; font-size: 20px; line-height:100%; letter-spacing:0.1em; font-family:'Raleway'; !important }
.logo-text a:link, p.logo-text a:visited {color:#ffffff; text-decoration:none;}
.logo-text a:hover{color:#942b62; text-decoration:none;}

.bg-white{background-color:#fff; color:#111111;}
.bg-grey{background-color:#efefef; color:#111111;}
.bg-darkgrey{background-color:#888; color:#111111;}
.bg-black{background-color:#000; color:#888888;}
.bg-purple{background-color:#942c61; color:#ffffff;}
.bg-gradient{
	background:#000;
	background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,1)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,1)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,1)); /*Fx 3.6-15*/
	background: linear-gradient(rgba(255,255,255,0), rgba(0,0,0,1)); /*Standard*/
}
#bg{background:url(../images/bg-animation-2.gif); background-size:cover; width:100%; height:100vh; position:fixed; z-index:-100; opacity:1;}



.vh-section{height:105vh; padding:0; margin:0;}

.section100{width:100%; float:left;}
.section20{width:20%; float:left;}
.section25{width:25%; float:left;}
.section33{width:33.33333%; float:left;}
.section35{width:35%; float:left;}
.section30{width:30%; float:left;}
.section47{width:47.5%; float:left;}
.section50{width:50%; float:left;}
.section65{width:65%; float:left;}
.section66{width:66.66666%; float:left;}
.section75{width:75%; float:left;}
.section80{width:80%; float:left;}

.margin5{margin-right:5%;}
.end{margin-right:0%;}

.top-section{margin-top:70px;}
.padding80{padding-top:80px; padding-bottom:80px;}
.center80{padding-left:10%; padding-right:10%;}
.center50{padding-left:25%; padding-right:25%;}

.v-center{position:absolute; top:50%; transform: translateY(-50%); }
.ab-center{position:relative; top:50%; left:50%; transform: translate(-50%, -50%); margin:0; padding:0;}

.content{padding:0 40px;}
.padded-box{box-sizing: border-box; padding:50px;}

.img-holder img{height:100%; width:auto; max-height:600px; max-width:600px; }
.imgfit img{width:100%; height:auto; margin-bottom:50px;
-o-box-shadow:      3px 3px 15px #555;
-icab-box-shadow:   3px 3px 15px #555;
-khtml-box-shadow:  3px 3px 15px #555;
-moz-box-shadow:    3px 3px 15px #555;
-webkit-box-shadow: 3px 3px 15px #555;
box-shadow:         3px 3px 15px #555;}

.imgfit-noshadow img{width:100%; height:auto; margin-bottom:50px;
-o-box-shadow:      none;
-icab-box-shadow:   none;
-khtml-box-shadow:  none;
-moz-box-shadow:    none;
-webkit-box-shadow: none;
box-shadow:         none;}

#float-nav{width:150px; height:100vh; position:fixed; top:0; right:25px; display:table; mix-blend-mode:exclusion;}
#nav-content{display:table-cell; vertical-align:middle; text-align:right;}
#float-nav p{font-family:font-family:'Raleway'; !important;}

/* Top */
div#top{height:100vh; display:block; position:relative;}
div#top div{position:relative;}

div#top-subpg h1{
	text-shadow: 10px 10px 20px #bbb;
}

/* Portfolio */
.next-work-btn h2 a:link, .next-work-btn h2 a:visited{color:#111111; text-decoration:none;}
.next-work-btn h2 a:hover{color:#db4140; text-decoration:underline;}

img.basic-media{
    width: 100%;
    vertical-align: middle;
}

img.media{
    width: 100%;
    vertical-align: middle;
	box-shadow:0px 2px 10px #888888;
}

.desc-panel{background:#111111; display:table; height:100px; vertical-align:middle;}
.desc-text{float:left; display:table-cell; vertical-align:middle;}

.box-desc{position:absolute; bottom:0; height:200px; width:100%; background:rgba(255,255,255,0);}
.text-desc{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#111111;}
.title-desc{float:left;}

.btn-cta-red{
	height:50px;
	padding-right:30px;
	padding-left:30px;
	margin-left:20px;
	background-color: #111111;
	color:#fff;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	font-family: 'Open Sans', Arial, sans serif;
	font-size:24px;
	text-align:center;
	cursor:pointer;
	float:left;
}
.btn-cta-red:hover{
	background-color: #db4140;	
}

.SPLASH{position:relative;}

.SPLASH img, .section-title img{width:100%; height:auto; margin-bottom:0px;}

.section-work{
	position:relative;
	width:100%;
	float:left;
}

.section-work img{
	width:100%;
	height:auto;
}

.GC{position:relative; background-color:#609f4a; background:url(../images/gc-responsive.jpg); background-size:cover; width:100%; height:100vh; background-position:center;}

.NPC{position:relative; background-color:#0079c1; background:url(../images/npc-responsive.jpg); background-size:cover; width:100%; height:100vh; background-position:center;}

.HONDA{position:relative; background-color:#0079c1; background:url(../images/img-honda-banner.jpg); background-size:cover; width:100%; height:100vh; background-position:center;}

.MUTATIONS{position:relative; background-color:#de2719; background:url(../images/img-mutations-spread.jpg); background-size:cover; width:100%; height:100vh; background-position:center;}

.BYWL{position:relative; background-size:cover; width:100%; height:100vh; background-position:center;}


.mobile{display:none;}
.big{display:block;}

/*@media screen and (min-width: 771px) and (max-width: 1007px){
		.section20{width:100%; float:left;}
		.section25{width:100%; float:left;}
		.section33{width:100%; float:left;}
		.section35{width:100%; float:left;}
		.section30{width:100%; float:left;}
		.section47{width:100%; float:left;}
		.section50{width:100%; float:left;}
		.section65{width:100%; float:left;}
		.section66{width:100%; float:left;}
		.margin5{margin-right:0%;}
		.end{margin-right:0%;}
		
		.top-section{margin-top:70px;}
		.padding80{padding-top:80px; padding-bottom:80px;}
		.center50{padding-left:0%; padding-right:0%;}
	}*/
@media screen and (max-width: 1007px){	
		.mobile{display:block; width:100%; float:left; position:relative; padding:0; margin:0;}
		.mobile h1{font-size:30px;}
		.mobile h2{font-size:20px; line-height:30px; font-weight:bold;}
		.big{display:none;}
	
		#float-nav{display:none;}
		
		.vh-section{width:100%; float:left;}
		.section20{width:100%; float:left;}
		.section25{width:100%; float:left;}
		.section33{width:100%; float:left;}
		.section35{width:100%; float:left;}
		.section30{width:100%; float:left;}
		.section47{width:100%; float:left;}
		.section50{width:100%; float:left;}
		.section65{width:100%; float:left;}
		.section66{width:100%; float:left;}
		.margin5{margin-right:0%;}
		.end{margin-right:0%;}
		
		.top-section{margin-top:70px;}
		.padding80{padding-top:80px; padding-bottom:80px;}
		.center50{padding-left:0%; padding-right:0%;}
		
		.btn-cta-red{
			height:45px;
			padding-right:20px;
			padding-left:20px;
			margin-left:0px;
			background-color: #111111;
			color:#fff;
			-webkit-border-radius: 30px;
			-moz-border-radius: 30px;
			border-radius: 30px;
			font-family: 'Open Sans', Arial, sans serif;
			font-size:24px;
			text-align:center;
			cursor:pointer;
			float:left;
		}
}