@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/*-----RESET-----*/
	#hd {
		margin: 0;
		background-color: #000000;
		background: #000000;
		color: #FFF;
	}
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#hd * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}
	#hd .abc {
		-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;
	}

	#hd img {
		max-width: 100% !important;
		height: auto;
		border: none;
	}
	#hd a {
		font-family: 'Tahoma', sans-serif;
		font-size: 14px;
		text-decoration: none;
		color: #920000;
		font-weight: 600;
	}
	#hd a:hover {
		text-decoration: none;
		color: #d30000;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6 {
		font-family: 'Tahoma', sans-serif;
		color: #FFF;
		line-height: 1.4rem;
		margin: 0;
		font-weight: normal;
	}
	#hd p {
	  font-family: 'Tahoma', sans-serif;
	  font-size: 14px;
	  font-weight: 300;
	  letter-spacing: .5px;
	  line-height: 22px;
	  margin: 0;
	  padding-bottom: 20px;
	  color: #FFF;
	}
	#hd b {
	  display: block;
	  font-size: 14px;
	  font-weight: 600;
	  letter-spacing: 0.5px;
	}
	#hd small {
	  font-family: 'Tahoma', sans-serif;
	  font-size: 12px;
	  line-height: 13px;
	  font-weight: 300;
	}
	#hd small.txt-red{
		font-weight: 600;
	}
	#hd ul {
	  font-family: 'Tahoma', sans-serif;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	#hd ul li {
	  font-family: 'Tahoma', sans-serif;
	  font-size: 15px;
	  color: #FFF;
	}/*

	#hd .hd-button:focus {
	  outline: 0;
	}
	#hd .hd-button {
	  background-color: transparent;
	  border: none;
	  cursor: pointer;
	}
	#hd .hd-btn {
	  background: none;
	  border: none;
	  outline: none;
	  cursor: pointer;
	}
	#hd a.hd-link {
	  color: #C50012;
	  text-decoration: underline;
	  font-weight: 400;
	  display: initial;
	}
	#hd a.hd-link:hover {
	  color: white;
	  opacity: 1;
	}
*/
	#fp-nav ul li .fp-tooltip{
		max-width: 300px;
		text-transform: uppercase;
	}
/*-----TXT-----*/
	#hd h2{
		font-weight: 600;
		font-size: 45px;
		line-height: 50px;
		padding-bottom:10px;
		position: relative;
		color:#fff !important;
	}
	#hd h3{
		font-family: 'Fjalla One', sans-serif;
		font-size: 28px;
		line-height: 30px;
		margin-bottom: 15px;
	}
	#hd .txt-center{
		text-align: center;
	}
	#hd .txt-grey{
		color:#808080;
		font-weight: 400;
	}
	#hd .txt-red{
		color:#c10c18;
		font-weight: 400;
	}
/*-----BLOCK-----*/
	#hd .w1200,
	#hd .w1250,
	#hd .w1400,
	#hd .w1100,
	#hd .w1000{
	    width: 90%;
	    max-width: 1200px;
	    margin: 0 auto;
	    position: relative;
	}
	#hd .w1400 {
	    max-width: 1400px;
	}
	#hd .w1250 {
	    max-width: 1250px;
	}
	#hd .w1000 {
	    max-width: 1000px;
	}
	#hd .w1100 {
	    max-width: 1100px;
	}
	#hd .ib,
	#hd .col25,
	#hd .col35,
	#hd .col33,
	#hd .col40,
	#hd .col50,
	#hd .col60,
	#hd .col70{
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25{
		width: 25%;
	}
	#hd .col30{
		width: 30%;
	}
	#hd .col33{
		width: 33%;
	}
	#hd .col40{
		width: 40%;
	}
	#hd .col50{
		width: 50%;
	}
	#hd .col60{
		width: 60%;
	}
	#hd .col70{
		width: 70%;
	}

	#hd .fleft {
	    float: left;
	}
	#hd .fright {
	    float: right;
	}
	#hd .cb:after{
		content:'';
		display: block;
		clear:both;
	}

	#hd .hd-rtl{
		direction: rtl;
	}
	#hd .bg-center{
		background:url(../img/bg.jpg) right 0 no-repeat;
		background-size: cover;
	}

	#hd .mobile-on{
		display: none;
	}
/*-----SCROLL UP-----*/
	#scrollUp {
	    position: fixed;
	    right: 30px;
	    bottom: 30px;
	    width: 45px;
	    height: 45px;
	    text-align: center;
	    cursor: pointer;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    border: 2px solid #8D0000;
	    z-index: 999;
	    opacity: 0;
	}

	#scrollUp.hd-show {
	    opacity: 1;
	}

	#scrollUp:hover {
	    background-color: #8D0000;
	}

	#scrollUp:hover svg {
	    fill: #FFF;
	}

	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #8D0000;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}
/*-----kv-----*/
	#hd #kv{
		padding-bottom: 100px;
	}
	#hd #kv .kv_img{
		position: relative;
	}
	#hd #kv img{
		display: block;
		margin:0 auto;
	}
	/*#hd #kv .kv_product{
		position: absolute;
		left: 0;right: 0;
		bottom: 10%;
		padding-left: 3%;
		max-width: 1280px !important;
		width: 80%;
	}*/
	#hd #kv p{
		text-align: center;
		max-width: 920px;
		margin:-65px auto 0;
	}
/*-----texture & control-----*/
	#hd #texture,
	#hd #control{
		position: relative;
		padding:80px 0;
	}
	#hd #texture .col50{
		position: relative;
		z-index: 2;
		padding:12% 10% 18% 0;
	}
	#hd #control .col60{
		position: relative;
		z-index: 2;
		padding:17% 0 15% 8%;
	}
	#hd #texture > img{
		position: absolute;
		top: 0;
		left: 32%;
	}
	#hd #control > img{
		position: absolute;
		top: 0;
		right: 54%;
	}
/*-----models-----*/
	#hd #models{
		padding-top: 50px;
		overflow:hidden;
	}
	/*-----model_filter-----*/
		#hd #model_filter{
			margin-top: 50px;
		}
		#hd #model_filter li{
			display: inline-block;
			vertical-align: bottom;
			font-size: 22px;
			height: 95px;
		    padding:30px 50px;
		    color:#c10c18;
		    text-align: center;
		    position: relative;
		    z-index: 2;
		    cursor: pointer;
		}
		#hd #model_filter li:first-child{
			width: 60%;
		}
		#hd #model_filter li:last-child{
			width: 45%;
			margin-left: calc(-5% - 10px);
		}
		#hd #model_filter li:before,
		#hd #model_filter li:after {
		    position: absolute;
		    content: "";
		    width: 55%;
		    height: 100%;
		    top: 0;
		    background-color: #2e0203;
		    border-top:1px solid #711616;
		    border-bottom: 1px solid #c10c18;
		    transform-origin: 0 0;
		    -webkit-transform-origin: 0 0;
		    z-index: -1;
		}
		#hd #model_filter li:before {
		    left: 30px;
		    border-radius: 10px 0 0 0;
		    border-left: 2px solid #711616;
		    transform: skew(-18deg);
		    -webkit-transform: skew(-18deg);
		}
		#hd #model_filter li:after {
		    right: 25px;
		    border-radius: 0 10px 0 0;
		    border-right: 2px solid #711616;
		    transform: skew(18deg);
		    -webkit-transform: skew(18deg);
		}
		#hd #model_filter .hd_xxl,
		#hd #model_filter .hd_plus,
		#hd #model_filter .hd_mini{
			display: inline-block;
			vertical-align: middle;
			border:2px solid #c10c18;
			border-radius: 4px;
			margin-right: 20px;
		}
		#hd #model_filter .hd_xxl{
			width: 106px;
			height: 44px;
		}
		#hd #model_filter .hd_plus{
			width: 50px;
			height: 35px;
			margin-left: 5%;
		}
		#hd #model_filter .hd_mini{
			width: 35px;
			height: 24px;
			margin-top:10px;
			margin-bottom: 10px;
		}
		
		#hd #model_filter li.active{
			height: 100px;
			padding-top: 35px;
			color:#ffffff;
			z-index: 3;
		}
		#hd #model_filter li.active:before {
			background-color: #1b1b1b;
			border-color:#c10c18;
			border-bottom-color:#1b1b1b;
			box-shadow: -5px -5px 5px 1px rgba(0,0,0,.5);
		}
		#hd #model_filter li.active:after {
			background-color: #1b1b1b;
			border-color:#c10c18;
			border-bottom-color:#1b1b1b;
			box-shadow: 5px -5px 5px 1px rgba(0,0,0,.5);
		}
		#hd #model_filter li.active .hd_xxl,
		#hd #model_filter li.active .hd_plus,
		#hd #model_filter li.active .hd_mini{
			border-color: #ffffff;
		}
	/*-----model_content-----*/
		#hd #models .hd-content > div{
			display: none;
			background-color: #1b1b1b;
			padding-bottom: 50px;
			position: relative;
		}
		#hd #models .hd-content > div.active{
			display: block;
		}
		#hd #models .hd-back{
			position: absolute;
			top: 0;
		}
		#hd #models .hd-content .col50,
		#hd #models .hd-content .col40{
			position: relative;
			z-index: 2;
		}
		#hd #models .hd-content .col50{
			padding:25% 0 18%;
		}
		#hd #models .hd-content .col40{
			padding:30% 4% 25% 2%;
		}
		#hd #hd-large .hd-back{
			right: 0;
		}
		#hd #hd-small .hd-back{
			right: 20%;
		}
		#hd #hd-small h2 + img{
			width: 80%;
			max-width: 978px!important;
			padding:10% 0 12%;
		}
	/*-----size-----*/
		#hd #size{
			padding:100px 0 150px;
			border-top: 1px solid #9c0c07;
		}
		#hd #size li{			
			-webkit-transition: all .4s ease;
			   -moz-transition: all .4s ease;
			    -ms-transition: all .4s ease;
			     -o-transition: all .4s ease;
			        transition: all .4s ease;
		}
		#hd #size .hd-sizeblock{
			position: relative;
			width: 80%;
			padding-top: 30px;
		}
		#hd #size .hd-sizeblock li{
			content:'';
			display: block;
			height: 0;
			border:3px solid #7d7d7d;
			border-radius: 30px;
			position: absolute;
			bottom: 0;
			left: 1%;
		}
		#hd #size .hd-sizeblock li:nth-child(1){
			left:calc(1% + 3px);
			bottom: 3px;
			border-radius: 26px;
			width: 28%;
			padding-bottom: 19%;
			z-index: 3;
		}
		#hd #size .hd-sizeblock li:nth-child(2){
			width: 48%;
			padding-bottom: 34%;
			z-index: 2;
		}
		#hd #size .hd-sizeblock li:nth-child(3){
			position: relative;
			width: 96%;
			padding-bottom: 40%;
			z-index: 1;
		}

		#hd #size .hd-size{
			position: relative;
			width: 80%;
			padding-top:20px;
		}
		#hd #size .hd-size li{
			display: inline-block;
			width: 33.333%;
			margin-left: -5px;
			color:#7d7d7d;
		}
		#hd #size .hd-size li:nth-child(1){
			text-align: left;
		}
		#hd #size .hd-size li:nth-child(2){
			text-align: center;
		}
		#hd #size .hd-size li:nth-child(3){
			text-align: right;
		}
		#hd #size .hd-size li span{
			display: inline-block;
			width: 200px;
			font-size: 19px;
			text-align: center;
		}


		#hd #size .hd-sizeblock li.active{
			border-color: #c10c18;
		}
		#hd #size .hd-size li.active{
			color: #c10c18;
		}
/*-----peripherals-----*/
	#hd #peripherals	{
		padding:90px 0 170px;
		text-align: center;
	}
	#hd #peripherals h2 span{
		display: inline-block;
		vertical-align: middle;
		padding:0 5px;
	}
	#hd #peripherals .hd-container{
		position: relative;
	}
	#hd #peripherals .hd-container li{
		position: absolute;
		max-width: 132px;
		line-height: 22px;
	}
	#hd #peripherals .hd-container li a{
		display: block;
		color:#ffffff;
		font-weight: 300;
		font-size: 15px;
		-webkit-transition: color .25s ease;
		   -moz-transition: color .25s ease;
		    -ms-transition: color .25s ease;
		     -o-transition: color .25s ease;
		        transition: color .25s ease;
	}
	#hd #peripherals .hd-container li:nth-child(-n+3) a:hover{
		color:#d13133;
	}
	#hd #peripherals .hd-container li:nth-child(1){
		top:63%;
		left: 20%;
		max-width: 135px;
	}
	#hd #peripherals .hd-container li:nth-child(2){
		top:92%;
		left: 36%;
	}
	#hd #peripherals .hd-container li:nth-child(3){
		top:93%;
		left: 61.5%;
		max-width: 110px;
	}
	#hd #peripherals .hd-container li:nth-child(4){
		top: 77%;
		left: 82.5%;
	}
	#hd #peripherals map{
		/*background-color: rgba(255,255,255,.2);*/
	}
	#hd #peripherals area{
		/*background-color: rgba(0, 0, 100, .5);*/
		outline:none;
	}