/*
Theme Name: Devcode
Author: Julian Chaniolleau
Description: ...
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@font-face {
	font-family: 'Hyper Half Tone';
	src: url('assets/fonts/HyperHalfTone.eot');
	src: url('assets/fonts/HyperHalfTone.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/HyperHalfTone.woff2') format('woff2'),
		url('assets/fonts/HyperHalfTone.woff') format('woff'),
		url('assets/fonts/HyperHalfTone.ttf') format('truetype'),
		url('assets/fonts/HyperHalfTone.svg#HyperHalfTone') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Rockwell';
	src: url('assets/fonts/Rockwell.eot');
	src: url('assets/fonts/Rockwell.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/Rockwell.woff2') format('woff2'),
		url('assets/fonts/Rockwell.woff') format('woff'),
		url('assets/fonts/Rockwell.ttf') format('truetype'),
		url('assets/fonts/Rockwell.svg#Rockwell') format('svg');
	font-weight: normal;
	font-style: normal;
}




html *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
} 

body{
	background: #000;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	margin:0;
	padding:0;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
::selection{background-color:#fff;color:#000;}
::-moz-selection{background-color:#fff;color:#000;}

img{margin-bottom: 30px;}

/*----------------------------------*/
/*			 TYPOGRAPHY				*/
/*----------------------------------*/
a{
	text-decoration:none;
	  -webkit-transition: all 0.2s ease-in-out;
		 -moz-transition: all 0.2s ease-in-out;
		   -o-transition: all 0.2s ease-in-out;
			  transition: all 0.2s ease-in-out;
}


h1 , h2 , h3 , h4 , h5 , h6 { color: inherit; font-family: 'Rockwell'; font-weight: normal; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{ font-weight: bold; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img{ display: inline-block; }

h1{ font-size: 72px; line-height: 72px; margin-bottom: 20px; }
h2{ font-size: 38px; line-height: 38px; margin-bottom: 20px; }
h3{ font-size: 48px; line-height: 54px; margin-bottom: 20px; }
h4{ font-size: 36px; line-height: 48px; margin-bottom: 20px; }
h5{ font-size: 24px; line-height: 36px; margin-bottom: 20px; }
h6{ font-size: 18px; line-height: 24px; margin-bottom: 20px; }

h2.giant{ font-size: 80px; line-height: 70px; margin-bottom: 20px; }
strong { font-weight: bold; }
em     { font-style: italic; }
small  { font-size: 80%; line-height: 60%;}
sup{
	position: relative;
	font-size: 60%; line-height: 12px;
	top: -5px;
}

.biglines{ font-size: 36px; line-height: 48px; }
.biglines2{ font-size: 24px; line-height: 36px; }
.smallerTxt{ font-size: 85%; color: #919191; }
.upper{ text-transform: uppercase; }
.bold{ font-weight: bold; }

.gap-10, .gap-20, .gap-30, .gap-40, .gap-50, .gap-60, .gap-70, .gap-80, .gap-90, .gap-100{ display:block; width:100%; }
.gap-10{ height: 10px; }
.gap-20{ height: 20px; }
.gap-30{ height: 30px; }
.gap-40{ height: 40px; }
.gap-50{ height: 50px; }
.gap-60{ height: 60px; }
.gap-70{ height: 70px; }
.gap-80{ height: 80px; }
.gap-90{ height: 90px; }
.gap-100{ height: 100px; }

.max100{  float:none!important; width: 100%; max-width: 100px !important; margin-left: auto !important; margin-right: auto !important;}
.max200{  float:none!important; width: 100%; max-width: 200px !important; margin-left: auto !important; margin-right: auto !important;}
.max300{  float:none!important; width: 100%; max-width: 300px !important; margin-left: auto !important; margin-right: auto !important;}
.max400{  float:none!important; width: 100%; max-width: 400px !important; margin-left: auto !important; margin-right: auto !important;}
.max500{  float:none!important; width: 100%; max-width: 500px !important; margin-left: auto !important; margin-right: auto !important;}
.max600{  float:none!important; width: 100%; max-width: 600px !important; margin-left: auto !important; margin-right: auto !important;}
.max700{  float:none!important; width: 100%; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important;}
.max800{  float:none!important; width: 100%; max-width: 800px !important; margin-left: auto !important; margin-right: auto !important;}
.max900{  float:none!important; width: 100%; max-width: 900px !important; margin-left: auto !important; margin-right: auto !important;}
.max1000{ float:none!important; width: 100%; max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important;}
.max1100{ float:none!important; width: 100%; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important;}
.max1200{ float:none!important; width: 100%; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important;}
.max1280{ float:none!important; width: 100%; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important;}
.max1440{ float:none!important; width: 100%; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important;}
.max1600{ float:none!important; width: 100%; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important;}



.col{ float: left; display: block; margin-bottom: 30px; padding: 0 40px;}

.one-full{ width: 100%; }
.one-half{ width: 50%; }
.one-third{ width: 33.333336%; }
.one-fourth{ width: 25%; }
.one-fifth{ width: 20%; }

/*----------------------------------*/
/*			 SECTION				*/
/*----------------------------------*/
.section{}
.section .content{
	margin:0 auto;
	max-width: 1440px;
	padding: 60px 0;
	width: 100%
}
.firstSection{
/*background: rgba(0,0,0,1);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(82,43,75,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(82,43,75,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(82,43,75,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(82,43,75,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(82,43,75,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(82,43,75,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#522b4b', GradientType=0 );*/
background:#000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/Gray-Grunge-Texture.jpg) fixed repeat center center;
	text-align: center;
	position: relative;
}
.section.firstSection .content{
	padding: 100px 0;
	position: relative;
	z-index: 2;
	max-width: 1280px;
	text-align: center;
	font-size: 0;
}
.section.firstSection:before{
	content: '';
	background: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/firstSection.png) no-repeat center center; 
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%; height: 100%;
	position: absolute; top: 0; left:  0; z-index: 1;
}
.grunge{ background:#000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/Gray-Grunge-Texture.jpg) fixed repeat center center; color: #000;}


.firstSection .col{ font-size: 16px; display: inline-block; float: none; vertical-align: top; padding: 0 20px; max-width: 600px;}

.firstSection .col:nth-child(1){ max-width: 1280px; width: 100%;}
.firstSection .col:nth-child(2),
.firstSection .col:nth-child(3){ max-width: 640px; width: 50%;}

.firstSection img{ display: block; margin: 0 auto; width: 100%;  }
.firstSection .textContent{
	text-align: center;
	padding: 80px 30px 0px 30px;
	margin: 0 auto;
	max-width: 1280px;
}

/*----------------------------------*/
/*			 INTRO				*/
/*----------------------------------*/
.intro{
	background:#000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/intro.jpg) no-repeat center top;
	-webkit-background-size: cover;
	background-size: cover;
}
.intro .content{
	margin:0 auto;
	max-width: 1440px;
	padding: 80px 0;
	width: 100%;
}
.intro .header{
	margin-bottom: 40px;
}
.intro .header .logo{
	float:  left;
	margin-right: 30px;
}
		.landingTitle{ color:#fff; font-weight: 100; font-size:40px; line-height: 44px; font-family: 'Hyper Half Tone' !important; text-shadow: #522b4b 2px 2px 0px; }
		.landingTitle h1{ font-family: 'Hyper Half Tone'; font-size:85px; line-height: 65px; margin-bottom: 0; }
		.landingTitle strong{ font-size: 46px; line-height: 35px;}


.leadForm{
	position: relative;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
	padding: 30px;
	width: 40%;
	margin: 0 auto;
}
.intro .leadForm{
	float: right;
	padding: 120px 30px 30px 30px;
}
		.intro .leadForm h3{
			text-align: center;
			font-size: 24px; line-height: 30px; text-transform: uppercase; margin-bottom: 0;
		}

		.intro .leadForm .logoHyper{
			background-image: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/logoHyper.png);
			display: block;
			position: absolute; top: -90px; left: 50%; z-index: 4;
			margin-left: -105px;
			width: 205px; height: 210px;
		}



.intro .picture{
	width: 60%;
	float: left;
}
.intro .picture img{ margin: 0 auto; }




/*----------------------------------*/
/*			 FULLSPLIT				*/
/*----------------------------------*/
.fullsplit{
	background: #000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/fullsplit.jpg) repeat center center;
	position: relative;
}
.imageArea1, .imageArea2{
	position: absolute;
	width: 100%; height: 642px;
}
.imageArea1{
	bottom: -35px; left: 0;
	background: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/imageArea1.png) no-repeat center top;
	z-index: 1;
}
.imageArea2{
	bottom: 0; left: 0;
	background: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/imageArea2.png) no-repeat center top;
	z-index: 2;
}
		.fullsplit .content{
			display: block;
			font-family: 'Hyper Half Tone' !important;
			width: 100%;
			padding: 200px 40px;
			text-align: center;
			position: relative;
			z-index: 5;
		}
		.fullsplit .content h2{font-family: 'Hyper Half Tone'; font-weight: 100; font-size: 57px; line-height: 60px; margin: 0 auto; max-width: 1000px; padding: 0 60px; }



.testimonialItem{
	display: inline-block !important;
	text-align: center;
	vertical-align: bottom !important;
}
.testimonialItem p{ font-family: 'Rockwell' !important; font-size: 30px; line-height: 34px; }

		.testimonialItem img{ border-radius:50%; margin:0 auto 40px auto; }
		.testimonialItem h4{
			font-family: 'Hyper Half Tone'; 
			font-weight: 100;
			font-size: 34px;
		}




/*----------------------------------*/
/*			  FOOTER				*/
/*----------------------------------*/
.footer{}
.footer .content{
	margin:0 auto;
	max-width: 1440px;
	padding: 100px 0;
	width: 100%
}

.formPart{
	background: #522b4b url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/formPart.png) no-repeat center center;
			-webkit-background-size: cover;
			background-size: cover;
	text-align: center;
}
.formPart h2{font-family: 'Hyper Half Tone'; font-weight: 100; }
.formPart h3{ font-size: 36px; line-height: 40px; }



.bottomPart{
	background: #000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/Teams-Win-Dreams.jpg) no-repeat center top;
	-webkit-background-size: cover;
	background-size: cover;
	text-align: center;
}
.formPart .leadForm{ margin-bottom: -200px; position: relative; top: 40px; }

.bottomPart .content{ padding-top: 240px; padding-bottom: 20px; }
.bottomPart p{
	font-family: 'Liberator';
	opacity: 0.5;
	text-transform: uppercase;
}



@media only screen and (max-width: 960px) {

.intro .header .logo{
	float:  none;
	margin: 0 auto 30px auto !important;
}
.intro .header .logo img{
	margin: 0 auto 30px auto !important;
}

.landingTitle {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}
.landingTitle h1, .landingTitle strong{ font-size: 36px; line-height: 30px; }

		.intro .leadForm .logoHyper{ display: none; }
h2.giant {
    font-size: 40px;
    line-height: 30px;
}
.formPart h3 {
    font-size: 24px;
    line-height: 30px;
}
.leadForm{
	float: none !important;
	padding: 30px !important;
	width: 90% !important;
	margin: 0 auto;
}
.one-full,
.one-half,
.one-third,
.one-fourth,
.one-fifth{ float:none; width: 100%; max-width: 600px; margin: 0 auto 20px auto !important; }

		.fullsplit .content{
			width: 100%;
			float: none;
			padding: 200px 40px;
		}

		.fullsplit .imageArea{
			position: relative;
			height: 50vh;
			width: 100%;
		}

.imageArea1, .imageArea2{ display: none; }

}

.grungeLight{ background:#2b2b2b url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/xxx-grid.svg) fixed repeat center center;}

.tagsSection{
	background-image: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/White-Word-Cloud.png);
	background-repeat: repeat;
	background-attachment: fixed;
	color: #000;
}

.PurpleWordCloud{
	background-image: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/PurpleWordCloud.png);
	background-repeat: repeat;
	background-attachment: fixed;
	color: #fff;
}
.grungeWhite{
	background-image: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/White-Grunge-Tile.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	color: #000;
}

.halfImage{
	float: left;
	width: 50%;
	display: block;
	position: relative;
	height: 80vh;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
}
.halfImage.t1{ background-image: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/Respect_Tradition.jpg); }
.halfImage.t2{ background-image: url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/hypertraining/assets/images/Embrace_Innovation.jpg); }

.halfImage .text{
	font-family: 'Hyper Half Tone' !important;
	position: absolute;
	bottom: 40px;
}
.halfImage .text h2{font-family: 'Hyper Half Tone' !important; font-size: 60px; line-height: 60px;}
.at-left{ left: 40px; }
.at-right{ right: 40px; text-align: right; }



/*----------------------------------*/
/*		   VIDEO PLAYLIST			*/
/*----------------------------------*/
.videoPlayList{
    margin: 0px auto -100px auto;
    position: relative;
    z-index: 10;
    top: -80px;
}
.videoPlayList .videoBox{
	display: none;
	max-width: 720px;
	margin: 0 auto 30px auto;
}
.videoPlayList .videoBox.active{
	display: block;
}
.videoPlayList .videoSwitches{ text-align: center; }
.videoPlayList .videoSwitches a{ max-width: 100px; display: inline-block; }

.logoHyperflak{ margin-bottom: -40px; max-width: 260px; }
.tejl{font-family: 'Hyper Half Tone' !important; text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5), -2px 2px 15px rgba(0, 0, 0, 0.8);}