@font-face {

	font-family: 'ROGFontsv';

	src: url('../fonts/ROGFontsv1.5-Regular.otf');

	src: url('../fonts/ROGFontsv1.5-Regular.otf') format('embedded-opentype'));

	src: url("../fonts/ROG Fonts v1.6.1.ttf") format("opentype");

	font-weight: normal;

	font-style: normal

}

@font-face {

	font-family: 'Xolonium';

	src: url('../fonts/xolonium-Regular.otf'),

		 url('../fonts/xolonium-Regular.otf') format('embedded-opentype'),

		 url("../fonts/xolonium-Regular.ttf") format("opentype"),

		 url("../fonts/xolonium-regular.eot");

	font-weight: normal;

	font-style: normal;

}

@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Roboto+Condensed:300,400,700');

html, body{

	margin: 0;

	padding:0;

}

/* ---------- RESET ---------- */

	#hd{background-color: #000; }

	#hd *{

		margin: 0;

		padding: 0;

		text-decoration: none;

		list-style-type: none;

		box-sizing: border-box;

	}

	::selection {

		background: #1d2124;

		color: #CE0000;

	}

	::-moz-selection {

		background: #1d2124;

		color: #ffffff;

	}

	#hd ul,

	#hd ol,

	#hd li,

	#hd figure {margin: 0; padding:0; }

	#hd section {

		margin: 0;

		padding: 0;

		border: 0;

		font: inherit;

		vertical-align: baseline;

	}

	#hd h1,

	#hd h2,

	#hd h3,

	#hd h4,

	#hd p,

	#hd a,

	#hd li,

	#hd b,

	#hd small {

		margin: 0;

		padding:0;

		line-height: normal;

		color: white;

	}

/* ---------- Element ---------- */

	#hd section{

		width: 100%;

		margin-left: auto;

		margin-right: auto;

		position: relative;

	}

	#hd img {

		display: block;

		margin:0 auto;

		max-width: 100% !important;

		height: auto;

		border: none;

	}

	#hd .hd-btn {

		background: none;

		border: none;

		outline: none;

		cursor: pointer;

	}

	#hd .hd-downloadbox,

	#hd .hd-tagbox {

		display: block;

		font-size: 21px;

		font-weight: 400;

		position: relative;

		text-align: center;

		background-color: #000;

		color:#fff;

		margin:10px auto 20px;

	}

	#hd .hd-downloadbox{

		font-family: "Fjalla One", sans-serif;

		line-height: 46px;

		width: 100%;

		max-width: 200px;

		height: 45px;

	}

	#hd .hd-tagbox{

		border-radius: 10px;

		width: 90%;

		padding:15px;

		text-transform: uppercase;

	}

	#hd .hd-tagbox p{

		margin-bottom: 5px;

		font-size: 22px;

		font-weight: 400;

	}

	#hd .hd-tagbox small{

		font-weight: 400;

		display: block;

		line-height: 14px;

	}

	#hd .hd-downloadbox:before,

	#hd .hd-tagbox:before{

		content:'';

		display: block;

		position: absolute;

		top: -2px;left: -2px;

		background: #c9c9c9;

		z-index: -1;

		background: #000000;

		background: -moz-linear-gradient(-20deg, #000000 0%, #c9c9c9 50%, #131313 100%);

		background: -webkit-linear-gradient(-20deg, #000000 0%,#c9c9c9 50%,#131313 100%);

		background: linear-gradient(160deg, #000000 0%,#c9c9c9 50%,#131313 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313',GradientType=1 );

	}

	#hd .hd-downloadbox:before{

		width:calc(100% + 4px);

		max-width: 204px;

		height: 49px;

	}

	#hd .hd-tagbox:before{

		border-radius: 10px;

		width:calc(100% + 4px);

		height: calc(100% + 4px);

	}



	#hd p.hd-skewtag {

		font-family: "Fjalla One", sans-serif;

		font-size: 21px;

		font-weight: 400 !important;

		position: relative;

		line-height: 46px;

		min-width: 200px;

		text-align: center;

		margin-bottom: 20px;

		z-index: 2;

	}

	#hd .hd-skewtag:before {

		content: "";

		display: block;

		width: 200px;

		height: 45px;

		position: absolute;

		margin: 0 auto;

		top: 0;

		right: 0;

		bottom: 0;

		left: 0;

		-webkit-transform: skewX(340deg);

		-moz-transform: skewX(340deg);

		-ms-transform: skewX(340deg);

		-o-transform: skewX(340deg);

		transform: skewX(340deg);

		border: 2px solid #8D0000;

		z-index: 0;

	}

	#hd .hd-list-dot li {

		font-size: 16px;

		padding-left: 15px;

		position: relative;

	}

	#hd .hd-list-dot li:before {

		content: "";

		display: block;

		width: 4px;

		height: 4px;

		border-radius: 2px;

		background-color: white;

		position: absolute;

		left: 0;

		top: 9px;

	}

	#hd .txt_decoline {

		background: url('../img/deco-line.png') right bottom no-repeat;

	}

	#hd .txt_decolineflip {

		background: url('../img/deco-line-flip.png') left bottom no-repeat;

	}

	#hd .hd-frame:before{

		content:"";

		display: block;

		width: 100%;

		height: 100%;

		padding:3px;

		position: absolute;

		top: -3px;

		left: -3px;

		z-index: -1;

		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#800c20+0,5d0600+15,9a0d0e+54,480600+100 */

		background: #800c20; /* Old browsers */

		background: -moz-linear-gradient(left,  #800c20 0%, #5d0600 15%, #9a0d0e 54%, #480600 100%); /* FF3.6-15 */

		background: -webkit-linear-gradient(left,  #800c20 0%,#5d0600 15%,#9a0d0e 54%,#480600 100%); /* Chrome10-25,Safari5.1-6 */

		background: linear-gradient(to right,  #800c20 0%,#5d0600 15%,#9a0d0e 54%,#480600 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800c20', endColorstr='#480600',GradientType=1 ); /* IE6-9 */

	}



	#hd .hd-pic01 {

		width: 100%;

		background: center center no-repeat;

		background-size: 1920px;

	}

/* ---------- Block ---------- */

	#hd .hd-mobile_on,

	#hd .hd-1023on {display: none; }



	#hd .fleft {float: left; }

	#hd .fright {float: right; }



	#hd .hd-w1920,

	#hd .hd-w1500,

	#hd .hd-w1400,

	#hd .hd-w1300,

	#hd .hd-w1200,

	#hd .hd-w1100,

	#hd .hd-w1000,

	#hd .hd-w800,

	#hd .hd-w500{

		position: relative;

		width: 90%;

		margin:0 auto;

		z-index: 2;

	}

	#hd .hd-w1920 {

		max-width: 1920px;

		width: 100%;

	}

	#hd .hd-w1500 {max-width: 1500px;}

	#hd .hd-w1400 {max-width: 1400px;}

	#hd .hd-w1300 {max-width: 1300px;}

	#hd .hd-w1200 {max-width: 1200px;}

	#hd .hd-w1100 {max-width: 1100px;}

	#hd .hd-w1000 {max-width: 1000px;}

	#hd .hd-w800{max-width: 800px;}

	#hd .hd-w500{max-width: 500px;}

	#hd .hd-ib{

		display: inline-block;

		vertical-align: middle;

		margin-left: -5px;

	}

	#hd .ib-top{vertical-align: top;}

	#hd .ib-bottom{vertical-align: bottom;}

	#hd .hd-col20 {width: 20%;}

	#hd .hd-col33 {width: 33.3333%;}

	#hd .hd-col40 {width: 40%;}

	#hd .hd-col45 {width: 45%;}

	#hd .hd-col50 {width: 50%;}

	#hd .hd-col55 {width: 55%;}

	#hd .hd-col60 {width: 60%;}

	#hd .hd-col65 {width: 65%;}

	#hd .hd-col80 {width: 80%;}

	#hd .hd-col85 {width: 85%;}

	#hd .hd-bgflip {

		background: top left no-repeat;

		-webkit-transform: scaleX(-1);

		-moz-transform: scaleX(-1);

		-ms-transform: scaleX(-1);

		-o-transform: scaleX(-1);

		transform: scaleX(-1);

	}

	#hd .hd-bgflip .hd-w1100,

	#hd .hd-bgflip .hd-w1200,

	#hd .hd-bgflip .hd-w1300,

	#hd .hd-bgflip .hd-w1400 {

		-webkit-transform: scaleX(-1);

		-moz-transform: scaleX(-1);

		-ms-transform: scaleX(-1);

		-o-transform: scaleX(-1);

		transform: scaleX(-1);

	}

/* ---------- Text ---------- */

	#hd h2 {

		width: 92%;

		max-width: 1200px;

		margin:0 auto;

		font-family: "Xolonium", sans-serif;

		font-size: 70px;

		line-height: 1.25;

		padding: 40px 0;

		font-weight: normal;

		letter-spacing: 0px;

		text-transform: uppercase;

		color:#ffffff !important;

	}

	#hd h2.right{text-align: right; }

	#hd h2 span{

		color: #ad0202;

		font-size: 35px;

		line-height:1.75;

	}

	#hd h2 span.top{

		display: block;

		margin:0 0 -25px 5px;

	}

	#hd h2 span.bottom{

		display: block;

		margin:10px 0 0 5px;

	}

	#hd h2 span.left,

	#hd h2 span.center{

		display: inline-block;

		width: 258px;

		text-align: right;

		line-height: .75;

		padding-bottom: 40px;

		margin-bottom: -40px;

		margin-right: 10px;

	}

	#hd h2 span.center{

		width: 120px;

		text-align: left;

		margin-left: 10px;

	}

	#hd h3 {

		font-family: "Xolonium", sans-serif;

		text-transform: uppercase;

		font-weight: 300;

		letter-spacing: 0;

		font-size:  34px;

		line-height:  38px;

		margin-bottom: 20px;

		position: relative;

	}

	#hd h4,

	#hd h5,

	#hd button,

	#hd .hd-btn {

		font-family: "Fjalla One", sans-serif;

		text-transform: uppercase;

	}

	#hd h4{

		font-size: 27px;

		font-weight: normal;

		margin-bottom: 20px;

	}

	#hd h5 {

		font-size: 16px;

		font-weight: 300;

		margin: 10px 0;

	}

	#hd p,

	#hd small,

	#hd a,

	#hd li {font-family: 'Roboto Condensed', sans-serif; }

	#hd p {

		font-size: 16px;

		font-weight: 300;

		letter-spacing: 1px;

		line-height: 1.4rem;

		margin: 0;

		margin-bottom: 40px;

	}

	#hd b{font-weight: bold; }

	#hd small {

		font-size: 14px;

		font-weight: 300;

		letter-spacing: 0.5px;

	}



	#hd a.hd-link {

		color: #C50012;

		text-decoration: underline;

		font-weight: 400;

	}

	#hd a.hd-link:hover {color: white; }



	#hd .txt-grey {

		color: #808080;

		font-weight: 400;

	}

	#hd .txt-red {

		color: #ad0202;

		font-weight: 400;

	}



	#hd .txt-center{text-align: center; }

	#hd .txt-left{text-align: left; }

/* ---------- scrollUp ---------- */

	#scrollUp {

		position: fixed;

		right: 30px;

		bottom: 30px;

		width: 45px;

		height: 45px;

		text-align: center;

		cursor: pointer;

		border-radius: 50%;

		-webkit-border-radius: 50%;

		-moz-border-radius: 50%;

		border: 2px solid #8D0000;

		opacity: 0;

	}

	#scrollUp.hd-show {

		opacity: 1;

	}

	#scrollUp svg {

		display: block;

		position: absolute;

		margin: auto;

		top: 0;

		right: 0;

		bottom: 5px;

		left: 0;

		fill: #8D0000;

		-webkit-transform: rotateZ(270deg);

		-moz-transform: rotateZ(270deg);

		-ms-transform: rotateZ(270deg);

		-o-transform: rotateZ(270deg);

		transform: rotateZ(270deg);

	}

	#scrollUp:hover {

		background-color: #8D0000;

	}

	#scrollUp:hover svg {

		fill: white;

	}

/* ---------- 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>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>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>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>img {

		position: absolute;

		right: 40px;

		bottom: 60px;

	}

	#hd .hd_box iframe {

		width: 100%;

		height: 100%;

	}

/* ---------- transition ---------- */

	#scrollUp,

	#hd a.hd-link,

	#hd .play-tutorial img,

	#hd .play-tutorial p,

	#hd .hd-more h4,

	#hd #op_chart figure,

	#hd .hd-sec-fan .fan_cover li,

	#hd .hd-supremefx li,

	#hd #sonic_studio .hd-content{

		-webkit-transition: all 0.4s ease;

		-moz-transition: all 0.4s ease;

		-o-transition: all 0.4s ease;

		-ms-transition: all 0.4s ease;

		transition: all 0.4s ease;

	}

/* ------------ SEC_MENU ------------ */

	#hd #nav{

		text-align: center;

		padding-left: 3px;

	}

	#hd #nav .hd-col20{

		padding: 0 3px;

		vertical-align: top;

	}

	#hd #nav a{

		display: block;

		position: relative;

		overflow: hidden;

	}

	#hd #nav h4 {

		padding: 10px;

		margin:0;

		color: #717171;

		background-color: #333333;

		font-size: 18px;

		letter-spacing: 0;

		position: relative;

		z-index: 2;

		transition: all 0.8s ease 0s;

		-webkit-transition: all 0.8s ease 0s;

		-moz-transition: all 0.8s ease 0s;

		-ms-transition: all 0.8s ease 0s;

		-o-transition: all 0.8s ease 0s;

	}

	#hd #nav img{

		padding:6% 0;

		transition: all 0.8s ease 0s;

		-webkit-transition: all 0.8s ease 0s;

		-moz-transition: all 0.8s ease 0s;

		-ms-transition: all 0.8s ease 0s;

		-o-transition: all 0.8s ease 0s;

	}

	#hd #nav a:hover img{

		-webkit-transform: scale(1.1);

		   -moz-transform: scale(1.1);

		    -ms-transform: scale(1.1);

		     -o-transform: scale(1.1);

		        transform: scale(1.1);

	}

	#hd #nav a:hover h4 {

		color: white;

		background: #8D0000;

	}

/* ------------ SEC_SPEC ------------ */

	#hd #specs{

		padding:100px 0 120px;

		background-position: left 80%;

		background-size: 70% auto;

		background-repeat: no-repeat;

	}

	#hd #specs figure{display: none; }

	#hd #specs .spec-main {

		width: 100%;

		height: 0;

		padding-bottom: 65%;

		background: 40% center no-repeat;

		background-size: contain;

	}

	#hd #specs figure{display: none; }

	#hd #specs figure.hd-active{

		display: block;

		-webkit-animation: slideInFromRight .8s cubic-bezier(.5,.38,.22,.98) forwards;

		-o-animation: slideInFromRight .8s cubic-bezier(.5,.38,.22,.98) forwards;

		animation: slideInFromRight .8s cubic-bezier(.5,.38,.22,.98) forwards;

	}

	#hd #specs figure.diy.hd-active{

		-webkit-animation: slideInFromLeft .8s cubic-bezier(.5,.38,.22,.98) forwards;

		-o-animation: slideInFromLeft .8s cubic-bezier(.5,.38,.22,.98) forwards;

		animation: slideInFromLeft .8s cubic-bezier(.5,.38,.22,.98) forwards;

	}

	#hd #specs .overview .spec-main {background-image: url('../img/spec/spec-overview.png'); }

	#hd #specs .diy .spec-main {background-image: url('../img/spec/spec-diy.png'); }



	#hd #specs .switch{

		display: block;

		margin:0 auto 30px;

		z-index: 3;

	}

	#hd #specs .switch li{

		display: inline-block;

		vertical-align: middle;

		padding:0 10px;

		cursor: pointer;

	}

	#hd #specs .switch p{

		display: inline-block;

		vertical-align: middle;

		font-weight: bold;

		padding:0 10px;

		margin:0;

		color: #eaeaea;

		font-weight: 300;

	}

	#hd #specs .switch .hd-active p{color: #cc0000; font-weight: 600;}



	#hd #specs ol {

		display: block;

		width: 100%;

		height: 100%;

		position: absolute;

		top: 0;

		left: 0;

		counter-reset: mycounter;

	}

	#hd #specs ol li{

		position: absolute;

		font-size: 16px;

	}

	#hd #specs ol li:before{

		counter-increment: mycounter;

		content: counter(mycounter);

		display: none;

		width: 24px;

		height: 24px;

		line-height:24px;

		text-align: center;

		border-radius: 15px;

		border: 2px solid #8D0000;

		position: absolute;

		top: 0;

		left: -40px;

		z-index: 2;

	}

	#hd #specs ol li p {

		margin-bottom: 10px;

		letter-spacing: 0;

	}

	#hd #specs ol li small{

		display: block;

		line-height: 14px;

		margin:5px 0 10px;

	}

	#hd #specs ol li b{font-weight: 400; }



	/* spec li positions (overview)*/

		#hd #specs .overview ol li:nth-child(-n+9){left: 8%; }

		#hd #specs .overview ol li:nth-child(1){top: 1.5%;}

		#hd #specs .overview ol li:nth-child(2){top:12.5%;}

		#hd #specs .overview ol li:nth-child(3){top:17%;}

		#hd #specs .overview ol li:nth-child(4){top:21%;}

		#hd #specs .overview ol li:nth-child(5){top:24.5%;}

		#hd #specs .overview ol li:nth-child(6){top:33.5%;}

		#hd #specs .overview ol li:nth-child(7){top:43.5%;}

		#hd #specs .overview ol li:nth-child(8){top:63%;}

		#hd #specs .overview ol li:nth-child(8) img{

			position: absolute;

			top: 0;

			right: 105%;

		}

		#hd #specs .overview ol li:nth-child(9){top:79%;}

		#hd #specs .overview ol li:nth-child(n+10){left: 76%; }

		#hd #specs .overview ol li:nth-child(10){top:7%;}

		#hd #specs .overview ol li:nth-child(11){top:16.5%;}

		#hd #specs .overview ol li:nth-child(12){top:30%;}

		#hd #specs .overview ol li:nth-child(13){top:38.5%;}

		#hd #specs .overview ol li:nth-child(14){top:46%;}

		#hd #specs .overview ol li:nth-child(15){top:57.5%;}

		#hd #specs .overview ol li:nth-child(16){top:71.5%;}

		#hd #specs .overview ol li:nth-child(16) img{

			position: absolute;

			top: 3px;

			left: 105%;

		}

		#hd #specs .overview ol li:nth-child(17){top:87%;}



	/* spec li positions (diy)*/

		#hd #specs .diy ol li{width: 16%; max-width: 185px;}



		#hd #specs .diy ol li:nth-child(-n+3){left: 15%; }

		#hd #specs .diy ol li:nth-child(-n+3) img{

			position: absolute;

			top: 0;

			right: 105%;

		}

		#hd #specs .diy ol li:nth-child(1){top: 5.5%;}

		#hd #specs .diy ol li:nth-child(2){top:34.5%;}

		#hd #specs .diy ol li:nth-child(3){top:66.5%;}



		#hd #specs .diy ol li:nth-child(n+4){left: 74%; }

		#hd #specs .diy ol li:nth-child(n+3) img{margin-top: -15%;}

		#hd #specs .diy ol li:nth-child(n+4) img{

			position: absolute;

			top: 0;

			left: 105%;

		}

		#hd #specs .diy ol li:nth-child(4){top:16.5%;}

		#hd #specs .diy ol li:nth-child(5){top:51%;}

		#hd #specs .diy ol li:nth-child(6){top:80.5%;}

		#hd #specs .diy ol li:nth-child(6) img{margin-top: -25%;}

/* ------------ intro ------------ */

	#hd .hd-sec-intro{padding:50px 0 100px; }

	#hd .hd-sec-intro h2{width: 100%; margin-bottom: 30px;}

	#hd .hd-sec-intro h2 + .hd-col60{margin: 0 -5% 0 calc(-5% - 7px); }

	#hd .hd-sec-intro .hd-col60:last-child{

		position: relative;

		z-index: -1;

	}



/* ------------ SEC_lighting ------------ */

	#hd .hd-sec-lighting{

		padding:120px 0 100px;

		position: relative;

		background: left 60% no-repeat;

		z-index: -2;

	}

	#hd .hd-sec-lighting:before{

		content:'';

		display: block;

		width: 100%;

		padding-bottom: 30%;

		position: absolute;

		top: 0;

		left: 0;

		background: url(../img/title/title_lighting.png) 0 0 no-repeat;

		background-size: cover;

		z-index: -3;

	}

	#hd .hd-sec-lighting h2{margin-bottom: 30px; }



	#hd .hd-lighting > img{width: 100%; }

	#hd .hd-lightingbox{

		position: absolute;

		top: 0;

		right: 0;

		width: 100%;

		height: 0;

		padding-bottom: 65%

	}

	#hd .hd-lightingbox p{

		display: block;

		font-size: 18px;

		font-weight: 400;

		text-transform: uppercase;

		position: absolute;

		left: 4%;

	}

	#hd #strip_add{top: 78%; }

	#hd #strip_rgb{top: 88%; }

	#hd .hd-w1250on{display: none;}

	#hd .hd-lighting{

		width: 100%;

		height: 100%;

		position: absolute;

		top: 0;

		left: 0;

		overflow: hidden;

	}

	#hd .hd-sec-lighting .hd-col55{

		box-sizing: border-box;

		padding:0 1% 0 2%;

		margin-bottom: 20%;

		position: relative;

		z-index: 2;

	}

	#hd .hd-sec-lighting h3{

		margin-top: 50px;

	}

	#hd .hd-controls{

		display: flex;

		flex-wrap: wrap;

		justify-content: flex-start;

		margin-left: -5%;

		position: relative;

	}

	#hd .hd-controls li{

		width: 16.6666%;

		max-width: 130px;

		cursor:pointer;

		opacity: .5;

	}

	#hd .hd-controls li:hover,

	#hd .hd-controls li.hd-active{

		opacity: 1;

	}

	#hd .hd-controls li img{

		display: block;

		width: 65px;

		height: 65px;

		margin:20px auto 10px;

	}

	#hd .hd-controls b{

		display: block;

		font-size: 16px;

		font-weight: 400;

		margin-bottom: 5px;

	}

	#hd .hd-controls small{

		width: 113px;

		height: 65px;

		margin:0 auto;

	}



	#colorpicker{

		position: absolute;

		top: 112%;

		right: 95%;

	}



	#color,

	#greybg{

		width: 100%;

		height: 0;

		padding-bottom: 136%;

		margin-top: 1px;

		position: absolute;

		top: 0;

		left: 0;

		z-index: -1;

	}

	#greybg {

		background-color: #000000;

		z-index: -2;

	}

/* ------------ sdk ------------ */

	#hd .hd-sec-sdk{padding:70px 0 30px;}

	#hd .hd-sec-sdk h3 + p{margin-bottom: 70px; }

	#hd .hd-sec-sdk .hd-col50.left{

		vertical-align: top;

		padding-right: 5%;

	}

	#hd .hd-sec-sdk .hd-col50.right{

		vertical-align: top;

		padding-left: 5%;

	}

	#hd .hd-sec-sdk .hd-col50.left > img{

		-webkit-transform: perspective(660px) rotateY(10deg);

		   -moz-transform: perspective(660px) rotateY(10deg);

		    -ms-transform: perspective(660px) rotateY(10deg);

		     -o-transform: perspective(660px) rotateY(10deg);

		        transform: perspective(660px) rotateY(10deg);

	}

	#hd .hd-sec-sdk .hd-col50.right > img{

		-webkit-transform: perspective(660px) rotateY(-10deg);

		   -moz-transform: perspective(660px) rotateY(-10deg);

		    -ms-transform: perspective(660px) rotateY(-10deg);

		     -o-transform: perspective(660px) rotateY(-10deg);

		        transform: perspective(660px) rotateY(-10deg);

	}

	#hd .hd-sec-sdk img + p{

		position: relative;

		margin-top: -70px;

		z-index: 2;

	}

	#hd .hd-sec-sdk .hd-col50.left p{

		padding:0 15% 0 5%;

	}

	#hd .hd-sec-sdk .hd-col50.right p{

		padding:0 5% 0 15%;

	}

	#hd #sdk_logo{

		display: block;

		position: absolute;

		top: 0;right: 0;bottom: 0;left: 0;

		margin:auto;

	}

/* ------------ aura -------------- */

	#hd .hd-sec-aura {

		position: relative;

		padding-bottom: 90px;

	}

	#hd .hd-sec-aura .hd-w1000 {

		width: 55%;

		position: absolute;

		left: 10%;

		right: 0;

		bottom: 0;

		z-index: 2;

	}

	#hd .hd-sec-aura figure{position: relative;}

	#hd .hd-sec-aura .hd-cover{

		position: absolute;top:0;left:0;

	}

/* ------------ ecosystem -------------- */

	#hd .hd-sec-ecosystem {padding: 120px 0; }

	#hd .hd-sec-ecosystem h3+p{

		max-width: 750px;

		margin:30px auto 80px;

	}

	#hd #compare_deco{position: relative;}

	#hd #compare_deco:before,

	#hd #compare_deco:after{

		content:'';

		display: block;

		width: 110%;

		height: 2px;

		background: #979797;

		background: -moz-linear-gradient(left, #000 1%, #d6d6d6 23%, rgba(187,159,209, 0) 50%, #fff 75%, #000 99%);

		background: -webkit-linear-gradient(left, #000 1%,#d6d6d6 23%,rgba(187,159,209, 0) 50%,#fff 75%,#000 99%);

		background: linear-gradient(to right, #000 1%,#d6d6d6 23%,rgba(187,159,209, 0) 50%,#fff 75%,#000 99%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#979797', endColorstr='#979797',GradientType=1 );

		position: absolute;

		left: -5%;

		z-index: 999;

	}

	#hd #compare_deco:before{top: 0; }

	#hd #compare_deco:after{

		bottom: 0;

		background: #979797;

		background: -moz-linear-gradient(left, #000 1%, #fff 18%, rgba(187,159,209, 0) 40%, #d6d6d6 70%, #000 99%);

		background: -webkit-linear-gradient(left, #000 1%,#fff 18%,rgba(187,159,209, 0) 40%,#d6d6d6 70%,#000 99%);

		background: linear-gradient(to right, #000 1%,#fff 18%,rgba(187,159,209, 0) 40%,#d6d6d6 70%,#000 99%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#979797', endColorstr='#979797',GradientType=1 );

	}

	.twentytwenty-overlay:hover{background: transparent;}

	.twentytwenty-after-label:before, .twentytwenty-before-label:before{

		font-family: "ROGFontsv", sans-serif;

		font-size: 1.5rem;

		text-transform: uppercase;

		padding-bottom: 10px;

		background-color: rgba(0,0,0,.5);

	}

	#hd #compare_img img{width: 100%; }

	#hd .twentytwenty-handle {

		height: 40px;

		width: 40px;

		position: absolute;

		left: 50%;

		top: 50%;

		margin-left: -20px;

		margin-top: -20px;

		border: none;

		background: #970000;

		background: -moz-linear-gradient(left, #970000 0%, #d60000 21%, #8d0000 50%, #d60000 77%, #970000 100%);

		background: -webkit-linear-gradient(left, #970000 0%,#d60000 21%,#8d0000 50%,#d60000 77%,#970000 100%);

		background: linear-gradient(to right, #970000 0%,#d60000 21%,#8d0000 50%,#d60000 77%,#970000 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#970000', endColorstr='#970000',GradientType=1 );

	}

	#hd .twentytwenty-horizontal .twentytwenty-handle:before,

	#hd .twentytwenty-horizontal .twentytwenty-handle:after{

		width: 2px;

		background-color: #920000;

		box-shadow: none;

	}

	#hd .twentytwenty-horizontal .twentytwenty-handle:before{margin-bottom: 20px; }

	#hd .twentytwenty-horizontal .twentytwenty-handle:after{margin-top: 20px; }

	#hd .twentytwenty-left-arrow{

		margin-top: -6px;

		margin-left: -17px;

	}

	#hd .twentytwenty-right-arrow{

		margin-top: -6px;

		margin-right: -17px;

	}



/* ------------ SEC_PERFORMANCE ------------ */

	#hd #performance{

		padding-top: 100px;

	}

	#hd #performance h2:before{

		content:'';

		width: 100%;

		height: 0;

		padding-bottom: 20%;

		background: url(../img/title/title_lighting.png) 0 0 no-repeat;

		background-size: cover;

		position: absolute;

		top: 0;

		left: 0;

		z-index: -1;

	}

/* ------------ prolock ------------ */

	#hd .hd-sec-prolock{padding:100px 0 0;}

/* ------------ ddr4 ------------ */

	#hd .hd-sec-ddr4{padding:30px 0; }

	#hd .hd-sec-ddr4 h3{margin-bottom: 40px;}

	#hd .hd-sec-ddr4 .fleft{

		margin-left: -5%;

		margin-right: -10%;

	}

	#hd .hd-sec-ddr4 .fright{

		position: relative;

		z-index: 2;

		margin-top: 12%;

	}

/* ------------ ramcache ------------ */

	#hd .hd-sec-ramcache {padding: 50px 0 0; }

	#hd .hd-sec-ramcache h4+p{max-width: 900px;margin:0 auto 30px;}

	#hd .hd-sec-ramcache .hd-pic {

	    margin-top: -100px;

	    margin-bottom: 50px;

	    position: relative;

	}

	#hd .hd-sec-ramcache .hd-pic img {

	    position: relative;

	    z-index: -1;

	    margin: 0 auto;

	}

	#hd .hd-sec-ramcache .hd-pic p {

	    text-align: left;

	    width: 20%;

	    max-width: 250px;

	    position: absolute;

	    top: 25%;

	    left: 75%;

	    z-index: 2;

	}

/* ------------ overview ------------ */

	#hd .hd-sec-overview{padding:0 0 70px; }

	#hd #op_chart:after{

		content:'';

		display: block;

		clear:both;

	}

	#hd #op_chart li{padding:8px;}

	#hd #op_chart figure{

		background-size: cover;

		background-repeat: none;

		border:3px solid #404040;

		position: relative;

		overflow: hidden;

		cursor: pointer;

	}

	#hd #op_chart .hd-active figure,

	#hd #op_chart li:hover figure{border-color: #920000; }

	#hd #op_chart figure .hd-content{

		display: none;

		width: calc(100% + 20px);

		height: 100%;

		overflow-y: scroll;

		position: absolute;

		top: 0;left: 0;

		padding:7% 6%;

		text-align: left;

		background-color: rgba(0,0,0,.7);

	}

	#hd #op_chart .hd-active figure .hd-content{

		display: block;

		-webkit-animation: fadeIn .5s forwards;

		-o-animation: fadeIn .5s forwards;

		animation: fadeIn .5s forwards;

	}

	#hd #op_chart .hd-active figure h3{display: none;}

	#hd #op_chart figure h3{

		height: 37px;

		position: absolute;

		top: 0;right: 0;bottom: 0;left: 0;

		margin:auto;

	}

	#hd #op_chart figure h4{font-size: 20px;}

	#hd #op_chart li:nth-child(-n+2) figure{padding-bottom: 50%;}

	#hd #op_chart li:nth-child(n+3) figure{padding-bottom: 70%;}

	#hd #op_chart li:nth-child(1) figure{background-image: url(../img/performance/tpu.jpg)}

	#hd #op_chart li:nth-child(2) figure{background-image: url(../img/performance/all_around.jpg)}

	#hd #op_chart li:nth-child(3) figure{background-image: url(../img/performance/fan_xpert.jpg)}

	#hd #op_chart li:nth-child(4) figure{background-image: url(../img/performance/power_control.jpg)}

	#hd #op_chart li:nth-child(5) figure{background-image: url(../img/performance/turbo_core.jpg)}

/* ------------ mode ------------ */

	#hd .hd-sec-mode{

		position: relative;

		background: url(../img/bg-glow.jpg) center top no-repeat;

		background-size: contain;

		padding-top: 30px;

	}

	#hd .hd-sec-mode h3 + p{margin:0 auto 80px; }

	#hd .hd-sec-mode .hd-col50{

		display: inline-block;

		vertical-align: top;

		padding:0 40px;

		text-align: center;

		perspective: 600px;

	}

	#hd .hd-sec-mode .hd-col50:last-child{margin-left: -7px; }

	#hd .hd-sec-mode .hd-col50 > div{position: relative;}

	#hd .hd-sec-mode .mode-content{

		font-size: 15px;

		width: 85%;

		margin: -40% auto 0;

		position: relative;

		z-index: 2;

	}

	/* tips */

		#hd .hd-sec-mode .hd-tips{

			width: 100%;

			height: 100%;

			position: absolute;

			top: 0;left: 0;

		}

		#hd .hd-sec-mode .hd-tips li{

			position: absolute;

			border:2px solid transparent;

			cursor: crosshair;

			-webkit-transition: all .25s ease;

			   -moz-transition: all .25s ease;

			    -ms-transition: all .25s ease;

			     -o-transition: all .25s ease;

			        transition: all .25s ease;

		}

		#hd .hd-sec-mode .hd-tips li:before{

			content:'';

			display: block;

			height: 15px;

			width: 15px;

			border-radius: 8px;

			position: absolute;

			top: -8px;

			left: -8px;

			background-color:#e10202;

			box-shadow: 0 0 10px #e10202;

		}

		#hd .hd-sec-mode .tipbox{

			display: inline-block;

			max-width: 495px;

			min-width: 200px;

			padding: 10px 20px;

			margin-bottom: 0;

			position: absolute;

			background-color: rgba(0,0,0, 0.7);

			border: 2px solid #e10202;

			z-index: 3;

			display: none;

			text-align: left;

		}

		#hd .hd-sec-mode .hd-tips li:hover{

			border:2px solid rgba(225,51,51,.5);

		}

		#hd .hd-sec-mode .hd-tips li:hover .tipbox{

			display: block;

			/*-webkit-animation: fadeInFromDown .5s forwards;

			-o-animation: fadeInFromDown .5s forwards;

			animation: fadeInFromDown .5s forwards;*/

		}

	/* tips position (ez-mode) */

		#hd .ez_mode .hd-tips{

			perspective: 600px;

			-webkit-transform: rotateY(15deg);

			   -moz-transform: rotateY(15deg);

			    -ms-transform: rotateY(15deg);

			     -o-transform: rotateY(15deg);

			        transform: rotateY(15deg);

		}

		/*#hd .ez_mode .hd-tips p{

			-webkit-animation: flipIn .4s forwards;

			-o-animation: flipIn .4s forwards;

			animation: flipIn .4s forwards;

		}*/

		#hd .ez_mode .hd-tips li:nth-child(1){

			width: 18%; height: 3.2%;

			top: 7.5%; left: 35%;

		}

		#hd .ez_mode .hd-tips li:nth-child(1) .tipbox{

			width: 270px;

			top: -65%; left: 110%;

		}

		#hd .ez_mode .hd-tips li:nth-child(2){

			width: 31%; height: 18.2%;

			top: 37%; left: 8%;

		}

		#hd .ez_mode .hd-tips li:nth-child(2) .tipbox{

			width: 270px;

			top: 10%; left: 105%;

		}

		#hd .ez_mode .hd-tips li:nth-child(3){

			width: 21%; height: 14%;

			top: 19%; left: 41%;

		}

		#hd .ez_mode .hd-tips li:nth-child(3) .tipbox{

			width: 270px;

			top: 110%; left: 20%;

		}

		#hd .ez_mode .hd-tips li:nth-child(4){

			width: 15%;	height: 3%;

			top: 7.3%; left: 63%;

		}

		#hd .ez_mode .hd-tips li:nth-child(4) .tipbox{

			width: 270px;

			top: 170%; left: -150%;

		}

		#hd .ez_mode .hd-tips li:nth-child(5){

			width: 20%;	height: 4%;

			top: 7%; left: 8%;

		}

		#hd .ez_mode .hd-tips li:nth-child(5) .tipbox{

			width: 270px;

			top: 120%; left: -18%;

		}

	/* tips position (advanced-mode) */

		#hd .advanced_mode .hd-tips{

			perspective: 600px;

			-webkit-transform: rotateY(-15deg);

			   -moz-transform: rotateY(-15deg);

			    -ms-transform: rotateY(-15deg);

			     -o-transform: rotateY(-15deg);

			        transform: rotateY(-15deg);

		}

		/* #hd .advanced_mode .hd-tips p{

			-webkit-animation: flipInOpp .4s forwards;

			-o-animation: flipInOpp .4s forwards;

			animation: flipInOpp .4s forwards;

		} */

		#hd .advanced_mode .hd-tips li:nth-child(1){

			width: 13%; height: 3.2%;

			top: 6.5%; left: 21%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(1) .tipbox{

			width: 270px;

			top: 175%; left: -120%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(2){

			width: 25%; height: 3.2%;

			top: 11.5%; left: -3%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(2) .tipbox{

			width: 270px;

			top: 70%; left: 115%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(3){

			width: 11%; height: 3.2%;

			top: 9.5%; left: 33%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(3) .tipbox{

			width: 270px;

			top: 170%; left: -145%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(4){

			width: 21%; height: 3.2%;

			top: 30.8%; left: -3%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(4) .tipbox{

			width: 270px;

			top: 170%; left: 10%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(5){

			width: 21%; height: 3.2%;

			top: 14.2%; left: -3%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(5) .tipbox{

			width: 270px;

			top: 170%; left: 10%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(6){

			width: 11%; height: 3.2%;

			top: 55.5%; left: 45%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(6) .tipbox{

			width: 270px;

			top: -600%; left: -20%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(7){

			width: 15%; height: 3%;

			top: 9%; left: -3%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(7) .tipbox{

			width: 270px;

			top: 225%; left: 140%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(8){

			width: 11%; height: 3%;

			top: 7%; left: 63%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(8) .tipbox{

			width: 270px;

			top: 235%; left: -280%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(9){

			width: 21%; height: 3.2%;

			top: 22.5%; left: -3%;

		}

		#hd .advanced_mode .hd-tips li:nth-child(9) .tipbox{

			width: 270px;

			top: 170%; left: 10%;

		}

/* ------------ fan ------------ */

	#hd .hd-sec-fan{

		padding:90px 0;

		background-position: center center;

		background-repeat: no-repeat;

		background-size: contain;

	}

	#hd .hd-sec-fan .fleft{

		position: relative;

	}

	#hd .hd-sec-fan .fright{

		margin-top: 5%;

	}

	#hd .hd-sec-fan .fan_cover li{

		position: absolute;

		top: 0;

		left: 0;

		right: 0;

		margin:0 auto;

		opacity: 0;

	}

	#hd .hd-sec-fan .fan_cover li.hd-active{

		opacity: 1;

	}

	#hd .hd-sec-fan .hd-filter{

		padding:6% 0;

	}

	#hd .hd-sec-fan .hd-filter li{

		display: inline-block;

		vertical-align: top;

		width: 25%;

		margin:20px 0 20px -5px;

		cursor: pointer;

	}

	#hd .hd-sec-fan li p{

		margin-bottom: 0;

	}

	#hd .hd-sec-fan .hd-content{

		position: relative;

		background: url(../img/bg-glow.jpg) center center no-repeat;

		background-size: 180%;

		padding:30px 16%;

	}

	#hd .hd-sec-fan .hd-content:before{

		content:'';

		display: block;

		width: calc(100% + 4px);

		height: calc(100% + 4px);

		position: absolute;

		top: -2px;

		left: -2px;

		background: #bbc3d1;

		background: -moz-linear-gradient(15deg, #bbc3d1 0%, #131313 51%, #131313 51%, #bbc3d1 100%);

		background: -webkit-linear-gradient(15deg, #bbc3d1 0%,#131313 51%,#131313 51%,#bbc3d1 100%);

		background: linear-gradient(15deg, #bbc3d1 0%,#131313 51%,#131313 51%,#bbc3d1 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbc3d1', endColorstr='#bbc3d1',GradientType=1 );

		z-index: -1;

	}

	#hd .hd-sec-fan .hd-content li{

		display: none;

	}

	#hd .hd-sec-fan .hd-content li.hd-active{

		display: block;

	}





	#hd .fan_icon{

		background-image: url(../img/performance/fan/spritesheet.png);

		background-repeat: no-repeat;

		display: block;

		width: 47px;

		height: 47px;

		margin:0 auto 5px;

		opacity: .8;

	}

	#hd .hd-sec-fan li:hover .fan_icon{

		opacity: 1;

	}

	/* icon position */

		#hd .fan_icon.fan_temp{

	    	background-position: -119px -119px;

		}

		#hd .hd-active .fan_icon.fan_temp{

			background-position: -176px -119px;

		}

		#hd .fan_icon.fan_pump{

			background-position: -119px -176px;

		}

		#hd .hd-active .fan_icon.fan_pump{

			background-position: -176px -176px;

		}

		#hd .fan_icon.fan_pwm{

			background-position: -5px -5px;

		}

		#hd .hd-active .fan_icon.fan_pwm{

			background-position: -62px -5px;

		}

		#hd .fan_icon.fan_card{

			background-position: -5px -62px;

		}

		#hd .hd-active .fan_icon.fan_card{

			background-position: -62px -62px;

		}

		#hd .fan_icon.fan_protection{

			background-position: -5px -176px;

		}

		#hd .hd-active .fan_icon.fan_protection{

			background-position: -62px -176px;

		}

		#hd .fan_icon.fan_inout{

			background-position: -5px -119px;

		}

		#hd .hd-active .fan_icon.fan_inout{

			background-position: -62px -119px;

		}

		#hd .fan_icon.fan_flow{

			background-position: -119px -62px;

		}

		#hd .hd-active .fan_icon.fan_flow{

			background-position: -176px -62px;

		}

		#hd .fan_icon.fan_sensor{

			background-position: -119px -5px;

		}

		#hd .hd-active .fan_icon.fan_sensor{

			background-position: -176px -5px;

		}

/* ------------ SEC_AUDIO ------------ */

	#hd #audio{

		padding-top: 90px;

	}

	#hd #audio h2:before{

		content:'';

		width: 100%;

		height: 0;

		padding-bottom: 20%;

		background: url(../img/title/title_audio.png) 0 0 no-repeat;

		background-size: cover;

		position: absolute;

		top: 0;

		left: 0;

		z-index: -1;

	}

	#hd #audio h2{

		margin-bottom: 50px;

	}

/* ------------ audio ------------ */

	#hd .hd-sec-audio{

		position: relative;

		padding-bottom: 350px;

		margin-bottom: -300px;

		z-index: 1;

	}

	#hd .hd-sec-audio:before{

		content:'';

		display: block;

		position: absolute;

		top: 10%;

		left: 0;

		width: 50%;

		padding-bottom: 26%;

		max-width: 1080px;

		background: url(../img/audio/supremefx_bg.png) 0 0 no-repeat;

		background-size: contain;

		z-index: 1;

		pointer-events: none;

	}

	#hd .hd-supremefx{

		position: relative;

		padding-top: 50px;

	}

	#hd .hd-supremefx img{

		margin-right: 0;

	}

	#hd .hd-supremefx li:not(:first-child){

		position: absolute;

		bottom: 0;

		left: 0;right: 0;

		margin:0 auto;

		opacity: 0;

	}

	#hd .hd-supremefx li:first-child{

		opacity: 1;

	}

	#hd .hd-supremefx li:not(:first-child).hd-active{

		opacity: 1;

	}

	#hd .hd-supremefx .txt-box{

		width: 280px;

		display: block;

		position: absolute;

	}

		#hd .hd-supremefx li:nth-child(2) .txt-box{

			top: -10%;

			left: 80%;

		}

		#hd .hd-supremefx li:nth-child(3) .txt-box{

			top: -5%;

			left: 65%;

		}

		#hd .hd-supremefx li:nth-child(4) .txt-box{

			top: -9%;

			left: 71%;

		}

		#hd .hd-supremefx li:nth-child(5) .txt-box{

			top: 15%;

			left: 30%;

		}

		#hd .hd-supremefx li:nth-child(6) .txt-box{

			top: -10%;

			left: 80%;

		}

	#hd .audio-switch{

		position: relative;

		width: 80%;

		height: 24px;

		border-radius: 16px;

		border:3px solid #7c7c7e;

		margin-top: 100px;

		text-align: center;

		display: flex;

		justify-content: space-between;

	}

	#hd .audio-switch li{

		display: inline-block;

		vertical-align: top;

		width: 25%;

		text-align: center;

		position: relative;

		cursor: pointer;

	}

	#hd .audio-switch li#dragger{

		display: block;

		width: 35px;

		height: 35px;

		border-radius: 17px;

		background: url(../img/audio/dragger.png) center center no-repeat;

		background-size: cover;

		position: absolute;

		top: 0 !important;

		bottom: 0;

		margin:auto 0;

		cursor: pointer;

		-webkit-transition: all .5s ease;

		   -moz-transition: all .5s ease;

		    -ms-transition: all .5s ease;

		     -o-transition: all .5s ease;

		        transition: all .5s ease;

	}

	#hd .audio-switch li#dragger:hover{

		box-shadow: 1px 1px 10px #ad0202;

		-webkit-transform: scale(1.5);

		   -moz-transform: scale(1.5);

		    -ms-transform: scale(1.5);

		     -o-transform: scale(1.5);

		        transform: scale(1.5);

	}

	@keyframes glow{

		from{box-shadow: 0 0 0px #ad0202;}

		to  {box-shadow: 1px 1px 10px #ad0202;}

	}

	#hd .audio-switch li#dragger.pos1{

		left: 0;

	}

	#hd .audio-switch li#dragger.pos2{

		left: 21%;

	}

	#hd .audio-switch li#dragger.pos3{

		left: 48%;

	}

	#hd .audio-switch li#dragger.pos4{

		left: 75%;

	}

	#hd .audio-switch li#dragger.pos5{

		left: 96.5%;

	}

	#hd .audio-switch li#dragger.moving{

		-webkit-transform: scale(1.5);

		   -moz-transform: scale(1.5);

		    -ms-transform: scale(1.5);

		     -o-transform: scale(1.5);

		        transform: scale(1.5);

		-webkit-animation: glow .5s 1;

		-o-animation: glow .5s 1;

		animation: glow .5s 1;

	}

	#hd .audio-switch li:first-child{width: 15%; margin-left: -6.5%;}

	#hd .audio-switch li:nth-child(5){width: 15%; margin-right: -6.5%;}

	#hd .audio-switch li:first-child span{margin-left: 3px; }

	#hd .audio-switch li:nth-child(5) span{margin-right: 3px; }

	#hd .audio-switch li span{

		display: inline-block;

		width: 10px;

		height: 10px;

		border-radius: 6px;

		margin:4px;

		position: relative;

		background: #46505a;

		background: -moz-linear-gradient(135deg, #46505a 0%, #7f8180 18%, #7f8084 29%, #6d767d 38%, #67717a 46%, #67747c 46%, #727c85 48%, #727f87 48%, #9ca9b1 55%, #a2afb5 56%, #636c75 68%, #6f747a 77%, #6f7478 78%, #7f8082 93%, #7f7f7f 100%);

		background: -webkit-linear-gradient(135deg, #46505a 0%,#7f8180 18%,#7f8084 29%,#6d767d 38%,#67717a 46%,#67747c 46%,#727c85 48%,#727f87 48%,#9ca9b1 55%,#a2afb5 56%,#636c75 68%,#6f747a 77%,#6f7478 78%,#7f8082 93%,#7f7f7f 100%);

		background: linear-gradient(135deg, #46505a 0%,#7f8180 18%,#7f8084 29%,#6d767d 38%,#67717a 46%,#67747c 46%,#727c85 48%,#727f87 48%,#9ca9b1 55%,#a2afb5 56%,#636c75 68%,#6f747a 77%,#6f7478 78%,#7f8082 93%,#7f7f7f 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46505a', endColorstr='#7f7f7f',GradientType=1 );

	}



	#hd .audio-switch li h4{

		font-size: 18px;

		position: absolute;

		bottom: 40px;

		left: 0;right: 0;

		margin:0 auto;

	}

	#hd .btn-audio{

		display: inline-block;

		max-width: 80%;

		padding:0 20px 20px;

		border-radius: 5px;

		margin:70px auto 0;

		background: #000000;

		font-family: "ROGFontsv", sans-serif;

		font-size: 30px;

		text-align: center;

		color:#ad0202;

		position: relative;

		-webkit-transition: all .25s ease;

		   -moz-transition: all .25s ease;

		    -ms-transition: all .25s ease;

		     -o-transition: all .25s ease;

		        transition: all .25s ease;

	}

	#hd .btn-audio:before{

		content:'';

		display: block;

		width:calc(100% + 4px);

		height:calc(100% + 4px);

		border-radius: 7px;

		position: absolute;

		top: -2px;

		left: -2px;

		z-index: -1;

		background: #ff0000;

		background: -moz-linear-gradient(left, #ff0000 0%, #9c0000 25%, #ff0000 54%, #840000 100%);

		background: -webkit-linear-gradient(left, #ff0000 0%, #9c0000 25%, #ff0000 54%, #840000 100%);

		background: linear-gradient(to right, #ff0000 0%, #9c0000 25%, #ff0000 54%, #840000 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#840000',GradientType=1 );

	}

	#hd .btn-audio:hover{

		color:#fff;

	}

/* ------------ sonic ------------ */

	#hd .hd-sec-sonic{

		padding:30px 0 50px;

		overflow: hidden;

		position: relative;

		z-index: 2;

	}

	#hd #sonic_studio li{

		display: inline-block;

		vertical-align: top;

		margin-left: -5px;

		margin-right: -2px;

		width: 16.6666%;

		height: 0;

		padding:10px;

		padding-bottom: 37%;

		background-repeat: no-repeat;

		background-size: 87%;

		background-position: center top;

		position: relative;

		cursor: crosshair;

	}

	#hd #sonic_studio li:after{

		content:'';

		display: block;

		width: 100%;

		height: 1px;

		position: absolute;

		left: 0;bottom: -1px;

		box-shadow: 0 0 50px 78px #000000;

	}

	#hd #sonic_studio li:nth-child(1){background-image: url(../img/audio/sonic-studio-lll-1.jpg); }

	#hd #sonic_studio li:nth-child(2){background-image: url(../img/audio/sonic-studio-lll-2.jpg); }

	#hd #sonic_studio li:nth-child(3){background-image: url(../img/audio/sonic-studio-lll-3.jpg); }

	#hd #sonic_studio li:nth-child(4){background-image: url(../img/audio/sonic-studio-lll-4.jpg); }

	#hd #sonic_studio li:nth-child(5){background-image: url(../img/audio/sonic-studio-lll-5.jpg); }

	#hd #sonic_studio li:nth-child(6){background-image: url(../img/audio/sonic-studio-lll-6.jpg); }

	#hd #sonic_studio h4{

		font-size: 20px;

		text-align: center;

		text-transform: none;

		position: absolute;

		left: 0;right: 0;

		bottom: 0;

		margin:20px auto;

		z-index: 2;

	}

	#hd #sonic_studio .hd-content{

		width: 100%;

		height: 100%;

		position: absolute;

		top: 0;left: 0;

		overflow: hidden;

		padding:20% 0;

		border-bottom: none;

		background: url(../img/audio/sonic-studio-lll-hover.jpg) 0 0 no-repeat;

		background-size: cover;

		border:1px solid #8d0000;

		opacity: 0;

		-webkit-transform: translateY(-10px);

		   -moz-transform: translateY(-10px);

		    -ms-transform: translateY(-10px);

		     -o-transform: translateY(-10px);

		        transform: translateY(-10px);

	}

	#hd #sonic_studio p{

		margin-bottom: 0;

		position: absolute;

		width: calc(100% + 20px);

		height: 100%;

		padding:0 10% 150px;

		overflow-y:scroll;

	}

	#hd #sonic_studio li:hover .hd-content{

		opacity: 1;

		-webkit-transform: translateY(0);

		   -moz-transform: translateY(0);

		    -ms-transform: translateY(0);

		     -o-transform: translateY(0);

		        transform: translateY(0);

	}



	#hd .hd-sec-sonic figure{

		position: relative;

		width: 80%;

		max-width: 580px;

		margin:30px auto 50px;

	}

	/*#hd .hd-sec-sonic:before{

		content:'';

		display: block;

		position: absolute;

		bottom: 0;

		left: 0;right: 0;

		margin: 0 auto;

		width: 90%;

		max-width: 1200px;

		height: 70%;

		background: url(../img/bg-glow.jpg) center 110% no-repeat;

		background-size: contain;

		border-radius: 50%;

		background: #333;

		border:2px solid #000;

		box-shadow: 0 80px 200px 220px #000 inset,

					0 0 0 1px #000 inset;

		z-index: -1;

	}*/

	#hd .hd-sec-sonic figure > img{

		cursor: pointer;

	}

	#hd .hd-sec-sonic .hd-num{

		display: none;

	}

	#hd .hd-sec-sonic figure li{

		width: 55%;

		position: absolute;

	}

	#hd .hd-sec-sonic figure li h4{

		font-size: 24px;

		padding-bottom: 10px;

		margin-bottom: 10px;

		background-size: 95%;

		position: relative;

	}

	#hd .hd-sec-sonic figure li h4,

	#hd .hd-sec-sonic figure li p{

		padding-left: 70px;

	}

	#hd .hd-sec-sonic figure li:nth-child(1){

		top: 31%;

		left: -60%;

	}

	#hd .hd-sec-sonic figure li:nth-child(1) h4:after,

	#hd .hd-sec-sonic figure li:nth-child(2) h4:after{

		content:'';

		display: block;

		width: 110%;

		height: 1px;

		background-color: #ad0202;

		position: absolute;

		bottom: 0;

		left: 0;

	}

	#hd .hd-sec-sonic figure li:nth-child(2){

		top: 80%;

		left: -60%;

	}

	#hd .hd-sec-sonic figure li:nth-child(3){

		top: 16%;

		right: -50%;

		width: 60%;

	}

	#hd .hd-sec-sonic figure li:nth-child(3) h4{

		padding-right: 70px;

		margin-bottom: 30px;

	}

	#hd .hd-sec-sonic figure li:nth-child(3) h4:after{

		content:'';

		display: block;

		width: 90%;

		height: 1px;

		background-color: #ad0202;

		position: absolute;

		bottom: 0;

		right: 0;

	}

	#hd .hd-sec-sonic figure + p{margin-bottom: 50px;}



	#sonic_ui_on{

		position: fixed;

		top: 0;

		left: 0;

		width: 100%;

		height: 100%;

		background-color: rgba(0,0,0,.4);

		z-index: 99;

		display: none;

	}

	#sonic_ui_on img{

		max-width: 90% !important;

		max-height: 80vh;

		position: absolute;

		top: 50px;right: 0;bottom: 0;left: 0;

		margin:auto;



		box-shadow: 0 0 50px 2px rgba(255,255,255,.5);

	}

/* ------------ radar ------------ */

	#hd .hd-sec-radar{

		background: center center no-repeat;

		background-image: url('../img/audio/audio-bg2.jpg');

		padding:50px 0 95px;

		margin-bottom: 100px;

		position: relative;

		z-index: 2;

	}

	#hd .hd-sec-radar p.hd-col80{

		margin:0 auto 100px;

	}

	#hd #audiogif{

		transform: perspective(660px) rotateY(12deg);

	    position: relative;

	    left: -29px;

	    top: -7px;

	    margin:0;

	}

	#hd .gif-focus{

		position: absolute;

		display: none;

	}

	#hd .ghost-bg{

		position: absolute;

		right: -8%;

		bottom:-20%;

	}



	#hd .hd-sec-radar li.audio-tag{

		position: absolute;

		z-index: 2;

	}

	#hd .hd-sec-radar li.audio-tag:before{

		content: "";

		display: block;

		position: absolute;

		border:1px solid #FF0000;

	}

	#hd .hd-sec-radar .txt_decoline{

		padding-bottom: 10px;

		margin-bottom: 10px;

	}

	#hd .hd-sec-radar li.audio-tag small{

		display: block;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(1){

		width: 400px;

		top: 40%;

		right: 3%;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(1):before{

		display: none;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(2){

		width: 355px;

		top: 60%;

		right: 8%;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(2):before{

		/*width: 185px;

		height: 40px;

		left: -197px;

		top:43px;*/

		width: 52%;

		height: 37%;

		left: -55%;

		top: 40%;

		border-top: none;

		border-left: none;

		transform: skewX(-30deg);

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(2):after{

		content:"";

		display: block;

		position: absolute;

		width: 136px;

		height: 136px;

		border-radius: 68px;

		border:1px solid #ff0000;

		/*left: -335px;

    	top: 50px;*/

		left: -94%;

		top: 47%;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(2) h4,

	#hd .hd-sec-radar li.audio-tag:nth-child(2) small{

		padding-left: 45px;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(3){

		width: 330px;

		top: 80%;

		right: 8%;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(3) h4,

	#hd .hd-sec-radar li.audio-tag:nth-child(3) small{

		padding-left: 20px;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(3):before{

		width: 125px;

		height: 75px;

		left: -148px;

    	top: -33px;

		border-bottom: none;

		border-left: none;

		transform: skewX(30deg);

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(4){

		width: 366px;

		bottom: -18%;

		left: 40%;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(4) h4,

	#hd .hd-sec-radar li.audio-tag:nth-child(4) small{

		padding-left: 10px;

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(4):before{

		/*width: 215px;

	    height: 254px;

	    left: -341px;

	    top: -189px;*/

	    width: 59%;

	    height: 290%;

	    left: -93%;

	    top: -215%;

		border-top: none;

		border-right: none;

		transform: skewX(40deg);

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(4) small:before{

		content:"";

		display: block;

		position: absolute;

		width: 1px;

	    height: 22px;

	    left: -10px;

	    top: 44px;

	    border-right: 1px solid #FF0000;

		transform: skewX(-40deg);

	}

	#hd .hd-sec-radar li.audio-tag:nth-child(4):after{

		content:"";

		display: block;

		position: absolute;

		width: 80px;

		height: 80px;

		border-radius: 40px;

		border:1px solid #ff0000;

		/*left: -517px;

    	top: -259px;*/

		left: -140%;

		top: -298%;

	}



/* ------------ SEC_MORE------------ */

	#hd #more{

		padding: 100px 0 50px;

		z-index: 2;

	}

	#hd #more h2{

		padding-bottom: 0;

		margin-bottom: 50px;

	}

	#hd #more h2:before{

		content:'';

		width: 100%;

		height: 0;

		padding-bottom: 24%;

		background: url(../img/title/title_more.jpg) 0 0 no-repeat;

		background-size: cover;

		position: absolute;

		top: 0;

		left: 0;

		z-index: -1;

	}

/* ------------ gamefirst ----------- */

	#hd .hd-sec-gamefirst{padding:50px 0;}

	#hd .hd-pic03 {

	    height: auto;

	    padding-bottom: 0;

	    position: relative;

	}

	#hd .hd-pic03 #greater {

	    width: 18%;

	    position: absolute;

	    margin: 0;

	    top: -25%;

	    right: -2%;

	    z-index: 2;

	}

	#hd .btn-video{

		display: block;

		width: 200px;

		padding:12px 22px;

		margin: 50px  auto 50px;

		border-radius: 5px;

		overflow: hidden;

		position: relative;

		cursor:pointer;

	}

	#hd .btn-video:hover{box-shadow: 0 0 0 1px #8D0000 inset; }

	#hd .btn-video:before{

		content: "";

		display: block;

		width: 100%;

		height: 100%;

		position: absolute;

		top: 0;

		left: 0;

		z-index: -1;

		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#910000+15,630000+38,b40000+66,800000+82,450000+100 */

		background: #910000; /* Old browsers */

		background: -moz-linear-gradient(-20deg,  #910000 15%, #630000 38%, #b40000 66%, #800000 82%, #450000 100%); /* FF3.6-15 */

		background: -webkit-linear-gradient(-20deg,  #910000 15%,#630000 38%,#b40000 66%,#800000 82%,#450000 100%); /* Chrome10-25,Safari5.1-6 */

		background: linear-gradient(160deg,  #910000 15%,#630000 38%,#b40000 66%,#800000 82%,#450000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910000', endColorstr='#450000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	}

	#hd .btn-video:hover:before{opacity: .7; }

	#hd .btn-video h4{

		margin:0;

		font-size: 22px;

		font-weight: normal;

		text-align: center;

	}

/* ------------ overwolf ------------ */

	#hd .hd-sec-overwolf {

	    position: relative;

	    padding: 100px 0 100px;

	}

	#hd .hd-sec-overwolf .hd-w1200 {

	    z-index: 2;

	}

	#hd .hd-sec-overwolf .hd-morebg {

	    padding-right: 50px;

	    z-index: 0;

	    position: absolute;

	    right: 0;

	    top: -5%;

	}

	#hd .hd-sec-overwolf h3 {

	    margin-bottom: 50px;

	}

	#hd .hd-sec-overwolf .hd-skewtag:before {

	    -webkit-transform: skewX(20deg);

	    -moz-transform: skewX(20deg);

	    -ms-transform: skewX(20deg);

	    -o-transform: skewX(20deg);

	    transform: skewX(20deg);

	}

	#hd .hd-sec-overwolf .hd-box {

		width: 80%;

		display: flex;

		justify-content: space-between;

		margin-top: -20px;

		margin-bottom: 20px;

	    position: relative;

	    justify-content: flex-start;

	}

	#hd .hd-redtags {

	    margin-left: -20px;

	}

	#hd .hd-greytags {

	    margin-left: 15px;

	}

	#hd .hd-greytags .hd-skewtag:before {

	    border-color: #808080;

	}

	#hd .hd-redtags li:nth-child(2) {

	    margin-left: 40px;

	}

	#hd .hd-redtags li:nth-child(3) {

	    margin-left: 80px;

	}

	#hd .hd-greytags li:nth-child(1) {

	    margin-left: -185px;

	}

	#hd .hd-greytags li:nth-child(2) {

	    margin-left: -40px;

	}

	#hd .hd-greytags li:nth-child(1) .hd-skewtag:before {

	    width: 220px;

	}

	#hd .hd-greytags li:nth-child(2) .hd-skewtag:before {

	    width: 320px;

	}

	#hd .hd-greytags li:nth-child(3) .hd-skewtag {

	    width: 320px;

	}

	#hd .hd-greytags li:nth-child(3) .hd-skewtag:before {

	    width: 330px;

	}

	#hd .hd-greytags li:nth-child(3) .hd-skewtag {

	    padding-left: 20px;

	}

/* ------------ clone ------------ */

	#hd .hd-sec-clone {

	    padding: 70px 0;

	}

	#hd .hd-sec-clone .hd-col55 {

	    margin-top: 2%;

	}

	#hd .hd-sec-clone .hd-col65 {

	    position: relative;

	    margin-left: -20%;

	    z-index: -1;

	}

/* ------------ andmore ------------ */

	#hd #more .hd-sec-andmore{padding: 90px 0; }

	#hd .hd-sec-andmore .hd-pic {

	    width: 100%;

	    height: 200px;

	    background: center center no-repeat;

	    background-size: 1920px;

	    margin-bottom: 15px;

	}

	#hd .hd-sec-andmore .hd-w1336 {

	    width: 1336px;

	    margin: 0 auto;

	}

	#hd .hd-sec-andmore .hd-w1336 ul {

	    display: flex;

	    justify-content: space-between;

	}

	#hd .hd-sec-andmore .hd-w1336 li {width: 12.5%; }

	#hd .hd-sec-andmore .hd-w1336 li p.txt-red{

		margin-bottom: 5px;

		font-weight: bold;

	}

/* ------------ SEC_amd ------------ */

	#hd #amd{

		padding-top: 150px;

		padding-bottom: 100px;

		position: relative;

	}

	#hd #amd h2{

		max-width: 1300px;

		margin-bottom: 100px;

	}

	#hd #amd h2:before{

		content:'';

		width: 100%;

		height: 0;

		padding-bottom: 30%;

		background: url(../img/title/title_amd.jpg) 0 0 no-repeat;

		background-size: cover;

		position: absolute;

		top: 0;

		left: 0;

		z-index: -1;

	}

	#hd .hd-sec-amd {padding-left: 6%; }

	#hd .hd-sec-amd .hd-col80 {

		width: 85%;

		margin: 0 auto;

	}

	#hd .hd-sec-amd img {

	    width: 120px;

	    display: inline-block;

	    vertical-align: top;

	}

	#hd .hd-sec-amd img~div {

	    width: calc(100% - 135px);

	    padding-left: 40px;

	    margin-bottom: 30px;

	    display: inline-block;

	    vertical-align: top;

	}

	#hd .hd-sec-amd p:last-child{

		font-size: 15px;

		line-height: 1.25;

	}

	#hd .hd-sec-amd img~div p:first-child {

		font-weight: 400;

	    margin-bottom: 10px;

	}



/* ---------- hidden-section ---------- */

	#hd .hd-more {

		width: 100%;

		padding:0 20px;

		margin:50px 0 30px;

		text-align: center;

		position: relative;

		z-index: 2;

	}

	#hd .hd-more li{

		width: 300px;

		display: inline-block;

		vertical-align: top;

		margin:10px;

		background-color: #000000;

		cursor: pointer;

		-webkit-transform: skewX(-40deg);

		   -moz-transform: skewX(-40deg);

		    -ms-transform: skewX(-40deg);

		     -o-transform: skewX(-40deg);

		        transform: skewX(-40deg);

		position: relative;

	}

	#hd .hd-more li:before{

		content:'';

		width:calc(100% + 4px);

		height:calc(100% + 2px);

		position: absolute;

		top: -1px;

		left: -2px;

		background: #111111;

		background: -moz-linear-gradient(45deg, #111111 0%, #bbc3d1 29%, #000000 51%, #bbc3d1 78%, #131313 100%);

		background: -webkit-linear-gradient(45deg, #111111 0%,#bbc3d1 29%,#000000 51%,#bbc3d1 78%,#131313 100%);

		background: linear-gradient(45deg, #111111 0%,#bbc3d1 29%,#000000 51%,#bbc3d1 78%,#131313 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#131313',GradientType=1 );

		z-index: -1;

	}

	#hd .hd-more li.hd-link:before{

		background: #8d0000;

		background: -moz-linear-gradient(45deg, rgba(50,50,50,0) 0%, rgba(141,0,0,0.9) 20%, rgba(141,0,0,1) 29%, rgba(141,0,0,0.2) 52%, rgba(141,0,0,1) 71%, rgba(141,0,0,0.9) 80%, rgba(50,50,50,0) 100%);

		background: -webkit-linear-gradient(45deg, rgba(50,50,50,0) 0%, rgba(141,0,0,0.9) 20%, rgba(141,0,0,1) 29%, rgba(141,0,0,0.2) 52%, rgba(141,0,0,1) 71%, rgba(141,0,0,0.9) 80%, rgba(50,50,50,0) 100%);

		background: linear-gradient(45deg, rgba(50,50,50,0) 0%, rgba(141,0,0,0.9) 20%, rgba(141,0,0,1) 29%, rgba(141,0,0,0.2) 52%, rgba(141,0,0,1) 71%, rgba(141,0,0,0.9) 80%, rgba(50,50,50,0) 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008d0000', endColorstr='#008d0000',GradientType=1 );

	}

	#hd .hd-more li:after{

		content:'';

		width:100%;

		height:100%;

		position: absolute;

		top: 0;

		left: 0;

		background: #000000;

		z-index: -1;

	}

	#hd .hd-more li.hd-link h4{color:#ad0202;}

	#hd .hd-more h4{

		font-size: 20px;

		padding:20px;

		margin-bottom: 0;

		text-transform: none;

		color:#808080;

		-webkit-transform: skewX(40deg);

		   -moz-transform: skewX(40deg);

		    -ms-transform: skewX(40deg);

		     -o-transform: skewX(40deg);

		        transform: skewX(40deg);

	}

	#hd .hd-more li.hd-active{background-color: #610000; }

	#hd .hd-more li:hover h4,

	#hd .hd-more li.hd-active h4{color:#fafafa;}

	#hd .hd-more li.hd-active:before,

	#hd .hd-more li.hd-active:after{

		display: none;

	}



	#hd .hd-sec-hidden {display: none;}

	#hd .hd-sec-hidden.hd-active{

		display: block;

		-webkit-animation: fadeInFromBottom .8s cubic-bezier(.5,.38,.22,.98) forwards;

		-o-animation: fadeInFromBottom .8s cubic-bezier(.5,.38,.22,.98) forwards;

		animation: fadeInFromBottom .8s cubic-bezier(.5,.38,.22,.98) forwards;

	}

/* ---------- ANIMATION ---------- */

	@-webkit-keyframes fadeIn{

		from{opacity: 0;}

		to{opacity: 1;}

	}

	@keyframes fadeIn{

		from{opacity: 0;}

		to{opacity: 1;}

	}

	@-webkit-keyframes fadeInFromBottom{

		from{

			opacity: 0;

			-webkit-transform: translateY(8%);

		}

		to  {

			opacity: 1;

			-webkit-transform: translateY(0);

		}

	}

	@keyframes fadeInFromBottom{

		from{

			opacity: 0;

			   -moz-transform: translateY(8%);

				-ms-transform: translateY(8%);

				 -o-transform: translateY(8%);

					transform: translateY(8%);

		}

		to  {

			opacity: 1;

			   -moz-transform: translateY(0);

				-ms-transform: translateY(0);

				 -o-transform: translateY(0);

					transform: translateY(0);

		}

	}

	@keyframes slideInFromRight{

		from{

			-webkit-transform: translateX(5%);

			   -moz-transform: translateX(5%);

			    -ms-transform: translateX(5%);

			     -o-transform: translateX(5%);

			        transform: translateX(5%);

		}

		to{

			-webkit-transform: translateX(0);

			   -moz-transform: translateX(0);

			    -ms-transform: translateX(0);

			     -o-transform: translateX(0);

			        transform: translateX(0);

		}

	}

	@keyframes slideInFromLeft{

		from{

			-webkit-transform: translateX(-5%);

			   -moz-transform: translateX(-5%);

			    -ms-transform: translateX(-5%);

			     -o-transform: translateX(-5%);

			        transform: translateX(-5%);

		}

		to{

			-webkit-transform: translateX(0);

			   -moz-transform: translateX(0);

			    -ms-transform: translateX(0);

			     -o-transform: translateX(0);

			        transform: translateX(0);

		}

	}

	@-webkit-keyframes flipIn{

		from{-webkit-transform: rotateY(0deg); }

		to{-webkit-transform: rotateY(-15deg); }

	}

	@keyframes flipIn{

		from{

		   	-moz-transform: rotateY(0deg);

		    -ms-transform: rotateY(0deg);

		     -o-transform: rotateY(0deg);

		        transform: rotateY(0deg);

		}

		to{

		   	-moz-transform: rotateY(-15deg);

		    -ms-transform: rotateY(-15deg);

		     -o-transform: rotateY(-15deg);

		        transform: rotateY(-15deg);

		}

	}

	@-webkit-keyframes flipInOpp{

		from{-webkit-transform: rotateY(0deg); }

		to{-webkit-transform: rotateY(15deg); }

	}

	@keyframes flipInOpp{

		from{

		   	-moz-transform: rotateY(0deg);

		    -ms-transform: rotateY(0deg);

		     -o-transform: rotateY(0deg);

		        transform: rotateY(0deg);

		}

		to{

		   	-moz-transform: rotateY(15deg);

		    -ms-transform: rotateY(15deg);

		     -o-transform: rotateY(15deg);

		        transform: rotateY(15deg);

		}

	}

	@-webkit-keyframes colorrun {

	    from {

	        -webkit-filter: hue-rotate(0deg);

	        filter: hue-rotate(0deg);

	    }

	    to {

	        -webkit-filter: hue-rotate(359deg);

	        filter: hue-rotate(359deg);

	    }

	}

	@keyframes colorrun {

	    from {

	        -webkit-filter: hue-rotate(0deg);

	        filter: hue-rotate(0deg);

	    }

	    to {

	        -webkit-filter: hue-rotate(359deg);

	        filter: hue-rotate(359deg);

	    }

	}

	.colorrun{

		-webkit-animation: colorrun 4s infinite linear;

		-o-animation: colorrun 4s infinite linear;

		animation: colorrun 4s infinite linear;

	}

/* ---------- color effect ---------- */

	/* ---------- color effect ---------- */

	.hd-strobing:before{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 83.5%;

		right: 0;

		background: #000000;

	}

	.hd-strobing:after{

		content:'';

		display: block;

		width: 50%;

		height: 4%;

		position: absolute;

		top: 83.5%;

		left: 0;

		background: #ff0000;

		background: -moz-linear-gradient(90deg,#ff0000 0%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);

		background: -webkit-linear-gradient(90deg,#ff0000 0%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);

		background: linear-gradient(90deg,#ff0000 0%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff',GradientType=1 );

		-webkit-animation: strobing 2s infinite;

		-o-animation: strobing 2s infinite;

		animation: strobing 2s infinite;

	}

	.hd-rainbow{

		background: #ff0000;

		background: -moz-linear-gradient(180deg,#ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);

		background: -webkit-linear-gradient(180deg,#ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);

		background: linear-gradient(180deg,#ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff',GradientType=1 ); /* IE6-9 */

	}

	.hd-rainbow:before{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 37.5%;

		left: 0;

		background: #000000;

	}

	.hd-rainbow:after{

		content:'';

		display: block;

		width: 50%;

		height: 4%;

		position: absolute;

		top: 37.5%;

		left: 0;

		background: #ff0000;

		background: -moz-linear-gradient(90deg,#ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);

		background: -webkit-linear-gradient(90deg,#ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);

		background: linear-gradient(90deg,#ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff',GradientType=1 );

	}

	.hd-comet{

		background: #ff0000;

		background: -moz-linear-gradient(left,  #000000 30%, #ff0000 45%, #ffff00 50%, #000000 60%);

		background: -webkit-linear-gradient(left,  #000000 30%,#ff0000 45%, #ffff00 50%,#000000 60%);

		background: linear-gradient(to right,  #000000 30%,#ff0000 45%, #ffff00 50%,#000000 60%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#000000',GradientType=1 );

	}

	.hd-comet:before{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #000000;

		-webkit-animation: cometReverse infinite 3s -.5s;

		-o-animation: cometReverse infinite 3s -.5s;

		animation: cometReverse infinite 3s -.5s;

	}

	.hd-comet:after{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #ff0000;

		-webkit-animation: rainbow reverse infinite 21s, cometReverse infinite 3s -.5s;

		-o-animation: rainbow reverse infinite 21s, cometReverse infinite 3s -.5s;

		animation: rainbow reverse infinite 21s, cometReverse infinite 3s -.5s;

	}

	.hd-flash{

		background: #b70b00;

		background: -moz-linear-gradient(-45deg, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);

		background: -webkit-linear-gradient(left, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);

		background: linear-gradient(135deg, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b70b00', endColorstr='#b70b00',GradientType=1 );

	}

	.hd-flash:before{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #000000;

		-webkit-animation: flashReverse infinite 3s -.5s;

		-o-animation: flashReverse infinite 3s -.5s;

		animation: flashReverse infinite 3s -.5s;

	}

	.hd-flash:after{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #ff0000;

		-webkit-animation: flashReverse infinite 3s -.5s;

		-o-animation: flashReverse infinite 3s -.5s;

		animation: flashReverse infinite 3s -.5s;

	}

	.hd-wave .starry_night{

		display: block !important;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 37.5%;

		left: 45%;

		background: #000000;

		box-shadow: 0 0 50px #000000;

		-webkit-animation: yoyo infinite reverse 5s -.5s;

		-o-animation: yoyo infinite reverse 5s -.5s;

		animation: yoyo infinite reverse 5s -.5s;

	}

	.hd-wave .starry_night li{display: none;}

	.hd-wave:before{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #000000;

	}

	.hd-wave:after{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #ff0000;

		-webkit-animation: breathing infinite 8s -.5s;

		-o-animation: breathing infinite 8s -.5s;

		animation: breathing infinite 8s -.5s;

	}

	.hd-yoyo {

		width: 200%;

		background: #000000;

		background: -moz-linear-gradient(135deg, rgb(255, 0, 0) 0%, rgb(255, 162, 0) 8%, #ffff00 15%, #00cb07 23%, #00cb07 31%, #07a9ff 38%, #07a9ff 46%, #1044ff 54%, #1044ff 62%, #1b2f7f 69%, #1b2f7f 77%, #d92f7f 85%, #000000 92%, #000000 100%);

		background: -webkit-linear-gradient(135deg, rgb(255, 0, 0) 0%, rgb(255, 162, 0) 8%, #ffff00 15%, #00cb07 23%, #00cb07 31%, #07a9ff 38%, #07a9ff 46%, #1044ff 54%, #1044ff 62%, #1b2f7f 69%, #1b2f7f 77%, #d92f7f 85%, #000000 92%, #000000 100%);

		background: linear-gradient(135deg, rgb(255, 0, 0) 0%, rgb(255, 162, 0) 8%, #ffff00 15%, #00cb07 23%, #00cb07 31%, #07a9ff 38%, #07a9ff 46%, #1044ff 54%, #1044ff 62%, #1b2f7f 69%, #1b2f7f 77%, #d92f7f 85%, #000000 92%, #000000 100%);

		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1);

	}

	.hd-yoyo:before{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #000000;

	}

	.hd-yoyo:after{

		content:'';

		display: block;

		width: 100%;

		height: 5%;

		position: absolute;

		top: 42.5%;

		left: 0;

		background: #ff0000;

		-webkit-animation: breathing infinite 8s -.5s;

		-o-animation: breathing infinite 8s -.5s;

		animation: breathing infinite 8s -.5s;

	}

	.hd-starryNight {background: #810000 !important; }

	.starry_night {display: none; }

	.starry_night li {

		width: 10%;

		height: 10%;

		background-color: #FFF;

		position: absolute;

		background: radial-gradient(circle, #ff0000, #810000, #810000);

		animation: breathing 3s infinite;

	}

	.starry_night li:nth-child(1) {left: 60%;  top: 5%; }

	.starry_night li:nth-child(2) {left: 58%;  top: 12%; animation: breathing 2s -1s infinite;}

	.starry_night li:nth-child(3) {left: 80%; top: 24%; animation: breathing 1s -1s infinite;}

	.starry_night li:nth-child(4) {left: 85%;  top: 27%; }

	.starry_night li:nth-child(5) {left: 88%; top: 19%; }

	.starry_night li:nth-child(6) {left: 1%;  top: 33%; }

	.starry_night li:nth-child(7) {left: 14%;  top: 33%; animation: breathing 1s infinite;}

	.starry_night li:nth-child(8) {left: 20%; top: 33%; animation: breathing 2s infinite;}

	.starry_night li:nth-child(9) {left: 29%;  top: 33%; animation: breathing 1s infinite;}

	.starry_night li:nth-child(10) {left: 40%; top: 33%; animation: breathing 3s infinite;}

	@-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 strobing{

		0% {opacity: 1}

		50%{opacity: 0}

	}

	@keyframes strobing{

		0% {opacity: 1}

		50%{opacity: 0}

	}

	@-webkit-keyframes music{

		0%  {opacity: 1}

		10% {opacity: .3}

		40% {opacity: 1}

		60% {opacity: .3}

		70% {opacity: 1}

		100%{opacity: .3}

	}

	@keyframes music{

		0%  {opacity: 1}

		10% {opacity: .3}

		40% {opacity: 1}

		60% {opacity: .3}

		70% {opacity: 1}

		100%{opacity: .3}

	}

	@-webkit-keyframes cycle{

		0%		{background-color: red}

		15%		{background-color: orange}

		30%		{background-color: yellow}

		45%		{background-color: #00CB07}

		60%		{background-color: #07A9FF}

		75%		{background-color: #1044FF}

		90%		{background-color: #a12fd9}

		100%	{background-color: red}

	}

	@keyframes cycle{

		0%		{background-color: red}

		15%		{background-color: orange}

		30%		{background-color: yellow}

		45%		{background-color: #00CB07}

		60%		{background-color: #07A9FF}

		75%		{background-color: #1044FF}

		90%		{background-color: #a12fd9}

		100%	{background-color: red}

	}

	@-webkit-keyframes rainbow{

		0%  	{-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}

		100%	{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}

	}

	@keyframes rainbow{

		0%  	{-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}

		100%	{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}

	}

	@-webkit-keyframes cpu{

		0%		{background-color: red}

		30%		{background-color: yellow}

		60%		{background-color: green}

		90%		{background-color: yellow;}

	}

	@keyframes cpu{

		0%		{background-color: red}

		30%		{background-color: yellow}

		60%		{background-color: green}

		90%		{background-color: yellow;}

	}

	@-webkit-keyframes comet{

		0%	{

			z-index: -1;

			width: 200%;

		    -webkit-transform: translateX(-100%);

		}

		100%{

			z-index: -1;

			width: 200%;

		    -webkit-transform: translateX(50%);

		}

	}

	@keyframes comet{

		0%	{

			z-index: -1;

			width: 200%;

		    transform: translateX(-100%);

		}

		100%{

			z-index: -1;

			width: 200%;

		    transform: translateX(50%);

		}

	}

	@-webkit-keyframes cometReverse{

		0%	{width: 200%; -webkit-transform: translateX(50%); }

		100%{width: 200%; -webkit-transform: translateX(-100%); }

	}

	@keyframes cometReverse{

		0%	{width: 200%; transform: translateX(50%); }

		100%{width: 200%; transform: translateX(-100%); }

	}

	@-webkit-keyframes flash{

		0%	{

			z-index: -1;

			width: 200%;

		    -webkit-transform: translateX(-50%);

		}

		100%{

			z-index: -1;

			width: 200%;

		    -webkit-transform: translateX(0%);

		}

	}

	@keyframes flash{

		0%	{

			z-index: -1;

			width: 200%;

		    transform: translateX(-50%);

		}

		100%{

			z-index: -1;

			width: 200%;

		    transform: translateX(0%);

		}

	}

	@-webkit-keyframes flashReverse{

		0%	{

			width: 200%;

		    -webkit-transform: translateX(0%);

		}

		100%{

			width: 200%;

		    -webkit-transform: translateX(-50%);

		}

	}

	@keyframes flashReverse{

		0%	{

			width: 200%;

		    transform: translateX(0%);

		}

		100%{

			width: 200%;

		    transform: translateX(-50%);

		}

	}

	@-webkit-keyframes yoyo {

		0% {-webkit-transform: translateX(-50%); }

		50% {-webkit-transform: translateX(0%); }

		100% {-webkit-transform: translateX(-50%); }

	}

	@keyframes yoyo {

		0% {transform: translateX(-50%); }

		50% {transform: translateX(0%); }

		100% {transform: translateX(-50%); }

	}