@charset 'utf-8';
@font-face {
    font-family: 'ROGFont';
    src: url("../fonts/rogfonts-regular.OTF");
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'Xolonium';
	src:url('../fonts/xolonium-Regular.otf'),
		url('../fonts/xolonium-Regular.otf') format('embedded-opentype'),
		url("../fonts/xolonium-Regular.ttf") format("opentype"),
		url("../fonts/xolonium-regular.eot");
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'Trade';
    src: url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/*-----RESET-----*/
	*{
		margin: 0;
		padding: 0;
	}
	#hd {
		margin: 0;
		padding:0;
		background: #000000;
		color: #FFF;
	    font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
		font-weight: 300;
	}
	#hd * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}

	#hd img {
		display: block;
		max-width: 100% !important;
		height: auto;
		border: none;
	}
	#hd a {
	    font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
		font-size: 14px;
		text-decoration: none;
		color: #920000;
		font-weight: 600;
	}
	#hd a:hover {
		text-decoration: none;
		color: #d30000;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6 {
	    font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
		color: #FFF;
		line-height: 1.4rem;
		margin: 0;
		font-weight: normal;
	}
	#hd p {
	    font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
		font-size: 16px;
		font-weight: 300;
		letter-spacing: .5px;
		line-height: 1.5;
		margin: 0;
		padding-bottom: 20px;
		color: #FFF;
	}
	#hd b {
		display: block;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.5px;
	}
	#hd small {
	    font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
		font-size: 12px;
		line-height: 13px;
		font-weight: 300;
	}
	#hd small.txt-red{
		font-weight: 600;
	}
	#hd ul {
	    font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#hd ul li {
	    font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
		font-size: 15px;
		color: #FFF;
	}
	#hd figure{
		margin:0;
		padding:0;
	}
	#fp-nav ul li .fp-tooltip{
		max-width: 300px;
		/*text-transform: uppercase;*/
	}
/*-----TXT-----*/
	#hd h1{
		font-family: 'xolonium', sans-serif;
	    font-size: 38px;
	    line-height: 1;
		font-weight: normal;
	    color: #fff !important;
	}
	#hd h1 span{
		font-size: 2.5em;
	}
	#hd h2{
		/*font-family: 'Fjalla One', sans-serif;*/
		font-family: 'xolonium', sans-serif;
		font-weight: 400;
		font-size: 44px;
		line-height: 1.2;
		padding-bottom:20px;
		position: relative;
		color:#fff !important;
	}
	#hd h3{
		font-family: 'xolonium', sans-serif;
		font-size: 23px;
		font-weight: 400;
		line-height: 1.3;
		text-transform: uppercase;
		margin-bottom: 15px;
	}
	#hd h6{
		font-family: 'xolonium', sans-serif;
		font-weight: 400;
		font-size: 18px;
		position: relative;
	}
	#hd .txt-center{text-align: center; }
	#hd .txt-grey{
		color:#808080;
		font-weight: 400;
	}
	#hd a.hd-link {
		font-size: inherit;
		color: #C50012;
		font-weight: 400;
		display: initial;
	}
	#hd a.hd-link:hover {
		color: white;
		opacity: 1;
	}
	#hd .title-white{text-shadow: 0 0 10px #fff;}
	#hd .title-red{text-shadow: 0 0 10px #ff0000;}
	#hd .title-orange{text-shadow: 0 0 10px #ff7700;}
	#hd .title-yellow{text-shadow: 0 0 10px #fff100;}
	#hd .title-green{text-shadow: 0 0 10px #77baff;}
	#hd .title-blue{text-shadow: 0 0 10px #19e9f7;}
	#hd .title-blue2{text-shadow: 0 0 10px rgb(67, 153, 233);}
	#hd .title-cyan{text-shadow: 0 0 10px #82FFC8;}
	#hd .title-purple{text-shadow: 0 0 10px #ff64ec;}
	/*_:-ms-input-placeholder, :root #hd h2[class*="title-"] {background: transparent}*/

	#hd .txt-up{
		text-transform: uppercase;
	}
	#hd .txt-red{color: #ff0000;}
	#hd .txt-purple{color: #FF3A94;}
	#hd .txt-bold{
		font-weight: bold;
	}
/*-----BLOCK-----*/
	#hd .w90{
		width: 90%;
		max-width: 1920px;
		margin:0 auto;
		position: relative;
		z-index: 2;
	}
	#hd .w1200,
	#hd .w1250,
	#hd .w1300,
	#hd .w1400,
	#hd .w1100,
	#hd .w1000{
	    width: 90%;
	    max-width: 1200px;
	    margin: 0 auto;
	    position: relative;
	}
	#hd .w1400 {max-width: 1400px; }
	#hd .w1300 {max-width: 1300px; }
	#hd .w1250 {max-width: 1250px; }
	#hd .w1000 {max-width: 1000px; }
	#hd .w1100 {max-width: 1100px; }
	#hd .ib,
	#hd .col25,
	#hd .col30,
	#hd .col33,
	#hd .col40,
	#hd .col50,
	#hd .col60,
	#hd .col70{
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25{width: 25%; }
	#hd .col30{width: 30%; }
	#hd .col33{width: 33%; }
	#hd .col40{width: 40%; }
	#hd .col50{width: 50%; }
	#hd .col60{width: 60%; }
	#hd .col70{width: 70%; }

	#hd .h750{height: 750px; }
	#hd .h680{height: 680px; }

	#hd .fleft {float: left; }
	#hd .fright {float: right; }

	#hd .hd-rtl{direction: rtl; }
	#hd .mobile-on{display: none; }

	#hd .hd-btn {
		display: inline-block;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 5px 20px;
		margin:20px 10px;
		font-family: 'xolonium', sans-serif;
		font-weight: 400;
		font-size: 18px;
		text-align: center;
		text-transform: uppercase;
		color: #fff;
		border-radius: 17px;
		position: relative;
		z-index: 1;
	}
	#hd .hd-btn:before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 17px;
		background: #0f0f0f;
	}
	#hd .hd-btn:after {
		content: '';
		display: block;
		width: calc(100% + 6px);
		height: calc(100% + 4px);
		position: absolute;
		top: -2px;
		left: -3px;
		z-index: -2;
		border-radius: 18px;
		background: #ff7700;
		background: -moz-linear-gradient(left, #ff7700 0%, #fff100 100%);
		background: -webkit-linear-gradient(left, #ff7700 0%, #fff100 100%);
		background: linear-gradient(to right, #ff7700 0%, #fff100 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7700', endColorstr='#fff100',GradientType=1 );
	}
	#hd .hd-btn:hover {
		color: #ff2b00;
	}


	#hd .hd-btn-r {
		display: inline-block;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 5px 20px;
		margin:20px 10px;
		font-family: 'xolonium', sans-serif;
		font-weight: 400;
		font-size: 18px;
		text-align: center;
		text-transform: uppercase;
		color: #fff;
		border-radius: 17px;
		position: relative;
		z-index: 1;
	}
	#hd .hd-btn-r:before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 17px;
		background: #0f0f0f;
	}
	#hd .hd-btn-r:after {
		content: '';
		display: block;
		width: calc(100% + 6px);
		height: calc(100% + 4px);
		position: absolute;
		top: -2px;
		left: -3px;
		z-index: -2;
		border-radius: 18px;
		background: #E40C50;
		background: -moz-linear-gradient(left, #E40C50 0%, #E02992 100%);
		background: -webkit-linear-gradient(left, #E40C50 0%, #E02992 100%);
		background: linear-gradient(to right, #E40C50 0%, #E02992 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7700', endColorstr='#fff100',GradientType=1 );
	}
	#hd .hd-btn-r:hover {
		color: #E40C50;
	}

/*-----SCROLL UP-----*/
	#scrollUp {
	    position: fixed;
	    right: 30px;
	    bottom: 30px;
	    width: 45px;
	    height: 45px;
	    text-align: center;
	    cursor: pointer;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    border: 2px solid #0078ff;
	    z-index: 999;
	    opacity: 0;
	}
	#scrollUp.hd-show {
	    opacity: 1;
	}
	#scrollUp:hover {
	    background-color: #0078ff;
	}
	#scrollUp:hover svg {
	    fill: #FFF;
	}
	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #0078ff;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}

/*----- transition ---*/
	#hd a.hd-link,
	#kv .vid_btn,
	#switch_img li img{
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}

/*------------ KV -------------*/
	#hd #kv{
		position: relative;
		text-align: center;
		background-color: #141414;
	}
	#kv .kv-info {
		background-position: center 0;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 40%;
		padding-bottom: 50px;
	}
	#kv .kv-info h2{
		display: inline-block;
	}

/*------------ optical ----------*/
	#hd #optical{
		padding: 30px 0 0;
	}
	#hd #optical h3,
	#hd #optical h6{
		font-family: 'xolonium', sans-serif;
	}
	#hd #optical .inner {
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	#hd #optical .inner h2{ 
		width: 100%;
		/* text-align: center; */
	}
	#hd #optical .inner .text{
		width: 48%;
		margin: 4% 0;
		margin-left: -10%;
		position: relative;
		z-index: 1;
	}
	#hd #optical .inner video{
		width: 57%;
	}
	#hd #optical .text .itembox{
		display: flex;
		align-items: flex-start;
	}
	#hd #optical .text .item{
		margin-right: 30px;
		text-align: center;
	}
	#hd #optical .text .item h3{
		margin-bottom: 10px;
	}

	#hd #optical .op_btn{
		margin-top: 30px;
		padding: 20px 30px;
		display: inline-block;
		background-color: #151922;
		transform: skew(-30deg);
		box-shadow: 5px 5px 0px #ff0000;
		cursor: pointer;
	}
	#hd #optical .op_btn .in{
		transform: skew(30deg);
	}
	#hd #optical .op_btn h6{
		display: inline-block;
		vertical-align: middle;
	}
	#hd #optical .op_btn img{
		display: inline-block;
		vertical-align: middle;
		margin-left: 10px;
	}
	@media screen and (max-width: 1023px){
		#hd #optical .inner .text{ 
			order: 1;
			width: 100%;
			margin: 30px 0;
		}
		#hd #optical .inner video{
			order: 2;
			width: 100%;
		}
		#hd #optical .op_btn{
			width: 87%;
			margin: 30px auto ;
			padding: 10px 30px;
			display: block;
			text-align: center;
		}
	}
	@media screen and (max-width: 768px){
		#hd #optical .inner .text{
			margin-top: 0;
		}
	}
	@media screen and (max-width: 550px){
		#hd #optical .text .itembox{
			flex-wrap: wrap;
			justify-content: space-between;
		}
		#hd #optical .text .item{
			width: 100%;
			margin-right: 0;
			margin-bottom: 20px;
		}
		#hd #optical .inner video{
			margin-top: -30px;
		}
	}

/*------------ last ----------*/
	#hd #last{
		height: 875px;
		padding: 90px 0 50px;
		position: relative;
		overflow: hidden;
		background-color: #27344A;
	}
	/* #hd #last:before{
		content: '';
		width: 100%;
		height: 150px;
		background: linear-gradient(0deg, #222C3F 0%, rgba(0,0,0,0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		z-index: 1;
	} */
	#hd #last .text{
		position: relative;
		z-index: 1;
	}
	#hd #last .left{
		width: calc(75% - 75px);
		margin-right: 70px;
		display: inline-block;
		position: relative;
		vertical-align: bottom;
	}
	#hd #last .left p{
		padding-bottom: 0;
	}
	#hd #last .right{
		width: calc(25% - 5px);
		/* margin-top: 50px; */
		display: inline-block;
		vertical-align: bottom;
	}
	#hd #last .contol{
		width: 100%;
		display: inline-flex;
		vertical-align: middle;
		justify-content: center;
		align-items: center;
	}
	#hd #last .contol span{
		margin: 0 10px;
		font-size: 30px;
	}
	#hd #last .contol .btnset1,
	#hd #last .contol .btnset2{
		width: 79px;
		height: 115px;
		margin: 0 25px;
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}
	#hd #last .contol .btnset1 img,
	#hd #last .contol .btnset2 img{
		display: inline-block;
		transition: .3s;
		opacity: .5;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		/* animation: toggle2 .3s 1 forwards; */
	}
	#hd #last .contol .btnset1 img:hover,
	#hd #last .contol .btnset2 img:hover{
		opacity: 1;
		/* animation: toggle .3s 1 forwards; */
	}
	#hd #last .bg{
		min-width: 1700px;
		position: absolute;
		left: 50%;
		bottom: 0;
		opacity: 0;
		transition: .3s;
		transform: translateX(-50%);
		/* z-index: -1; */
	}
	#hd #last .bg.active{
		opacity: 1;
	}

	@media screen and (max-width: 1024px){
		#hd #last .left{
			width: calc(100%);
			margin-right: 0;
			display: inline-block;
			position: relative;
			vertical-align: bottom;
			text-align: center;
		}
		#hd #last .right{
			width: 100%;
			margin-top: 20px;
			display: inline-block;
			vertical-align: bottom;
		}
		/* #hd #last .contol{
			justify-content: flex-start;
		} */
	}
	@media screen and (max-width: 1023px){
		#hd #last{
			height: auto;
			padding: 50px 0 38%;
		}
		#hd #last .bg{
			min-width: auto;
			/* z-index: -1; */
		}
		#hd #last .contol .btnset1,
		#hd #last .contol .btnset2{
			width: 70px;
		}
	}

/*------------ passthrough ----------*/
 	#hd #passthrough{
		position: relative;
		background-size: cover;
		background-position: 60% center;
		background-repeat: no-repeat;
		background-color: #04070C;
	}
	#hd #passthrough .bg1{
		width: 30%;
		position: absolute;
		left: 0;
		top: 0;
	}
	#hd #passthrough .bg{
		margin-right: 0;
		margin-left: auto;
		display: block;
	}
	#hd #passthrough .bg_mo{
		display: none;
	}
	#hd #passthrough .text{
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	#hd #passthrough .text .in{
		width: 40%;
	}
	#hd #passthrough h2{
		position: relative;
		margin-right: -30px;
	}
	@media screen and (max-width: 1440px){
		#hd #passthrough .text .in{
			margin-left: 100px;
		}
	}
	@media screen and (max-width: 1023px){
		#hd #passthrough .bg1{
			display: none;
		}
		#hd #passthrough .text .in{
			margin-left: 50px;
		}
		#hd #passthrough .text .in p{
			padding-bottom: 0;
		}
	}
	@media screen and (max-width: 768px){
		#hd #passthrough .text{
			margin-bottom: -14%;
			padding: 50px 0;
			width: 100%;
			position: relative;
			top: 0%;
			transform: none;
		}
		#hd #passthrough .text .in{
			width: 100%;
			margin-left: 0;
		}
		#hd #passthrough .bg{
			transform: scale(1.5);
			transform-origin: right top;
			display: none;
		}
		#hd #passthrough .bg_mo{
			display: block;
		}
	}

/*------------ fps ----------*/
	#hd #fps{
		/* padding: 50px 0; */
		min-height: 660px;
		position: relative;
		background-color: #111216;
		overflow: hidden;
	}
	#hd #fps .bg1{
		width: 30%;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	#hd #fps .inner{
		width: 100%;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 3;
	}
	#hd #fps .w1400{
		position: relative;
	}
	#hd #fps .text{
		margin-right: 0;
		margin-left: auto;
		position: relative;
		width: 40%;
		padding-top: 50px;
		z-index: 2;
	}
	#hd #fps h2{
		position: relative;
	}
	#hd #fps .show .ctrl{
		max-width: 300px;
		margin-top: 40px;
		display: inline-flex;
		align-items: center;
		text-align: center;
		position: relative;
	}
	#hd #fps .show .btn_set{
		width: 150px;
		height: 85px;
		position: relative;
	}
	#hd #fps .show .ctrl img{
		width: 150px;
		opacity: 0;
		/* height: 90px; */
		display: inline-block;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#hd #fps .show .ctrl img.active{
		opacity: 1;
	}
	#hd #fps .show .ctrl p{
		margin-right: 10px;
		padding-bottom: 0;
	}
	#hd #fps .bg{
		max-width: none !important;
		min-width: 100% !important;
		min-height: 100% !important;
		position: absolute;
		left: 50%;
		bottom:0;
		z-index: 1;
		transform: translateX(-50%);
	}
	#hd #fps .bg.bg_click{
		opacity: 0;
		transition: .3s;
	}
	#hd #fps .bg.bg_click.active{
		opacity: 1;
	}
	#hd #fps .ctrl_line{
		position: absolute;
		bottom: 11%;
		right: 44.5%;
		z-index: 2;
	}
	#hd #fps .ctrl_line2{
		stroke-dasharray: 460;
		stroke-dashoffset: 460;
	}
	#hd #fps .ctrl_line2.active{
		animation: dash 3s forwards
	}
	@keyframes dash{
		0% {
			stroke-dashoffset: 460;
		}
		100% {
			stroke-dashoffset: 0;
		}
	}
	@media screen and (max-width: 1200px){
		#hd #fps .ctrl_line{
			right: 43%;
		}
	}
	@media screen and (max-width: 1023px){
		#hd #fps{
			/* padding: 50px 0; */
			min-height: auto;
			position: relative;
		}
		#hd #fps .inner{
			position: relative;
			top: 0;
			left: 0;
			transform: none;
		}
		#hd #fps .text{
			text-align: center;
			position: relative;
			width: 100%;
		}
		#hd #fps .bg{
			max-width: 100% !important;
			min-width: 900px !important;
			min-height: auto !important;
			position: relative;
			left: 0;
			bottom:0;
			/* z-index: -1; */
			transform: none;
		}
		#hd #fps .bg.bg_click{
			position: absolute;
			bottom: 0;
		}
		#hd #fps .ctrl_line{
			display: none;
		}
	}
	@media screen and (max-width: 768px){
		#hd #fps .show .ctrl img{
			/* width: 100px; */
			/* height: 70px; */
		}
		#hd #fps .bg{
			margin-top: -100px;
		}
	}
	@media screen and (max-width: 600px){
		#hd #fps .bg{
			min-width: 1000px !important;
			transform: translateX(-15%);
		}
	}


/*------------ instant ----------*/
	#hd #instant{
		height: 710px;
		padding: 50px 0;
		position: relative;
		overflow: hidden;
	}
	#hd #instant .bg1{
		width: 30%;
		position: absolute;
		left: 0;
		top: 0;
	}
	#hd #instant .text{
		position: relative;
		width: 60%;
		margin-top: 90px;
		z-index: 2;
	}
	#hd #instant h2{
		position: relative;
	}
	#hd #instant .contol{
		margin: 10px 0 30px;
	}
	#hd #instant .contol p,
	#hd #instant .contol img{
		display: inline;
		vertical-align: middle;
	}
	#hd #instant .contol .btnset{
		width: 70px;
		height: 70px;
		display: inline-block;
		position: relative;
		vertical-align: middle;
	}
	#hd #instant .contol img{
		width: 70px;
		height: 70px;
		cursor: pointer;
		opacity: 0;
		transition: .3s;
		position: absolute;
		top: 0;
		left: 0;
	}
	#hd #instant .contol img.active{
		opacity: 1;
	}
	#hd #instant .contol p{
		color:#6752FF;
		font-size: 18px;
		font-weight: 500;
		margin-right: 10px;
	}
	#hd #instant .show .audio,
	#hd #instant .show .hide{
		max-width: 300px;
		margin-right: 40px;
		display: inline-block;
		text-align: center;
		position: relative;
	}
	#hd #instant .show .audio img,
	#hd #instant .show .hide img{
		width: 90px;
		height: 90px;
		opacity: 0;
		transition: .3s;
		position: absolute;
		top: 0;
		left: 0;
	}
	#hd #instant .show .audio img.active,
	#hd #instant .show .hide img.active{
		opacity: 1;
	}
	#hd #instant .show .audio p,
	#hd #instant .show .hide p{
		margin-top: 100px;
	}
	#hd #instant > img{
		position: absolute;
		right: 0;
		bottom:0;
		z-index: 1;
	}

/*------------ play ----------*/
	#hd #play{
		padding: 50px 0;
		position: relative;
		overflow: hidden;
	}
	#hd #play .text{
		position: relative;
		z-index: 1;
	}
	#hd #play h2{
		width: calc(50% - 4px);
		display: inline-block;
		position: relative;
		vertical-align: top;
	}
	#hd #play .right{
		width: calc(50% - 4px);
		/* margin-top: 50px; */
		display: inline-block;
		vertical-align: top;
	}
	#hd #play .high{
		margin-right: 10px;
		font-size: 18px;
		font-weight: 500;
		color: #FF3A91;
		display: inline-block;
	}
	#hd #play .contol{
		display: inline-block;
		vertical-align: middle;
	}
	#hd #play .contol span{
		margin: 0 10px;
		font-size: 30px;
	}
	#hd #play .contol .btnset1,
	#hd #play .contol .btnset2{
		width: 79px;
		height: 79px;
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}
	#hd #play .contol .btnset1 img,
	#hd #play .contol .btnset2 img{
		display: inline-block;
		transition: .3s;
		opacity: 0;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		/* animation: toggle2 .3s 1 forwards; */
	}
	#hd #play .contol .btnset1 .active,
	#hd #play .contol .btnset2 .active{
		opacity: 1;
		/* animation: toggle .3s 1 forwards; */
	}
	#hd #play .bg{
		min-width: 1500px;
		position: absolute;
		left: 50%;
		bottom: 0;
		opacity: 0;
		transform: translateX(-50%);
		transition: .3s;
		/* z-index: -1; */
	}
	#hd #play .bg.active{
		opacity: 1;
	}
	/* @keyframes toggle2{
		0%    {opacity: 1;}
		50%   {opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes toggle{
		0%    {opacity: 0;}
		50%   {opacity: 1;}
		100%{opacity: 0;}
	} */


/*------------ armoury ---------*/
	#hd #armoury{
		padding: 0 0 50px;
		text-align: center;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left bottom;
	}
	#hd #armoury figure{
		width: 100%;
		position: relative;
		display: inline-block;
		margin: auto;
		margin-bottom: -13%;
	}
	#hd #armoury figure .screen{
		position: absolute;
		top: 0;
		left: 0;
	}
	#hd #armoury .text{
		padding: 0 5%;
		text-align: center;
	}


/*------------ FEATURE --------*/
	#hd #feature{
		padding:2% 0;
		background-position: 0 0;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
	}
	#hd #feature ul{
		text-align: center;
	}
	#hd #feature li{
		padding:0 10px;
		margin:70px 0 70px -7px;
		text-align: left;
		position: relative;
		vertical-align: top;
	}
	#hd #feature li:after{
		content:'';
		display: block;
		width: 90%;
		height: 8px;
		background: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;right: 0;
		margin:0 auto;
	}
	#hd #feature li img{
		width: 35%;
		max-width: 130px !important;
	}
	#hd #feature li img + div{
		width: 65%;
		padding-left: 15px;
	}
	#hd #feature h3{min-height: 60px; }
	#hd #feature li:nth-child(2) h3{font-size: 20px; }
	#hd #feature p{
		font-size: 14px;
		padding-bottom: 0;
		margin-bottom: 20px;
		min-height: 83px;
	}
/* ---------- ANIMATIONS ---------- */
	@-webkit-keyframes fadeInFromBottom{
		from{
			opacity: 0;
			-webkit-transform: translateY(10%);
		}
		to  {
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
	@keyframes fadeInFromBottom{
		from{
			opacity: 0;
			   -moz-transform: translateY(10%);
				-ms-transform: translateY(10%);
				 -o-transform: translateY(10%);
					transform: translateY(10%);
		}
		to  {
			opacity: 1;
			   -moz-transform: translateY(0);
				-ms-transform: translateY(0);
				 -o-transform: translateY(0);
					transform: translateY(0);
		}
	}
	#hd .colorrun{
		-webkit-animation: colorrun 5s infinite;
		-o-animation: colorrun 5s infinite;
		animation: colorrun 5s infinite;
	}
	@keyframes colorrun {
		from {
			-webkit-filter: hue-rotate(0deg);
			filter: hue-rotate(0deg);
		}
		to {
			-webkit-filter: hue-rotate(359deg);
			filter: hue-rotate(359deg);
		}
	}
	@-webkit-keyframes colorrun {
		from {
			-webkit-filter: hue-rotate(0deg);
			filter: hue-rotate(0deg);
		}
		to {
			-webkit-filter: hue-rotate(359deg);
			filter: hue-rotate(359deg);
		}
	}

	@-webkit-keyframes static {
	  0%		{opacity: 1}
	  50%		{opacity: 1}
	}
	@keyframes static {
	  0%		{opacity: 1}
	  50%		{opacity: 1}
	}
	@-webkit-keyframes breathing {
	  0%		{opacity: 1}
	  50%		{opacity: 0}
	}
	@keyframes breathing {
	  0%		{opacity: 1}
	  50%		{opacity: 0}
	}

	@-webkit-keyframes adaptive {
		0%		{opacity: 1}
		5%		{opacity: 0}
		10%		{opacity: 1}
		15%		{opacity: 0}
		20%		{opacity: 1}
		25%		{opacity: 0}
		30%		{opacity: 1}
		35%		{opacity: 0}
		40%		{opacity: 1}
		45%		{opacity: 0}
		50%		{opacity: 1}
		55%		{opacity: 0}
		60%		{opacity: 1}
		65%		{opacity: 0}
		70%		{opacity: 1}
		75%		{opacity: 0}
		80%		{opacity: 1}
		85%		{opacity: 0}
		90%		{opacity: 1}
		95%		{opacity: 0}
		100%	{opacity: 1}
		0%{
			background-color: #5887FC;
		}
		40%{
			background-color: #ff0;
		}
		80%{
			background-color: #f00;
		}
		100%{
			background-color: #5887FC;
		}
	}
	@keyframes adaptive {
		0%		{opacity: 1}
		5%		{opacity: 0}
		10%		{opacity: 1}
		15%		{opacity: 0}
		20%		{opacity: 1}
		25%		{opacity: 0}
		30%		{opacity: 1}
		35%		{opacity: 0}
		40%		{opacity: 1}
		45%		{opacity: 0}
		50%		{opacity: 1}
		55%		{opacity: 0}
		60%		{opacity: 1}
		65%		{opacity: 0}
		70%		{opacity: 1}
		75%		{opacity: 0}
		80%		{opacity: 1}
		85%		{opacity: 0}
		90%		{opacity: 1}
		95%		{opacity: 0}
		100%	{opacity: 1}
		0%{
			background-color: #5887FC;
		}
		40%{
			background-color: #ff0;
		}
		80%{
			background-color: #f00;
		}
		100%{
			background-color: #5887FC;
		}
	}
	@keyframes high_point_bar{
		0%{
			width: 108px;
			fill: #5887FC;
		}
		40%{
			width: 50px;
			fill: #ff0;
		}
		80%{
			width: 0;
			fill: #f00;
		}
		100%{
			width: 108px;
			fill: #5887FC;
		}
	}

	/* @-webkit-keyframes strobing {
		0%	{opacity: 1; background-color: rgb(220, 0, 23);}
		2%	{opacity: 0;}

		4%	{opacity: 1;}
		8%	{opacity: 0;}

		10%	{opacity: 1;}
		18%	{opacity: 0;}

		20%	{opacity: 1;}
		28%	{ opacity: 0; }

		30%	{opacity: 1}
		40%{opacity: 0; background-color: rgb(220, 0, 23);}
		42%{opacity: 0; background-color: rgb(23, 220, 220);}
		44%{opacity: 0}

		46%{opacity: 1}
		48%{opacity: 0}

		50%{opacity: 1}
		54%{opacity: 0}

		56%{opacity: 1}
		60%{opacity: 0}

		62%{opacity: 1}
		70%{opacity: 0}

		72%{opacity: 1}
		80%{opacity: 0}

		82%{opacity: 1}
		92%{opacity: 0; background-color: rgb(23, 220, 220);}
		100%{opacity: 0; background-color: rgb(220, 0, 23);}
	} */
	@keyframes strobing {
		0%	{opacity: 1;}
		2%	{opacity: 0;}

		4%	{opacity: 1;}
		8%	{opacity: 0;}

		10%	{opacity: 1;}
		18%	{opacity: 0;}

		20%	{opacity: 1;}
		28%	{ opacity: 0; }

		30%	{opacity: 1}
		40%{opacity: 0; }
		42%{opacity: 0; }
		44%{opacity: 0}

		46%{opacity: 1}
		48%{opacity: 0}

		50%{opacity: 1}
		54%{opacity: 0}

		56%{opacity: 1}
		60%{opacity: 0}

		62%{opacity: 1}
		70%{opacity: 0}

		72%{opacity: 1}
		80%{opacity: 0}

		82%{opacity: 1}
		92%{opacity: 0; }
		100%{opacity: 0; }
	}

	@-webkit-keyframes cycle {
	  0%		{background-color: red;}
	  2%		{background-color: red;}
	  10.3%		{background-color: orange;}
	  18.6%		{background-color: yellow;}
	  26.9%		{background-color: #b0ff00;}
	  35.2%		{background-color: #00db4a;}
	  43.5%		{background-color: #00ffd9;}
	  51.8%		{background-color: #00deff;}
	  60.1%		{background-color: #0093ff;}
	  68.4%		{background-color: #0023ff;}
	  76.7%		{background-color: #8e00ff;}
	  85%		{background-color: #e100ff;}
	  93.3%		{background-color: #ff008b;}
	  100%		{background-color: red;}
	}
	@keyframes cycle {
	  0%		{background-color: red;}
	  2%		{background-color: red;}
	  10.3%		{background-color: orange;}
	  18.6%		{background-color: yellow;}
	  26.9%		{background-color: #b0ff00;}
	  35.2%		{background-color: #00db4a;}
	  43.5%		{background-color: #00ffd9;}
	  51.8%		{background-color: #00deff;}
	  60.1%		{background-color: #0093ff;}
	  68.4%		{background-color: #0023ff;}
	  76.7%		{background-color: #8e00ff;}
	  85%		{background-color: #e100ff;}
	  93.3%		{background-color: #ff008b;}
	  100%		{background-color: red;}
	}

	@-webkit-keyframes jumping {
		0%		{bottom:-30%; left: 20%;}
		25%		{bottom:30%; left:20%;}
		50%		{bottom:-15%; left: -30%;}
		75%		{bottom:20%; left: -30%;}
	}
	@keyframes jumping {
		0%		{bottom:-15%; left: 20%;}
		25%		{bottom:30%; left:20%;}
		50%		{bottom:-15%; left: -30%;}
		75%		{bottom:20%; left: -30%;}
	}
	@-webkit-keyframes ripple {
		0%		{
			   -webkit-transform: scale(1);
			        opacity: 1;
		}
		100%	{
			   -webkit-transform: scale(19);
			        opacity: 0;
		}
	}
	@keyframes ripple {
		0%		{
			   -moz-transform: scale(1);
			    -ms-transform: scale(1);
			     -o-transform: scale(1);
			        transform: scale(1);
		}
		100%	{
			   -moz-transform: scale(100);
			    -ms-transform: scale(100);
			     -o-transform: scale(100);
			        transform: scale(100);
		}
	}
	@-webkit-keyframes quicksand {
		0%		{background-position-y:-650%;}
	    100%	{background-position-y: 970%;}
	}
	@keyframes quicksand {
		0%		{background-position-y:-650%;}
	    100%	{background-position-y: 970%;}
	}
	@keyframes wave_block {
	  0%		{background-color: red;}
	  2%		{background-color: red;}
	  10.3%		{background-color: orange;}
	  18.6%		{background-color: yellow;}
	  35.2%		{background-color: #00db4a;}
	  51.8%		{background-color: #00deff;}
	  68.4%		{background-color: #0023ff;}
	  85%		{background-color: #e100ff;}
	  100%		{background-color: red;}
	}
	@keyframes rc_rainbow {
		0%		{transform:rotate(0deg);}
	    100%	{transform:rotate(360deg);}
	}

	.hd-rainbow{
		background-repeat: repeat-x;
		background-position: center 0;
		background: blue !important;
		background: url(../img/lighting-rainbow.jpg) center no-repeat !important;
		background-size: 100% 100% !important;
		width: 55% !important;
		height: 95% !important;
		margin-left: 45% !important;
		margin-top: 0% !important;
    	animation: rc_rainbow 5s 0s linear infinite;
	}
	@media screen and (min-width: 2400px) {
	.hd-rainbow{
		background-size: auto 100%;
	}
	}
	.hd-rainbow:before{
		/*content:'';
		display: block;
		width: 15%;
		height: 20%;
		position: absolute;
		top: 5%;
		right: 18%;
		background-color: #ffffff;
		-webkit-animation: wave_block 1.95s -1.4s infinite;
		-o-animation: wave_block 1.95s -1.4s infinite;
		animation: wave_block 1.95s -1.4s infinite;*/
	}

	.hd-ripple{
		background-color: transparent!important;
		background: url(../img/lighting-ripple.png) repeat;
		background-size: 100%;
		background-position-x: center;
		background-position-y: center;
	}
	.hd-ripple ~ #keyboard{
		opacity: 1;
		z-index: -3;
	}
	.hd-ripple ~ #keyboard:before{
		content:'';
		display: block;
		width: 160%;
		height: 100%;
		position: absolute;
		top: 0;
		left: -30%;
		background: #4e4e4e;
		background: -moz-linear-gradient(left, #4e4e4e 0%, #4e4e4e 12%, #ff2828 12%, #ff9028 21%, #f7e92e 38%, #4ded2d 58%, #207cca 70%, #bc25ea 87%, #4e4e4e 88%, #4e4e4e 100%);
		background: -webkit-linear-gradient(left, #4e4e4e 0%,#4e4e4e 12%,#ff2828 12%,#ff9028 21%,#f7e92e 38%,#4ded2d 58%,#207cca 70%,#bc25ea 87%,#4e4e4e 88%,#4e4e4e 100%);
		background: linear-gradient(to right, #4e4e4e 0%,#4e4e4e 12%,#ff2828 12%,#ff9028 21%,#f7e92e 38%,#4ded2d 58%,#207cca 70%,#bc25ea 87%,#4e4e4e 88%,#4e4e4e 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#131313',GradientType=1 );
	}
	.hd-quicksand ~ #keyboard{
		opacity: 1;
		z-index: -3;
	}
	.hd-quicksand ~ #keyboard:before{
		content:'';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 1.5%;
		background: #0a79ff;
		background: -webkit-linear-gradient(top,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		background: -o-linear-gradient(top,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		background: -moz-linear-gradient(top,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		background: linear-gradient(to bottom,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a79ff', endColorstr='#ff2a79',GradientType=1 );
	}

	#keyboard.hd-starry,
	#keyboard.hd-current,
	#keyboard.hd-rain,
	#keyboard.hd-music{
		opacity: 1;
		z-index: -3;
	}

	.hd-smart{
		animation: smart 7s infinite;
	}

	@-webkit-keyframes showroutine{
		0%		{opacity: 0;}
		10%		{opacity: 1;}
		11%		{opacity: 1;}
		20%		{opacity: 0;}
		100%	{opacity: 0;}
	}
	@keyframes showroutine{
		0%		{opacity: 0;}
		10%		{opacity: 1;}
		11%		{opacity: 1;}
		20%		{opacity: 0;}
		100%	{opacity: 0;}
	}


	@keyframes keyFadeIn {
		0% {opacity: 0;}
		10% {opacity: 1;}
		15% {opacity: 0;}
		100% {opacity: 0;}
	}
	@-webkit-keyframes keyFadeIn {
		0% {opacity: 0;}
		10% {opacity: 1;}
		15% {opacity: 0;}
		100% {opacity: 0;}
	}


	@-webkit-keyframes smart{
		0%{
			background-color: #f00;
		}
		25%{
			background-color: #ff0;
		}
		50%{
			background-color: #0f0;
		}
		75%{
			background-color: #ff0;
		}
		100%{
			background-color: #f00;
		}
	}
	@keyframes smart{
		0%{
			background-color: #f00;
		}
		25%{
			background-color: #ff0;
		}
		50%{
			background-color: #0f0;
		}
		75%{
			background-color: #ff0;
		}
		100%{
			background-color: #f00;
		}
	}
	@keyframes high_heat_bar{
		0%{
			width: 88px;
			fill: #f00;
		}
		25%{
			width: 64px;
			fill: #ff0;
		}
		50%{
			width: 40px;
			fill: #0f0;
		}
		75%{
			width: 64px;
			fill: #ff0;
		}
		100%{
			width: 88px;
			fill: #f00;
		}
	}


	@-webkit-keyframes music_base{
		0%		{opacity: 1; background-color: #f00;}
		100%	{opacity: 1; background-color: #f00;}
		/* 0%		{opacity: 0; background-color: #f00;}
		2%		{opacity: 0;}
		3%		{opacity: 1;}
		98%		{opacity: 1;}
		99%		{opacity: 0;}
		100%	{opacity: 0; background-color: #f00;} */
	}
	@keyframes music_base{
		0%		{opacity: 1; background-color: #ef3423;}
		100%	{opacity: 1; background-color: #ef3423;}
		/* 0%		{opacity: 0; background-color: #f00;}
		2%		{opacity: 0;}
		3%		{opacity: 1;}
		98%		{opacity: 1;}
		99%		{opacity: 0;}
		100%	{opacity: 0; background-color: #f00;} */
	}	
	/* @-webkit-keyframes music_sec{
		0%		{opacity: 0; background-color: #f00;}
		9%		{opacity: 0;}
		10%		{opacity: 1;}
		30%		{opacity: 1;}
		31%	    {opacity: 0;}
		49%	    {opacity: 0;}
		50%	    {opacity: 1;}
		70%	    {opacity: 1;}
		71%	    {opacity: 0;}
		79%	    {opacity: 0;}
		80%	    {opacity: 1;}
		99%	    {opacity: 1;}
		100%	{opacity: 0; background-color: #f00;}
	} */
	/* @keyframes music_sec{
		0%		{opacity: 1; background-color: #f00;}
		9%		{opacity: 1;}
		10%		{opacity: 0;}
		30%		{opacity: 0;}
		31%	    {opacity: 1;}
		49%	    {opacity: 1;}
		50%	    {opacity: 0;}
		70%	    {opacity: 0;}
		71%	    {opacity: 1;}
		79%	    {opacity: 1;}
		80%	    {opacity: 0;}
		99%	    {opacity: 0;}
		100%	{opacity: 1; background-color: #f00;}
	} */
	
	
	@keyframes music_sec{
		0%		{opacity: 0; background-color: #ef3423;}
		5%		{opacity: 0;}
		6%		{opacity: 1;}
		95%	    {opacity: 1;}
		96%	    {opacity: 0; background-color: #ef3423;}
		100%	{opacity: 0; background-color: #ef3423;}
	}
	@keyframes music_tri{
		0%		{opacity: 0; background-color: #ef3423;}
		10%		{opacity: 0;}
		11%		{opacity: 1;}
		50%		{opacity: 1;}
		51%		{opacity: 0;}
		60%		{opacity: 0;}
		61%		{opacity: 1;}
		90%	    {opacity: 1;}
		91%	    {opacity: 0; background-color: #ef3423;}
		100%	{opacity: 0; background-color: #ef3423;}
	}
	@keyframes music_fou{
		0%		{opacity: 0; background-color: #ef3423;}
		10%		{opacity: 0;}
		11%		{opacity: 1;}
		30%		{opacity: 1;}
		31%		{opacity: 0;}
		40%		{opacity: 0;}
		41%		{opacity: 1;}
		50%		{opacity: 1;}
		51%		{opacity: 0;}
		60%		{opacity: 0;}
		61%		{opacity: 1;}
		90%	    {opacity: 1;}
		91%	    {opacity: 0; background-color: #ef3423;}
		100%	{opacity: 0; background-color: #ef3423;}
	}
	@keyframes music_fif{
		0%		{opacity: 0; background-color: #ef3423;}
		14%		{opacity: 0;}
		15%		{opacity: 1;}
		30%		{opacity: 1;}
		31%		{opacity: 0;}
		40%		{opacity: 0;}
		41%		{opacity: 1;}
		50%		{opacity: 1;}
		51%		{opacity: 0;}
		60%		{opacity: 0;}
		61%		{opacity: 1;}
		70%		{opacity: 1;}
		71%		{opacity: 0;}
		89%		{opacity: 0;}
		90%	    {opacity: 1;}
		91%	    {opacity: 0; background-color: #ef3423;}
		100%	{opacity: 0; background-color: #ef3423;}
	}