[v-cloak] > * { display:none; }
[v-cloak]::before { content: "loading..."; }

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

body {
 background-color: #000;
 color:#fff;
 font-family: 'MullerLight';
 line-height:1.5; 
}

h1{
	text-align:center;
	padding:10px;
	color:#fa821e;
}

h2{
	text-align:center;
	padding:10px;
	color:#fa821e;
}

p{
	padding:7px 0 7px 0;
}

.abs-note{
	position:absolute;
	background-color: #fff;
	padding:5px;
	margin:-10px 0 0 0;
	font-size:12px;
	color:#000;
}

ul{
	padding:10px 0 0 60px;	
}

ol{
	padding:10px 10px 10px 20px;
}

li{
	padding:6px 0 6px 0;	
}
table{
	width:100%;
}
td{
	border-bottom:1px solid #6c6a67;
	padding:15px;
	vertical-align:top;
}
.light-row{
	background-color: rgba(140,140,140,0.25);	
}

.text-white{
	color:#fff;
}

.f-size-large{
	font-size: 1.5rem;	
}

.f-size-small{
	font-size: 0.8rem;	
}

.contact-link{
	text-align:center;
	width:250px;
}

.page-content{
	width:100%;
	max-width:960px;
	margin:20px auto;
}

.h-article{
	color:#fff;
	font-size:21px;	
	text-align:left;
	padding:10px 0;
}

.orange{
	color:#fa821e;
}

.mobile-hide{}

#document{
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 animation-duration: 0.5s;
 animation-delay: 1.0s;
 animation-name: slideindoc;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;	
 -khtml-opacity: 0;
 opacity: 0;
}

@keyframes slideindoc {
  from {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
  }

  to {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;	
  }
}

#start-logo{
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 animation-duration: 1.5s;
 animation-delay: 1.5s;
 animation-name: slidein;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;	
 -khtml-opacity: 0;
 opacity: 0;
}

@keyframes slidein {
  from {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	margin:-20px 0 0 0;
  }

  to {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;	
	margin: 0 0 0 0;
  }
}

#start-text{
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 animation-duration: 1.5s;
 animation-delay: 3.0s;
 animation-name: slideintext;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;	
 -khtml-opacity: 0;
 opacity: 0;
}

@keyframes slideintext {
  from {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
  }

  to {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;	
  }
}

.status-lights{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:28px;
	min-height:18px;
	margin:14px auto 0 auto;
	opacity:0;
	animation:status-lights-in 0.6s ease-out 3.2s forwards;
}

.status-light{
	display:block;
	width:10px;
	height:10px;
	border:1px solid rgba(255,255,255,0.55);
	border-radius:50%;
	opacity:0.45;
	animation:status-light-pulse 1.8s ease-in-out infinite;
}

.status-light:nth-child(2){animation-delay:0.45s;}
.status-light:nth-child(3){animation-delay:0.9s;}
.status-light:nth-child(4){animation-delay:1.35s;}

.status-light--green{
	background-color:#73d13d;
	box-shadow:0 0 5px rgba(115,209,61,0.65), 0 0 12px rgba(115,209,61,0.35);
}

.status-light--amber{
	background-color:#fa821e;
	box-shadow:0 0 5px rgba(250,130,30,0.65), 0 0 12px rgba(250,130,30,0.35);
}

@keyframes status-lights-in {
	to{opacity:1;}
}

@keyframes status-light-pulse {
	0%, 100%{
		opacity:0.35;
		transform:scale(0.82);
	}
	50%{
		opacity:1;
		transform:scale(1.08);
	}
}

@media only screen and (max-width : 800px) {
	.status-lights{
		gap:20px;
		min-height:14px;
		margin-top:10px;
	}

	.status-light{
		width:8px;
		height:8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.status-lights{
		opacity:1;
		animation:none;
	}

	.status-light{
		opacity:0.8;
		transform:none;
		animation:none;
	}
}

#start-next{
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 animation-duration: 1s;
 animation-delay: 3.5s;
 animation-name: slideinnext;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;	
 -khtml-opacity: 0;
 opacity: 0;
 position:absolute;
 left:0;
 width:100%;
}

@keyframes slideinnext {
  from {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	margin:40px 0 0 0;
  }

  to {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	margin:20px 0 0 0;
  }
}

#menu{
	position:fixed;
	top: 50%;
	transform: translateY(-50%);
	right:20px;
	z-index:3000;
	display: flex;
	flex-direction: column;
	align-items:center;
	background-color:rgba(255,255,255,0.2);
	padding:3px;
	border-radius:5px;
	width:30px;
}

.menu-item{
	width:5px;
	height:5px;
	margin:12px;
	border-radius:50%;
	background-color:#fff;
	transition: 0.3s ease-out;
}

.menu-item.active{
	width:12px;
	height:12px;	
}

#navbar-toggler-icon{
	position: absolute;
	right:0;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .15);
	font-size: 21px;
	padding: 15px 0 9px 0;
	width:60px;
	text-align:center;
	z-index: 9000;
	transition:background-color .2s;	
}

#navbar-toggler-icon:hover{
	background-color: rgba(255, 255, 255, .4);
}

#btn-calc-container{	
	position: absolute;
	left:0;
	padding:13px 0 0 13px;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .15);
	height:54px;
	width:60px;
	z-index: 9000;
	transition:background-color .2s;		
}

#btn-calc-container:hover{
	background-color: rgba(255, 255, 255, .4);
}

#feedback-container{
	position:fixed;
	top:0;
	left:-100%;
	width:100%;
	background-color:rgba(0,0,0,.9);
	z-index:9001;
	color:#000;
	height: 100%;
	color: #fff;
}

#nav-container{
	display:none;
	position:absolute;
	background-color:rgba(0,0,0,.85);
	z-index:9001;
	color:#000;
	right:75px;
	top:10px;
	border:2px solid #fff
}

.menu-open{}

#close-feedback{
	display:flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .15);
	font-size: 21px;
	padding: 15px 0 9px 0;
	width:60px;
	float:right;
	transition:background-color .2s;
}

#close-feedback:hover{
	background-color: rgba(255, 255, 255, .4);
}

#nav-links{
	width:280px;
	padding:15px 0 15px 0;
}

.nav-links-item{
	padding:15px 0 15px 15px;
}

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

.text-right{
	text-align:right;	
}

.logo{
	margin:0 auto 0 auto;
	width:400px;
	height:auto;
}


.start-next-img{
	transition: 0.3s ease-out;
}

.start-next-img:hover{
	margin:5px auto 0 auto;
}

.section{
	background-size: cover;
	background-attachment: fixed;
	border-bottom:1px solid #6d6d6d;
	-webkit-box-shadow: 0px 90px 90px 0px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0px 90px 90px 0px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0px 90px 90px 0px rgba(0, 0, 0, 0.5) inset;
}

.slide{
	background-size: cover;
	background-attachment: fixed;
	-webkit-box-shadow: 0px 90px 90px 0px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0px 90px 90px 0px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0px 90px 90px 0px rgba(0, 0, 0, 0.5) inset;
}

.content--bg{
	padding:15px;
	border-radius:5px;
	margin:5px 0 5px 0;
	background-color: rgba(0, 0, 0, .75);		
}
/* -------------------------- content ------------------------------ */
.content{
	color:#fff;
	top: 50%;
	transform: translateY(-50%);
	position: relative;
	width:100%;
	max-width:800px;
	margin:auto;
	padding:30px;
	font-size: 1.1rem;
}
	
@media only screen and (min-width : 1280px) {
	.content h1{font-size: 1.5rem;}
	.content h2{font-size: 1.5rem;}
	.content{font-size: 1.2rem;max-width:980px;}
}
@media only screen and (min-width : 1440px) {
	.content h1{font-size: 1.6rem;}
	.content h2{font-size: 1.6rem;}
	.content{font-size: 1.2rem;max-width:980px;}
}
@media only screen and (min-width : 1900px) {
	.content h1{font-size: 2rem;}
	.content h2{font-size: 1.6rem;}
	.content{font-size: 1.4rem;max-width:1120px;}
}
@media only screen and (max-width : 800px) {
	.content h1{font-size: 1.2rem;}	
	.content h2{font-size: 1.6rem;}
	.content{font-size: 0.90rem;padding:15px;}
}
/* ------------------------------------------------------------------ */

.fs-18{
	font-size: 18px;
}

.fs-21{
	font-size: 21px;
}

.fs-24{
	font-size: 24px;
}

.scroll-horizontal{
	background-image: url(../images/scroll-horizontal.png);
	width:50px;
	height:43px;
	margin:20px auto 0 auto;
	display:none;
}

.info{
	padding:10px 20px 10px 20px;
	margin:15px 0 15px 0;
	border-radius:5px;
	border:1px solid #747474;
	background-color: rgba(255, 255, 255, 0.15);
	-webkit-box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.5);
}

.info--border{
	padding:10px 20px 10px 20px;
	margin:15px 0 15px 60px;
	border-left:2px solid #747474;
}

.d-flex{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.d-flex-center{
	display: flex;
	flex-direction: row;
	justify-content: center;
	border-top:1px solid #8a8d8f;
	padding:20px;
}

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

.project-info{
	padding:0 0 0 20px;
}

.energy-characteristic{
	padding:25px 15px 25px 50px;
	margin:20px;
	width:50%;
}

.energy-characteristic--no-icon{
	width:50%;
	padding:10px 0 10px 0;
}

.pointer{
	font-size: 1.6rem;
}

.border-top{
	border-top:1px solid #8a8d8f;
	padding:15px 0 0 0;
	margin:15px 0 0 0;
}

.stage-container{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin:20px 0;
}

.stage{
	display: flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:90px;
	height:90px;
	border:2px solid #8a8d8f;
	border-radius:50%;
	font-size:22px;
	background-color: rgba(140,140,140,0.25);
	cursor:pointer;
	transition: .2s;
}

.stage:hover{
	background-color: rgba(0,0,0,0.8);
	border:2px solid #fff;
	color:#fa821e;
}

.stage--active{
	display: flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:90px;
	height:90px;
	border:2px solid #fa821e;
	border-radius:50%;
	font-size:22px;
	background-color: #fa821e;
}

.stage--delimiter{
	width:40px;
	height:2px;
	background-color:#8a8d8f;
}

.project{
	width:100%;
	height:auto;	
	border:5px solid #fff;
}

.download-doc{
	padding:20px 0 20px 70px;
	margin:15px 0 15px 0;
	background-repeat: no-repeat;
	background-position:0% 50%;
	background-image: url(../images/download.png);
}

@media only screen and (min-width : 1280px) {
	.project{
		width:75%;
		height:auto;		
	}
}
@media only screen and (min-width : 1440px) {
	.project{
		width:90%;
		height:auto;
	}
}
@media only screen and (min-width : 1900px) {
	.project{
		width:100%;
		height:auto;
	}
}

#energy-characteristic-1{
}
#energy-characteristic-2{
}
#energy-characteristic-3{
}
#energy-characteristic-4{
}
#energy-characteristic-5{
}
#energy-characteristic-6{
}

#adv-1{
	background-image: url(../images/adv-1.png);	
}
#adv-2{
	background-image: url(../images/adv-2.png);	
}
#adv-3{
	background-image: url(../images/adv-3.png);	
}
#adv-4{
	background-image: url(../images/adv-4.png);	
}

/* ------------------------------------------------------------------ */

#section0{
	background-image: url(../images/screen1.jpg);
}

#section0 canvas {
    position: relative;
    z-index: 3;
}
#section1{
	background-image: url(../images/screen4.jpg);
}
#section2{
	background-image: url(../images/screen2.jpg);
}
#section3{
	background-image: url(../images/screen3.jpg);
}
#section6{
	background-image: url(../images/screen5.jpg);
}
#section7{
	background-image: url(../images/screen14.jpg);
}

/* ------------------------------------------------------------------ */

#slide11{
	background-image: url(../images/screen4.jpg);
}
#slide12{
	background-image: url(../images/screen6.jpg);
}
#slide13{
	background-image: url(../images/screen8.jpg);
}

/* ------------------------------------------------------------------ */

#slide51{
	background-image: url(../images/screen7.jpg);
}
#slide52{
	background-image: url(../images/screen8.jpg);
}
#slide53{
	background-image: url(../images/screen9.jpg);
}
#slide54{
	background-image: url(../images/screen10.jpg);
}

/* ------------------------------------------------------------------ */

#slide41{
	background-image: url(../images/screen6.jpg);
}
#slide42{
	background-image: url(../images/screen7.jpg);
}
#slide43{
	background-image: url(../images/screen8.jpg);
}
#slide44{
	background-image: url(../images/screen2.jpg);
}
#slide45{
	background-image: url(../images/screen3.jpg);
}
#slide46{
	background-image: url(../images/screen4.jpg);
}
#slide47{
	background-image: url(../images/screen6.jpg);
}
#slide48{
	background-image: url(../images/screen12.jpg);
}
#slide49{
	background-image: url(../images/screen7.jpg);
}
#slide410{
	background-image: url(../images/screen13.jpg);
}
#slide411{
	background-image: url(../images/screen8.jpg);
}
#slide412{
	background-image: url(../images/screen4.jpg);
}
#slide413{
	background-image: url(../images/screen7.jpg);
}

.modal{
	position:absolute;
	width:100%;
	max-width:600px;
	z-index:9999;
	background-color: rgba(0, 0, 0, .8);
	font-size: 1.1rem;
	line-height:1.5;
	-webkit-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 1);
	opacity:0;
}

.modal-content{
	padding:50px
}

.close-modal{
	display:flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .15);
	font-size: 21px;
	padding: 10px 10px 7px 10px;
	width:50px;
	float:right;
	transition:background-color .2s;
}

.close-modal:hover{
	background-color: rgba(255, 255, 255, .4);
}

a:link    {color:#fff; text-decoration:none; border-bottom:none}
a:active  {color:#fff; text-decoration:none; border-bottom:none}
a:visited {color:#fff; text-decoration:none; border-bottom:none}
a:hover   {color:#fff; text-decoration:none; border-bottom:none}

a.default:link    {color:#fff; text-decoration:none; border-bottom:1px solid #8a8d8f}
a.default:active  {color:#fff; text-decoration:none; border-bottom:1px solid #8a8d8f}
a.default:visited {color:#fff; text-decoration:none; border-bottom:1px solid #8a8d8f}
a.default:hover   {color:#fff; text-decoration:none; border-bottom:1px solid #8a8d8f}


.ui-box {
  text-decoration: none;
  border-bottom: none;
  position: relative;
  vertical-align: baseline;
  padding: 5px 0;
}

.bottom-inOutSpread:before, .bottom-inOutSpread:after, .bottom-inOutSpread > .ui-border-element:before, .bottom-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.bottom-inOutSpread:after {
  border-bottom: 1px solid #fff;
  left: 51%;
  right: 51%;
  bottom: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.bottom-inOutSpread:hover:after {
  left: 0%;
  right: 0%;
}

.bottom-inOutSpread:not(:hover):after {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

:-webkit-input-placeholder  {color:##fff;}
::-moz-placeholder          {color:##fff;}
:-moz-placeholder           {color:##fff;}
:-ms-input-placeholder      {color:##fff;}

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

input, textarea { outline:none; }
input:active, textarea:active { outline:none; }
:focus { outline:none; }

.message-form-container{
	width: 500px;
	margin: 20px auto 0 auto;
}

@media only screen and (max-width : 520px) {
	.message-form-container{width: 100%;}	
}

.label{
	margin: 0 0 0 10px;
}

.input{
	font-family: 'MullerLight';
	font-size:1rem;
	background: rgba(16, 15, 14, 0.5);
	color: #fff;
	border:#ccc9c2 2px solid;
	border-radius: 10px;
	padding:10px;
	width:100%;
}

.input:focus{
	background: rgba(16, 15, 14, 0.75);
	border:#fff 2px solid;
}

.input-error{
	position: absolute;
	font-size:14px;
	color:#fff;
	padding: 2px 0 0 15px;
	color:#fa821e;
}

.btn-animation-bg{
	font-family: 'MullerLight';
	border:none;
	border:#ccc9c2 2px solid;
	background: rgba(255, 255, 255, 0.15);
	font-size:1.4rem;
	color:#ccc9c2 ;
	padding:15px 30px 10px 30px;
	border-radius: 15px;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-out;
	-webkit-transform-origin: 0 0;
	cursor:pointer;
}

.btn-animation-bg:hover{
	background: #fa821e;
	color:#000;
	border:#fa821e 2px solid;
}

#success-send{
	margin: 20px 0 0 0;
	text-align: center;
	color:#fa821e;
}

#contact-col-1{
	width:50%;
	padding:0 20px;
}

#contact-col-2{
	width:50%;
	padding:0 20px;
}

/* ------------------------------------------------------------------ */

#calc-container{
	display:flex;
	flex-direction: row;
}

.calc-container__row{
	width:50%;
}

#calc-result{
	background: rgba(0, 0, 0, 0.85);
	padding:20px;
	width:45%;
}

.calc-container__row .abs{
	position:absolute;
	top: 200px;
	right:20px;
	z-index:3000;	
}

.calc-container__row .fix{
	position:fixed;
	top:0;
	right:20px;
	z-index:3000;	
}

.calc-container__row .has-scroll{
	overflow-y: scroll;
	max-height: calc(100vh - 40px)
}

@media only screen and (min-width : 1280px) {
	.calc-content{
		color:#fff;
		padding:30px;
		font-size: 1.2rem;
	}
}
@media only screen and (min-width : 1440px) {
	.calc-content{
		color:#fff;
		padding:30px;
		font-size: 1.3rem;
	}
}
@media only screen and (min-width : 1900px) {
	.calc-content{
		color:#fff;
		padding:30px;
		font-size: 1.4rem;
	}
}
@media only screen and (max-width : 800px) {
	.calc-content{
		color:#fff;
		padding:5px;
		font-size: 1rem;
	}
}

.row-container{
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin:0 0 50px 0;
}

.row-container .title{
	padding:0 25px 0 0;
	width:60%;	
	text-align:right;
}

.row-container .dimension{
	padding:0 0 0 15px;
	width:170px;	
	text-align:left;
}

.range-container{
	width: 202px;	
}

.range-container-values{
	display:flex;
	justify-content: space-between;
	margin:-10px 0 0 0;
}

.input-range{
	font-family: 'MullerLight';
	font-size:1.5rem;
	text-align:center;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	border:#6c6a67 2px solid;
	padding:15px;
	width: 200px;
	transition: 0.3s;
}

.input-range.disabled{
	background: rgba(255, 255, 255, .15);
}

.input-range:focus{
	background: rgba(0, 0, 0, 1);
	border:#ff5618 2px solid;
}

/* Firefox */

@-moz-document url-prefix() {
	input[type=range] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 200px;
		background:transparent;
		position:absolute;
		margin:-9px 0 0 0;
	}
}

/* Webkit (chrome, safari, opera 15+ …) */

_:-webkit-any-link,
:root input[type=range] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 200px;
	background:transparent;
	position:absolute;
	margin:-2px 0 0 0;
}

input[type=range]:focus {
	outline: none;
}

/* Для браузеров webkit(google chrome, chromium) используются псевдоселекторы -webkit-slider-runnable-track, -webkit-slider-thumb */

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 3px;
	cursor: pointer;
	background:linear-gradient(to right, #ffe99e, #ff3c00);
	border: none;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 17px;
	width: 17px;
	border-radius: 25px;
	background: #fa821e;
	cursor: pointer;
	transition: 0.3s;
	margin:-7px 0 0 0;
}
input[type=range]:hover::-webkit-slider-thumb {
	-webkit-box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.25);
	-moz-box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.25);
	box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.25);
}

/* mozilla firefox :    -moz-range-track, -moz-range-thumb */

input[type=range]::-moz-range-track {
	width: 100%;
	height: 3px;
	cursor: pointer;
	background:linear-gradient(to right, #ffe99e, #ff3c00);
	border: none;
}
input[type=range]::-moz-range-thumb {
	border: none;
	height: 17px;
	width: 17px;
	border-radius: 25px;
	background: #fa821e;
	cursor: pointer;
	transition: 0.3s;
}
input[type=range]:hover::-moz-range-thumb {
	-webkit-box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.25);
	-moz-box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.25);
	box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------------------------ */

#result-bg{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background-color:rgba(0,0,0,.95);
	z-index:9001;
	color:#000;
	height: 100vh;
	color: #fff;
}

.has-scroll-result{
	width:900px;
	margin:0 auto;
	overflow-y: scroll;
	height: 100vh
}

.error-data{
	background-color:#ac0000;
}

#detail-btn{
	text-align:center;
	margin:20px 0;
}

@media only screen and (max-width : 1100px) {
		
	#calc-container{
		display:flex;
		flex-direction: column;
	}

	.calc-container__row{
		width:100%;
	}
	
	.calc-container__row .abs{
		position:static;
	}

	.calc-container__row .fix{
		position:static;
	}
	
	#calc-result{
		padding:10px;
		width:100%;	
	}
	
	.calc-container__row .has-scroll{
		overflow-y: auto;
		max-height: unset;
	}
	
}

@media only screen and (max-width : 860px) {

	.logo{
		margin:0 auto 30px auto;
		width:250px;
		height:auto;
	}
	
	.content{
		font-size: 0.95rem;
		padding:15px;
	}
	
	.d-flex{
		flex-direction: column;
	}

	#contact-col-1{
		width: 100%;
		text-align:center;
	}

	#contact-col-2{
		display: none;
	}
	
	.project-info{
		padding:20px 0 0 0;
	}
	
	.energy-characteristic, .energy-characteristic--no-icon{
		width:330px;
		padding:10px 0 10px 50px;
		margin:10px auto;
		background-size: 30px;
	}	

	.info--icon{
		color:#000;
		background-color:#fa821e;
		padding:10px;
		margin:15px 0 15px 0;
		border-radius:5px;
		background-image: none;
	}
	
	#menu{
		display:none;
	}
	
	.info--border{
		margin:15px 0 15px 20px;
	}
	
	.stage{
		display: flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		width:70px;
		height:70px;
		border:1px solid #8a8d8f;
		border-radius:50%;
		font-size:18px;
		background-color: rgba(140,140,140,0.25);
	}

	.stage--active{
		display: flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		width:70px;
		height:70px;
		border:1px solid #fa821e;
		border-radius:50%;
		font-size:18px;
		background-color: #fa821e;
	}

	.stage--delimiter{
		width:20px;
		height:2px;
		background-color:#8a8d8f;
	}
	
	.row-container{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin:0 0 30px 0;
	}
	
	.row-container .title{
		padding:5px;
		width:100%;	
		text-align:center;
	}
	
	.row-container .dimension{
		padding:15px;
		width:100%;	
		text-align:center;
	}
	
	.f-size-large{
		font-size: 1.2rem;	
	}
	
	.d-flex-center{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

}

@media only screen and (max-width : 600px) {

	.project{
		width:100%;
		height:auto;
		margin:0 auto;
	}

	ul{
		padding:10px 0 0 20px;	
	}
	
	.contact-link{
		margin:0 auto;
	}
	
	.scroll-horizontal{
		display:block;
	}
		
}

.link-detail, .link-detail--right{
	padding:25px 15px 25px 15px;
	margin:20px;
	text-align:center;
	width:50%;	
	cursor:pointer;
	border-radius:10px;
	background-color: rgba(255, 255, 255, .15);
	transition: 0.25s ease-out;
}

.link-detail:hover{
	padding:25px 15px 25px 10px;
	box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1), inset 600px 0px 50px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1), inset 600px 0px 50px 0px rgba(0, 0, 0, 0.7);
	box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1), inset 600px 0px 50px 0px rgba(0, 0, 0, 0.7);
	color:#fa821e;
}

.link-detail--right:hover{
	padding:25px 15px 25px 20px;
	-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1), -600px 0px 50px 0px rgba(0, 0, 0, 0.7) inset;
	-moz-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1), -600px 0px 50px 0px rgba(0, 0, 0, 0.7) inset;
	box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1), -600px 0px 50px 0px rgba(0, 0, 0, 0.7) inset;
	color:#fa821e;
}

@media only screen and (max-width : 900px) {
	
	.link-detail, .link-detail--right{
		padding:10px;
		margin:10px auto;
		cursor:default;
		border-radius:10px;
		width:75%;
		text-align:center;
		background-color: rgba(255, 255, 255, 0.15);
	}

	.link-detail:hover{
		padding:10px;
		color:#fff;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	.link-detail--right:hover{
		padding:10px;
		color:#fff;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	.note{
		opacity:0;
	}
	
	.mobile-hide{
		display:none;		
	}
	
}

.triangle {
	position:absolute;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 13px solid #fff;
}

.triangle--left {
	margin-top:20px;
	-moz-transform: rotate(-90deg);     
	-ms-transform: rotate(-90deg);     
	-webkit-transform: rotate(-90deg);     
	-o-transform: rotate(-90deg);     
	transform: rotate(-90deg);
}

.triangle--right {
	margin-top:20px;
	-moz-transform: rotate(90deg);     
	-ms-transform: rotate(90deg);     
	-webkit-transform: rotate(90deg);     
	-o-transform: rotate(90deg);     
	transform: rotate(90deg);
}

.note{
	position: absolute;
	background-color: rgba(0, 0, 0, .9);
	line-height:1.5;
	color:#fff !important;
	text-align:left !important;
	z-index: 9999;
	border-radius:10px;
	border:3px solid #fff;
	padding: 20px;
	margin-top:-50px;
	font-size: 1rem;
	display:none;
}