@charset "utf-8";
/* CSS Document */

@font-face {
 	font-family: 'Xolonium';
 	src: url('../fonts/Xolonium.otf');
	src: url('../fonts/Xolonium.otf') format('embedded-opentype');
  src:url("../fonts/Xolonium.ttf") format("opentype");
 	font-weight: normal;
 	font-style: normal
}

@font-face {
    font-family: 'Rog';
    src: url('../fonts/rog_fonts_v1.6_regular-webfont.woff2') format('woff2'),
         url('../fonts/rog_fonts_v1.6_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { background-color: #000; color: #EBEBEB; }
section { margin: 50px 0px }
small { color: #b3b2b2 !important; }

#lighting h1 {
	font-family: Xolonium !important;
	font-size: 76px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 0 0 15px #10ebe3;
}

#lighting h2 {
	font-family: Xolonium !important;
	color: #10ebe3;
	font-size: 30px;
	line-height: 1.25em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

#lighting h3 {
	font-family: Xolonium !important;
	font-size: 20px;
  text-transform: uppercase;
	color: #10ebe3;
	margin-bottom: 0px;
}

#performance h1 {
	font-family: Xolonium !important;
	font-size: 76px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 0 0 15px #ea0c6b;
}

#performance h2 {
	font-family: Xolonium !important;
	color: #ea0c6b;
	font-size: 30px;
	line-height: 1.25em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

#performance h3 {
	font-family: Xolonium !important;
	font-size: 20px;
  text-transform: uppercase;
	color: #ea0c6b;
	margin-bottom: 0px;
}

#networking h1 {
	font-family: Xolonium !important;
	font-size: 76px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 0 0 15px #ff7900;
}

#networking h2 {
	font-family: Xolonium !important;
	color: #ff7900;
	font-size: 30px;
	line-height: 1.25em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

#networking h3 {
	font-family: Xolonium !important;
	font-size: 20px;
  text-transform: uppercase;
	color: #ff7900;
	margin-bottom: 0px;
}

#audio h1 {
	font-family: Xolonium !important;
	font-size: 76px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 0 0 15px #ff001f;
}

#audio h2 {
	font-family: Xolonium !important;
	color: #ff001f;
	font-size: 30px;
	line-height: 1.25em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

#audio h3 {
	font-family: Xolonium !important;
	font-size: 20px;
  text-transform: uppercase;
	color: #ff001f;
	margin-bottom: 0px;
}

#audio h6 {
	font-size: 16px;
  text-transform: uppercase;
	color: #ff001f;
	padding-bottom: 5px;
	border-bottom: 1px solid #ff001f;
	display: inline-block;
}

#gamers-guardian h1 {
	font-family: Xolonium !important;
	font-size: 76px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 0 0 15px #00ffc8;
}

#gamers-guardian h2 {
	font-family: Xolonium !important;
	color: #00ffc8;
	font-size: 30px;
	line-height: 1.25em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

#gamers-guardian h3 {
	font-family: Xolonium !important;
	font-size: 20px;
  text-transform: uppercase;
	color: #00ffc8;
	margin-bottom: 0px;
}

#gamers-guardian h5 {
	font-family: Xolonium !important;
	font-size: 30px;
  text-transform: uppercase;
	color: #FFF;
	margin-bottom: 20px;
}

#more h1 {
	font-family: Xolonium !important;
	font-size: 76px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 0 0 15px #00c6ff;
}

#more h2 {
	font-family: Xolonium !important;
	color: #00c6ff;
	font-size: 30px;
	line-height: 1.25em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

#more h3 {
	font-family: Xolonium !important;
	font-size: 20px;
  text-transform: uppercase;
	color: #00c6ff;
	margin-bottom: 0px;
}

#intel h1 {
	font-family: Xolonium !important;
	font-size: 76px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 0 0 15px #3218ff;
}

h4 {
	font-family: 'Fjalla One', sans-serif !important;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 40px !important;
	color: #c9c9c9;
	text-transform: uppercase; }


.boton { text-align: center;
    background-color: #ff7900;
    padding: 5px 15px;
    margin-top: 15px;
    transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    font-weight: 500;
		display: inline-block; }

.m-20 { margin-top: 20px; }
.m-60 { margin-top: 60px; }

/* ---------- #specs -------------- */

	#hd #specs .spec-main {
		width: 100%;
		height: 0;
		padding-bottom: 65%;
		background: url('../images/spec-pc.jpg') center center no-repeat;
		background-size: contain;
	}
	#hd #specs ol {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		counter-reset: mycounter;
	}
	#hd #specs li {
		position: absolute;
		font-size: 15px;
		font-weight: 300;
		letter-spacing: 1px;
	}
	#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: 1px solid #fd007d;
		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 span small{
		display: inline;
	}
	#hd #specs ol li b{
		font-weight: 400;
	}
	#specs li:nth-child(-n+6) {left: 7%; }
	#specs li:nth-child(1) {top: 8%; }
	#specs li:nth-child(2) {top: 15.5%; }
	#specs li:nth-child(3) {top: 38.5%; }
	#specs li:nth-child(4) {top: 52.5%; }
	#specs li:nth-child(5) {top: 77.5%; }
	#specs li:nth-child(6) {top: 84.5%; }
	#specs li:nth-child(n+7) {left: 77%; }
	#specs li:nth-child(7) {top: 6%; }
	#specs li:nth-child(8) {top: 14%; }
	#specs li:nth-child(9) {top: 26.5%; }
	#specs li:nth-child(10) {top: 36%; }
	#specs li:nth-child(11) {top: 47.5%; }
	#specs li:nth-child(12) {top: 52.5%; }
	#specs li:nth-child(13) {top: 61%; }
	#specs li:nth-child(14) {top: 67%; }
	#specs li:nth-child(15) {top: 88%; }
	#specs li:nth-child(16) {top: 93.5%; }
/* ---------- #lighting ----------- */
	#hd #lighting p.hd-w500{
		margin:10px auto 50px;
	}
	#hd #lighting .hd-lighting {
		position: relative;
		overflow: hidden;
		background-color: #484848;
	}
	#hd #lighting .hd-lighting:after{
		content:'';
		display: block;
		width: 100%;
		height: 2px;
		position: absolute;
		bottom: 0;
		left: 0;
		background:#000000;
		z-index: 2;
	}
	#hd #lighting #hd-lightingimg {
		position: relative;
		z-index: 9;
		width: 100%;
	}
	#hd #lighting #color {
		width: 100%;
		height: 0;
		padding-bottom: 136.9%;
		position: absolute;
		z-index: 1;
	}

	#hd #lighting .right{
		padding-left: 50px;
		position: relative;
	}
	#hd #lighting .hd-controls{
		margin-top: 50px;
		padding-left: 0px !important;
	}
	#hd #lighting .hd-controls li {
		width: 16.6666%;
		display: inline-block;
		margin-right: -5px;
		vertical-align: top;
		text-align: center;
		padding: 10px 5px;
		opacity: .5;
		cursor: pointer;
		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 #lighting .hd-controls li img{
		margin:0 auto 10px;
	}
	#hd #lighting b {
		display: block;
		font-size: 1.3rem;
		letter-spacing: 1px;
	}

	#hd #lighting .hd-controls li.lighting-active {
		opacity: 1;
	}
	#colorpicker{
		display: block;
		width: 130px;
		position: absolute;
		bottom: -130px;
		right: 0;
	}