/*-------aurasync-------*/

#hd #lighting{
	/*background: linear-gradient(#444 0%, #000 15%); */
	background: #000;
	height: 56vw;
	min-height: 56vw;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#hd #lighting .control-and-text{
	max-width: 1500px;
	padding: 0 40px;
	margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 2;
    position: relative;
}
#hd #lighting .control-and-text .inner{
	width: 48%;
    box-sizing: border-box;
    text-align: left;
    111margin-top: 10%;
    min-height: 550px;
}
#hd #lighting .control-and-text .icon{
    max-width: 120px !important;
    display: block;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 20px;
}


#hd #lighting .image-and-lighting{
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}


/*------------ 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: 600px;
		position: relative;
		z-index: 6;
	}
	#hd #lighting .hd-controls li{
		display: inline-block;
		vertical-align: top;
		width: 23%;
		margin-bottom: 30px;
		text-align: center;
		/*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 small{
		display: block; 
		font-size: 16px;
		text-transform: uppercase;
		font-weight: bold;
		background: -webkit-linear-gradient(to right, #45d8ff 50% , #7285ff 55%); 
		background: -o-linear-gradient(to right, #45d8ff 50% , #7285ff 55%); 
		background: linear-gradient(to right, #45d8ff 50% , #7285ff 55%); 
		background: linear-gradient(to right, #95f8fe 0% , #75afff 100%); 
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 1em;
	}

	#hd #lighting .hd-controls li img{
		max-width: 80% !important;
		display: block;
		margin: 0 auto 8px auto;
	}

	#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%;
		height: 100%;
		/*max-width: 960px;
		max-height: 91%;
		top:6%;*/
		top: 0;
		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;
		z-index: 6;
		position: relative;
		margin-top: 50px;
	}
	#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: 0;
				width: 100%;
				height: 0;
				padding-bottom: 4.2%;
			}
			#keyboard li:nth-child(1){
				/*background-color: #ff8f26;*/
				/*top:17.5%;*/
				top:14.5%;
				padding-bottom: 5.6%;
			}
			#keyboard li:nth-child(2){
				/*background-color: #dcff1c;*/
				/*top:33%;*/
				top:30%;
				padding-bottom: 5.5%;
			}
			#keyboard li:nth-child(3){
				/*background-color: #11c470;*/
				top:45%;
				padding-bottom: 5.6%;
			}
			#keyboard li:nth-child(4){
				/*background-color: #1ccdff;*/
				top:60.5%;
				padding-bottom: 5.7%;
			}
			#keyboard li:nth-child(5){
				/*background-color: #a74fff;*/
				top:76%;
				padding-bottom: 6%;
			}
			#keyboard li:nth-child(6){
				/*background-color: #ffb7e2;*/
				padding-bottom: 5%;
				top:78.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: 3.3%;
				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%; }*/
			#keyboard li div:nth-child(1){margin-left: 5%; }
			/*-----row1-----*/
				#keyboard li:nth-child(1) div{width: 5.5%; margin-left: 0.1%;}
				#keyboard li:nth-child(1) div:nth-child(1){width: 6.5%; margin-left: 5%;}
				#keyboard li:nth-child(1) div:nth-child(2){}
				/* #keyboard li:nth-child(1) div:nth-child(n+3){margin-left: -.5%; } */
				#keyboard li:nth-child(1) div:nth-child(9){width: 6.4%;}
				#keyboard li:nth-child(1) div:nth-child(14){width: 10%;}
				#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: 5.5%; margin-left: 0.1%;}
				/* #keyboard li:nth-child(2) div:nth-child(1){width: 3.85%; } */
				#keyboard li:nth-child(2) div:nth-child(1){width: 9%; margin-left: 5%; }
				#keyboard li:nth-child(2) div:nth-child(6){width: 6%;}
				#keyboard li:nth-child(2) div:nth-child(7){width: 6%;}
				#keyboard li:nth-child(2) div:nth-child(14){width: 7%;}
				#keyboard li:nth-child(2) div:nth-child(15){width: 7%;}
			/*-----row3-----*/
				#keyboard li:nth-child(3) div{width: 5.6%; margin-left: 0.1%;}
				#keyboard li:nth-child(3) div:nth-child(1){width: 10%; margin-left: 5%; }
				#keyboard li:nth-child(3) div:nth-child(14){width: 6.5%; }
				#keyboard li:nth-child(3) div:nth-child(13){width: 12%;}
				/*#keyboard li:nth-child(3) div:last-child{
					padding-top: 3.9%;
					z-index: 1;
				}*/
			/*-----row4-----*/
				#keyboard li:nth-child(4) div{width: 5.5%; margin-left: 0.1%;}
				#keyboard li:nth-child(4) div:nth-child(1){width: 13%; margin-left: 5%;}
				#keyboard li:nth-child(4) div:nth-child(5){width: 6%; }
				#keyboard li:nth-child(4) div:nth-child(9){width: 6%; }
				#keyboard li:nth-child(4) div:nth-child(12){width: 9%; }
			/*-----row5-----*/
				#keyboard li:nth-child(5) div{width: 5.5%; margin-left: 0.1%;}
				#keyboard li:nth-child(5) div:nth-child(1){width: 7.5%;margin-left: 5%;}
				#keyboard li:nth-child(5) div:nth-child(2){width: 6.8%; }
				#keyboard li:nth-child(5) div:nth-child(3){width: 6.8%; }
				#keyboard li:nth-child(5) div:nth-child(4){width: 30.5%; }
				#keyboard li:nth-child(5) div:nth-child(5){width: 6.8%; }
				#keyboard li:nth-child(5) div:nth-child(6){width: 6.8%; }
				#keyboard li:nth-child(5) div:nth-child(7){width: 6.8%; }
				#keyboard li:nth-child(5) div:nth-child(8){width: 6%; }
				#keyboard li:nth-child(5) div:nth-child(9){width: 5.8%; }
				#keyboard li:nth-child(5) div:nth-child(13){margin-left: 5.4%;}
				#keyboard li:nth-child(5) div:nth-child(14){margin-left: 5.8%;}
				/*#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.12%; }
				#keyboard li:nth-child(6) div:nth-child(1){width: 9.6%; }
				#keyboard li:nth-child(6) div:nth-child(3){width: 5%;}
				#keyboard li:nth-child(6) div:nth-child(4){width: 22.7%; }
				#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: 1.4%;}
				#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;
			} */















/*RWD*/

@media screen and (min-width:1700px) {
#hd #lighting .control-and-text .inner{
    margin-top: 8%;
}
}
@media screen and (min-width:2300px) {
#hd #lighting .control-and-text .inner{
    margin-top: 16%;
}
}

@media screen and (max-width:1400px) {
#hd #lighting .control-and-text .inner{
    margin-top: 0%;
}
#hd #lighting .control-and-text{
    align-items: inherit;
}
#hd #lighting .control-and-text .inner{
    min-height: auto;
}
#hd #lighting .hd-controls li {
    width: 19%;
}
#hd #lighting .control-and-text .icon {
    max-width: 80px !important;
    margin-left: 0px;
    margin-top: 0px;
}
}

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

@media screen and (max-width:1280px) {
	/*------------ LIGHTING -------*/
	/*#hd #lighting .hd-controls{margin:10px auto; }*/
	#hd .lighting_options{margin:0 auto 10px; }
}
@media screen and (max-width:1200px){
	#hd #lighting {
	    padding-top: 20px;
	    padding-bottom: 20px;
		height: auto;
	}
	#hd #lighting .image-and-lighting{
		margin-left: 12%;
	}
	#hd #lighting .control-and-text .inner{
		width: 68%;
	}
	#hd #lighting .control-and-text .icon{
	    max-width: 60px !important;
	    margin-bottom: 10px;
	}
	#hd #lighting .hd-controls li small{
		font-size: 13px;
	}
	#hd #lighting .high_heat,
	#hd #lighting .high_point{
		right: 0;
		position: relative;
		text-align: center;
	}
	#hd #lighting .high_heat small{
		width: auto;
	}
}
@media screen and (max-width:1100px) {
	/*------------ LIGHTING -------*/
	#colorpicker {
		width: 90px;
		height: 90px;
		/*bottom: 40%;*/
		margin-top: 20px;
	}
	#colorpicker div,
	#colorpicker canvas{
		max-width: 100%;
		max-height: 100%;
	}
	#colorpicker .farbtastic-solid{
		width: 48px !important;
		height: 48px !important;
		top: 21px !important;
		left: 21px !important;
	}
	#hd #lighting small.txt-red{
		position: relative;
		left: 0;
		height: auto;
		margin-bottom: 20px;
		display: block;
		text-align: center;
	}
}


@media screen and (max-width:980px) {
	.hd-wave:before{
		-webkit-animation: wave_block 1.9s -1.1s infinite;
		-o-animation: wave_block 1.9s -1.1s infinite;
		animation: wave_block 1.9s -1.1s infinite;
	}
}
@media screen and (max-width:768px) {
	/*------------ LIGHTING -------*/
	.hd-wave:before{display: none; }
	#colorpicker{display: none !important;}
	#hd #lighting .high_heat,
	#hd #lighting .high_point{
		display: none;
	}
}
@media screen and (max-width:767px) {
	/*------------ LIGHTING -------*/
	#hd #lighting{
		111padding-bottom: 125vw;
		overflow: hidden;
	}
	#hd #lighting .control-and-text{
		display: block;
		height: auto;
		margin-bottom: 110px;
	}
	#hd #lighting .control-and-text .inner{
		width: 100%;
	}
	#hd #lighting .image-and-lighting{
		position: relative;
		left: auto;
		top: auto;
		transform: scale(1.5);
		margin-left: -25%;
	}
}
@media screen and (max-width:620px) {
	/*------------ LIGHTING -------*/
	#hd #lighting{
		111padding-bottom: 135vw;
	}
	#hd #lighting .hd-controls{margin-bottom: 0; }
}
@media screen and (max-width:540px) {
	#hd #lighting{
	}
}
@media screen and (max-width:480px) {
	/*------------ LIGHTING -------*/
	#hd #lighting{
		111padding-bottom: 160vw;
	}
	#hd #lighting .control-and-text{
		padding: 0 20px;
	}
	#hd #lighting .hd-controls li{
		width: 30%;
		margin-bottom: 20px;
	}
	#hd #lighting .hd-controls li img {
	    max-width: 80% !important;
	    width: 40px;
	}
}
@media screen and (max-width:420px) {
	/*------------ LIGHTING -------*/
	#hd #lighting{
		111padding-bottom: 170vw;
	}
}
@media screen and (max-width:375px) {
	/*------------ LIGHTING -------*/
	#hd #lighting{
		111padding-bottom: 190vw;
	}
}
@media screen and (max-width:320px) {
	/*------------ LIGHTING -------*/
	#hd #lighting{
		111padding-bottom: 210vw;
	}
}