@charset "UTF-8";
/* CSS Document */



.hSeriesIntroStruggleWrapper {
	width:950px;
	height:400px;
	position:absolute;
	animation-name: h-series-intro-struggle;
	animation-duration: 6s;
	animation-delay: 0s;
	transform-origin: center;
	animation-fill-mode: forwards;
	opacity: 0;
	top:200px;
	left:0px;
	z-index: 999;
}

@keyframes h-series-intro-struggle {
	0% {
		opacity: 0;
	}
	
	40% {
		opacity: 1;
	}
	
	60% {
		opacity: 1;
	}
	
	99% {
		opacity: 0;
	}
	
	100% {
		opacity: 0;
		display: none;
	}
}

.hSeriesIntroStruggleWrapper h6 {
	font-family: sinter,Roboto,Arial,Tahoma,sans-serif;
	font-size:3rem;
	color:#009943;
	font-weight:400;
	text-align: center;
}

.hSeriesIntroStruggleWrapper span.hSeriesH6Left {
	animation-name: h-series-intro-h6-left;
	animation-duration: 6s;
	animation-delay: 0s;
	transform-origin: center;
	animation-fill-mode: forwards;
}

@keyframes h-series-intro-h6-left {
	0% {
		padding-right:100px;
		letter-spacing: 3px;
	}
	
	100% {
		padding-right:20px;
		letter-spacing: 1px;
	}
}

.hSeriesIntroStruggleWrapper span.hSeriesH6Right {
	animation-name: h-series-intro-h6-right;
	animation-duration: 6s;
	animation-delay: 0s;
	transform-origin: center;
	animation-fill-mode: forwards;
}

@keyframes h-series-intro-h6-right {
	0% {
		padding-left:110px;
		letter-spacing: 3px;
	}
	
	100% {
		padding-left:20px;
		letter-spacing: 1px;
	}
}




.hSeriesTopSection .hSeriesLogo {
	width:400px;
	height: 155px;
	position:absolute;
	top:-155px;
	left:250px;
	animation-name: logo-h-series;
	animation-duration: 2.5s;
	/*animation-delay: 1s;*/
	animation-delay: 5.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	transform-origin: center;
	animation-timing-function: ease-out;
	
}

.hSeriesTopSection .hSeriesDescription2 {
	width:730px;
	color:#000;
	position:absolute;
	top:620px;
	left:50px;
	animation-name: h-series-description;
	animation-duration: 3s;
	/*animation-delay: 5.5s;*/
	animation-delay: 10s;
	animation-fill-mode: forwards;
	opacity: 0;
	transform-origin: top;
	animation-timing-function: ease-out;
}

.hSeriesTopSection .hSeriesVectorCutaway {
	position:absolute;
	width:500px;
	height:300px;
	overflow: hidden;
	left:200px;
	top:250px;
	z-index:997;
	border:10px solid #fff;
	background-color:#fff;
	animation-name: cutaway-flash;
	animation-duration: 1s;
	/*animation-delay: 6s;*/
	animation-delay: 9.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.hSeriesTopSection .hSeriesVBPall {
	width:500px;
	height:300px;
	position:absolute;
	left:0px;
	top:0px;
	animation-name: cutaway;
	animation-duration: 2s;
	/*animation-delay: 6s;*/
	animation-delay: 10s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.hSeriesTopSection .hSeriesVectorCutaway .hSeriesVectorWrapperZoom3 {
	width:100px;
	height:752px;
	z-index:0;
	position: absolute;
	animation-name: h-series-zoom3;
	animation-duration: 10s;
	/*animation-delay: 2s;*/
	animation-delay: 5.5s;
	transform-origin: 50% 90%;
	animation-fill-mode: forwards;
	transform: scale(3)  rotate(75deg);
	left:15px;
	top:-385px;
	opacity: 0;
}

.hSeriesTopSection .hSeriesVectorWeightBoltClose {
	width:34px;
	height:102px;
	margin:0 auto !important;
	position:absolute;
	z-index: 100;
	top:350px;
	animation-name: weight-bolt2;
	animation-duration: 14s;
	/*animation-delay: 9s;*/
	animation-delay: 12s;
	animation-timing-function: ease;
	animation-iteration-count:infinite;
} 

.hSeriesTopSection .hSeriesVectorWeightBolt {
	width:34px;
	height:102px;
	margin:0 auto !important;
	position:absolute;
	z-index: 100;
	top:350px;
	animation-name: weight-bolt2;
	animation-duration: 14s;
	/*animation-delay: 9s;*/
	animation-delay: 12s;
	animation-timing-function: ease;
	animation-iteration-count:3;
} 

.hSeriesTopSection .hSeriesVectorArrowsClose {
	width:34px;
	height:350px;
	margin:0 auto !important;
	position:absolute;
	z-index: 100;
	top:225px;
	right:40px;
	animation-name: weight-bolt-arrows;
	animation-duration: 14s;
	/*animation-delay: 9s;*/
	animation-delay: 12s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	opacity: 0;
}

.hSeriesTopSection .hSeriesVectorCutawayUnder {
	position:absolute;
	width:496px;
	height:296px;
	overflow: hidden;
	left:202px;
	top:252px;
	z-index:0;
	animation-name: cutaway;
	animation-duration: 1s;
	/*animation-delay: 6s;*/
	animation-delay: 9.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	
	-webkit-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.25);
	box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.25);
	background: #282828;
	background: -webkit-linear-gradient(top left, #282828 0%, #606060 50%, #282828 100%);
	background: -o-linear-gradient(top left, #282828 0%, #606060 50%, #282828 100%);
	background: linear-gradient(to bottom right, #282828 0%, #606060 50%, #282828 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#282828',GradientType=1 ); 
	
	padding:10px;
}

.hSeriesTopSection .hSeriesVectorRealCueWrapper {
	width:35px;
	height:752px;
/*
	margin:0 auto;
	margin-left:-1px !important;
*/
	left:50px;
	position:absolute;
	animation-name: h-series-real-cue;
	animation-duration: 3s;
	/*animation-delay: 6s;*/
	animation-delay: 10s;
	animation-fill-mode: forwards;
	z-index: 997;
}

.hSeriesTopSection .hSeriesVectorRealCueClose {
	width:166px;
	height:1800px;
	position: absolute;
	z-index:1;
	animation-name: h-series-real-cue-close;
	animation-duration: 2s;
	/*animation-delay: 2s;*/
	animation-delay: 6s;
	transform-origin: top;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	opacity: 0;
}

.hSeriesTopSection .hSeriesVectorRealCueCloseIMG {
	animation-name: h-series-real-cue-close-img;
	animation-duration: 2s;
	/*animation-delay: 2s;*/
	animation-delay: 6s;
	transform-origin: bottom;
	animation-fill-mode: forwards;
}


.hSeriesTopSection .hSeriesVectorWrapper {
	width:100px;
	height:752px;
	margin-top:30px;
	text-align: center;
	float:right;
	margin-right:75px;
	position:relative;
	z-index:997;
	animation-name: h-series-full-cue-right;
	animation-duration: 1.5s;
	/*animation-delay: 2s;*/
	animation-delay: 7.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes h-series-full-cue-right {
	0% {
		opacity: 0;
			
	}
	
	100% {
		opacity: 100;
	}
}









.hSeriesInstructionalVideo {
    clear:both;
    display:block;
    background-color:#fff;
    background-image: url("images/BG-H-Series-Instructional-Video.jpg");
    background-size:950px 600px;
    background-position: center top;
    background-repeat: no-repeat;
    /*min-height:600px;*/
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    
    .hSeriesInstructionalVideo {
        background-image: url("images/BG-H-Series-Instructional-Video@2x.jpg");
        background-size:950px 600px;
    }
        
}



/*.hSeriesInstructionalVideoWrapper {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
} 

.hSeriesInstructionalVideoWrapper iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

*/

.hSeriesInstructionalVideoWrapperWrapper {
    width:600px;
    float:right;
    margin-right:1rem;
    margin-bottom:4rem;
}

.hSeriesInstructionalVideoWrapper {
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */  
    /*padding-top: 25px;*/
}

.hSeriesInstructionalVideoWrapper iframe {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}



 
/*.hSeriesInstructionalVideoWrapper iframe {
    margin:1em auto;
    display:block;
}*/


.hSeriesInstructionalTitle {
    margin-top: 2.5em;
    /*margin-bottom:.2em;*/
    /*background-color:#009943;*/
    clear: both;
    display: block;
    width: 600px;
    float: right;
    margin-right: 1rem;
}

.hSeriesInstructionalTitle .hvid1 {
    text-align: center;
	font-family: sinter,Roboto,Arial,Tahoma,sans-serif;
    font-size: 1.3rem; 
    line-height: 90%;
    font-weight: 500;
    background-color: transparent;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-style: normal;
    padding: 10px 5px 8px;
}

.hSeriesInstructionalTitle .hvid2 {
	font-family: sinter,Roboto,Arial,Tahoma,sans-serif;
    font-size: 1.3rem;
    line-height: 100%;
    font-weight: 500;
    text-align: center;
    background-color:#009943;
    color: #fff;
    margin: 0;
    padding: 15px 3px;
}