* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #000; min-height: 100%; }

body {
	align-items: center;
	background: #111;
	background-image: radial-gradient(circle at 50% 1200px, #333 0%, #111 75%);
	background-position: top;
	color: #fff;
	display: flex;
	font-family: 'Roboto', sans-serif;
	min-height: 100vh;
}

body > .no-mobile { position: absolute; display: none; z-index: -99; }

a {
	color: #fff;
	text-decoration: none;
	transition: .2s all;
}

header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	left: 0;
	padding: 70px 70px 0 70px;
	position: fixed;
	top: 0;
	z-index: 20;
	width: 100%;
}

header .logo {
	align-items: stretch;
	display: flex;
	font-family: "Impact", sans-serif;
}

header .logo img { transition: .3s width; width: 125px; }

header .logo div {
	align-items: center;
	display: flex;
	line-height: 1;
	text-transform: uppercase;
}

header .logo div:first-child {
	color: #ffd700;
	/*font-size: 90px;*/
	padding: 0 12px 0 0;
}

header .logo a:hover img {  }

header .logo .t {
	background: gold;
	clip-path: inset(0);
	color: #000;
	font-size: 32px;
	padding: 2px 12px 0;
	transition: .3s all;
}

header .logo div.t.close { clip-path: inset(20% 100% 20% 0); margin: -10px 0; }

.index header .logo img { width: 220px; }
.index header .logo div:first-child { padding: 0 16px 0 0; }
.index header .logo div.t { font-size: 36px; padding: 0 12px; }

header .lines {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-between;
}
header .lines span {
	background: gold;
	height: 15%;
	position: relative;
	margin-right: 600px;
}

header .lines span:after {
	background: linear-gradient(to right, rgba(255,215,0,1), rgba(255,215,0,0));
	content: '';
	display: block;
	height: 100%;
	left: 100%;
	top: 0;
	position: absolute;
	width: 600px;
}

header .lines span:nth-child(1) {  }
header .lines span:nth-child(2) { margin-right: 650px; }
header .lines span:nth-child(3) { margin-right: 700px; }
header .lines span:nth-child(4) { margin-right: 750px; }
header .lines span:nth-child(5) { margin-right: 800px; }

header .cable-subnav nav {
	display: flex;
	font-size: 19px;
	font-weight: 500;
}
header .cable-subnav nav a {
	padding: 10px 20px;
	position: relative;
}

header .cable-subnav nav a span {
	color: #fff;
	position: relative;
	transition: .3s color;
	white-space: nowrap;
	z-index: 1;
}

header .cable-subnav nav .active span { color: #111; }

header .cable-subnav nav a:before {
	background: gold;
	bottom: 0;
	display: block;
	height: 100%;
	content: '';
	left: 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: .2s transform;
	width: 100%;
	z-index: 0;
}

header .cable-subnav nav a:hover:before { transform: scaleY(.07); }
header .cable-subnav nav .active:before,
header .cable-subnav nav .active:hover:before { transform: scaleY(1); }


aside {
	height: 100%;
	left: 0;
	padding: 120px 70px 70px 70px;
	position: fixed;
	pointer-events: none;
	top: 0;
	width: 400px;
	z-index: 10;
}

aside .nav-cable nav,
aside .nav-company nav {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	font-size: 17px;
	margin-top: 15px;
}

aside .nav-company nav {
	transform: scaleY(1);
	transition: .3s transform;
}

aside .nav-company nav a:nth-child(1) {}
aside .nav-company nav a:nth-child(2) {}
aside .nav-company nav a:nth-child(3) {}
aside .nav-company nav a:nth-child(4) {}
aside .nav-company nav a:nth-child(5) {}

aside .nav-cable nav a,
aside .nav-company nav a { margin: 12px 0; position: relative; }

aside .nav-cable nav a:hover,
aside .nav-company nav a:hover { color: gold; }

aside .nav-cable nav a.active,
aside .nav-company nav a.active {
	color: gold;
	position: relative;
}

aside .nav-cable nav a.active:before,
aside .nav-company nav a.active:before {
	background: gold;
	content: '';
	display: block;
	height: 100%;
	left: -70px;
	position: absolute;
	top: 0;
	width: 5px;
}

aside .nav-company { transform: translateY(0); }
aside .nav-company .logo { transition: .3s transform; }

aside .nav-company .logo img {
	transform: scale(1) translateX(-34px);
	transform-origin: left;
	transition: .3s transform;
}

aside .nav-cable {
	margin-top: 47px;
	pointer-events: auto;
}

.index aside .nav-cable { margin-top: 80px; }

aside .nav-company {
	bottom: 45px;
	pointer-events: auto;
	position: absolute;
	transition: .3s transform;
}

aside .nav-company .logo em {
	background: #fff;
	height: 2px;
	content: '';
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: -14px;
	transform: scaleX(0);
	transition: .3s transform;
	width: 24px;
}
aside .nav-company.collapse .logo em { transform: scaleX(1); }

aside .nav-company.collapse .logo em:before,
aside .nav-company.collapse .logo em:after {
	background: #fff;
	content: '';
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	transition: .2s top;
	width: 100%;
}

aside .nav-company.collapse .logo em:before { top: 8px; }
aside .nav-company.collapse .logo em:after { top: -8px; }

aside .nav-company.collapse .logo:hover em:before { }
aside .nav-company.collapse .logo:hover em:after { }

aside .nav-company.collapse { transform: translateY(235px); }
aside .nav-company.collapse nav { transform: scaleY(0); }

aside .nav-company.collapse .logo { transform: translate(0, 0); }
aside .nav-company.collapse .logo img { transform: scale(.8); }


.cable-list {
	overflow-x: hidden;
	padding: 150px 0 100px 0;
	position: relative;
	width: 100%;
	z-index: 1;
}

.cable-list ul {
	list-style: none;
}

.cable-list ul li {
	margin-bottom: 10px;
	margin-left: auto;
	position: relative;
	transition: .5s opacity;
	width: 70%;
}

.cable-list ul li.hide {
	opacity: 0;
	pointer-events: none;
	transform: translateX(50px);
	transition: .5s all;
}

.cable-list ul li span {
	background: gold;
	color: #000;
	font-size: 23px;
	font-family: Impact;
	margin-top:-20px;
	right: 5px;
	opacity: .7;
	padding: .3em .5em .25em;
	position: absolute;
	text-transform: uppercase;
	transition: .3s all;
	top: 50%;
}

.cable-list ul div img {
	transform: scaleX(-1);
	width: 100%;
}

.cable-list ul li a div { transform: translateX(10px); transition: .2s transform; }
.cable-list ul li a:hover div { transform: translateX(0); }
.cable-list ul li a:hover span { opacity: 1; right: 25px; }

.content {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
}

.constr {
	align-self: flex-end;
	display: none;
	width: 100%;
}

.constr > div {
	justify-content: flex-end;
	display: none;
	flex-wrap: wrap;
	opacity: 0;
	width: 100%;
}
.constr > div.active { display: flex; opacity: 1; }

.layers-img,
.layers-name { width: 90%; }

.layers-img { position: relative; z-index: 2; }

.layers-img img { width: 100%; }
.layers-img video { width: 100%; }

.layers-name ul {
	display: flex;
	font-weight: normal;
	justify-content: space-between;
	list-style: none;
	margin-right: 6%;
	margin-top: 75px;
}

.layers-name li {
	position: relative;
	text-align: center;
}

.layers-name li:before {
	background: #fff;
	content: '';
	display: block;
	height: 0;
	left: 50%;
	opacity: .1;
	position: absolute;
	top: -170px;
	transition: .5s all;
	width: 1px;
	z-index: 0;
}

.layers-name .l li:before,
.layers-name li.l:before { height: 150px; }

.layers-name li:hover:before { opacity: .25; }

.layers-name li h6 {
	cursor: pointer;
	font-size: 17px;
	font-weight: 300;
	margin: -300px 0 10px 0;
	padding-top: 300px;
	position: relative;
	z-index: 3;
}
.layers-name li p {
	color: #ddd;
	font-size: 14px;
	font-weight: 300;
	opacity: 0;
	position: relative;
	top: 20px;
	transition: all .4s;
}

.layers-name li p em {
	color: #efefef;
	font-style: normal;
	font-weight: 400;
}

.layers-name li.active h6 { color: gold; }
.layers-name li.active p { opacity: 1; top: 0; }
.layers-name li.active:before { opacity: .5; }

.layers-name .l4 li { width: 24%; }
.layers-name .l5 li { width: 19%; }
.layers-name .l6 li { width: 16%; }
.layers-name .l7 li { width: 14%; }
.layers-name .l8 li { width: 12%; }
.layers-name .l8 li p { font-size: 12px; left: -10%; width: 120%; }


.constr > div.toggle {
	bottom: 40px;
	display: block;
	font-weight: 500;
	left: 50%;
	margin-left: -200px;
	position: fixed;
	text-align: center;
	width: 400px;
	z-index: 5;
}
.toggle nav {
	display: flex;
	justify-content: center;
	margin: 30px auto 0;
	position: relative;
}
.toggle nav a {
	padding: 10px 20px;
	position: relative;
}

.toggle nav .active { cursor: default; }

.toggle nav a span {
	color: #fff;
	position: relative;
	white-space: nowrap;
	transition: .3s color;
	z-index: 1;
}

.toggle nav .active span { color: #111; }

.toggle nav a:before {
	background: gold;
	bottom: 0;
	display: block;
	height: 100%;
	content: '';
	left: 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: .2s transform;
	width: 100%;
	z-index: 0;
}

.toggle nav a:hover:before { transform: scaleY(.07); }
.toggle nav .active:before,
.toggle nav .active:hover:before { transform: scaleY(1); }

.toggle nav a + p {
	color: #fff;
	font-size: 130%;
	left: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	text-align: center;
	transition: .5s opacity;
	top: -60px;
	white-space: nowrap;
	width: 100%;
}
.toggle nav .active + p { opacity: 1; }


.variants {
	display: none;
	left: 5%;
	padding: 200px 0 150px;
	position: relative;
	width: 70%;
}

.variants table tr td:nth-child(3) {
	font-size: 95%;
	font-weight: 300;
	line-height: 1.6;
}

.calc {
	display: none;
	width: 600px;
}

.calc h3 {
	font-size: 24px;
	font-weight: 300;
	margin-bottom: 2em;
	text-align: center;
}

.calc h3 span { color: #999; font-size: 90%; }

.calc form { margin: 30px 0; }

.calc .calc-inputs {
	display: flex;
	justify-content: space-between;
}

.calc .calc-inputs > div { width: 40%; }

.calc .calc-inputs label {
	color: #999;
	font-size: 90%;
	font-weight: 300;
	line-height: 1;
}

.calc .calc-inputs select {
	background: #222;
	border: 1px solid #444;
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 20px;
	font-weight: 500;
	margin-top: 10px;
	padding: 10px;
	width: 100%;
}

.calc .calc-inputs option {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
}

.calc .calc-result { margin-top: 90px; }

.calc .calc-result > div {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	
}

.calc .calc-result div div:first-child {
	font-size: 24px;
	font-weight: 300;
	position: relative;
	width: 35%;
}

.calc .calc-result div div:first-child:after {
	background: #fff;
	content: '';
	display: block;
	height: 2px;
	position: absolute;
	right: -50px;
	top: 50%;
	width: 15%;
}

.calc .calc-result div div:last-child {width: 40%; }

.calc .calc-result div div:last-child strong {
	font-weight: 500;
	font-size: 60px;
}


.calc .calc-result div div:last-child span {
	color: #999;
	font-size: 20px;
	font-weight: 300;
	margin-left: 10px;
}

.constr.active,
.variants.active,
.calc.active { display: block; }


.content h2 {
	color: #fff;
	font-size: 30px;
	/*font-weight: 500;*/
	margin-bottom: 1em;
}

.content h3 {
	font-size: 27px;
	font-weight: 500;
	margin-bottom: 1em;
}

.content h5 {
	color: gold;
	font-size: 25px;
	font-weight: 500;
	margin-bottom: 1em;
}

.content h5 small {
	color: #eee;
	font-size: 80%;
	font-weight: 300;
	}

.content p { 
	font-size: 17px;
	line-height: 1.7;
	margin: 1em 0;
}

.content p.lead {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	width: 80%;
}

.content img { max-width: 100%; }

.content table { border-collapse: collapse; }
.content table th {
	color: #aaa;
	font-size: 90%;
	font-weight: 400;
	padding: 0 20px 20px 20px;
	text-align: left;
	vertical-align: bottom;
}
.content table td {
	padding: 20px 20px;
	vertical-align: top;
}

.variants .content table tr th:first-child,
.variants .content table tr td:first-child { padding-left: 0; }

.variants .content table tr td:nth-child(1),
.variants .content table tr td:nth-child(2) { line-height: 1.6; }

.variants .content table tr th:last-child,
.variants .content table tr td:last-child { padding-right: 0; }

.content table nobr {
	display: block;
	font-size: 110%;
	font-weight: 500;
	margin-bottom: 5px;
}
.content table nobr:last-child { margin-bottom: 0; }

.content .row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.content .row.r4 > div { width: 20%; }

.content .row div p { font-size: 90%; }


.content.content-text {
	align-self: flex-start;
	margin: 170px 130px 0 27%;
	padding-bottom: 50px;
}

.content.content-text > div { width: 100%; }

.content-text ul { margin: 2em 0 2em 2.4em; }
.content-text ul li { margin: 1em 0; }


.content-about {
	align-items: stretch;
	align-self: stretch;
	flex-direction: row;
	justify-content: flex-end;
}

.content-about .about-h {
	align-items: center;
	display: flex;
	font-size: 32px;
	padding: 0 130px 200px 70px;
	position: relative;
	width: 40%;
	z-index: 2;
}

.about-logo {
	right: -50px;
	margin: -160px auto 0 0;
	position: absolute;
	top: 50%;
	width: 100px;
}


.about-logo:before {
	background: url(./../i/logo-simple.svg);
	background-size: auto 100%;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	z-index: 2;
}
.about-logo img {
	display: block;
	filter: grayscale(1) contrast(2) invert();
}


.content-about .about-text {
	align-items: center;
	background: gold;
	display: flex;
	color: #111;
	padding: 0 170px 200px 130px;
	position: relative;
	width: 60%;
}

.content-about .about-images ul {
	bottom: 55px;
	display: flex;
	justify-content: space-between;
	list-style: none;
	position: absolute;
	right: 130px;
	width: 70%;
}

.content-about .about-images li { position: relative; width: 30%; }
.content-about .about-images li img { width: 100%; }

.content-about h3 {
	font-size: 24px;
	font-weight: 500;
}

.content-about p {
	line-height: 1.7;
	margin: 20px 0;
}

.content-about p strong { font-weight: 500; }

.content-about a {
	color: #111;
	opacity: .7;
}



.content-pdf {
	align-self: stretch;
	flex-direction: row;
	justify-content: flex-end;
}

.content-pdf #pdf {
	border-left: 1px solid rgb(82, 86, 89);
	height: 100%;
	width: 80%;
}

.content .row.quality-certs {
	justify-content: flex-start;
	margin: 40px 0;
}
.content .row.quality-certs > div {
	margin-right: 4%;
	width: 18%;
}
/*
.content .row.quality-certs > div:last-child {
	font-size: 85%;
	font-weight: 300;
	line-height: 1.7;
	margin-right: 0;
	opacity: .8;
	width: 20%;
}
*/
.quality-logos { margin-top: 70px; }

.quality-logos div div {
	align-items: center;
	display: flex;
	min-height: 110px;
}


.content.content-line {
	align-self: stretch;
	align-items: flex-start;
}

.content-line .pline-h {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.4;
	margin-left: 30%;
	position: relative;
	top: -50px;
}

.content-line .pline-text {
	left: 230px;
	margin-left: 30%;
	position: relative;
	top: -50px;
	width: 35%;
}

.line-images li {
	display: block;
	position: absolute;
}

.line-images li img { display: block; width: 100%; }

.line-images li:nth-child(1) { right: 0; top: 0; width: 26%; }
.line-images li:nth-child(2) { left: 0; top: 25%; width: 24%; }
.line-images li:nth-child(3) { margin-left: 230px; left: 30%; bottom: 0; width: 23%; }

.content-ref > div { width: 100%; }

.content-ref .map {
	background: url('./../i/mapref.png') center no-repeat;
	background-size: contain;
	height: 70%;
	left: 5%;
	position: absolute;
	top: 0;
	width: 50%;
	z-index: 1;
}

.content-ref ul {
	left: 60%;
	position: relative;
	width: 35%;
	z-index: 2;
}

.content-ref ul li {
	font-size: 20px;
	margin: 10px 0;
}

.content-ref ul li span {
	color: #777;
	font-size: 90%;
	margin-left: 15px;
}


.exp-h {
	font-size: 27px;
	font-weight: 500;
	line-height: 1.6;
	margin-left: 30%;
	width: 50%;
}

.exp-images {
	justify-content: space-between;
	display: flex;
	margin: 50px 0;
}

.exp-images > div { position: relative; width: 24.9%; }
.exp-images > div img { width: 100%; }

.exp-text {
	margin-left: 30%;
	width: 50%;
}


.content.content-layers {
	align-self: center;
	margin: 0 13% 0 27%;
}

.content-layers .layers-mask {
	font-family: Impact, sans-serif;
	font-size: 7vw;
	margin-top: -250px;
	position: relative;
	white-space: nowrap;
}

.layers-mask > span {
	font-size: 70%;
	font-family: 'Roboto', sans-serif;
	margin: 0 -0.2em;
	position: relative;
	top: -0.15em;
}

.layers-mask > a {
	border-bottom: 4px solid #aaa;
	display: inline-block;
	line-height: 1;
	margin: 0 -2px;
	/*position: relative;*/
	transform-origin: bottom;
	transition: .3s all;
}

.layers-mask > a .n {
	color: #fff;
	cursor: pointer;
	position: relative;
	transition: .3s color;
}

.layers-mask > a .n:before {
	background-color: gold;
	content: '';
	display: block;
	height: 5vw;
	left: 50%;
	margin-left: -2px;
	margin-top: 4px;
	transform: scaleY(0);
	transform-origin: top;
	transition: .3s all;
	position: absolute;
	top: 100%;
	width: 4px;
}

.layers-mask a:hover { border-bottom-color: #fff; }

.layers-mask > a.active { border-bottom-color: gold; }

.layers-mask > a.active .n {
	color: gold;
	cursor: default;
	position: relative;
	-webkit-text-stroke-width: 0;
}

.layers-mask > a.active .n:before { transform: scaleY(1); }

@supports (-webkit-text-stroke: 1px #fff) {
	.layers-mask > a .n {
		color: #111;
		-webkit-text-stroke: 1px #fff;
	}
}

.layers-mask > a.active { }

.content-layers a .t {
	color: #fff;
	font-family: 'Roboto', sans-serif;
	pointer-events: none;
	font-size: 17px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 13vw;
	/*transform: translateY(20px);*/
	transition: .5s all;
	white-space: normal;
	width: 100%;
}
/*
.content-layers a:nth-child(6) .t,
.content-layers a:nth-child(7) .t,
.content-layers a:nth-child(8) .t,
.content-layers a:nth-child(9) .t,
.content-layers a:nth-child(10) .t {
	left: auto;
	right: 0;
	text-align: right;
	width: 850px;
}

.content-layers a:nth-child(6) .t:before,
.content-layers a:nth-child(7) .t:before,
.content-layers a:nth-child(8) .t:before,
.content-layers a:nth-child(9) .t:before,
.content-layers a:nth-child(10) .t:before { right: 15px; left: auto; }
*/

/*
.content-layers a .t:before {
	background-color: gold;
	content: '';
	display: block;
	height: 20px;
	left: 15px;
	position: relative;
	top: -25px;
	width: 10px;
}
*/

.content-layers a.active .t {
	opacity: 1;
	/*transform: translateY(0);*/
	transition-delay: .4s;
}

.content-layers div h5 {
	background: gold;
	color: #000;
	font-size: 23px;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 25px;
	padding: .5em 0.7em .45em;
}

.content-layers a .t ul { margin: 0; }

.content-layers a .t li {
	color: #eee;
	font-weight: 300;
	list-style: none;
	margin: 15px 0;
}

.content-layers a .t li strong {
	color: gold;
	font-weight: 500;
}

.content .ex-table {
	margin-bottom: 4em;
	width: 100%;
}


.content .ex-table th,
.content .ex-table td {
	border-bottom: 1px solid #222;
	padding: 15px 10px;
}

.content table .center { text-align: center; }

.content .ex-table tbody tr:nth-child(odd) { background-color: rgba(255,255,255,.03); }

.content .ex-table h5 {
	color: gold;
	font-size: 105%;
	font-weight: 300;
	letter-spacing: .2em;
	line-height: 1.2;
	margin: 5px 0 0;
	opacity: .8;
	text-transform: uppercase;
}

.content .ex-table small { color: #aaa; }


.scope { font-size: 130%; }

.scope span {
	color: #aaa;
	display: block;
	font-size: 80%;
	margin: 5px 0;
}

.content-advant ul {
	display: flex;
	flex-wrap: wrap;
	font-size: 21px;
	justify-content: space-between;
	margin: 3em 0 0 0;
}

.content-advant ul li {
	align-items: center;
	display: flex;
	list-style: none;
	margin: 0 0 2em;
	min-height: 75px;
	padding-left: 100px;
	position: relative;
	width: 45%;
}
.content-advant ul li img {
	left: 0;
	position: absolute;
	top: 0;
}
.content.content-advant ul li p {
	font-size: 19px;
	line-height: 1.4;
	margin: 0;
}


.content-tx .tx {
	display: flex;
	justify-content: space-between;
	margin-bottom: 70px;
}
.content-tx .tx > div { width: 27%; }
.content-tx .tx > div img { margin-bottom: .5em; }
.content-tx .tx > div h5 { margin-bottom: .5em; }
.content-tx .tx > div p { line-height: 1.4; margin: 0 0 .5em 0; }
.content-tx .tx > div small { color: #999; }