@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Roboto');
@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;
}
/* ---------- RESET ---------- */
	html,
	body{
		margin: 0;
	}
	#hd * {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#hd{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		background: black;
		color: #FFF;
		font-size: 16px;
		margin: 0;
		padding: 0;
		background-attachment: fixed;
		background-color: #000;
	}
	#hd ul,
	#hd li,
	#hd figure{margin: 0; padding: 0; }
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd p,
	#hd a,
	#hd li {
		font:inherit;
	}
	#hd img{
		display: block;
		height: auto;
		border:none;
		max-width: 100% !important;
		margin:0 auto;
	}
/* ---------- TXT ------------ */
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6,
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font:inherit;
		color:inherit;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6{
		font-family: 'Xolonium', sans-serif;
		font-weight: 400;
		letter-spacing: .03em;
	}
	#hd h1{
		font-size: 5em;
		padding-bottom: 25px;
		text-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
		line-height: .8em;
	}
	#hd h2{
		position: relative;
		font-size: 3.3em;
		display: inline-block;
		text-transform:uppercase;
		/*padding-bottom: 50px;*/
		line-height: 1.4em;
	}
	#hd h3{
		font-size: 2.2em;
		display: inline-block;
		padding-bottom: 35px;
		color: #b60b01;
		line-height: 1.2em;
		text-shadow: black 0em 0em 0.3em;
	}
	#hd h5{
		margin-bottom: 0;
	}
	#hd h6{
		font-size: 1.2em;
	}
	#hd .txt-title{
		font-family: 'Xolonium', sans-serif;
		font-weight: 400;
		letter-spacing: .03em;
	}
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		font-weight: 300;
	}
	#hd p {
		font-size: 1em;
		letter-spacing: .05em;
		font-weight: 300;
		line-height: 1.7em;
		margin: 0;
		margin-bottom: 25px;
	}
	#hd small {
		font-size: .9em; 
		color: #999;
		line-height: 1.6em;
		font-weight: 300;
		letter-spacing: .08em;
	}
	#hd .txt-gradient-w{
		color: #fff !important;
	    background: #f81a1a;
	    background: -webkit-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: -o-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: -moz-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: linear-gradient(to right, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    -webkit-background-clip: text; 
	    -webkit-text-fill-color: transparent;
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
	}
	#hd .txt-gradient-r{
		color: #f81a1a !important;
	    background: #f81a1a;
	    background: -webkit-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -o-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -moz-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: linear-gradient(to right, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    -webkit-background-clip: text; 
	    -webkit-text-fill-color: transparent;
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
	}
	/*ie11 above fixed*/
	_:-ms-fullscreen,
	:root #hd .txt-gradient{
	    background: transparent !important;
	}
	#hd .txt-center {
		text-align: center; 
	}
	#hd .txt-left {
		text-align: left; 
	}
/* ---------- BLOCK ---------- */
	#hd .w90 {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1920 {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	#hd .w1200{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1200 {max-width: 1200px; }
	#hd .col25,
	#hd .col33,
	#hd .col40,
	#hd .col45,
	#hd .col50,
	#hd .col55,
	#hd .col60,
	#hd .col70,
	#hd .col80  {
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25 {width: 25%; }
	#hd .col33 {width: 33.33%; }
	#hd .col40 {width: 40%; }
	#hd .col45 {width: 45%; }
	#hd .col50 {width: 50%; }
	#hd .col55 {width: 55%; }
	#hd .col60 {width: 60%; }
	#hd .col70 {width: 70%; }
	#hd .col80 {width: 80%; }

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

	#hd .fleft {float: left; }
	#hd .fright {float: right; }
	#hd .cf:after{
		content:'';
		display: block;
		clear:both;
	}

	#hd .hd_mobile-on,
	#hd .hd_480on,
	#hd .hd_620on,
	#hd .hd_1024-on {display: none;}
	#hd .hd_btn{
		display: inline-block;
		min-width: 240px;
		border:1px solid rgba(0,0,0,.2);
		padding:20px 20px 18px;
		margin:15px 0;
		border-radius: 2px;
		font-weight: 400;
		letter-spacing: 1px;
		text-align: center;
		cursor: pointer;
		position: relative;
	}
	#hd .hd_btn:before,
	#hd .hd_btn:after{
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		border: 0px solid #555;
		position: absolute;
		transition: .4s;
	}
	#hd .hd_btn:before {
		top: -1px;
		right: -1px;
		border-top-width: 1px;
		border-right-width: 1px;
	}
	#hd .hd_btn:after {
		bottom: -1px;
		left: -1px;
		border-bottom-width: 1px;
		border-left-width: 1px;
	}
	#hd .hd_btn:hover{color: #00cccc;}
	#hd .hd_btn:hover:before,
	#hd .hd_btn:hover:after{
		width: 100%;
		height: 100%;
		border-color: #00cccc;
	}
/*----------- COLOR -----------*/
	#hd .color-primary{
		color: #b60b01;
	}
	#hd .color-grey {
		color: #3e3a39;
	}
	#hd .color-white {
		color: #fff;
	}
	#hd .gradient45d{
		background: linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -moz-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -webkit-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -o-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
	}
/* ---------- fp-nav --------- */
	#fp-nav ul li {
		text-align: center;
	}
	#fp-nav ul li a span,
	#fp-nav ul li:hover a span {
		width: 6px;
		height: 6px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	#fp-nav ul li.active a span,
	#fp-nav ul li.active:hover a span,
	#fp-nav ul li.active:hover a span {
		top: 0;
		left: 0;
		right: 0;
		height: 13px;
		width: 13px;
		margin: auto;
		background-color: #f51301;
	}
	#fp-nav ul li:hover a span {
		background-color: #f51301;
	}
	#fp-nav ul li .fp-tooltip {
		color: #f51301;
	}
	#fp-nav ul li.active .fp-tooltip {
		top: 5px;
	}	
/* ---------- scrollUp ------- */
	#hd #scrollUp {
		float: left;
		position: fixed;
		right: 25px;
		bottom: 40px;
		z-index: 17;
		width: 45px;
		height: 45px;
		border-radius: 26px;
		cursor: pointer;
		z-index: 999;
		opacity: 0;
		border: 2px solid #8D0000;
		-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 #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 svg {
	    fill: white;
	}
	#hd #scrollUp:hover,
	#hd #scrollUp:active {
		background-color: #8D0000;
	}

/* ---------- main------------ */
	#hd .sec_padding{
		position: relative;
		padding: 60px 0 120px;	
	}
	#hd section{
		position: relative;
		text-align: center;
	}
	#hd section article{
		position: relative;
		text-align: left;
	}
	#hd .article_padding{
		padding: 100px 0;
	}
	#hd section.top_decoration:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 0;
		padding-top: 17%;
		left: 0;
		top: -100px;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}
	#hd section#customization.top_decoration:before{
		background-image: url(../img/frame01.png);
	}
	#hd section#core.top_decoration:before{
		background-image: url(../img/frame01.png);
	}
	#hd section#compatibility.top_decoration:before{
		background-image: url(../img/frame03.png);
	}
/* ---------- kv-------------- */
	#hd #kv{
		padding-bottom: 50px;
	}
	#hd #kv .banner{
		position: relative;
		max-width: 1920px;
		margin: 0 auto;
		margin-top: -130px;
		z-index: -1;
		/*perspective: 500px;
		-webkit-perspective: 500px;*/
	}
	#hd #kv .banner .bg{
		position: absolute;
	    width: 22%;
	    height: 0;
	    padding-top: 24%;
	    z-index: 3;
	    top: 30%;
	    left: 25%;
	    z-index: -3;
	    overflow: hidden;
	    -webkit-transform:translateZ(-100px);
	    -moz-transform:translateZ(-100px);
	    -ms-transform:translateZ(-100px);
	    -o-transform:translateZ(-100px);
	    transform:translateZ(-100px);
		/*position: absolute;
		width: 22%;
		height: 40%;
		z-index: 3;
		top: 30%;
		left: 25%;
		z-index: -2;
		overflow: hidden;*/
	}
	#hd #kv .banner .bg .hd-rainbow{
		position: absolute;
	    top: 0;
	    left: 0;
	    background-size: 100% 36%;
	    animation: kv_rainbow 5s linear 0s infinite normal none running;
	}
	@-webkit-keyframes kv_rainbow{
		0%	{-webkit-transform: translateX(-50%); }
		100%{-webkit-transform: translateX(-13.5%); }
	}
	@keyframes kv_rainbow{
		0%	{transform: translateY(-50%); }
		100%{transform: translateY(-13.5%); }
	}
	#hd #kv .banner .gif{
		position: absolute;
		width: 7.1%;
	    top: 50.8%;
	    left: 29.15%;
		z-index: -1;
		-webkit-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg);
	    -moz-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg);
	    -ms-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg);
	    -o-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg);
	    transform: skewY(-3.5deg) perspective(500px) rotateY(25deg);
	     /*-webkit-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg) translateZ(50px) translateX(10%);
	    -moz-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg) translateZ(50px)  translateX(10%);
	    -ms-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg) translateZ(50px)  translateX(10%);
	    -o-transform: skewY(-3.5deg) perspective(500px) rotateY(25deg) translateZ(50px)  translateX(10%);
	    transform: skewY(-3.5deg) perspective(500px) rotateY(25deg) translateZ(50px)  translateX(10%);
		-webkit-perspective-origin:40% 30%;
	     perspective-origin:40% 30%;*/
	}
	#hd #kv .banner .banner_pc{
		display: block;
		-webkit-transform:translateZ(100px);
	    -moz-transform:translateZ(100px);
	    -ms-transform:translateZ(100px);
	    -o-transform:translateZ(100px);
	    transform:translateZ(100px);
	}
	#hd #kv .banner .banner_m{
		display: none;
	}
	#hd #kv .banner ul.text_list{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 4;
		-webkit-transform:translateZ(110px);
	    -moz-transform:translateZ(110px);
	    -ms-transform:translateZ(110px);
	    -o-transform:translateZ(110px);
	    transform:translateZ(110px);
	}
	#hd #kv .banner ul.text_list span{
		display: none;
	}
	#hd #kv .banner ul.text_list li{
		position: absolute;
	}
	#hd #kv .banner ul.text_list li:nth-child(1){
		top: 24%;
		left: 28.5%;
	}
	#hd #kv .banner ul.text_list li:nth-child(2){
		top: 29%;
		left: 30.5%;
	}
	#hd #kv .banner ul.text_list li:nth-child(3){
		top:77.7%;
		left: 32%;
	}
	#hd #kv .banner ul.text_list li:nth-child(4){
		top: 72.5%;
		left: 37.5%;
	}
	#hd #kv .banner ul.text_list li:nth-child(5){
		top:77%;
		left: 60%;
	}
	#hd #kv .banner ul.text_list li:nth-child(6){
		top:24%;
		left: 59%;
	}
	#hd #kv .banner ul.text_list li:nth-child(7){
		top:84%;
		left: 27%;
	}
/* ---------- core------------ */
	#hd #core{
		/*background-color: #1a1a1a;*/
	}
	#hd #core .noctua{
		background-image: url(../img/bg-tri.png);
		background-size: 58% auto;
		background-position: right 70%;
		background-repeat: no-repeat;
	}
	#hd #core .noctua .col50{
		padding-top: 80px;
	}
	#hd #core .noctua img.logo{
		margin-left: 0;
		max-width: 200px !important;
	}
	#hd #core .noctua img.pd{
		position: absolute;
		top: 0;
		left: -10%;
		width: 55%;
	}
	#hd #core .fan .col50.text{
		padding-right: 30px;
	}
	#hd #core .fan span{
		display: inline-block;
		margin: 0 7px;
	}
	#hd #core .fan img.embedded{
		height: 105px;
		margin-left: 0;
		margin-top: 5px;
	}
	#hd #core .fan #videoHero{
		width: 100%;
		height: auto;
	}
/* ---------- customization--- */
	/*liveDash*/
		#hd #customization .liveDash ul.btn_list{
			position: relative;
			padding-top: 35px;
			max-width: 430px;
			z-index: 3;
		}
		#hd #customization .liveDash ul.btn_list li{
			padding: 0 15px;
		}
		#hd #customization .liveDash ul.btn_list li > div {
		    color: #808080;
		    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 #customization .liveDash ul.btn_list li > div.active{
			background-color: #610301;
		}
		#hd #customization .liveDash ul.btn_list li > div: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 #customization .liveDash ul.btn_list li > div:after {
		    content: '';
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    background: #000000;
		    z-index: -1;
		}
		#hd #customization .liveDash ul.btn_list li > div.active:before,
		#hd #customization .liveDash ul.btn_list li > div.active:after{
			display: none;
		}
		#hd #customization .liveDash ul.btn_list li a {
			display: block;
		    line-height: 1.5em;
		    letter-spacing: .005em;
		    text-align: center;
		    color: inherit;
		    margin-bottom: 0;
		    padding: 25px 0;
		    text-transform: none;
		    -webkit-transform: skewX(40deg);
		    -moz-transform: skewX(40deg);
		    -ms-transform: skewX(40deg);
		    -o-transform: skewX(40deg);
		    transform: skewX(40deg);
		    -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 #customization .liveDash ul.btn_list li a:hover,
		#hd #customization .liveDash ul.btn_list li > div.active a{
			color: #fff;
		}
		#hd #customization .liveDash .product_photo{
			position: relative;
			-moz-transform:scale(1.1);
			-webkit-transform:scale(1.1);
			-o-transform:scale(1.1);
			-ms-transform:scale(1.1);
			transform:scale(1.1);
			z-index: 1;
		}
		#hd #customization .liveDash .product_photo .product_main{
			position: relative;
			z-index: 2;
			-webkit-transform:translateZ(100px);
		    -moz-transform:translateZ(100px);
		    -ms-transform:translateZ(100px);
		    -o-transform:translateZ(100px);
		    transform:translateZ(100px);
		}
		#hd #customization .liveDash ul.gif_list{
			background-color: #000;
			position: absolute;
		    width: 22%;
		    height: 25%;
		    top: 51%;
		    left: 39%;
			z-index: -1;
			perspective:500px;
			-webkit-transform: rotateY(8deg)skewY(-5deg);
		    -moz-transform: rotateY(8deg)skewY(-5deg);
		    -ms-transform: rotateY(8deg)skewY(-5deg);
		    -o-transform: rotateY(8deg)skewY(-5deg);
		    transform: rotateY(8deg)skewY(-5deg);
		}
		#hd #customization .liveDash ul.gif_list li{
			display: none;
		}
		#hd #customization .liveDash ul.gif_list li.active{
			display: block;
		}
		#hd #customization .product_photo .bg{
			position: absolute;
	    	width: 46%;
	    	height: 0;
	    	padding-top: 50%;
		    z-index: 3;
		    top: 23%;
		    left: 35%;
		    z-index: -1;
		    overflow: hidden;
		    -webkit-transform:translateZ(-100px);
		    -moz-transform:translateZ(-100px);
		    -ms-transform:translateZ(-100px);
		    -o-transform:translateZ(-100px);
		    transform:translateZ(-100px);
		}
		#hd #customization .product_photo .bg .hd-rainbow{
			position: absolute;
			top: -180%;
			left: 0;
			background-size: 100% 47%;
		    /*animation: customization_rainbow 5s linear 0s infinite normal none running;*/
		}
		@-webkit-keyframes customization_rainbow{
			0%	{-webkit-transform: translateX(-50%); }
			100%{-webkit-transform: translateX(-3.5%); }
		}
		@keyframes customization_rainbow{
			0%	{transform: translateY(-50%); }
			100%{transform: translateY(-3.5%); }
		}
		#hd #customization .product_photo .gif{
			position: absolute;
			width: 6.5%;
			top: 49.8%;
			left: 29.5%;
			-webkit-transform: perspective(500px) rotateY(25deg)skewY(-3.5deg);
		    -moz-transform: perspective(500px) rotateY(25deg)skewY(-3.5deg);
		    -ms-transform: perspective(500px) rotateY(25deg)skewY(-3.5deg);
		    -o-transform: perspective(500px) rotateY(25deg)skewY(-3.5deg);
		    transform: perspective(500px) rotateY(25deg)skewY(-3.5deg);
		}
	/*ustomizability*/
		#hd #customization .ustomizability{
			text-align: center;
			background-image: url(../img/ui-bg.jpg);
			background-size: auto 100%;
			background-position: center;
			background-repeat: no-repeat;
		}
		#hd #customization .ustomizability p{
			max-width: 900px;
			margin: 0 auto;
		}
		#hd #customization .ustomizability .ui_list{
			padding-top: 130px;
			padding-bottom: 50px;
		}
		#hd #customization .ustomizability .ui_list img{
			position: relative;
		    width: 130%;
		    max-width: none !important;
		    cursor: pointer;
		    box-shadow: 0 0 20px 3px rgba(0,0,0,.4);
		    -webkit-transform: perspective(700px) rotateY(28deg);
		    -moz-transform: perspective(700px) rotateY(28deg);
		    -ms-transform: perspective(700px) rotateY(28deg);
		    -o-transform: perspective(700px) rotateY(28deg);
		    transform: perspective(700px) rotateY(28deg);
		    -webkit-transition: all .6s ease;
		    -moz-transition: all .6s ease;
		    -ms-transition: all .6s ease;
		    -o-transition: all .6s ease;
		    transition: all .6s ease;
		    border: 1px solid rgba(0,0,0,0);
		}
		#hd #customization .ustomizability .ui_list img:hover{
		    -webkit-transform: perspective(700px) rotateY(-20deg);
		    -moz-transform: perspective(700px) rotateY(-20deg);
		    -ms-transform: perspective(700px) rotateY(-20deg);
		    -o-transform: perspective(700px) rotateY(-20deg);
		    transform: perspective(700px) rotateY(-20deg);
		    border: 1px solid #b60b01;
		    z-index: 2;
		}
		#hd #customization .ustomizability .ui_lightBox{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
			z-index: 3;
		}
		#hd #customization .ustomizability .ui_lightBox .bg{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		#hd #customization .ustomizability .ui_lightBox .photo_box{
			position: absolute;
			width: 900px;
			height: 0;
			padding-top: 700px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		#hd #customization .ustomizability .ui_lightBox .photo_box img{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			border: 1px solid #b60b01;
		}
		#hd #customization .ustomizability .ui_lightBox .photo_box span{
			position: absolute;
			width: 40px;
			height: 30px;
			top: 0;
			right: 0;
		}
	/*lighting*/
		#hd #customization .lighting .bg{
			position: absolute;
			bottom: 14%;
			right: 0;
			width: 57%;
			z-index: 4;
		}
		#hd #customization .lighting .lighting_control{
			padding-left: 20px
			;position: relative;
			width: 50%;
			z-index: 5;
		}
		#hd #customization .lighting .lighting_effect{
			position: absolute;
		    width: 65%;
		    max-width: 790px !important;
		    top: -24%;
		    left: -17%;
		}
		}
		#hd .hd-lighting {
		    height: 100%;
		    position: relative;
		    overflow: hidden;
		}
		#hd #colorbox {
		    width: 98%;
		    height: 98%;
		    margin-top: 1px;
		    position: absolute;
		    top: 1%;
		    left: 1%;
		    z-index: -1;
		    overflow: hidden;
		}
		#greybg {
		    background-color: #000000;
		    z-index: -2;
		}
		#color, #greybg {
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    top: 0;
		    left: 0;
		}
		#hd .hd-controls {
		    display: flex;
		    flex-wrap: wrap;
		    max-width: 400px;
		    justify-content: flex-start;
		    margin-left: -5%;
		    position: relative;
		}
		#hd .hd-controls li {
		    width: 33%;
		    cursor: pointer;
		    opacity: .5;
		    -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-controls li:hover,
		#hd .hd-controls li.active{
			opacity: 1;
		}
		#hd .hd-controls li img {
		    display: block;
		    width: 90%;
		    max-width: 65px !important;
		    margin: 20px auto 10px;
		}
		#hd #colorpicker {
		    position: absolute;
		    bottom: 0;
		    right: 0;
		}
		#hd .hd-rainbow {
		    height: 500% !important;
		    width: 100%;
		    background: url(../img/rainbow.jpg) 0 0 repeat;
		}
	/*perfect*/
		#hd #customization .perfect{
			position: relative;
			padding: 150px 0 250px;
			z-index: 2;
		}
		#hd #customization .perfect img.bg{
			position: absolute;
			width: 55%;
			max-width: 1020px !important;
			left: 45%;
			top: 0;
			z-index: -1;
		}
		#hd #customization .perfect .sycn_logo{
			margin: 0;
			margin-top: -50px;
			margin-left: auto;
			max-width: 130px !important;
		}
/* ---------- compatibility--- */	
	#hd #compatibility article{
		text-align: right;
	}
	#hd #compatibility h2{
		position: relative;
		z-index: 3;
	}
	#hd #compatibility article img{
		position: absolute;
		top: -10%;
		left: -15%;
		width: 70%;
		max-width: 1050px !important;
		z-index: 1;
	}
	#hd #compatibility .col45{
		position: relative;
		text-align: left;
		z-index: 3;
	}
	#hd #compatibility .col45 h6{
		position: relative;
		font-size: 1.6em;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	#hd #compatibility ul.support_list li{
		padding: 13px 0;
	}
	#hd #compatibility ul.support_list .title_box,
	#hd #compatibility ul.support_list .text{
		position: relative;
		display: inline-block;
		vertical-align: middle;
	}
	#hd #compatibility ul.support_list .title_box{
		width: 75px;
		padding: 24px 0;
		text-align: center;
	}
	#hd #compatibility ul.support_list .title_box h5{
		position: relative;
		font-size: 1.3em;
		z-index: 3;
	}
	#hd #compatibility ul.support_list .title_box:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 10px;
		background: #111111;
	    background: -moz-linear-gradient(90deg, #aaa 0%, #bbc3d1 29%, #777777 51%, #bbc3d1 78%, #777 100%);
	    background: -webkit-linear-gradient(90deg, #aaa 0%,#bbc3d1 29%,#777777 51%,#bbc3d1 78%,#777 100%);
	    background: linear-gradient(90deg, #aaa 0%,#bbc3d1 29%,#777777 51%,#bbc3d1 78%,#777 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#777',GradientType=1 );
	    z-index: 2;
	}
	#hd #compatibility ul.support_list .title_box:after{
		content: "";
		position: absolute;
		width: 94%;
		height: 94%;
		top: 3%;
		left: 3%;
		border-radius: 10px;
		background: #111111;
	    background-color: #000;
	    z-index: 2;
	}
	#hd #compatibility ul.support_list .text{
		width: calc(100% - 80px);
		padding-left: 18px;
	}
	#hd #compatibility ul.support_list .text p{
		margin-bottom: 0;
	}

/* ---------- ANIMATION ------ */
	@-webkit-keyframes fadeIn{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@keyframes fadeIn{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@-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);
	    }
	}
/* ---------- color effect --- */
	.hd-rainbow{
		width: 500% !important;
		background: url(../img/lighting/rainbow.jpg) 0 0 repeat;
	}
	.hd-comet{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ff0000+30,ff0000+77,000000+100 */
		background: #000000; /* Old browsers */
		background: -moz-linear-gradient(110deg,  #000000 0%,#000000 20%, #ff0000 30%, #ff0000 77%, #000000 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(110deg,  #000000 0%,#000000 20%,#ff0000 30%,#ff0000 77%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(110deg,  #000000 0%,#000000 20%,#ff0000 30%,#ff0000 77%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
		box-shadow: 0 0 50px 100px rgba(0,0,0,1);
	}
	.hd-flash{
		/* http://colorzilla.com/gradient-editor/#000000+0,000000+28,ff0000+48,ff0000+61,000000+79,000000+100 */
		background: #820303; /* Old browsers */
		background: -moz-linear-gradient(110deg,  #820303 0%, #820303 28%, #ff0000 48%, #ff0000 61%, #820303 79%, #820303 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(110deg,  #820303 0%,#820303 28%,#ff0000 48%,#ff0000 61%,#820303 79%,#820303 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(110deg,  #820303 0%,#820303 28%,#ff0000 48%,#ff0000 61%,#820303 79%,#820303 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#820303', endColorstr='#820303',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
	.hd-flashbg{
		background-color: #820303 !important;
		-webkit-animation: colorrun 6s infinite;
		-o-animation: colorrun 6s infinite;
		animation: colorrun 6s infinite;
	}
	.hd-yoyo {
		box-shadow: 0 0 100px 100px #000 inset;
	}

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

	.starry_night {display: none; }
	.starry_night li {
		width: 10%;
		height: 10%;
		background-color: #FFF;
		position: absolute;
		background: #ff0000;
		-webkit-animation: starryNight 2s infinite;
		-o-animation: starryNight 2s infinite;
		animation: starryNight 2s infinite;
		opacity: 0;
	}

	.starry_night li:nth-child(1) {
		width: 20%;
		height: 40%;
		left: 5%;
		top: 8%;
		animation-delay: .4s;
	}
	.starry_night li:nth-child(2) {
		width: 20%;
		height: 5%;
		left: 40%;
		top: 52.5%;
		animation-delay: 1.5s;
	}
	.starry_night li:nth-child(3) {
		width: 45.5%;
		height: 40%;
		left: 16%;
		top: 50%;
		-webkit-transform: skewX(-20deg);
		   -moz-transform: skewX(-20deg);
		    -ms-transform: skewX(-20deg);
		     -o-transform: skewX(-20deg);
		        transform: skewX(-20deg);
		animation-delay: .25s;
	}
	.starry_night li:nth-child(4) {
		width: 20%;
		height: 15%;
		left: 58%;
		top: 72%;
		animation-delay: .75s;
	}
	.starry_night li:nth-child(5) {
		width: 10%;
		height: 20%;
		left: 90%;
		top: 2%;
		animation-delay: .1s;
	}

	@-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-transform: translateX(-50%); }
		100%{-webkit-transform: translateX(-4.9%); }
	}
	@keyframes rainbow{
		0%	{transform: translateY(-50%); }
		100%{transform: translateY(-4.9%); }
	}
	@-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;}
	}
	@keyframes comet{
		0%	{
			z-index: -1;
			width: 200%;
		    transform: translateX(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
		    transform: translateX(-25%);
		}
	}
	@-webkit-keyframes comet{
		0%	{
			z-index: -1;
			width: 200%;
		    transform: translateX(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
		    transform: translateX(-25%);
		}
	}
	@keyframes flash{
		0%	{
			z-index: -1;
			width: 200%;
		    transform: translateX(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
		    transform: translateX(50%);
		}
	}
	@-webkit-keyframes flash{
		0%	{
			z-index: -1;
			width: 200%;
		    transform: translateX(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
		    transform: translateX(50%);
		}
	}
	@-webkit-keyframes yoyo {
		0% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-120%, -30%);
		}
		80% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-20%, -30%);
		}
		81% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-120%, -30%);
		}
		100% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-20%, -30%);
		}
	}
	@keyframes yoyo {
		0% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-120%, -30%);
		}
		80% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-20%, -30%);
		}
		81% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-120%, -30%);
		}
		100% {
			z-index: -1;
			width: 150%;
			height: 180%;
			transform: translate(-20%, -30%);
		}
	}

	@-webkit-keyframes wave {
		0% {
			z-index: -1;
			width: 150%;
			height: 180%;
			box-shadow: 0 0 100px 100px #000 inset;
			transform: translate(-120%, -30%);
		}
		50% {
			z-index: -1;
			width: 150%;
			height: 180%;
			box-shadow: 0 0 100px 100px #000 inset;
			transform: translate(-20%, -30%);
		}
		100% {
			z-index: -1;
			width: 150%;
			height: 180%;
			box-shadow: 0 0 100px 100px #000 inset;
			transform: translate(-120%, -30%);
		}
	}
	@keyframes wave {
		0% {
			z-index: -1;
			width: 150%;
			height: 180%;
			box-shadow: 0 0 100px 100px #000 inset;
			transform: translate(-120%, -30%);
		}
		50% {
			z-index: -1;
			width: 150%;
			height: 180%;
			box-shadow: 0 0 100px 100px #000 inset;
			transform: translate(-20%, -30%);
		}
		100% {
			z-index: -1;
			width: 150%;
			height: 180%;
			box-shadow: 0 0 100px 100px #000 inset;
			transform: translate(-120%, -30%);
		}
	}

	@-webkit-keyframes starryNight {
		0% {opacity: 0; }
		50% {opacity: 0; }
		100% {opacity: 1; }
	}

	@keyframes starryNight {
		0% {opacity: 0; }
		50% {opacity: 0; }
		100% {opacity: 1; }
	}