<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset 'utf-8';
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/MyriadPro-Regular.otf'),
		 url('../fonts/MyriadPro-Regular.woff');
	font-weight: normal;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/MyriadPro-Light.otf'),
		 url('../fonts/MyriadPro-Light.woff');
	font-weight: 300;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/MyriadPro-Semibold.otf');
	font-weight: 500;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/MyriadPro-Bold.otf');
	font-weight: 700;
}
@font-face {
	font-family: 'jerseym54';
	src:url("../fonts/Jersey_es_modified.eot"),
		url("../fonts/Jersey_es_modified.eot?#iefix") format("embedded-opentype"),
		url("../fonts/Jersey_es_modified.ttf") format("truetype"),
		url("../fonts/Jersey_es_modified.svg#rogfont") format("svg");
	font-weight: normal;
	font-style: normal
}
@font-face {
	font-family: 'machinen';
	src: url("../fonts/MACHINEN.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
/*-----RESET-----*/
	*{
		margin: 0;
	}
	#hd {
		margin: 0;
		padding:0;
		background-color: #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: 'MyriadPro', sans-serif;
		font-size: 14px;
		text-decoration: none;
		color: #920000;
		font-weight: 600;
	}
	#hd a:hover {
		text-decoration: none;
		color: #F6B84C;
	}
	#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{
		font-family: 'xolonium', sans-serif;
	    font-size: 38px;
	    line-height: 1;
		font-weight: normal;
	    color: #fff !important;
	}
	#hd h1 span{
		font-size: 2.5em;
	}
	#hd h2{
		font-family: 'MyriadPro', sans-serif;
		font-weight: 700;
		font-size: 44px;
		line-height: 1.2;
		padding-bottom:20px;
		position: relative;
	}
	#hd h3{
		font-family: 'Fjalla One', sans-serif;
		font-size: 20px;
		font-weight: 400;
		line-height: 1.3;
		text-transform: uppercase;
		margin-bottom: 15px;
	}
	#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 .txt-main{color: #F6B84C !important;}

	#hd .title-red{text-shadow: 0 0 10px #ff0000;}
	#hd .title-orange{text-shadow: 0 0 10px #ff7700;}
	#hd .title-yellow{text-shadow: 0 0 10px #fff100;}
	#hd .title-green{text-shadow: 0 0 10px #77baff;}
	#hd .title-blue{text-shadow: 0 0 10px #19e9f7;}
	#hd .title-blue2{text-shadow: 0 0 10px rgb(67, 153, 233);}
	#hd .title-cyan{text-shadow: 0 0 10px #82FFC8;}
	#hd .title-purple{text-shadow: 0 0 10px #ff64ec;}
	/*_:-ms-input-placeholder, :root #hd h2[class*="title-"] {background: transparent}*/
/*-----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{
	    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 .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 .fleft {float: left; }
	#hd .fright {float: right; }

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

	#hd .hd-btn {
		display: block;
		border: 1px #F6B84C solid;
		outline: none;
		cursor: pointer;
		padding: 8px 30px;
		margin:20px auto;
		max-width: 350px;
		font-family: 'machinen', "jerseym54", sans-serif;
		font-weight: 400;
		font-size: 28px;
		text-align: center;
		text-transform: uppercase;
		color: #F6B84C;
		position: relative;
		z-index: 1;
		transition: .3s;
	}
	#hd .hd-btn span{
		position: absolute;
		width: 10px;
		height: 100%;
		top: 0;
		transition: .3s;
	}
	#hd .hd-btn span:nth-child(1){
		left: 0;
	}
	#hd .hd-btn span:nth-child(2){
		right: 0;
	}
	#hd .hd-btn span::before{
		content: '';
		display: block;
		width: 100%;
		height: 10px;
		position: absolute;
		top: -2px;
		left:-2px;
		transition: .3s;
	}
	#hd .hd-btn span::after{
		content: '';
		display: block;
		width: 100%;
		height: 10px;
		position: absolute;
		bottom: -2px;
		left:-2px;
		transition: .3s;
	}
	#hd .hd-btn span:nth-child(1)::before{
		border-top: 3px #F6B84C solid;
		border-left: 3px #F6B84C solid;
	}
	#hd .hd-btn span:nth-child(1)::after{
		border-bottom: 3px #F6B84C solid;
		border-left: 3px #F6B84C solid;
	}
	#hd .hd-btn span:nth-child(2)::before{
		left: -1px;
		border-top: 3px #F6B84C solid;
		border-right: 3px #F6B84C solid;
	}
	#hd .hd-btn span:nth-child(2)::after{
		left: -1px;
		border-bottom: 3px #F6B84C solid;
		border-right: 3px #F6B84C solid;
	}

	/* #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: #fff; */
		/* border-color: #fff; */
		background-color: rgba(243, 183, 84, .2);
	}
	#hd .hd-btn:hover span{
		width: 15px;
	}
	#hd .hd-btn:hover span::before{
		/* border-color: #fff; */
		height: 15px;
	}
	#hd .hd-btn:hover span::after{
		/* border-color: #fff; */
		height: 15px;
	}

/*-----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 #F6B84C;
	    z-index: 999;
	    opacity: 0;
	}
	#scrollUp.hd-show {
	    opacity: 1;
	}
	#scrollUp:hover {
	    background-color: #F6B84C;
	}
	#scrollUp:hover svg {
	    fill: #FFF;
	}
	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #F6B84C;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}

/*----- lightbox----- */
	#hd_lightbox {
	    width: 100%;
	    height: 100vh;
	    position: fixed;
	    top: 0;
	    left: 0;
	    display: none;
	    z-index: 10;
	}
	#hd .hd_filter {
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, .7);
	}
	#hd .hd_box {
	    width: 1000px;
	    height: 480px;
	    background: #232323;
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    margin: auto;
	    padding: 35px 60px;
	    box-sizing: border-box;
	}
	#hd .hd_close {
	    position: absolute;
	    top: 25px;
	    right: 20px;
	    cursor: pointer;
	}
	#hd .hd_close&gt;span {
	    display: block;
	    width: 20px;
	    height: 3px;
	    background: #777777;
	    -webkit-border-radius: 1.5px;
	    -moz-border-radius: 1.5px;
	    border-radius: 1.5px;
	}
	#hd .hd_close&gt;span:first-child {
	    -webkit-transform: rotateZ(45deg);
	    -moz-transform: rotateZ(45deg);
	    -ms-transform: rotateZ(45deg);
	    -o-transform: rotateZ(45deg);
	    transform: rotateZ(45deg);
	}
	#hd .hd_close&gt;span:last-child {
	    -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);
	}
	#hd .hd_box&gt;img {
	    position: absolute;
	    right: 40px;
	    bottom: 60px;
	}
	#hd .hd_box iframe {
	    width: 100%;
	    height: 100%;
	}

/*----- 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;
		background-color: #000;
	}
	#kv .kv-info {
		position: relative;
		background-position: center 0;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 45%;
		padding-bottom: 10px;
	}
	#hd #kv .text{
		position: absolute;
		max-width: 420px;
		left: 65%;
		top: 25%;
	}
	#hd #kv h2{
		font-family: 'machinen', "jerseym54", sans-serif;
		font-weight: 500;
		font-size: 60px;
		margin-bottom: 10px;
	}
	#hd #kv h2,
	#hd #kv p{
		display: block;
		text-align: left;
	}

/*------------ SWITCHES ---------*/
	#hd #switches{
		background-color: #000;
		position: relative;
		overflow: hidden;
		padding:80px 0;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center top;
	}
	#hd #switches .bg{
		width: 60%;
		min-width: 900px;
		position: absolute;
		left: 5%;
		top: -50px;
	}
	#hd #switches .info{
		position: relative;
		left: 65%;
	}
	#hd #switches h2{
		position: relative;
	}
	#hd #switches h2+p{
		max-width: 450px;
	}
	#hd #switch_img li{
		display: inline-block;
		vertical-align: bottom;
		width: 25%;
		margin-left: -7px;
		margin: 30px 0 20px;
		padding: 10px 0;
		text-align: center;
		position: relative;
	}
	#hd #switch_img li p{
		font-size: 16px;
		letter-spacing: 1px;
		margin:10px 0;
	}
	#hd #switch_img li img{
		width: 70%;
		max-width: 110px !important;
		margin:0 auto;
		transform-origin: center bottom;
	}
	#hd #switch_img li.active img{
		-webkit-transform: scale(1.3);
		   -moz-transform: scale(1.3);
		    -ms-transform: scale(1.3);
		     -o-transform: scale(1.3);
		        transform: scale(1.3);
	}

	#hd #switch_content{min-height: 95px; }
	#hd #switch_content li{
		display: none;
		position: relative;
		padding-left: 12px;
	}
	#hd #switch_content li p{
		position: relative;
		line-height: 1.5;
		color:#fff;
		padding:0 20px 0 30px;
		max-width: 500px;
	}
	#hd #switch_content li p:before{
		content: "";
		position: absolute;
		width: 5px;
		height: 5px;
		left: 11px;
		top: 9px;
		opacity: 1;
		border-radius: 50%;
		background-color: #fff;
	}
	#hd #switch_content li.active:after{
		content: '';
		display: block;
		width: 10px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#hd #switch_content li.tactile.active:after{
		background-color: #837f74;
	}
	#hd #switch_content li.linear.active:after{
		background-color: #434343;
	}
	#hd #switch_content li.active{
		display: block;
		-webkit-animation: fadeInFromBottom .5s forwards;
		-o-animation: fadeInFromBottom .5s forwards;
		animation: fadeInFromBottom .5s forwards;
	}

	#hd #switches .hd-btn{
		margin-top: 50px;
	}


	#hd #more{
		/* height: 0; */
		/* transform: scaleY(0); */
		transform-origin: top;
		/* margin-bottom: -100%; */
		padding: 50px 0;
		overflow: hidden;
		width: 100% !important;
		text-align: center;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;
	}
	#hd #more .w1200{
		opacity: 0;
		transform: translateY(-100px);
		transition: .7s;
	}
	#hd #more .info {
		display: block;
		border: 1px #F6B84C solid;
		padding: 5px 50px;
		margin: 20px auto;
		text-align: center;
		background-color: rgba(0,0,0,.5);
		position: relative;
	}
	#hd #more .info.first{
		margin-bottom: 90px;
	}
	#hd #more .info p{
		padding: 30px 50px 0;
	}
	#hd #more .info span{
		position: absolute;
		width: 20px;
		height: 100%;
		top: 0;
		transition: .3s;
	}
	#hd #more .info span:nth-child(1){
		left: 0;
	}
	#hd #more .info span:nth-last-child(1){
		right: 0;
	}
	#hd #more .info span::before{
		content: '';
		display: block;
		width: 100%;
		height: 20px;
		position: absolute;
		top: -2px;
		left:-2px;
		transition: .3s;
	}
	#hd #more .info span::after{
		content: '';
		display: block;
		width: 100%;
		height: 20px;
		position: absolute;
		bottom: -2px;
		left:-2px;
		transition: .3s;
	}
	#hd #more .info span:nth-child(1)::before{
		border-top: 3px #F6B84C solid;
		border-left: 3px #F6B84C solid;
	}
	#hd #more .info span:nth-child(1)::after{
		border-bottom: 3px #F6B84C solid;
		border-left: 3px #F6B84C solid;
	}
	#hd #more .info span:nth-last-child(1)::before{
		left: -1px;
		border-top: 3px #F6B84C solid;
		border-right: 3px #F6B84C solid;
	}
	#hd #more .info span:nth-last-child(1)::after{
		left: -1px;
		border-bottom: 3px #F6B84C solid;
		border-right: 3px #F6B84C solid;
	}
	#hd #more .item{
		display: inline-block;
		position: relative;
		width: calc(50% - 4px);
		padding: 30px 50px;
	}
	#hd #more .item h3{
		font-family: 'MyriadPro', sans-serif;
		font-weight: 700;
		font-size: 26px;
		text-transform: none;
		margin-right: 3%;
	}
	#hd #more .item img{
		position: relative;
		z-index: 2;
	}
	#hd #more .item figure{
		width: 90%;
		position: relative;
	}
	#hd #more .item figure .mark1{
		position: absolute;
		font-size: 30px;
		font-weight: 400;
		top: 72%;
		left: 45%;
		padding: 0;
	}
	#hd #more .item figure .mark2{
		position: absolute;
		text-align: center;
		top: 74%;
		left: 39%;
	}
	#hd #more .item figure .mark2 img{
		display: inline-block;
		width: 80%;
	}
	#hd #more .item figure .mark2 small{
		display: block;
		font-size: 16px;
	}
	#hd #more .item figure .mark2 p{
		padding: 0;
		width: auto;
		font-size: 28px;
		font-weight: 400;
	}

	#hd #more .tabset{
		margin-top: 10px;
		margin-bottom: 40px;
	}
	#hd #more .tab{
		display: inline-block;
		width: 250px;
		margin: 0 20px;
		padding: 5px 0;
		font-family: 'machinen', "jerseym54", sans-serif;
		font-size: 26px;
		color: #F6B84C;
		border: 2px #F6B84C solid;
		cursor: pointer;
		transition: .2s;
	}
	#hd #more .tab:hover,
	#hd #more .tab.active{
		background-color: #F6B84C;
		color: #000;
	}


	#hd #more #high-color1,
	#hd #more #high-color2,
	#hd #more #high-color3,
	#hd #more #high-color4,
	#hd #more #high-color5,
	#hd #more #high-color6{
		position: absolute;
		background-color: #F6B84C;
		opacity: .2;
		z-index: 1;
		transition: 1.5s;
	}
	#hd #more #high-color1{
		width: 9.5%;
		height: 45.1%;
		top: 25.3%;
		left: 35.9%;
	}
	#hd #more #high-color2{
		width: 41.3%;
		height: 45.1%;
		top: 25.4%;
		left: 45.5%;
	}
	#hd #more #high-color3{
		width: 17.4%;
		height: 31.9%;
		top: 30.6%;
		left: 32.7%;
	}
	#hd #more #high-color4{
		width: 16.4%;
		height: 38%;
		top: 33.2%;
		left: 41.2%;
	}
	#hd #more #high-color5{
		width: 17.4%;
		height: 35.5%;
		top: 30.6%;
		left: 32.7%;
	}
	#hd #more #high-color6{
		width: 16.4%;
		height: 38%;
		top: 33.2%;
		left: 41.2%;
	}
	#hd #more .actuation1,
	#hd #more .actuation2{
		display: none;
	}
	#hd #more .actuation1.active,
	#hd #more .actuation2.active{
		display: block;
	}
	#hd #more #close-more{
		margin: 30px auto 0;
		transition: .3s;
		position: relative;
		cursor: pointer;
	}
	#hd #more #close-more:hover{
		transform: rotate(90deg);
	}

/*------------ built ---------*/
	#hd #built{
		position: relative;
		padding: 50px 0;
	}
	#hd #built .text{
		text-align: center;
		position: relative;
		z-index: 1;
	}
	#hd #built .bg{
		width: 100%;
		margin-top: -7%;
		padding-bottom: 40%;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left bottom;
	}

/*------------ design ---------*/
	#hd #design{
		padding: 50px 0 0;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left bottom;
	}
	#hd #design &gt; div{
		position: absolute;
		bottom: 15%;
		left: 15%;
		z-index: 1;
	}
	#hd #design img{
		position: relative;
		top: -50px;
	}

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

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

/*------------ LIGHTING -----------*/
	#hd #lighting{
		padding: 100px 0 50px;
		position: relative;
		text-align: center;
	}
	#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: 100%;
		/* max-width: 967px; */
		margin: -17% 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;
	}
	#color,
	#greybg{
		position: absolute;
		width: 100%;
		/* max-width: 1200px; */
		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;
	}

	#colorpicker {
		display: block;
		width: 120px;
		position: absolute;
		bottom: 15%;
		right: 10%;
		z-index: 100;
	}
	#colorpicker canvas{top: 0;left: 0; }
	/*-----keyboard-----*/
		#hd #keyboard{
			margin:0 auto;
		}
		#keyboard{
			position: absolute;
			width: 100%;
			/* max-width: 1200px; */
			height: 100%;
			max-height: 91%;
			overflow: hidden;
			top: 6%;
			left: 0;
			right: 0;
			margin:0 auto;
			display: block;
			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: 2.7%;
			}
			#keyboard li:nth-child(1){
				/*background-color: #ff8f26;*/
				top:43.8%;
				padding-bottom: 3.4%;
			}
			#keyboard li:nth-child(2){
				/*background-color: #dcff1c;*/
				top:51.7%;
				padding-bottom: 3.4%;
			}
			#keyboard li:nth-child(3){
				/*background-color: #11c470;*/
				top:59.4%;
			}
			#keyboard li:nth-child(4){
				/*background-color: #1ccdff;*/
				top:65.3%;
			}
			#keyboard li:nth-child(5){
				/*background-color: #a74fff;*/
				top:71.4%;
			}
			#keyboard li:nth-child(6){
				/*background-color: #ffb7e2;*/
				top:77.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%; }
			/*-----row1-----*/
				#keyboard li:nth-child(1) div{width: 2.5%; }
				#keyboard li:nth-child(1) div:nth-child(1){width: 2.7%; margin-left: 21.4%;}
				#keyboard li:nth-child(1) div:nth-child(2){margin-left: 1.4%; }
				/* #keyboard li:nth-child(1) div:nth-child(n+3){margin-left: -.5%; } */
				#keyboard li:nth-child(1) div:nth-child(6){margin-left: 1.9%; }
				#keyboard li:nth-child(1) div:nth-child(14){margin-left: .9%; }
				#keyboard li:nth-child(1) div:nth-child(10){margin-left: 2.1%; }
				#keyboard li:nth-child(1) div:nth-child(17){
					width: 6.5%;
					padding-bottom: 2%;
					margin-top: 0;
					margin-left: 4%;
					pointer-events: none !important;
				}
			/*-----row2-----*/
				#keyboard li:nth-child(2) div{width: 2.548%; }
				#keyboard li:nth-child(2) div:nth-child(1){margin-left: 21.4%;}
				#keyboard li:nth-child(2) div:nth-child(14){width: 5%; }
				#keyboard li:nth-child(2) div:nth-child(15){margin-left: .6%;}
				#keyboard li:nth-child(2) div:nth-child(18){margin-left: .8%;}
			/*-----row3-----*/
				#keyboard li:nth-child(3) div{width: 2.548%; }
				#keyboard li:nth-child(3) div:nth-child(1){width: 3.8%; margin-left: 21.4%;}
				#keyboard li:nth-child(3) div:nth-child(14){width: 3.8%; }
				#keyboard li:nth-child(3) div:nth-child(15){margin-left: .7%;}
				#keyboard li:nth-child(3) div:nth-child(18){margin-left: .65%;}
				#keyboard li:nth-child(3) div:last-child{
					padding-top: 2.5%;
					z-index: 1;
				}
			/*-----row4-----*/
				#keyboard li:nth-child(4) div{width: 2.548%; }
				#keyboard li:nth-child(4) div:nth-child(1){width: 4.4%; margin-left:21.4%;}
				#keyboard li:nth-child(4) div:nth-child(13){width: 5.7%; }
				#keyboard li:nth-child(4) div:nth-child(14){margin-left: 9%; }
			/*-----row5-----*/
				#keyboard li:nth-child(5) div{width: 2.548%; }
				#keyboard li:nth-child(5) div:nth-child(1){width: 5.7%; margin-left: 21.4%;}
				#keyboard li:nth-child(5) div:nth-child(12){width: 7%; }
				#keyboard li:nth-child(5) div:nth-child(13){margin-left: 3.1%;}
				#keyboard li:nth-child(5) div:nth-child(14){margin-left: 3.3%;}
				#keyboard li:nth-child(5) div:last-child{
					width: 2.55%;
					padding-top: 2.6%;
					z-index: 1;
				}
			/*-----row6-----*/
				#keyboard li:nth-child(6) div{width: 2.548%; }
				#keyboard li:nth-child(6) div:nth-child(1){width: 3.3%; margin-left: 21.4%;}
				#keyboard li:nth-child(6) div:nth-child(2),
				#keyboard li:nth-child(6) div:nth-child(3){width: 3.2%;}
				#keyboard li:nth-child(6) div:nth-child(4){width: 15.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: 3.2%;}
				#keyboard li:nth-child(6) div:nth-child(9){margin-left: .6%;}
				#keyboard li:nth-child(6) div:nth-child(12){
					width: 5%;
					margin-left: .6%;
				}
	/*-----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;
			} */

/*------------ FEATURE --------*/
	#hd #feature{
		padding:2% 0;
		background-position: 0 0;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
	}
	#hd #feature li{
		padding:0 10px 20px;
		margin:70px 0 70px -7px;
		position: relative;
	}
	#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: 40%;
		max-width: 160px !important;
	}
	#hd #feature li img + div{
		width: 60%;
		padding-left: 15px;
	}
	#hd #feature h3{min-height: 60px; }
	#hd #feature p{
		font-size: 14px;
		padding-bottom: 0;
		margin-bottom: 20px;
		min-height: 83px;
	}
/* ---------- ANIMATIONS ---------- */
	@-webkit-keyframes fadeInFromBottom{
		from{
			opacity: 0;
			-webkit-transform: translateY(10%);
		}
		to  {
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
	@keyframes fadeInFromBottom{
		from{
			opacity: 0;
			   -moz-transform: translateY(10%);
				-ms-transform: translateY(10%);
				 -o-transform: translateY(10%);
					transform: translateY(10%);
		}
		to  {
			opacity: 1;
			   -moz-transform: translateY(0);
				-ms-transform: translateY(0);
				 -o-transform: translateY(0);
					transform: translateY(0);
		}
	}
	#hd .colorrun{
		-webkit-animation: colorrun 5s infinite;
		-o-animation: colorrun 5s infinite;
		animation: colorrun 5s infinite;
	}
	@keyframes colorrun {
		from {
			-webkit-filter: hue-rotate(0deg);
			filter: hue-rotate(0deg);
		}
		to {
			-webkit-filter: hue-rotate(359deg);
			filter: hue-rotate(359deg);
		}
	}
	@-webkit-keyframes colorrun {
		from {
			-webkit-filter: hue-rotate(0deg);
			filter: hue-rotate(0deg);
		}
		to {
			-webkit-filter: hue-rotate(359deg);
			filter: hue-rotate(359deg);
		}
	}

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

	@-webkit-keyframes 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: -800%;}
	    100%	{background-position-y: 940%;}
	}
	@keyframes quicksand {
		0%		{background-position-y: -800%;}
	    100%	{background-position-y: 940%;}
	}
	@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{
		opacity: 1;
		z-index: -3;
	}

	@-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;}
	}</pre></body></html>