/*
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: 'Liberator';
	src: url('assets/fonts/Liberator.eot');
	src: url('assets/fonts/Liberator.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/Liberator.woff') format('woff'),
		url('assets/fonts/Liberator.ttf') format('truetype'),
		url('assets/fonts/Liberator.svg#Liberator') format('svg');
	font-weight: bold;
	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: 'Liberator'; }
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: 70px 0;
	width: 100%
}
.firstSection{
	margin-top: -70px;
}
.grunge{ background:#000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/grunge.jpg) fixed no-repeat center center;}
.grungeLight{ background:#222 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/grungeLight.jpg) fixed repeat center center;}



/*----------------------------------*/
/*			 INTRO				*/
/*----------------------------------*/
.intro{
	background:#000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/intro.jpg) no-repeat center top;
	background-size: cover;
}
.intro .content{
	margin:0 auto;
	max-width: 1440px;
	padding: 50px 0 80px 0;
	width: 100%;
}
.intro .header{
	margin-bottom: 40px;
}
.intro .header .logo{
	float:  left;
	margin-right: 30px;
}
		.landingTitle{ color:#fff; font-size:40px; line-height: 44px; font-family: 'Liberator' !important; text-shadow: #000 1px 1px 1px; }
		.landingTitle h1{ color: #8e0017;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: 90px 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/NewHyperFightClub/assets/images/logoHyper.png);
			display: block;
			position: absolute; top: -100px; left: 50%; z-index: 4;
			margin-left: -90px;
			width: 176px; height: 182px;
		}



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




/*----------------------------------*/
/*			 FULLSPLIT				*/
/*----------------------------------*/
.fullsplit, .bannerFull{
	position: relative;
}

		.fullsplit .content{
			background-color: #8e0017;
			display: block;
			width: 50%;
			float: right;
			padding: 100px 40px;
			text-align: center;
		}

		.fullsplit .imageArea{
			background:url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/imageArea.jpg) no-repeat center top;
			-webkit-background-size: cover;
			background-size: cover;
			display: block;
			position: absolute; top: 0; left: 0;
			height: 100%;
			width: 50%;
		}
		.fullsplit .imageArea.respect{
			background:url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/Respectfull-Humble-Powerfull.jpg) no-repeat center top;
		}


		.bannerFull .content{
			background-color: rgba(0,0,0,0.5);
			display: block;
			width: 100%;
			padding: 20% 40px;
			text-align: center;
			position: relative;
			z-index: 3;
		}

		.bannerFull .imageArea{
			background:url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/training.jpg) no-repeat center top;
			-webkit-background-size: cover;
			background-size: cover;
			display: block;
			position: absolute; top: 0; left: 0;
			height: 100%;
			width: 100%;
			z-index: 1;
		}


.testimonialItem{
	text-align: center;
}
		.testimonialItem img{ border-radius:50%; margin:0 auto 40px auto; }
		.testimonialItem h4{
			font-size: 34px;
		}


/*----------------------------------*/
/*		   VIDEO PLAYLIST			*/
/*----------------------------------*/
.videoPlayList{
	margin: -200px auto -50px auto;
    position: relative;
    z-index: 10;
}
.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; }

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

.formPart{
	background: #8e0017 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/formPart.png) no-repeat center center;
			-webkit-background-size: cover;
			background-size: cover;
	text-align: center;
}
.formPart h3{ font-size: 36px; line-height: 40px; }



.bottomPart{
	background: #000 url(https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/NewHyperFightClub/assets/images/footer.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;
}

.intro .picture{
	width: 100%;
	float: none;
}
.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: 80px 40px;
		}

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

	.videoPlayList{
		margin: -100px auto -50px auto;
	}


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


	.videoPlayList{
		margin: -50px auto -50px auto;
	}

}