@charset 'utf-8';
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/myriadPro-regular.otf');
	font-weight: normal;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/myriadPro-light.otf');
	font-weight: 300;
}
@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: 'fjallaone';
	src: url('../fonts/fjallaone-regular.ttf');
}
/* @import url('https://fonts.googleapis.com/css?family=Fjalla+One'); */
/*-----RESET-----*/
	*{
		margin: 0;
		padding: 0;
	}
	#hd {
		margin: 0;
		padding:0;
		background-color: #000000;
	}
	#hd {
		background: #000000;
		color: #FFF;
	}
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#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: 'xolonium', sans-serif;
		font-size: 15px;
		text-decoration: none;
		color: #F20100;
		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: 'MyriadPro', sans-serif;
		color: #FFF;
		line-height: 1.4rem;
		margin: 0;
		font-weight: normal;
	}
	#hd p {
		font-family: 'MyriadPro', 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: 'MyriadPro', sans-serif;
		font-size: 12px;
		line-height: 13px;
		font-weight: 300;
	}
	#hd small.txt-red{
		font-weight: 600;
	}
	#hd ul {
		font-family: 'MyriadPro', sans-serif;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#hd ul li {
		font-family: 'MyriadPro', 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,
	#hd .h1{
		font-family: 'xolonium', sans-serif;
	    font-size: 38px;
	    line-height: 1;
		font-weight: normal;
	    color: #fff !important;
	}
	#hd h1 span,
	#hd .h1 span{
		font-size: 2.5em;
	}
	#hd h2,
	#hd .h2{
		/*font-family: 'Fjalla One', sans-serif;*/
		font-family: 'xolonium', sans-serif;
		font-weight: 400;
		font-size: 40px;
		line-height: 1.2;
		padding-bottom:20px;
		position: relative;
		color:#fff !important;
	}
	#hd h3,
	#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,
	#hd .h6{
		font-family: 'xolonium', sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.3;
		text-transform: uppercase;
		margin-bottom: 15px;
	}
	#hd .txt-xxx{
		font-family: 'xolonium', sans-serif;
	}
	#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-main{
		text-transform: uppercase;
		position: relative;
		z-index: 1;
	}
	#hd .title-main span{
		opacity: 0;
	}
	#hd .title-main::before{
		content: '';
		width: 83px;
		height: 90px;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transform: translate(calc(-45% + 20px), calc(-30% - 20px));
		z-index: -1;
		background-image: url(../img/deco/deco.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#hd .title-main.active span{
		animation: main_title_text 1s .3s forwards;
	}
	#hd .title-main.active::before{
		animation: main_title .5s forwards;
	}
	@keyframes main_title{
		0%{
			opacity: 0;
			transform: translate(calc(-45% + 20px), calc(-30% - 20px));
		}
		100%{
			opacity: 1;
			transform: translate(-45%, -30%);
		}
	}
	@keyframes main_title_text{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}


	#hd .title-white{text-shadow: 0 0 10px #ffffff;}
	#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 #B6FF97;}
	#hd .title-blue{text-shadow: 0 0 10px #19e9f7;}
	#hd .title-blue2{text-shadow: 0 0 10px rgb(67, 153, 233);}
	#hd .title-blue3{text-shadow: 0 0 10px #0078FF;}
	#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-theme{color: #FF3A94;}

	#hd .txt-bold{font-weight: 600;}

	#hd .ib{display: inline-block;}

	@media screen and (max-width: 768px){
		#hd .title-main::before{
			display: none;
		}
	}


/*-----BLOCK-----*/
	#hd .w90{
		width: 90%;
		max-width: 1920px;
		margin:0 auto;
		position: relative;
		z-index: 2;
	}
	#hd .w1200,
	#hd .w1250,
	#hd .w1400,
	#hd .w1100,
	#hd .w1000,
	#hd .w800{
	    width: 90%;
	    max-width: 1200px;
	    margin: 0 auto;
	    position: relative;
	}
	#hd .w1400 {max-width: 1400px; }
	#hd .w1250 {max-width: 1250px; }
	#hd .w1000 {max-width: 1000px; }
	#hd .w1100 {max-width: 1100px; }
	#hd .w800 {max-width: 800px; }
	#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: 'Fjalla One', 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: 'Fjalla One', 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 #8D0000;
	    z-index: 999;
	    opacity: 0;
	}
	#scrollUp.hd-show {
	    opacity: 1;
	}
	#scrollUp:hover {
	    background-color: #8D0000;
	}
	#scrollUp:hover svg {
	    fill: #FFF;
	}
	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #8D0000;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}

/* ---------- lightbox ---------- */
	#lightbox {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		z-index: 10;
	}
	#lightbox .filter {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .7);
	}
	#lightbox .box {
		width: 800px;
		height: 480px;
		background: #232323;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		box-sizing: border-box;
	}
	#lightbox .close {
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		top: -25px;
		right: 0;
		cursor: pointer;
	}
	#lightbox .close:before,
	#lightbox .close:after{
		content:'';
		display: block;
		width: 20px;
		height: 3px;
		-webkit-border-radius: 1.5px;
		-moz-border-radius: 1.5px;
		border-radius: 1.5px;
		background: #aaaaaa;
	}
	#lightbox .close:before{
		-webkit-transform: rotateZ(45deg) translate(2px, 2px);
		-moz-transform: rotateZ(45deg) translate(2px, 2px);
		-ms-transform: rotateZ(45deg) translate(2px, 2px);
		-o-transform: rotateZ(45deg) translate(2px, 2px);
		transform: rotateZ(45deg) translate(2px, 2px);
	}
	#lightbox .close:after{
		-webkit-transform: rotateZ(-45deg);
		-moz-transform: rotateZ(-45deg);
		-ms-transform: rotateZ(-45deg);
		-o-transform: rotateZ(-45deg);
		transform: rotateZ(-45deg);
	}
	#lightbox .box>img {
		position: absolute;
		right: 40px;
		bottom: 60px;
	}
	#lightbox .box iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

/*----- 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: #000;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#hd #kv .kv-info {
		background-position: center 0;
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 42%;
		padding-bottom: 70px;
	}
	#hd #kv .kv-info h2{
		display: inline-block;
	}
	@media screen and (max-width: 768px){
		#hd #kv .kv-info {
			padding-bottom: 30px;
		}
	}


/*------------ playit -------------*/
	#hd #playit{
		padding: 80px 0;
		position: relative;
		overflow: hidden;
	}
	#hd #playit .s1l{
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		transform: translate(-35%, -30%);
		width: 55%;
		transition: 1s;
	}
	#hd #playit .s1l.active{
		opacity: 1;
		transform: translate(-40%, -35%);
	}
	#hd #playit .s1r{
		position: absolute;
		right: 0;
		bottom: 0;
		opacity: 0;
		transform: translate(30%, 30%);
		width: 55%;
		transition: 1s;
	}
	#hd #playit .s1r.active{
		opacity: 1;
		transform: translate(35%, 35%);
	}
	#hd #playit .openlock{
		cursor: pointer;
	}
	

	#hd #playit .tagset{
		max-width: 90%;
		margin: 30px auto;
		text-align: center;
		white-space: nowrap;
		overflow: auto;
	}


	#hd #playit .tagset li{
		margin: 0 -2px;
		padding: 5px 20px;
		display: inline-block;
		text-align: center;
		opacity: .5;
		border-bottom: 3px solid #fff;
		cursor: pointer;
		user-select: none;
	}
	#hd #playit .tagset li.active,
	#hd #playit .tagset li:hover{
		opacity: 1;
		border-bottom: 3px solid #F20100;
	}
	#hd #playit .yt_outer{
		max-width: 900px;
		margin: 30px auto;
		background-color: #000;
	}
	#hd #playit .yt_inner{
		width: 100%;
		padding-bottom: 50%;
		position: relative;
	}
	#hd #playit .yt_inner video,
	#hd #playit .yt_inner img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	@media screen and (max-width: 768px){
		#hd #playit a.h6{
			font-size: 14px;
		}
	}


/*------------ lock -------------*/
	#hd #lock{
		padding: 80px 0;
		position: relative;
		background-image: url(../img/02/section2_bg.jpg);
		/* background-position: center; */
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #0A0D15;
		display: none;
	}
	#hd #lock.show{
		display: block;
	}
	#hd #lock .text{
		margin-bottom: 50px;
		display: flex;
		align-items: start;
	}
	#hd #lock .text h2{
		white-space: nowrap;
		margin-right: 50px;
	}
	#hd #lock .text p{
		max-width: 500px;
	}

	#hd #lock .picset_outer{
		width: 90%;
		max-width: 1100px;
		margin: auto;
	}
	#hd #lock .picset{
		padding-bottom: 45%;
		/* background-color: rgba(255,255,255,.3); */
		position: relative;
	}
	#hd #lock .picset .l_light{
		width: 73%;
		position: absolute;
		top: 1%;
		left: 0%;
	}
	#hd #lock .r_dark,
	#hd #lock .r_light{
		width: 54%;
		position: absolute;
		top: 3%;
		left: 43%;
		transform: translate(50%, -10%);
		opacity: 0;
	}
	#hd #lock.active .r_dark{
		animation: kerbored_merge .8s both cubic-bezier(0,.1,1,0);
	}
	#hd #lock.active .r_light{
		transform: translate(0, 0);
		animation: kerbored_light_show .5s 1s both;
	}

	@keyframes kerbored_merge{
		0%{
			opacity: 0;
			transform: translate(50%, -10%);
		}
		20%{
			opacity: 1;
		}
		50%{
			transform: translate(5%, -5%);
		}
		100%{
			transform: translate(0, 0);
			opacity: 1;
		}
	}
	@keyframes kerbored_light_show{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	@media screen and (max-width: 768px){
		#hd #lock{
			padding: 40px 0;
		}
		#hd #lock .text{
			flex-wrap: wrap;
		}
		#hd #lock .text p{
			width: 100%;
			max-width: none;
		}
	}


	
/*------------ outstanding ----------*/
	#hd #outstanding{
		padding: 80px 0 26%;
		min-height: 600px;
		position: relative;
	}
	#hd #outstanding .text{
		position: relative;
		z-index: 2;
	}
	#hd #outstanding .picset{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	#hd #outstanding .picset .bgg{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 1;
		transition: 1s;
		background-position: center left;
		background-repeat: no-repeat;
		background-size: 100%;
		animation: awe 2s both infinite;
		transform: translateX(-10%);
	}
	#hd #outstanding .picset .bg{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		transition: 1s;
	}
	#hd #outstanding .picset .bg.active{
		opacity: 1;
	}
	#hd #outstanding .picset .product{
		width: 48%;
		position: absolute;
		top: 60%;
		left: 12%;
		transform: translateY(-50%);
	}
	#hd #outstanding .barset{
		position: absolute;
		width: 22%;
		top: 55%;
		right: 12%;
		transform: translateY(-50%);
		z-index: 2;
	}
	#hd #outstanding .barset small{
		display: block;
		padding-bottom: 15px;
	}
	#hd #outstanding .bar{
		margin: 0 0 10px;
		height: 15px;
		transform: scaleX(0);
		transform-origin: left;
	}
	#hd #outstanding.active .bar{
		animation: tl 1s both;
	}
	#hd #outstanding .bar1{
		width: 80%;
		background: linear-gradient(90deg, #73CFF8 0%, #0098DD 100%);
		box-shadow: #0BAEF7E6 0 0 15px;
	}
	#hd #outstanding .bar2{
		width: 20%;
		background: linear-gradient(90deg, #FF6A6A 0%, #FF0100 100%);
		box-shadow: #FF0100 0 0 15px;
	}

	@media screen and (max-width: 1440px){
		#hd #outstanding .picset .product{
			width: 50%;
			position: absolute;
			top: 60%;
			left: 8%;
		}
		#hd #outstanding .barset{
			position: absolute;
			width: 30%;
			top: 60%;
			right: 8%;
		}
	}
	@media screen and (max-width: 1023px){
		#hd #outstanding{
			padding: 40px 0 70%;
			min-height: 800px;
			position: relative;
		}
		#hd #outstanding .picset .product{
			width: 90%;
			position: absolute;
			top: 73%;
			left: 5%;
		}
		#hd #outstanding .barset{
			position: absolute;
			width: 90%;
			top: 42%;
			right: 5%;
		}
		#hd #outstanding .picset .bgg{
			background-size: 120%;
			background-position: bottom center;
			transform: none;
		}
	}
	@media screen and (max-width: 600px){
		#hd #outstanding{
			padding: 40px 0 60%;
			min-height: 680px;
		}
		#hd #outstanding .picset .product{
			top: 82%;
		}
		#hd #outstanding .barset{
			top: 52%;
		}
	}

	@keyframes awe{
		0%{
			opacity: 1;
		}
		50%{
			opacity: .6;
		}
		100%{
			opacity: 1;
		}
	}
	


/*------------ fast ----------*/
	#hd #fast{
		position: relative;
		overflow: hidden;
		/* min-height: 550px; */
	}
	#hd #fast .s6l{
		position: absolute;
		left: 0;
		bottom: 0;
		opacity: 0;
		transform: translate(-15%, 30%);
		width: 30%;
		transition: 1s;
	}
	#hd #fast .s6l.active{
		opacity: 1;
		transform: translate(-20%, 35%);
	}
	/* #hd #fast h2{
		width: calc(50% - 94px);
		margin-left: 90px;
		display: inline-block;
		position: relative;
		vertical-align: top;
	} */
	/* #hd #fast h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(100% - 40px);
		width: 3px;
		background-color: #FF3A91;
		transform: skew(30deg);
		top: 10px;
		left: -60px;
	} */
	/* #hd #fast .right{
		width: calc(50% - 4px);
		margin-top: 50px;
		display: inline-block;
		vertical-align: top;
	} */
	#hd #fast .text{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}
	#hd #fast .text_inner{
		width: 45%;
	}

	#hd #fast .high{
		margin-right: 10px;
		font-size: 18px;
		font-weight: 500;
		color: #FF3A91;
		display: inline-block;
	}
	#hd #fast .contol{
		display: inline-block;
		vertical-align: middle;
	}
	#hd #fast .contol span{
		margin: 0 10px;
		font-size: 30px;
	}
	#hd #fast .contol .btnset1,
	#hd #fast .contol .btnset2{
		width: 79px;
		height: 79px;
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}
	#hd #fast .contol .btnset1 img,
	#hd #fast .contol .btnset2 img{
		display: inline-block;
		transition: .3s;
		opacity: 0;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		/* animation: toggle2 .3s 1 forwards; */
	}
	#hd #fast .contol .btnset1 .active,
	#hd #fast .contol .btnset2 .active{
		opacity: 1;
		/* animation: toggle .3s 1 forwards; */
	}

	#hd #fast .note_bg{
		display: none;
	}
	#hd #fast .note_bg.active{
		display: block;
	}

	#hd #fast .contor {
		/* position: absolute;
		bottom: 12%;
		right: 15%; */
		/* transform: translateY(-50%); */
	}
	#hd #fast .contor .item{
		margin: 20px;
		display: inline-block;
		cursor: pointer;
		opacity: .5;
		filter: grayscale(100%);
		transition: .3s;
	}
	#hd #fast .contor .item.active,
	#hd #fast .contor .item:hover{
		opacity: 1;
		filter: none;
	}
	#hd #fast .contor .item p{
		margin-top: 15px;
	}



	#hd #fast .bgset{
		min-width: 1600px;
		transform: translateX(calc(-100% + 100vw));
		position: relative;
		overflow: hidden;
	}
	#hd #fast .bg{
		/* position: absolute; */
		width: 100%;
		bottom: 0;
		opacity: 0;
		transition: .3s;
		z-index: -1;
	}
	#hd #fast .bg.active{
		opacity: 1;
	}
	#hd #fast .bg2{
		position: absolute;
		top: 0;
		left: 0;
	}

	#hd #fast .bar_block{
		width: 40%;
		position: absolute;
		right: 10%;
		bottom: 20%;
		opacity: 0;
		transition: .3s;
		display: none;
	}
	#hd #fast .bar_block.active{
		opacity: 1;
		display: block;
	}
	#hd #fast .bar{
		margin-right: 0;
		margin-left: auto;
		margin-bottom: 20px;
		padding: 7px;
		text-align: right;
		transform-origin: right;
	}
	#hd #fast .bar p{
		padding-bottom: 0;
		line-height: 1;
	}
	#hd #fast .bar .t{
		display: inline-block;
		/* text-align: left; */
	}
	#hd #fast .bar1{
		width: 62%;
		background: linear-gradient(90deg, #FF6A6A 0%, #FF0100 100%);
		box-shadow: #FF0100 0 0 15px;
		transform: scaleX(0);
	}
	#hd #fast .bar2{
		width: 30%;
		background: linear-gradient(90deg, #73CFF8 0%, #0098DD 100%);
		box-shadow: #0BAEF7E6 0 0 15px;
		transform: scaleX(0);
	}
	
	#hd #fast.active .bar{
		animation: tl 1s both;
	}
	#hd #fast.active .bar .t{
		animation: tshow 1s 1s both;
	}
	/* @keyframes toggle2{
		0%    {opacity: 1;}
		50%   {opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes toggle{
		0%    {opacity: 0;}
		50%   {opacity: 1;}
		100%{opacity: 0;}
	} */

	@keyframes tl {
		0%{
			transform: scaleX(0);
		}
		100%{
			transform: scaleX(1);
		}
	}
	@keyframes tshow {
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}

	@media screen and (max-width: 1200px){
		#hd #fast .text{
			padding: 50px 0;
			position: relative;
			top: 0;
			left: 0;
			transform: none;
		}
		#hd #fast .text_inner{
			width: 100%;
		}

		#hd #fast .s6l{
			display: none;
		}
		
		#hd #fast .bgset{
			min-width: auto;
			transform: none;
		}
		#hd #fast .bg{
			width: 160%;
			margin-left: -60%;
			max-width: none !important;
		}

		#hd #fast .contol .btnset1,
		#hd #fast .contol .btnset2{
			width: 60px;
			height: 60px;
		}

		#hd #fast .contor .item{
			width: 90px;
			vertical-align: top;
			margin: 5px;
		}

		#hd #fast .bar_block{
			width: 100%;
		}
	}
	@media screen and (max-width: 1023px){
		#hd #fast .bar_block{
			padding: 40px 0;
			position: relative;
		}
	}
	@media screen and (max-width: 450px){
		#hd #fast .high{
			font-size: 16px;
		}
		#hd #fast .contol .btnset1,
		#hd #fast .contol .btnset2{
			width: 50px;
			height: 50px;
		}

		#hd #fast .bar1{
			width: 250px;
		}
		#hd #fast .bar2{
			width: 150px;
		}
	}


/*------------ intuitive ----------*/
	#hd #intuitive{
		position: relative;
		overflow: hidden;
	}

	#hd #intuitive .textbox{
		width: 100%;
		position: absolute;
		top: 80px;
		left: 0;
		z-index: 1;
	}
	#hd #intuitive .text{
		width: 40%;
		margin-right: 0;
		margin-left: auto;
	}
	#hd #intuitive .contor .item{
		margin: 20px;
		display: inline-block;
		cursor: pointer;
		opacity: .5;
		filter: grayscale(100%);
		transition: .3s;
	}
	#hd #intuitive .contor .item.active,
	#hd #intuitive .contor .item:hover{
		opacity: 1;
		filter: none;
	}
	#hd #intuitive .contor .item p{
		margin-top: 15px;
	}
	#hd #intuitive .bgset1_text{
		display: none;
		opacity: 0;
	}
	#hd #intuitive .bgset1_text.active{
		display: block;
		opacity: 1;
	}
	#hd #intuitive .bgset1_text p{
		display: inline-block;
		vertical-align: top;
	}
	

	#hd #intuitive .bgset{
		min-width: 1600px;
		position: relative;
		display: none;
	}
	#hd #intuitive .bgset.active{
		display: block;
	}
	#hd #intuitive .pictext{
		width: 23%;
		position: absolute;
		top: 25%;
		left: 28.6%;
	}
	#hd #intuitive .p1,
	#hd #intuitive .p2,
	#hd #intuitive .p3,
	#hd #intuitive .p4{
		opacity: 0;
	}
	#hd #intuitive .p1.active,
	#hd #intuitive .p2.active,
	#hd #intuitive .p3.active,
	#hd #intuitive .p4.active{
		opacity: 1;
	}

	#hd #intuitive .picsound{
		width: 23%;
		position: absolute;
		top: 22%;
		left: 32%;
	}
	#hd #intuitive .mus{
		width: 2%;
		position: absolute;
		top: 20%;
		left: 30%;
		opacity: .5;
	}
	#hd #intuitive .plus{
		width: 2.5%;
		position: absolute;
		top: 35%;
		left: 49.5%;
		opacity: 0.5;
		animation: op5-1 .5s infinite linear;
	}
	#hd #intuitive .s1,
	#hd #intuitive .s2,
	#hd #intuitive .s3,
	#hd #intuitive .s4,
	#hd #intuitive .s5,
	#hd #intuitive .s6,
	#hd #intuitive .s7{
		opacity: 0;
	}
	#hd #intuitive .s1.active,
	#hd #intuitive .s2.active,
	#hd #intuitive .s3.active,
	#hd #intuitive .s4.active,
	#hd #intuitive .s5.active,
	#hd #intuitive .s6.active,
	#hd #intuitive .s7.active{
		opacity: 1;
	}

	#hd #intuitive .s8r{
		position: absolute;
		right: 0;
		bottom: 0;
		opacity: 0;
		transform: translate(10%, 50%);
		width: 30%;
		transition: 1s;
		z-index: 1;
	}
	#hd #intuitive .s8r.active{
		opacity: 1;
		transform: translate(15%, 55%);
	}

	@media screen and (max-width: 1200px){
		#hd #intuitive .bgset{
			transform: translateX(-10%);
		}
	}
	@media screen and (max-width: 1023px){
		#hd #intuitive .textbox{
			width: 100%;
			padding-top: 40px;
			position: relative;
			top: 0;
			left: 0;
		}
		#hd #intuitive .text{
			width: 100%;
		}
		#hd #intuitive .bgset{
			width: 200%;
			min-width: auto;
		}
		#hd #intuitive .contor .item{
			margin: 5px;
			vertical-align: top;
		}
		#hd #intuitive .contor .item img{
			width: 90px;
			margin: auto;
		}
	}

	@keyframes op5-1{
		0%{opacity: .5;}
		10%{opacity: 1;}
		100%{opacity: .5;}
	}


/*------------ switch ----------*/
	#hd #switch{
		position: relative;
	}
	#hd #switch .text{
		width: 35%;
		position: absolute;
		top: 45%;
		right: 5%;
		transform: translateY(-50%);
		z-index: 1;
	}
	#hd #switch .bgset{
		position: relative;
	}
	#hd #switch .bgset img{
		width: 100%;
	}
	#hd #switch .bg2{
		position: absolute;
		top: 0;
		left: 0;
		animation: opc 2s infinite;
	}
	@keyframes opc{
		0%{
			opacity: 0;
		}
		50%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	@media screen and (max-width: 1023px) {
		#hd #switch .text{
			width: 90%;
			margin: auto;
			padding: 50px 0;
			position: relative;
			top: 0;
			right: 0;
			transform: none;
			display: block;
			z-index: 1;
		}
	}
	@media screen and (max-width: 768px){
		#hd #switch .bgset{
			width: 180%;
			transform: translateX(-10%);
		}
	}


/*------------ lag ----------*/
	#hd #lag {
		position: relative;
	}
	#hd #lag .text{
		width: 100%;
		position: absolute;
		top: 20%;
		right: 0%;
		transform: translateY(-50%);
		z-index: 1;
	}
	#hd #lag .bgset{
		position: relative;
	}
	#hd #lag .bgset img{
		width: 100%;
	}
	#hd #lag .bg{
		opacity: 0;
	}
	#hd #lag .bg.active{
		opacity: 1;
	}
	#hd #lag .bg2{
		position: absolute;
		top: 0;
		left: 0;
	}

	#hd #lag .contor {
		position: absolute;
		bottom: 12%;
		right: 15%;
		/* transform: translateY(-50%); */
	}
	#hd #lag .contor .item{
		margin: 20px;
		display: inline-block;
		cursor: pointer;
		opacity: .5;
		filter: grayscale(100%);
		transition: .3s;
	}
	#hd #lag .contor .item.active,
	#hd #lag .contor .item:hover{
		opacity: 1;
		filter: none;
	}
	#hd #lag .contor .item p{
		margin-top: 15px;
	}

	@media screen and (max-width: 1023px){
		#hd #lag .text{
			width: 100%;
			padding: 40px 0 0;
			position: relative;
			top: 0;
			right: 0%;
			transform: none;
		}
		#hd #lag .bgset{
			width: 175%;
			transform: translateX(-20%);
		}
		#hd #lag .contor {
			padding-top: 40px;
			position: relative;
			bottom: 0;
			right: 0;
		}
		#hd #lag .contor .item{
			vertical-align: top;
			margin: 5px;
		}
		#hd #lag .contor .item img{
			width: 80px;
			margin: auto;
		}
	}


/*------------ comfort ----------*/
	#hd #comfort{
		position: relative;
		overflow: hidden;
	}
	#hd #comfort .text{
		width: 100%;
		position: absolute;
		top: 45%;
		left: 0;
		transform: translateY(-50%);
		z-index: 1;
	}
	#hd #comfort .bgset{
		position: relative;
	}
	#hd #comfort .bgset img{
		width: 100%;
	}	

	#hd #comfort .s9l{
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		transform: translate(-25%, -30%);
		width: 30%;
		transition: 1s;
		z-index: 1;
	}
	#hd #comfort .s9l.active{
		opacity: 1;
		transform: translate(-30%, -35%);
	}

	@media screen and (max-width: 1023px){
		#hd #comfort .text{
			width: 100%;
			padding: 40px 0 0;
			position: relative;
			top: 0;
			left: 0;
			transform: none;
			z-index: 1;
		}
		#hd #comfort .text .col40{
			width: 100%;
		}
	}
	@media screen and (max-width: 768px){
		#hd #comfort .bgset{
			width: 200%;
			transform: translateX(-50%);
		}
	}


/*------------ videobox ----------*/
	#hd #videobox{
		width: 100%;
		min-height: 300px;
		padding-bottom: 30%;
		position: relative;
	}
	#hd #videobox .cover{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		/* opacity: .8; */
	}
	#hd #videobox .prev{
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translateY(-50%) rotate(180deg);
		z-index: 1;
	}
	#hd #videobox .next{
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		z-index: 1;
	}
	#hd #videobox .left{
		width: 50%;
		height: 100%;
		background-color: rgba(0,0,0,.3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		transition: .3s;
	}
	#hd #videobox .right{
		width: 50%;
		height: 100%;
		background-color: rgba(0,0,0,.3);
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		transition: .3s;
	}
	#hd #videobox .left:hover,
	#hd #videobox .right:hover{
		background-color: transparent;
	}
	#hd #videobox .block_rwd_cover{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		display: none;
	}
	#hd #videobox .play-btn{
		width: 150px;
		height: 150px;
		border: 2px solid #fff;
		border-radius: 220px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: .3s;
		z-index: 1;
		cursor: pointer;
	}
	#hd #videobox .play-btn:hover{
		transform: translate(-50%, -50%) scale(1.07);
	}
	#hd #videobox .play-btn h3{
		transform: skew(-5deg);
		margin-bottom: 0;
	}
	/* #hd #videobox .video_if_outer{
		width: 100%;
		max-width: 800px;
		margin: auto;
		position: relative;
	}
	#hd #videobox .video_if_outer .video_if_inner{
		width: 100%;
		padding-bottom: 56%;
		position: relative;
	}
	#hd #videobox .video_if_outer .video_if{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	} */
	@media screen and (max-width: 1023px){
		#hd #videobox .cover{
			background-attachment: scroll;
		}
		#hd #videobox .play-btn{
			width: 120px;
			height: 120px;
		}
	}
	@media screen and (max-width: 768px){
		#hd #videobox{
			width: 100%;
			min-height: auto;
			padding: 0;
		}
		#hd #videobox .cover{
			display: none;
		}
		#hd #videobox .left,
		#hd #videobox .right{
			width: 100%;
			height: 300px;
			position: relative;
		}
		#hd #videobox .block_rwd_cover{
			display: block;
			opacity: .8;
		}
	}


/*------------ 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 img{
		width: 100%;
	}
	#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;
	}
	#hd #armoury h2{
		display: inline-block;
	}


/*------------ FEATURE --------*/
	#hd #feature{
		padding:2% 0;
		background-position: 0 0;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
	}
	#hd #feature h3{
		font-family: 'fjallaone', sans-serif;
	}
	#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;
	}


/*------------ LIGHTING -------*/
#hd #lighting{
	padding: 50px 0;
	position: relative;
	text-align: center;
	background-color: #000;
}
#hd #lighting .bg1{
	width: 30%;
	position: absolute;
	left: 0;
	top: 0;
}
#hd #lighting .bg2{
	width: 30%;
	position: absolute;
	right: 0;
	bottom: 0;
}
#hd #lighting h2{
	display: inline-block;
	position: relative;
}
#hd #lighting h2 + p{
	max-width: 900px;
	margin:0 auto 10px;
}
#hd #lighting .hd-controls{
	max-width: 800px;
	margin:0 auto;
	position: relative;
	z-index: 6;
}
#hd #lighting .hd-controls li{
	display: inline-block;
	vertical-align: top;
	width: 10%;
	margin-left: -5px;
	opacity: .3;
	cursor: pointer;
	-webkit-transition: opacity .25s ease;
	   -moz-transition: opacity .25s ease;
		-ms-transition: opacity .25s ease;
		 -o-transition: opacity .25s ease;
			transition: opacity .25s ease;
}
#hd #lighting .hd-controls li:hover{opacity: .8; }
#hd #lighting .hd-controls li.hd-active{opacity: 1; }
#hd #lighting .hd-controls li img{margin:0 auto 5px;}
#hd #lighting .hd-controls li small{display: block; }

#hd #lighting .hd-lighting{
	width: 80%;
	max-width: 967px;
	margin: -2% auto 0;
	overflow: hidden;
	text-align: center;
	position: relative;
	z-index: 5;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#hd #lighting .hd-lighting::before{
	content: '';
	width: 20px;
	height: 100%;
	background-color: #0A0D15;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateX(10px);
}
#hd #lighting .hd-lighting::after{
	content: '';
	width: 20px;
	height: 100%;
	background-color: #0A0D15;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-10px);
}
#color,
#greybg{
	position: absolute;
	width: 100%;
	max-width: 960px;
	height: 100%;
	max-height: 91%;
	top:6%;
	left: 0;
	right: 0;
	margin:0 auto;
	z-index: -2;
}
#greybg {
	background-color: #4e4e4e;
	z-index: -3;
}
#color + img{
	width: 100%;
	margin:0 auto;
	opacity: 1;
}
#color.hd-hidden{opacity: 0;}
#color.hd-black{
	background-color: #141414 !important;
	z-index: -3;
}

#hd #lighting .decopic{
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: center;
}

#hd #lighting .high_heat{
	position: absolute;
	right: -1%;
	top: 67%;
	z-index: 6;
	/* margin-right: 0;
	margin-left: auto; */
	text-align: left;
	display: inline-block;
}
#hd #lighting .high_heat small{
	width: 150px;
	margin-top: 5px;
	display: block;
	text-align: left;
}
#hd .high_heat_bar.active{
	animation: high_heat_bar 7s infinite;
}
#hd #lighting .high_heat.hd-hidden{
	display: none;
}

#hd #lighting .high_point{
	position: absolute;
	right: 2%;
	top: 72%;
	z-index: 6;
	/* margin-right: 0;
	margin-left: auto; */
}
#hd .high_point_bar.active{
	animation: high_point_bar 8s infinite;
}
#hd #lighting .high_point.hd-hidden{
	display: none;
}

#colorpicker {
	display: block;
	width: 140px;
	position: absolute;
	bottom: 15%;
	right: -2%;
	z-index: 6;
}
#colorpicker canvas{top: 0;left: 0; }
/*-----keyboard-----*/
	#keyboard{
		position: absolute;
		width: 100%;
		max-width: 960px;
		height: 100%;
		max-height: 91%;
		overflow: hidden;
		top: 6%;
		left: 0;
		right: 0;
		margin:0 auto;
		z-index: -1;
		opacity: 0;
		pointer-events: none;
	}
	#keyboard.hd-active{
		opacity: 1;
		pointer-events: all;
	}
	#keyboard.hd-line,
	#keyboard.hd-custom{
		opacity: 1;
		pointer-events: none;
	}
	#keyboard.hd-custom li div{opacity: 1; }
	/*-----keyboard row-----*/
		#keyboard li{
			position: absolute;
			left: 1%;
			width: 100%;
			height: 0;
			padding-bottom: 4.2%;
		}
		#keyboard li:nth-child(1){
			/*background-color: #ff8f26;*/
			top:13%;
			padding-bottom: 4.5%;
		}
		#keyboard li:nth-child(2){
			/*background-color: #dcff1c;*/
			top:25%;
			padding-bottom: 4.5%;
		}
		#keyboard li:nth-child(3){
			/*background-color: #11c470;*/
			top:32.4%;
		}
		#keyboard li:nth-child(4){
			/*background-color: #1ccdff;*/
			top:40.7%;
		}
		#keyboard li:nth-child(5){
			/*background-color: #a74fff;*/
			top:49.1%;
		}
		#keyboard li:nth-child(6){
			/*background-color: #ffb7e2;*/
			padding-bottom: 5%;
			top:57.5%;
		}
	/*-----keyboard single-----*/
		#keyboard li div{
			background-color:#51d140;
			box-shadow: 0 0 5px 5px rgba(0,0,0,0);
			position: relative;
			padding-bottom:inherit;
			float:left;
			border-radius: 3px;
			width: 2.7%;
			margin-left: 0;
			opacity: 0;
			-webkit-transition: opacity 1.5s ease;
			   -moz-transition: opacity 1.5s ease;
				-ms-transition: opacity 1.5s ease;
				 -o-transition: opacity 1.5s ease;
					transition: opacity 1.5s ease;
		}
		#keyboard li div.hd-active{
			opacity: 1;
			-webkit-transition: opacity .1s ease;
			   -moz-transition: opacity .1s ease;
				-ms-transition: opacity .1s ease;
				 -o-transition: opacity .1s ease;
					transition: opacity .1s ease;
		}
		#keyboard li div:last-child:after{
			content:'';
			display: block;
			width: 0;
			height: 0;
			clear:both;
		}
		#keyboard li div:nth-child(1){margin-left: 3.65%; }
		/*-----row1-----*/
			#keyboard li:nth-child(1) div{width: 3.91%; }
			#keyboard li:nth-child(1) div:nth-child(1){width: 4.2%; }
			#keyboard li:nth-child(1) div:nth-child(2){margin-left: 4%; }
			/* #keyboard li:nth-child(1) div:nth-child(n+3){margin-left: -.5%; } */
			#keyboard li:nth-child(1) div:nth-child(6),
			#keyboard li:nth-child(1) div:nth-child(14){margin-left: 1.8%; }
			#keyboard li:nth-child(1) div:nth-child(10){margin-left: 1.9%; }
			#keyboard li:nth-child(1) div:nth-child(17){
				width: 13.5%;
				padding-bottom: 5%;
				margin-top: 0;
				margin-left: 4%;
				pointer-events: none !important;
			}
		/*-----row2-----*/
			#keyboard li:nth-child(2) div{width: 3.91%; }
			/* #keyboard li:nth-child(2) div:nth-child(1){width: 3.85%; } */
			#keyboard li:nth-child(2) div:nth-child(14){width: 8.5%; }
			#keyboard li:nth-child(2) div:nth-child(15){margin-left: 1%;}
			#keyboard li:nth-child(2) div:nth-child(18){margin-left: 1%;}
		/*-----row3-----*/
			#keyboard li:nth-child(3) div{width: 3.91%; }
			#keyboard li:nth-child(3) div:nth-child(1){width: 6.1%; }
			#keyboard li:nth-child(3) div:nth-child(14){width: 6.5%; }
			#keyboard li:nth-child(3) div:nth-child(15){margin-left: .9%;}
			#keyboard li:nth-child(3) div:nth-child(18){margin-left: 1.3%;}
			#keyboard li:nth-child(3) div:last-child{
				padding-top: 3.9%;
				z-index: 1;
			}
		/*-----row4-----*/
			#keyboard li:nth-child(4) div{width: 3.91%; }
			#keyboard li:nth-child(4) div:nth-child(1){width: 7.2%; }
			#keyboard li:nth-child(4) div:nth-child(13){width: 9.3%; }
			#keyboard li:nth-child(4) div:nth-child(14){margin-left: 15.3%; }
		/*-----row5-----*/
			#keyboard li:nth-child(5) div{width: 3.91%; }
			#keyboard li:nth-child(5) div:nth-child(1){width: 9%; }
			#keyboard li:nth-child(5) div:nth-child(12){width: 11%; }
			#keyboard li:nth-child(5) div:nth-child(13){margin-left: 5.4%;}
			#keyboard li:nth-child(5) div:nth-child(14){margin-left: 6.4%;}
			#keyboard li:nth-child(5) div:last-child{
				width: 4%;
				padding-top: 4%;
				z-index: 1;
			}
		/*-----row6-----*/
			#keyboard li:nth-child(6) div{width: 4.2%; }
			#keyboard li:nth-child(6) div:nth-child(1){width: 5%; }
			#keyboard li:nth-child(6) div:nth-child(3){width: 5%;}
			#keyboard li:nth-child(6) div:nth-child(4){width: 25.2%; }
			#keyboard li:nth-child(6) div:nth-child(5),
			#keyboard li:nth-child(6) div:nth-child(6),
			#keyboard li:nth-child(6) div:nth-child(7),
			#keyboard li:nth-child(6) div:nth-child(8){width: 5.1%;}
			#keyboard li:nth-child(6) div:nth-child(9){margin-left: 0.8%;}
			#keyboard li:nth-child(6) div:nth-child(12){
				width: 8.7%;
				margin-left: 1.2%;
			}
/*-----lighting starry-----*/
	#keyboard.hd-starry li:nth-child(1) div:nth-child(3){
		background-color: #ffaa00 !important;
		box-shadow: 0 0 5px 1px #ffaa00 !important;
		-webkit-animation: keyFadeIn 3s 1s infinite;
		-o-animation: keyFadeIn 3s 1s infinite;
		animation: keyFadeIn 3s 1s infinite;
	}
	#keyboard.hd-starry li:nth-child(2) div:nth-child(9){
		background-color: #ff0000 !important;
		box-shadow: 0 0 5px 1px #ff0000 !important;
		-webkit-animation: keyFadeIn 5s 1s infinite;
		-o-animation: keyFadeIn 5s 1s infinite;
		animation: keyFadeIn 5s 1s infinite;
	}
	#keyboard.hd-starry li:nth-child(3) div:nth-child(5){
		background-color: #e100ff !important;
		box-shadow: 0 0 5px 1px #e100ff !important;
		-webkit-animation: breathing 4s 2s infinite;
		-o-animation: breathing 4s 2s infinite;
		animation: breathing 4s 2s infinite;
	}
	#keyboard.hd-starry li:nth-child(4) div:nth-child(18){
		background-color: #cc0033 !important;
		box-shadow: 0 0 5px 1px #cc0033 !important;
		-webkit-animation: showroutine 2s 2s infinite;
		-o-animation: showroutine 2s 2s infinite;
		animation: showroutine 2s 2s infinite;
	}
	#keyboard.hd-starry li:nth-child(5) div:nth-child(10){
		background-color: #0093ff !important;
		box-shadow: 0 0 5px 1px #0093ff !important;
		-webkit-animation: showroutine 5s infinite;
		-o-animation: showroutine 5s infinite;
		animation: showroutine 5s infinite;
	}
	#keyboard.hd-starry li:nth-child(6) div:nth-child(2){
		background-color: #0034d2 !important;
		box-shadow: 0 0 5px 1px #0034d2 !important;
		-webkit-animation: showroutine 5s infinite;
		-o-animation: showroutine 5s infinite;
		animation: showroutine 5s infinite;
	}
	#keyboard.hd-starry li:nth-child(6) div:nth-child(13){
		background-color: #b0ff00 !important;
		box-shadow: 0 0 5px 1px #b0ff00 !important;
		-webkit-animation: showroutine 4s 1s infinite;
		-o-animation: showroutine 4s 1s infinite;
		animation: showroutine 4s 1s infinite;
	}
/*-----lighting quicksand-----*/
	.hd-quicksand{
		position: relative;
		opacity: 1;
		background-color: transparent!important;
		background-image: url(../img/lighting-quicksand.png);
		background-position-x: center;
		background-size: 100%;
		background-repeat: repeat-y;
	}
/*-----lighting current-----*/
	#keyboard.hd-current li:nth-child(1) div:nth-child(3),
	#keyboard.hd-current li:nth-child(1) div:nth-child(4),
	#keyboard.hd-current li:nth-child(1) div:nth-child(5),
	#keyboard.hd-current li:nth-child(1) div:nth-child(6){
		background-color: #ffaa00 !important;
		box-shadow: 0 0 5px 1px #ffaa00 !important;
		-webkit-animation: keyFadeIn 3s 1s infinite;
		-o-animation: keyFadeIn 3s 1s infinite;
		animation: keyFadeIn 3s 1s infinite;
	}
		#keyboard.hd-current li:nth-child(1) div:nth-child(4){
		-webkit-animation: keyFadeIn 3s 1.1s infinite;
		-o-animation: keyFadeIn 3s 1.1s infinite;
		animation: keyFadeIn 3s 1.1s infinite;
		}
		#keyboard.hd-current li:nth-child(1) div:nth-child(5){
		-webkit-animation: keyFadeIn 3s 1.2s infinite;
		-o-animation: keyFadeIn 3s 1.2s infinite;
		animation: keyFadeIn 3s 1.2s infinite;
		}
		#keyboard.hd-current li:nth-child(1) div:nth-child(6){
		-webkit-animation: keyFadeIn 3s 1.3s infinite;
		-o-animation: keyFadeIn 3s 1.3s infinite;
		animation: keyFadeIn 3s 1.3s infinite;
		}
	#keyboard.hd-current li:nth-child(2) div:nth-child(12),
	#keyboard.hd-current li:nth-child(2) div:nth-child(13),
	#keyboard.hd-current li:nth-child(2) div:nth-child(14),
	#keyboard.hd-current li:nth-child(2) div:nth-child(15){
		background-color: #ff0000 !important;
		box-shadow: 0 0 5px 1px #ff0000 !important;
		-webkit-animation: keyFadeIn 5s 1s infinite;
		-o-animation: keyFadeIn 5s 1s infinite;
		animation: keyFadeIn 5s 1s infinite;
	}
		#keyboard.hd-current li:nth-child(2) div:nth-child(13){
		-webkit-animation: keyFadeIn 5s 1.1s infinite;
		-o-animation: keyFadeIn 5s 1.1s infinite;
		animation: keyFadeIn 5s 1.1s infinite;
		}
		#keyboard.hd-current li:nth-child(2) div:nth-child(14){
		-webkit-animation: keyFadeIn 5s 1.2s infinite;
		-o-animation: keyFadeIn 5s 1.2s infinite;
		animation: keyFadeIn 5s 1.2s infinite;
		}
		#keyboard.hd-current li:nth-child(2) div:nth-child(15){
		-webkit-animation: keyFadeIn 5s 1.3s infinite;
		-o-animation: keyFadeIn 5s 1.3s infinite;
		animation: keyFadeIn 5s 1.3s infinite;
		}
	#keyboard.hd-current li:nth-child(3) div:nth-child(8),
	#keyboard.hd-current li:nth-child(3) div:nth-child(7),
	#keyboard.hd-current li:nth-child(3) div:nth-child(6),
	#keyboard.hd-current li:nth-child(3) div:nth-child(5){
		background-color: #e100ff !important;
		box-shadow: 0 0 5px 1px #e100ff !important;
		-webkit-animation: breathing 4s 2s infinite;
		-o-animation: breathing 4s 2s infinite;
		animation: breathing 4s 2s infinite;
	}
		#keyboard.hd-current li:nth-child(3) div:nth-child(7){
		-webkit-animation: breathing 4s 2.1s infinite;
		-o-animation: breathing 4s 2.1s infinite;
		animation: breathing 4s 2.1s infinite;
		}
		#keyboard.hd-current li:nth-child(3) div:nth-child(6){
		-webkit-animation: breathing 4s 2.2s infinite;
		-o-animation: breathing 4s 2.2s infinite;
		animation: breathing 4s 2.2s infinite;
		}
		#keyboard.hd-current li:nth-child(3) div:nth-child(5){
		-webkit-animation: breathing 4s 2.3s infinite;
		-o-animation: breathing 4s 2.3s infinite;
		animation: breathing 4s 2.3s infinite;
		}
	#keyboard.hd-current li:nth-child(4) div:nth-child(2),
	#keyboard.hd-current li:nth-child(4) div:nth-child(3),
	#keyboard.hd-current li:nth-child(4) div:nth-child(4),
	#keyboard.hd-current li:nth-child(4) div:nth-child(5){
		background-color: #ccff00 !important;
		box-shadow: 0 0 5px 1px #ccff00 !important;
		-webkit-animation: showroutine 5s 2s infinite;
		-o-animation: showroutine 5s 2s infinite;
		animation: showroutine 5s 2s infinite;
	}
		#keyboard.hd-current li:nth-child(4) div:nth-child(3){
		-webkit-animation: showroutine 5s 2.1s infinite;
		-o-animation: showroutine 5s 2.1s infinite;
		animation: showroutine 5s 2.1s infinite;
		}
		#keyboard.hd-current li:nth-child(4) div:nth-child(4){
		-webkit-animation: showroutine 5s 2.2s infinite;
		-o-animation: showroutine 5s 2.2s infinite;
		animation: showroutine 5s 2.2s infinite;
		}
		#keyboard.hd-current li:nth-child(4) div:nth-child(5){
		-webkit-animation: showroutine 5s 2.3s infinite;
		-o-animation: showroutine 5s 2.3s infinite;
		animation: showroutine 5s 2.3s infinite;
		}
	#keyboard.hd-current li:nth-child(5) div:nth-child(10),
	#keyboard.hd-current li:nth-child(5) div:nth-child(9),
	#keyboard.hd-current li:nth-child(5) div:nth-child(8),
	#keyboard.hd-current li:nth-child(5) div:nth-child(7){
		background-color: #0093ff !important;
		box-shadow: 0 0 5px 1px #0093ff !important;
		-webkit-animation: showroutine 5s infinite;
		-o-animation: showroutine 5s infinite;
		animation: showroutine 5s infinite;
	}
		#keyboard.hd-current li:nth-child(5) div:nth-child(9){
		-webkit-animation: showroutine 5s .1s infinite;
		-o-animation: showroutine 5s .1s infinite;
		animation: showroutine 5s .1s infinite;
		}
		#keyboard.hd-current li:nth-child(5) div:nth-child(8){
		-webkit-animation: showroutine 5s .2s infinite;
		-o-animation: showroutine 5s .2s infinite;
		animation: showroutine 5s .2s infinite;
		}
		#keyboard.hd-current li:nth-child(5) div:nth-child(7){
		-webkit-animation: showroutine 5s .3s infinite;
		-o-animation: showroutine 5s .3s infinite;
		animation: showroutine 5s .3s infinite;
		}
	#keyboard.hd-current li:nth-child(6) div:nth-child(5),
	#keyboard.hd-current li:nth-child(6) div:nth-child(6),
	#keyboard.hd-current li:nth-child(6) div:nth-child(7),
	#keyboard.hd-current li:nth-child(6) div:nth-child(8){
		background-color: #0034d2 !important;
		box-shadow: 0 0 5px 1px #0034d2 !important;
		-webkit-animation: showroutine 5s infinite;
		-o-animation: showroutine 5s infinite;
		animation: showroutine 5s infinite;
	}
		#keyboard.hd-current li:nth-child(6) div:nth-child(6){
		-webkit-animation: showroutine 5s .1s infinite;
		-o-animation: showroutine 5s .1s infinite;
		animation: showroutine 5s .1s infinite;
		}
		#keyboard.hd-current li:nth-child(6) div:nth-child(7){
		-webkit-animation: showroutine 5s .2s infinite;
		-o-animation: showroutine 5s .2s infinite;
		animation: showroutine 5s .2s infinite;
		}
		#keyboard.hd-current li:nth-child(6) div:nth-child(8){
		-webkit-animation: showroutine 5s .3s infinite;
		-o-animation: showroutine 5s .3s infinite;
		animation: showroutine 5s .3s infinite;
		}
	#keyboard.hd-current li:nth-child(6) div:nth-child(10),
	#keyboard.hd-current li:nth-child(6) div:nth-child(11),
	#keyboard.hd-current li:nth-child(6) div:nth-child(12),
	#keyboard.hd-current li:nth-child(6) div:nth-child(13){
		background-color: #b0ff00 !important;
		box-shadow: 0 0 5px 1px #b0ff00 !important;
		-webkit-animation: showroutine 4s 1s infinite;
		-o-animation: showroutine 4s 1s infinite;
		animation: showroutine 4s 1s infinite;
	}
		#keyboard.hd-current li:nth-child(6) div:nth-child(11){
			-webkit-animation: showroutine 4s 1.1s infinite;
			-o-animation: showroutine 4s 1.1s infinite;
			animation: showroutine 4s 1.1s infinite;
		}
		#keyboard.hd-current li:nth-child(6) div:nth-child(12){
			-webkit-animation: showroutine 4s 1.2s infinite;
			-o-animation: showroutine 4s 1.2s infinite;
			animation: showroutine 4s 1.2s infinite;
		}
		#keyboard.hd-current li:nth-child(6) div:nth-child(13){
			-webkit-animation: showroutine 4s 1.3s infinite;
			-o-animation: showroutine 4s 1.3s infinite;
			animation: showroutine 4s 1.3s infinite;
		}
/*-----lighting rain-----*/
	#keyboard.hd-rain li div:nth-child(1){
		background-color: #ffaa00 !important;
		box-shadow: 0 0 5px 1px #ffaa00 !important;
		-webkit-animation: keyFadeIn 5s 1s infinite;
		-o-animation: keyFadeIn 5s 1s infinite;
		animation: keyFadeIn 5s 1s infinite;
	}
		#keyboard.hd-rain li:nth-child(2) div:nth-child(1){
			-webkit-animation: keyFadeIn 5s 1.1s infinite;
			-o-animation: keyFadeIn 5s 1.1s infinite;
			animation: keyFadeIn 5s 1.1s infinite;
		}
		#keyboard.hd-rain li:nth-child(3) div:nth-child(1){
			-webkit-animation: keyFadeIn 5s 1.2s infinite;
			-o-animation: keyFadeIn 5s 1.2s infinite;
			animation: keyFadeIn 5s 1.2s infinite;
		}
		#keyboard.hd-rain li:nth-child(4) div:nth-child(1){
			-webkit-animation: keyFadeIn 5s 1.3s infinite;
			-o-animation: keyFadeIn 5s 1.3s infinite;
			animation: keyFadeIn 5s 1.3s infinite;
		}
		#keyboard.hd-rain li:nth-child(5) div:nth-child(1){
			-webkit-animation: keyFadeIn 5s 1.4s infinite;
			-o-animation: keyFadeIn 5s 1.4s infinite;
			animation: keyFadeIn 5s 1.4s infinite;
		}
		#keyboard.hd-rain li:nth-child(6) div:nth-child(1){
			-webkit-animation: keyFadeIn 5s 1.5s infinite;
			-o-animation: keyFadeIn 5s 1.5s infinite;
			animation: keyFadeIn 5s 1.5s infinite;
		}
		/* left light */
		/* #keyboard.hd-rain:before{
			content:'';
			display: block;
			width: 10%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #ffaa00;
			opacity: 0;
			-webkit-animation: keyFadeIn 5s 1s infinite;
			-o-animation: keyFadeIn 5s 1s infinite;
			animation: keyFadeIn 5s 1s infinite;
		} */
	#keyboard.hd-rain li:nth-child(1) div:nth-child(9),
	#keyboard.hd-rain li:nth-child(2) div:nth-child(11),
	#keyboard.hd-rain li:nth-child(3) div:nth-child(11),
	#keyboard.hd-rain li:nth-child(4) div:nth-child(11),
	#keyboard.hd-rain li:nth-child(5) div:nth-child(10),
	#keyboard.hd-rain li:nth-child(6) div:nth-child(5){
		background-color: #b0ff00 !important;
		box-shadow: 0 0 5px 1px #b0ff00 !important;
		-webkit-animation: keyFadeIn 5s 1s infinite;
		-o-animation: keyFadeIn 5s 1s infinite;
		animation: keyFadeIn 5s 1s infinite;
	}
		#keyboard.hd-rain li:nth-child(2) div:nth-child(11){
			-webkit-animation: keyFadeIn 5s 1.1s infinite;
			-o-animation: keyFadeIn 5s 1.1s infinite;
			animation: keyFadeIn 5s 1.1s infinite;
		}
		#keyboard.hd-rain li:nth-child(3) div:nth-child(11){
			-webkit-animation: keyFadeIn 5s 1.2s infinite;
			-o-animation: keyFadeIn 5s 1.2s infinite;
			animation: keyFadeIn 5s 1.2s infinite;
		}
		#keyboard.hd-rain li:nth-child(4) div:nth-child(11){
			-webkit-animation: keyFadeIn 5s 1.3s infinite;
			-o-animation: keyFadeIn 5s 1.3s infinite;
			animation: keyFadeIn 5s 1.3s infinite;
		}
		#keyboard.hd-rain li:nth-child(5) div:nth-child(10){
			-webkit-animation: keyFadeIn 5s 1.4s infinite;
			-o-animation: keyFadeIn 5s 1.4s infinite;
			animation: keyFadeIn 5s 1.4s infinite;
		}
		#keyboard.hd-rain li:nth-child(6) div:nth-child(5){
			-webkit-animation: keyFadeIn 5s 1.5s infinite;
			-o-animation: keyFadeIn 5s 1.5s infinite;
			animation: keyFadeIn 5s 1.5s infinite;
		}
	#keyboard.hd-rain li:nth-child(1) div:nth-child(2),
	#keyboard.hd-rain li:nth-child(2) div:nth-child(3),
	#keyboard.hd-rain li:nth-child(3) div:nth-child(3),
	#keyboard.hd-rain li:nth-child(4) div:nth-child(3),
	#keyboard.hd-rain li:nth-child(5) div:nth-child(2),
	#keyboard.hd-rain li:nth-child(6) div:nth-child(3){
		background-color: #e100ff !important;
		box-shadow: 0 0 5px 1px #e100ff !important;
		-webkit-animation: breathing 4s 2s infinite;
		-o-animation: breathing 4s 2s infinite;
		animation: breathing 4s 2s infinite;
	}
		#keyboard.hd-rain li:nth-child(2) div:nth-child(3){
			-webkit-animation: breathing 4s 2.1s infinite;
			-o-animation: breathing 4s 2.1s infinite;
			animation: breathing 4s 2.1s infinite;
		}
		#keyboard.hd-rain li:nth-child(3) div:nth-child(3){
			-webkit-animation: breathing 4s 2.2s infinite;
			-o-animation: breathing 4s 2.2s infinite;
			animation: breathing 4s 2.2s infinite;
		}
		#keyboard.hd-rain li:nth-child(4) div:nth-child(3){
			-webkit-animation: breathing 4s 2.3s infinite;
			-o-animation: breathing 4s 2.3s infinite;
			animation: breathing 4s 2.3s infinite;
		}
		#keyboard.hd-rain li:nth-child(5) div:nth-child(2){
			-webkit-animation: breathing 4s 2.4s infinite;
			-o-animation: breathing 4s 2.4s infinite;
			animation: breathing 4s 2.4s infinite;
		}
		#keyboard.hd-rain li:nth-child(6) div:nth-child(3){
			-webkit-animation: breathing 4s 2.5s infinite;
			-o-animation: breathing 4s 2.5s infinite;
			animation: breathing 4s 2.5s infinite;
		}
	#keyboard.hd-rain li:nth-child(1) div:nth-child(14),
	#keyboard.hd-rain li:nth-child(2) div:nth-child(15),
	#keyboard.hd-rain li:nth-child(3) div:nth-child(15),
	#keyboard.hd-rain li:nth-child(6) div:nth-child(9){
		background-color: #cc0033 !important;
		box-shadow: 0 0 5px 1px #cc0033 !important;
		-webkit-animation: showroutine 2s 2s infinite;
		-o-animation: showroutine 2s 2s infinite;
		animation: showroutine 2s 2s infinite;
	}
		#keyboard.hd-rain li:nth-child(2) div:nth-child(15){
			-webkit-animation: showroutine 2s 2.1s infinite;
			-o-animation: showroutine 2s 2.1s infinite;
			animation: showroutine 2s 2.1s infinite;
		}
		#keyboard.hd-rain li:nth-child(3) div:nth-child(15){
			-webkit-animation: showroutine 2s 2.2s infinite;
			-o-animation: showroutine 2s 2.2s infinite;
			animation: showroutine 2s 2.2s infinite;
		}
		#keyboard.hd-rain li:nth-child(6) div:nth-child(9){
			-webkit-animation: showroutine 2s 2.4s infinite;
			-o-animation: showroutine 2s 2.4s infinite;
			animation: showroutine 2s 2.4s infinite;
		}
	#keyboard.hd-rain li:nth-child(2) div:nth-child(21),
	#keyboard.hd-rain li:nth-child(3) div:nth-child(21),
	#keyboard.hd-rain li:nth-child(4) div:nth-child(17),
	#keyboard.hd-rain li:nth-child(5) div:nth-child(17){
		background-color: #0093ff !important;
		box-shadow: 0 0 5px 1px #0093ff !important;
		-webkit-animation: showroutine 5s infinite;
		-o-animation: showroutine 5s infinite;
		animation: showroutine 5s infinite;
	}
		#keyboard.hd-rain li:nth-child(3) div:nth-child(21){
			-webkit-animation: showroutine 5s .1s infinite;
			-o-animation: showroutine 5s .1s infinite;
			animation: showroutine 5s .1s infinite;
		}
		#keyboard.hd-rain li:nth-child(4) div:nth-child(17){
			-webkit-animation: showroutine 5s .2s infinite;
			-o-animation: showroutine 5s .2s infinite;
			animation: showroutine 5s .2s infinite;
		}
		#keyboard.hd-rain li:nth-child(5) div:nth-child(17){
			-webkit-animation: showroutine 5s .3s infinite;
			-o-animation: showroutine 5s .3s infinite;
			animation: showroutine 5s .3s infinite;
		}
		/* right light */
		/* #keyboard.hd-rain:after{
			content:'';
			display: block;
			width: 10%;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			background-color: #0093ff;
			opacity: 0;
			-webkit-animation: showroutine 5s infinite;
			-o-animation: showroutine 5s infinite;
			animation: showroutine 5s infinite;
		} */

/*-----lighting music-----*/
	/* #keyboard.hd-music li:nth-child(1) div:nth-child(3),
	#keyboard.hd-music li:nth-child(1) div:nth-child(4),
	#keyboard.hd-music li:nth-child(1) div:nth-child(5),
	#keyboard.hd-music li:nth-child(1) div:nth-child(6){
		background-color: #ffaa00 !important;
		box-shadow: 0 0 5px 1px #ffaa00 !important;
		-webkit-animation: keyFadeIn 3s 1s infinite;
		-o-animation: keyFadeIn 3s 1s infinite;
		animation: keyFadeIn 3s 1s infinite;
	}
		#keyboard.hd-music li:nth-child(1) div:nth-child(4){
		-webkit-animation: keyFadeIn 3s 1.1s infinite;
		-o-animation: keyFadeIn 3s 1.1s infinite;
		animation: keyFadeIn 3s 1.1s infinite;
		}
		#keyboard.hd-music li:nth-child(1) div:nth-child(5){
		-webkit-animation: keyFadeIn 3s 1.2s infinite;
		-o-animation: keyFadeIn 3s 1.2s infinite;
		animation: keyFadeIn 3s 1.2s infinite;
		}
		#keyboard.hd-music li:nth-child(1) div:nth-child(6){
		-webkit-animation: keyFadeIn 3s 1.3s infinite;
		-o-animation: keyFadeIn 3s 1.3s infinite;
		animation: keyFadeIn 3s 1.3s infinite;
		}
	#keyboard.hd-music li:nth-child(2) div:nth-child(12),
	#keyboard.hd-music li:nth-child(2) div:nth-child(13),
	#keyboard.hd-music li:nth-child(2) div:nth-child(14),
	#keyboard.hd-music li:nth-child(2) div:nth-child(15){
		background-color: #ff0000 !important;
		box-shadow: 0 0 5px 1px #ff0000 !important;
		-webkit-animation: keyFadeIn 5s 1s infinite;
		-o-animation: keyFadeIn 5s 1s infinite;
		animation: keyFadeIn 5s 1s infinite;
	}
		#keyboard.hd-music li:nth-child(2) div:nth-child(13){
		-webkit-animation: keyFadeIn 5s 1.1s infinite;
		-o-animation: keyFadeIn 5s 1.1s infinite;
		animation: keyFadeIn 5s 1.1s infinite;
		}
		#keyboard.hd-music li:nth-child(2) div:nth-child(14){
		-webkit-animation: keyFadeIn 5s 1.2s infinite;
		-o-animation: keyFadeIn 5s 1.2s infinite;
		animation: keyFadeIn 5s 1.2s infinite;
		}
		#keyboard.hd-music li:nth-child(2) div:nth-child(15){
		-webkit-animation: keyFadeIn 5s 1.3s infinite;
		-o-animation: keyFadeIn 5s 1.3s infinite;
		animation: keyFadeIn 5s 1.3s infinite;
		}
	#keyboard.hd-music li:nth-child(3) div:nth-child(8),
	#keyboard.hd-music li:nth-child(3) div:nth-child(7),
	#keyboard.hd-music li:nth-child(3) div:nth-child(6),
	#keyboard.hd-music li:nth-child(3) div:nth-child(5){
		background-color: #e100ff !important;
		box-shadow: 0 0 5px 1px #e100ff !important;
		-webkit-animation: breathing 4s 2s infinite;
		-o-animation: breathing 4s 2s infinite;
		animation: breathing 4s 2s infinite;
	}
		#keyboard.hd-music li:nth-child(3) div:nth-child(7){
		-webkit-animation: breathing 4s 2.1s infinite;
		-o-animation: breathing 4s 2.1s infinite;
		animation: breathing 4s 2.1s infinite;
		}
		#keyboard.hd-music li:nth-child(3) div:nth-child(6){
		-webkit-animation: breathing 4s 2.2s infinite;
		-o-animation: breathing 4s 2.2s infinite;
		animation: breathing 4s 2.2s infinite;
		}
		#keyboard.hd-music li:nth-child(3) div:nth-child(5){
		-webkit-animation: breathing 4s 2.3s infinite;
		-o-animation: breathing 4s 2.3s infinite;
		animation: breathing 4s 2.3s infinite;
		} */
	
	#keyboard.hd-music li:nth-child(1) div:nth-child(9){
		-webkit-animation: music_fif 2s .9s infinite;
		-o-animation: music_fif 2s .9s infinite;
		animation: music_fif 2s .9s infinite;
		filter: hue-rotate(-80deg);
	}
/* 第2排 */
	#keyboard.hd-music li:nth-child(2) div:nth-child(5){
		-webkit-animation: music_fou 2s .4s infinite;
		-o-animation: music_fou 2s .4s infinite;
		animation: music_fou 2s .4s infinite;
	}
	#keyboard.hd-music li:nth-child(2) div:nth-child(10){
		-webkit-animation: music_fou 2s .9s infinite;
		-o-animation: music_fou 2s .9s infinite;
		animation: music_fou 2s .9s infinite;
		filter: hue-rotate(-90deg) brightness(150%);
	}
	#keyboard.hd-music li:nth-child(2) div:nth-child(11){
		-webkit-animation: music_fou 2s 1s infinite;
		-o-animation: music_fou 2s 1s infinite;
		animation: music_fou 2s 1s infinite;
		filter: hue-rotate(-100deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(2) div:nth-child(16){
		-webkit-animation: music_fou 2s 1.6s infinite;
		-o-animation: music_fou 2s 1.6s infinite;
		animation: music_fou 2s 1.6s infinite;
		filter: hue-rotate(-150deg) brightness(200%);
	}
/* 第3排 */
	#keyboard.hd-music li:nth-child(3) div:nth-child(1){
		-webkit-animation: music_fou 2s .1s infinite;
		-o-animation: music_fou 2s .1s infinite;
		animation: music_fou 2s .1s infinite;
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(4){
		-webkit-animation: music_fou 2s .3s infinite;
		-o-animation: music_fou 2s .3s infinite;
		animation: music_fou 2s .3s infinite;
		filter: hue-rotate(-30deg);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(5){
		-webkit-animation: music_fou 2s .5s infinite;
		-o-animation: music_fou 2s .5s infinite;
		animation: music_fou 2s .5s infinite;
		filter: hue-rotate(-30deg);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(9){
		-webkit-animation: music_fou 2s .8s infinite;
		-o-animation: music_fou 2s .8s infinite;
		animation: music_fou 2s .8s infinite;
		filter: hue-rotate(-80deg);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(10){
		-webkit-animation: music_fou 2s .9s infinite;
		-o-animation: music_fou 2s .9s infinite;
		animation: music_fou 2s .9s infinite;
		filter: hue-rotate(-90deg) brightness(150%);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(11){
		-webkit-animation: music_fou 2s 1s infinite;
		-o-animation: music_fou 2s 1s infinite;
		animation: music_fou 2s 1s infinite;
		filter: hue-rotate(-100deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(14){
		-webkit-animation: music_fou 2s 1.3s infinite;
		-o-animation: music_fou 2s 1.3s infinite;
		animation: music_fou 2s 1.3s infinite;
		filter: hue-rotate(-130deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(15){
		-webkit-animation: music_fou 2s 1.4s infinite;
		-o-animation: music_fou 2s 1.4s infinite;
		animation: music_fou 2s 1.4s infinite;
		filter: hue-rotate(-140deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(16){
		-webkit-animation: music_fou 2s 1.5s infinite;
		-o-animation: music_fou 2s 1.5s infinite;
		animation: music_fou 2s 1.5s infinite;
		filter: hue-rotate(-150deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(3) div:nth-child(17){
		-webkit-animation: music_fou 2s 1.6s infinite;
		-o-animation: music_fou 2s 1.6s infinite;
		animation: music_fou 2s 1.6s infinite;
		filter: hue-rotate(-160deg) brightness(200%);
	}

/* 第4排 */
	#keyboard.hd-music li:nth-child(4) div:nth-child(1){
		-webkit-animation: music_tri 2s .1s infinite;
		-o-animation: music_tri 2s .1s infinite;
		animation: music_tri 2s .1s infinite;
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(3){
		-webkit-animation: music_tri 2s .2s infinite;
		-o-animation: music_tri 2s .2s infinite;
		animation: music_tri 2s .2s infinite;
		filter: hue-rotate(-20deg);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(4){
		-webkit-animation: music_tri 2s .3s infinite;
		-o-animation: music_tri 2s .3s infinite;
		animation: music_tri 2s .3s infinite;
		filter: hue-rotate(-30deg);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(5){
		-webkit-animation: music_tri 2s .4s infinite;
		-o-animation: music_tri 2s .4s infinite;
		animation: music_tri 2s .4s infinite;
		filter: hue-rotate(-40deg);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(7){
		-webkit-animation: music_tri 2s .6s infinite;
		-o-animation: music_tri 2s .6s infinite;
		animation: music_tri 2s .6s infinite;
		filter: hue-rotate(-60deg);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(8){
		-webkit-animation: music_tri 2s .7s infinite;
		-o-animation: music_tri 2s .7s infinite;
		animation: music_tri 2s .7s infinite;
		filter: hue-rotate(-70deg);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(9){
		-webkit-animation: music_tri 2s .8s infinite;
		-o-animation: music_tri 2s .8s infinite;
		animation: music_tri 2s .8s infinite;
		filter: hue-rotate(-80deg) brightness(150%);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(10){
		-webkit-animation: music_tri 2s .9s infinite;
		-o-animation: music_tri 2s .9s infinite;
		animation: music_tri 2s .9s infinite;
		filter: hue-rotate(-90deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(11){
		-webkit-animation: music_tri 2s 1s infinite;
		-o-animation: music_tri 2s 1s infinite;
		animation: music_tri 2s 1s infinite;
		filter: hue-rotate(-100deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(12){
		-webkit-animation: music_tri 2s 1.1s infinite;
		-o-animation: music_tri 2s 1.1s infinite;
		animation: music_tri 2s 1.1s infinite;
		filter: hue-rotate(-110deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(13){
		-webkit-animation: music_tri 2s 1.2s infinite;
		-o-animation: music_tri 2s 1.2s infinite;
		animation: music_tri 2s 1.2s infinite;
		filter: hue-rotate(-120deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(4) div:nth-child(14){
		-webkit-animation: music_tri 2s 1.3s infinite;
		-o-animation: music_tri 2s 1.3s infinite;
		animation: music_tri 2s 1.3s infinite;
		filter: hue-rotate(-130deg) brightness(200%);
	}

/* 第5排 */
	#keyboard.hd-music li:nth-child(5) div:nth-child(1){
		-webkit-animation: music_sec 2s .1s infinite;
		-o-animation: music_sec 2s .1s infinite;
		animation: music_sec 2s .1s infinite;
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(2){
		-webkit-animation: music_sec 2s .1s infinite;
		-o-animation: music_sec 2s .1s infinite;
		animation: music_sec 2s .1s infinite;
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(3){
		-webkit-animation: music_sec 2s .2s infinite;
		-o-animation: music_sec 2s .2s infinite;
		animation: music_sec 2s .2s infinite;
		filter: hue-rotate(-20deg);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(4){
		-webkit-animation: music_sec 2s .3s infinite;
		-o-animation: music_sec 2s .3s infinite;
		animation: music_sec 2s .3s infinite;
		filter: hue-rotate(-30deg);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(5){
		-webkit-animation: music_sec 2s .4s infinite;
		-o-animation: music_sec 2s .4s infinite;
		animation: music_sec 2s .4s infinite;
		filter: hue-rotate(-40deg);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(6){
		-webkit-animation: music_sec 2s .5s infinite;
		-o-animation: music_sec 2s .5s infinite;
		animation: music_sec 2s .5s infinite;
		filter: hue-rotate(-50deg);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(7){
		-webkit-animation: music_sec 2s .6s infinite;
		-o-animation: music_sec 2s .6s infinite;
		animation: music_sec 2s .6s infinite;
		filter: hue-rotate(-60deg);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(8){
		-webkit-animation: music_sec 2s .7s infinite;
		-o-animation: music_sec 2s .7s infinite;
		animation: music_sec 2s .7s infinite;
		filter: hue-rotate(-70deg);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(9){
		-webkit-animation: music_sec 2s .8s infinite;
		-o-animation: music_sec 2s .8s infinite;
		animation: music_sec 2s .8s infinite;
		filter: hue-rotate(-80deg);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(10){
		-webkit-animation: music_sec 2s .9s infinite;
		-o-animation: music_sec 2s .9s infinite;
		animation: music_sec 2s .9s infinite;
		filter: hue-rotate(-90deg) brightness(150%);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(11){
		-webkit-animation: music_sec 2s 1s infinite;
		-o-animation: music_sec 2s 1s infinite;
		animation: music_sec 2s 1s infinite;
		filter: hue-rotate(-100deg) brightness(150%);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(12){
		-webkit-animation: music_sec 2s 1.1s infinite;
		-o-animation: music_sec 2s 1.1s infinite;
		animation: music_sec 2s 1.1s infinite;
		filter: hue-rotate(-110deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(13){
		-webkit-animation: music_sec 2s 1.2s infinite;
		-o-animation: music_sec 2s 1.2s infinite;
		animation: music_sec 2s 1.2s infinite;
		filter: hue-rotate(-120deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(14){
		-webkit-animation: music_sec 2s 1.3s infinite;
		-o-animation: music_sec 2s 1.3s infinite;
		animation: music_sec 2s 1.3s infinite;
		filter: hue-rotate(-130deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(15){
		-webkit-animation: music_sec 2s 1.4s infinite;
		-o-animation: music_sec 2s 1.4s infinite;
		animation: music_sec 2s 1.4s infinite;
		filter: hue-rotate(-140deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(16){
		-webkit-animation: music_sec 2s 1.5s infinite;
		-o-animation: music_sec 2s 1.5s infinite;
		animation: music_sec 2s 1.5s infinite;
		filter: hue-rotate(-150deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(5) div:nth-child(17){
		-webkit-animation: music_sec 2s 1.6s infinite;
		-o-animation: music_sec 2s 1.6s infinite;
		animation: music_sec 2s 1.6s infinite;
		filter: hue-rotate(-160deg) brightness(200%);
	}

/* 第6排 */
	#keyboard.hd-music li:nth-child(6) div:nth-child(1){
		-webkit-animation: music_base 2s infinite;
		-o-animation: music_base 2s infinite;
		animation: music_base 2s infinite;
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(2){
		-webkit-animation: music_base 2s .1s infinite;
		-o-animation: music_base 2s .1s infinite;
		animation: music_base 2s .1s infinite;
		filter: hue-rotate(-10deg);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(3){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-20deg);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(4){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-45deg);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(5){
		-webkit-animation: music_base 2s 1s infinite;
		-o-animation: music_base 2s 1s infinite;
		animation: music_base 2s 1s infinite;
		filter: hue-rotate(-85deg) brightness(150%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(6){
		-webkit-animation: music_base 2s 1.5s infinite;
		-o-animation: music_base 2s 1.5s infinite;
		animation: music_base 2s 1.5s infinite;
		filter: hue-rotate(-95deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(7){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-105deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(8){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-115deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(9){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-125deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(10){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-135deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(11){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-145deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(12){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-155deg) brightness(200%);
	}
	#keyboard.hd-music li:nth-child(6) div:nth-child(13){
		-webkit-animation: music_base 8s infinite;
		-o-animation: music_base 8s infinite;
		animation: music_base 8s infinite;
		filter: hue-rotate(-165deg) brightness(200%);
	}

	/* #keyboard.hd-music li:nth-child(6) div:nth-child(10),
	#keyboard.hd-music li:nth-child(6) div:nth-child(11),
	#keyboard.hd-music li:nth-child(6) div:nth-child(12),
	#keyboard.hd-music li:nth-child(6) div:nth-child(13){
		background-color: #b0ff00 !important;
		box-shadow: 0 0 5px 1px #b0ff00 !important;
		-webkit-animation: showroutine 4s 1s infinite;
		-o-animation: showroutine 4s 1s infinite;
		animation: showroutine 4s 1s infinite;
	}
		#keyboard.hd-music li:nth-child(6) div:nth-child(11){
			-webkit-animation: showroutine 4s 1.1s infinite;
			-o-animation: showroutine 4s 1.1s infinite;
			animation: showroutine 4s 1.1s infinite;
		}
		#keyboard.hd-music li:nth-child(6) div:nth-child(12){
			-webkit-animation: showroutine 4s 1.2s infinite;
			-o-animation: showroutine 4s 1.2s infinite;
			animation: showroutine 4s 1.2s infinite;
		}
		#keyboard.hd-music li:nth-child(6) div:nth-child(13){
			-webkit-animation: showroutine 4s 1.3s infinite;
			-o-animation: showroutine 4s 1.3s infinite;
			animation: showroutine 4s 1.3s infinite;
		} */


/* ---------- 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;}
}

.hd-rainbow{
	background-image:url(../img/lighting-wave.png);
	background-repeat: repeat-x;
	background-position: center 0;
}
.hd-wave: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;}
}