@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("https://use.typekit.net/hho4icq.css");


body{
	overflow-x: hidden;
	font-size: 1em;
	font-family: 'Roboto', sans-serif;
}

#page-ar {
	max-width: 1220px;
	margin: 0px auto;
	position: relative;
	overflow: hidden;
}

.relative {
	position: relative;
}

.bold { font-weight: bold;}

.img-bg {
	width: 100%;
	height: auto;
}

.mokoko {
	font-family: mokoko, serif;
}

.mokoko strong {
	font-weight: 900;
}

header {
    width: 100%;
    color: #FFF;
    text-transform: uppercase;
    font-size: 1.5em;
}


header h1 {
	font-weight: 300;
    font-size: 45px;
    text-transform: none;
	text-align: center;
 }

 header span { color: #00a8cf; font-weight: bold;
    font-size: 50px; }


 .box__04-spiral{
	position: absolute;
    top: -520px;
    right: -315px;
}

 .bold { font-weight: bold; }

 .rotating {
	-webkit-animation: rotating 10s linear infinite;
	-moz-animation: rotating 10s linear infinite;
	-ms-animation: rotating 10s linear infinite;
	-o-animation: rotating 10s linear infinite;
	animation: rotating 10s linear infinite;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


#intro {
	background: url('../img/bg-economia.webp');
	background-size: cover;
}

#classificacao {
	background: url('../img/bg-classificacao.webp');
	background-size: cover;
}

#invisivel .pos-item { text-align: right; padding-top: 65px !important; }

#filtro {
	background: url('../img/bg-white.png');
	background-size: cover;
	padding: 115px 0px 115px 0px;
}

#ergonomia .pos-ergonomia { position: absolute; bottom: 0px;  }

#ergonomia {
	background: url('../img/bg-ergonomia.webp') no-repeat;
	background-size: cover;
	min-height: 755px;
}

#descricao {
	background: url('../img/bg-descricao.webp') no-repeat;
	background-size: cover;
	min-height: 735px;
}

#disponivel .margin { margin-right: 30px; }

#pecas {
	background: #05171c;
    background-repeat: no-repeat;
    padding: 35px 0px 10px 0px;
}


.selo-garantia { padding-bottom: 20px; }

#pecas h3{     font-size: 18px;
    color: #fff;
    font-weight: 300;
    line-height: 1.7rem;
    padding: 10px 20px 20px 20px; }

#pecas h2 { color: #fff;
    font-size: 40px;
    font-weight: 900;
	text-transform: uppercase; }

#profissional .strong {  font-weight: bold; }

#classificacao .bold  {
	color: #fff;
    font-size: 3.2rem;
    font-weight: 900;
	text-transform: uppercase;
}   

#power .strong {  font-weight: bold; }
#power h3 {  color: #575756;
    font-weight: 300;
    font-size: 24px; line-height: 1.3;
    text-align: left;  max-width: 510px; padding-top: 40px; }

#power .pos-titulo { position: absolute;
    bottom: 14%;
    left: 10%;
    text-align: left;
}

.pos-car {  position: absolute;
    max-width: 43%;
    left: 0px;
    top: 41%;     z-index: 2; }

.pos-funcao {     position: absolute;
	max-width: 43%;
    right: 0px;
    top: -2%; }

.pos-power { position: absolute; top: 56px; }

#power .bold {  font-weight: 900; font-size: 5.7rem; }
#power .text { font-size: 2rem; }


#classificacao h2  {
	color: #fff;
    font-size: 2.5rem;
    font-weight: 200;
}  


#gas {
	background: url('../img/bg-gas.webp');
	background-size: cover;
}

#gas .bold  {
	color: #fff;
    font-size: 3.2rem;
    font-weight: 900;
}   

#gas h2  {
	color: #fff;
    font-size: 1.6rem;
    font-weight: 200;
}


.pos-descricao { position: absolute; top: 70px; }
.pos-mobile { position: absolute; top: 70px; }

.content-intro {
	color: #FFF;
	font-size: 1.5em;
	background: url('../img/bg-colmeia-intro.png') no-repeat bottom center;
	background-size: cover;
	padding: 20px 20px 60px 20px;
}

.content-intro h2 {
	font-weight: 900;
	font-size: 1.2em;
	line-height: 1em;
	margin: 0px;
}

.content-intro h3 {
	font-weight: 300;
	font-size: 1em;
	line-height: 1em;
	margin: 0px;
}

.ar-intro {
	margin-top: -50px;
}

.info-modelo {
	background: url('../img/selo-modelo.png') no-repeat;
	background-size: 100% 100%;
	padding: 30px 20px 10px 20px;
	font-weight: 300;
	margin-bottom: 25px;
	color: #FFF;
	font-size: 1.2em;
	line-height: 1.2em;
	text-align: center;
}

.info-modelo .btu {
	font-weight: 900;
	display: block;
	font-size: 1.2em;
}


#intro .position { position: absolute; right: 0; bottom: 0; max-width: 430px; }

#inverter h3 { text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 1.5rem; }
#inverter h4 { font-size: 1.5rem; font-weight: 200; }
#inverter .icon { max-height: 80px;  }
#inverter{
	color: #808285;
    background-size: 100% auto;
    text-align: center;
    padding: 10px 0px 100px 0px;
    background: #fff;
	overflow: hidden;
}

#seguranca {
	color: #808285;
	background: url(../img/bg-seguranca.webp);
    background-size: cover;
    min-height: 755px;
}

#seguranca .pos-item {   position: absolute;
    right: 0;
    top: -33px; }

#disco {
	color: #808285;
	background: url(../img/bg-disco.webp);
	background-size: cover;
	min-height: 755px;
	overflow: hidden;
}

#disco .tit-bloco { padding: 30px 0px 90px 0px; }
#disco .pos-item {      position: absolute;
    right: -305px;
    bottom: -213px; }

#niveis {
	color: #808285;
	background: #fff;
	background-size: cover;
	min-height: 755px;
	overflow: hidden;
}


#niveis .tit-bloco { padding: 60px 0px 25px 0px; }
#niveis .pos-item {     position: absolute;
    left: -90px;
    top: -100px; }

#inverter .espiral { position: absolute;
    right: -19%;
    top: 282px;
    transform: translate(0%,-50%);
    text-align: left; }

#inverter .p-l { padding-left: 35px;padding-top: 70px; }


.title-inverter h4{
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: 900;
}

.item-inverter {
	line-height: 1em;
	margin-bottom: 25px;
	text-align: center;
	font-weight: 300;
}

.item-inverter strong {
	font-weight: 700;
}

.icone-inverter {
	margin-bottom: 5px;
}

.ar-inverter {
	margin: 25px 0px 40px 0px;
}

.hexagon-left {
	position: absolute;
    right: -35%;
    top: 220px;
    transform: translate(0%,-50%);
    text-align: right;
}

.box__04{
	background-size: 100% auto;
}

#profissional  h3 {  color: #575756;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.1;line-height: 1.3;
    text-align: right;     padding-top: 40px; }

#profissional .pos-titulo {  position: absolute;
	top: 41%;
    right: 10%;
    text-align: right;
     }

.pos-car {  position: absolute;
    max-width: 43%;
    left: 0px;
    top: 41%; }

.pos-profissional { position: absolute; top: 56px; }

#profissional .bold {  font-weight: 900; font-size: 5.7rem; }
#profissional .text { font-size: 2rem; }

.box04__carousel{
	z-index: 5;
}

#seguranca .center-content {  margin: 0 auto; }
#seguranca .text-content  { padding: 25px 5px 32px 5px;-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
#seguranca .bold { font-weight: bold; }
#seguranca h3 { color: #fff;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    line-height: 2rem; }

#disco .text-content  { padding: 25px 5px 32px 5px;-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
#disco .bold { font-weight: bold; }
#disco h3 {     color: #575756;
    font-size: 24px;
    font-weight: 300;
    text-align: left;
    line-height: 2rem;  max-width: 390px; }

#niveis .text-content  { padding: 25px 5px 32px 5px;-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
#niveis .bold { font-weight: bold; }
#niveis h3 {     color: #575756;
	font-size: 24px;
	font-weight: 300;
	text-align: right;
	line-height: 2rem;  }

#ergonomia h3 { color: #fff;
    font-size: 24px;
    font-weight: 300;
    text-align: left;
    line-height: 2rem;
    max-width: 100%;
    text-align: center;
    padding-top: 50px;
    padding-left: 18%;
    padding-right: 18%; }
	
#ergonomia .icon { padding-top: 70px !important; }	
	
#fluxo {
	color: #808285;
	line-height: 1.1em;
	font-size: 0.8em;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(205,205,205,1) 100%);
}

#fluxo .destaque{
	color:#279fb0;
	font-weight: 700;
}

.classificacao {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px
	left 0px;
}

.gas {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px
	left 0px;
}

#builtin {
	position: relative;
	z-index: 10;
	background: url('../img/bg-textura.jpg');
	color: #FFF;
	font-size: 0.7em;
	line-height: 1em;
}

#builtin .ar-wifi {
	transform: translate(0%,-20%);
	margin-bottom: 50px;
}

#smartlife{
	color: #808285;
	background: url('../img/bg-colmeia.jpg') no-repeat #FFF;
	background-size: 100% auto;
	text-align: center;
	padding: 50px 0px;
	font-weight: 300;
	line-height: 1.2em;
	font-size: 0.9em;
}

.celular1 {
	z-index: 2;
	margin: 20px 0px 0px 0px;
}

.celular2 {
	margin: 0px 0px 0px -40px;
}

#invisivel {
	background: url('../img/bg-header.webp');
	background-size: cover;
	overflow: hidden;
	max-height: 755px;
}

#invisivel .bold { font-weight: bold; }

#invisivel .back-rect { background: url('../img/rect_01.png') no-repeat; 
	background-position: right;
	height: 200px;
    padding-top: 35px !important; padding-top: 42px !important; }

.info-invisivel {
	font-weight: 300;
	color: #FFF;
	line-height: 1em;
	margin-top: -36px;
    padding-bottom: 20px;
}


#invisivel .pos-logo {  padding: 9% 9% 23% 25%; }

#invisivel h2 { font-size: 35px;
    text-transform: none;
    font-weight: 300; }


.funcao {
	color: #FFF;
	font-weight: 300;
	text-align: center;
	line-height: 1em;
	padding-bottom: 25px;
}

.funcao strong {
	text-transform: uppercase;
	font-weight: 900;
	margin-top: 8px;
	display: block;
}

.info-climatizacao {
	position: absolute;
	top:90px;
	line-height: 1em;
	color: #808285;
	font-weight: 300;
	font-size: 0.7em;
}

.info-climatizacao strong {
	font-weight: 900;
}

.hexagon {
	background: #FFF;
	position:relative;
	left:50px;
	box-sizing: border-box;
	padding: 10px 0px;
}
.hexagon::before, .hexagon::after {
	content:"";
	position: absolute;
	height: 0;
	width: 0; 
	top:0;
	/* half height */
	border-top: 47px solid transparent;
	border-bottom: 47px solid transparent; 
}
.hexagon::before {
	left: -40px;
    border-right: 40px solid #FFF;
}
.hexagon::after {
    right: -40px;
    border-left: 40px solid #FFF;
}


.index-2 { z-index: 2 !important; }
.index-1 { z-index: 1 !important; }

.info-climatizacao h4 {
	color: #279fb0;
	font-weight: 900;
	font-size: 1.2em;
	margin: 0px;
}

.info-climatizacao h5 {
	color: #808285;
	font-weight: 300;
	font-size: 1.2em;
}


.info-selo {
	position: absolute;
    top: 15%;
    left: 10%;
}

.info-serpentina {
    font-weight: 300;
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 20px;
    line-height: 1em;
    font-size: 0.6em;
}

.info-serpentina strong {
	font-weight: 900;
}

#features {
	padding: 50px 0px;
}

.feature {
	color: #808285;
	font-weight: 300;
	margin: 15px 0px;
	line-height: 1em;
}

#intro h2 { font-weight: 200;
    line-height: 1.1;
    font-size: 2.5rem;
    color: #fff;
    padding-top: 17px; }

#intro .clear { padding-left: 0px; }
.selo { padding-left: 60px; }
.clear-selo { padding: 18px 0px 18px 10px; }
.clear-classificacao { padding: 55px 25px 55px 0px; }
#classificacao .clear { padding-left: 40px; }

.clear-gas { padding: 55px 25px 55px 0px; }
#gas .clear { padding-left: 0px; }

.title-feature {
	text-align: center;
	color: #808285;
	font-weight: 900;
	font-size: 1.5em;
	line-height: 1em;
	margin: 25px 0px;
}

span.tradicional {
	color: #279fb0;
}

footer {
	background: #000;
	color: #ffffff;
    font-size: 0.6em;
    padding: 20px 0px;
    width: 100%;
}

footer .logo-philco {
	margin-bottom: 15px;
}


/*------------------------------------------------------------------
---------------------------- RESPONSIVO ----------------------------
--------------------------------------------------------------------*/

@media (min-width: 390px) {

	#builtin {
		font-size: 0.9em;
	}

	.info-climatizacao {
	    top: 130px;
	    font-size: 0.7em;
	}

	.hexagon {
		left: 70px;
		padding: 10px 5px;
	}

	.hexagon::before, .hexagon::after {
	    border-top: 47px solid transparent;
	    border-bottom: 47px solid transparent;
	}

	.info-serpentina {
	    left: 50px;
	}

}


@media (max-width: 349px)  {
		#power .bold {
			font-size: 1.8rem !important;
		}
		#power .text {
			font-size: 0.7rem !important;
		}

		#intro .position { right: -20px; }
		#profissional .bold {
			font-size: 1.8rem !important;
		}
		#profissional .text {
			font-size: 0.7rem !important;
		}
		#classificacao h2 {
			font-size: 1rem !important;
		}
		#classificacao .bold {
			font-size: 1rem !important;
		}

		#gas h2 {
			font-size: 0.8rem !important;
		}
		#gas .bold {
			font-size: 1rem !important;
		}
}


@media (max-width: 767px)  {
  .desk-display { display: none; }
  .pos-mobile { position: absolute;
    top: 60px;
    padding-left: 20px;
    padding-right: 20px; }
	
}

@media (max-width: 529px)  {
	.text-serpentina { -ms-flex: 0 0 80%;
		flex: 0 0 80%;
		max-width:80%;   }

		#pecas h2 {
			color: #fff;
			font-size: 22px;
			text-align: center;
		}	

		#pecas h3 {
			font-size: 14px;
			line-height: 1.2rem;
			padding: 10px 0px 19px 0px;
		}
}   

@media (max-width: 418px)  {
	#power .pos-titulo {      left: 9%;
		padding-left: 0px;
		-ms-flex: 0 0 56%;
		flex: 0 0 53%;
		max-width: 53%;
		bottom: 2%; }
}

@media (max-width: 419px)  {

	#descricao { min-height: 400px; }
	#ergonomia h3 { padding-left: 0%; padding-right: 0%; }
	#ergonomia { background-position: bottom; min-height: 505px;  }
	#ergonomia .p-0 { padding: 0 !important; }

	#seguranca h3 { font-size: 14px; line-height: 1.3rem; }
	#seguranca .pos-item { top: 20px; }
	#seguranca .center-content { padding-top: 25px !important; padding-left: 0px !important; padding-right: 0px !important; }
	#seguranca .pos-item { position: relative;     padding-left: 20px !important; }
	#seguranca .text-content {  padding: 0px 0px 0px 0px !important; }
	#seguranca { padding-bottom: 15px; }
	#seguranca .pb-img { margin-bottom: 15px; }
	#seguranca h3 {  font-size: 16px; line-height: 1.5rem; }

	#disco h3 { font-size: 14px; line-height: 1.3rem; }
	#ergonomia h3 { font-size: 14px; line-height: 1.3rem; }
	#disco .pos-item {    position: relative;
		right: 5px;
		bottom: -55px; }
	#disco .display { display: none; }
	#disco .center-content { padding-top: 25px !important; padding-left: 0px !important; padding-right: 0px !important; }
	#disco .pos-item { position: relative;     right: 5px;
		bottom: -23px; }
	#disco .text-content { padding: 0px 0px 0px 15px !important; }
	#disco { min-height: 645px; }
	#disco .pb-img { margin-bottom: 15px;  padding-left: 16px; }
	#disco h3 {  font-size: 16px; line-height: 1.5rem; }
	#ergonomia h3 {  font-size: 16px; line-height: 1.5rem; }
	#disco .tit-bloco {
		padding: 20px 0px 0px 10px;
	}

	#niveis h3 { font-size: 14px; line-height: 1.3rem; }
	#niveis .pos-item {  
		left: -134px;
		top: -46px;
	} 
	#niveis .display { display: none; }
	#niveis .center-content { padding-top: 25px !important; padding-left: 0px !important; padding-right: 12px !important; }
	#niveis .text-content { padding: 0px 0px 0px 15px !important; }
	#niveis { min-height: 550px; }
	#niveis .pb-img { margin-bottom: 15px;  padding-left: 16px; }
	#niveis h3 {      font-size: 14px;
		line-height: 1.4rem; }
	#niveis .tit-bloco {
		padding: 50px 0px 0px 10px;
	}
	.margin-min {
		margin-top: -90px;
    margin-right: -39%;
    max-width: 68%;
	}
	
	#power h3 {
		font-size: 12px;
		line-height: 1.1;
		padding-top: 8px;
	}
	.pos-power {
		top: 25px;
		max-width: 55%;
	}

	.pos-power {
		top: 12px !important;
	}

	.box__04 {     min-height: 210px; }
	#profissional h3 {
		font-size: 12px;
		line-height: 1.1;
		padding-top: 8px;
	}
	.pos-profissional {
		top: 25px;
		max-width: 55%;
	}

	.pos-profissional {
		top: 12px !important;
	}
	#profissional .pos-titulo { right: 3%;
		padding-left: 0px;
		top: 35%;
		-ms-flex: 0 0 60%;
		flex: 0 0 58%;
		max-width: 58%; }
		
	.pos-car {
		position: absolute;
		max-width: 40%;
		left: -8px;
		top: 45%;
	}

	.pos-funcao {
		position: absolute;
		max-width: 40%;
		right: 0px;
		top: 7%;
	}

	#invisivel .pos-item { padding-top: 75px !important; }
	#invisivel .pos-logo {
		padding: 9% 9% 14% 25%;
	}
	header h1 {     font-size: 16px; }
	header span {
		font-size: 16px;
	}
	#invisivel .back-rect { padding-top: 52px !important; background-size: contain; height: 141px; }
	#invisivel h2 { font-size: 12px; }
	.info-invisivel {
		margin-top: 25px;
		padding-bottom: 5px;
	}
	#disponivel { padding: 60px 0px 20px 0px;  }

	.center-row { text-align: center !important; padding: 0px 20px 60px 20px; }
	.center-footer { text-align: center !important; }
	#filtro {
		padding: 85px 0px 35px 0px;
	}
	.center-row { text-align: center !important; padding: 0px 20px 60px 20px; }

	.ar-inverter {
		margin: 0px 0px 0px 0px;
		padding-left: 20px !important;
	}

	#inverter h3 {
		margin-bottom: 0px;
		font-size: 0.8rem;
	}

	#inverter .icon {
		max-height: 27px;
	}

	#inverter .p-l {
		padding-top: 50px;
		padding-left: 0px;
	}

	#inverter h4 {
		font-size: 1rem;
	}

	.hexagon-left {
		left: 16%;
		top: 120px;
	}

	.info-invisivel {
		width: 100%;
		z-index: 9;
		bottom: 20px;
		font-size: 0.9em;
	}

	#gas h2 {
		font-size: 1rem;
	}

	#classificacao .bold { font-size: 1.4rem; }	

	.clear-classificacao {
		padding: 65px 10px 20px 10px;
	}

	#classificacao h2 {
		font-size: 1.2rem;
		padding-bottom: 60px;
		text-align: center;
	}

	#classificacao .clear {
		padding-left: 0px;
		padding-right: 0px;
	}



	#gas .bold { font-size: 1.4rem; }	

	.clear-gas {
		padding: 65px 10px 20px 10px;
	}

	#gas h2 {
		font-size: 1.1rem;
		padding-bottom: 60px;
		text-align: center;
	}

	#gas .clear {
		padding-left: 0px;
		padding-right: 0px;
	}

	.pos-profissional {
		top: 35px;
	}
	#profissional .bold {
		font-size: 2.2rem;
	}

	#profissional .text {
		font-size: 0.8rem;
	}
	#intro h2 {
		font-size: 0.9rem !important;
	}

	.pos-power {
		top: 35px;
	}
	#power .bold {
		font-size: 2.2rem;
	}

	#power .text {
		font-size: 0.8rem;
	}

	.clear-header { padding-left: 0; padding-right: 3px; }
	#intro .position { max-width: 40%; }
	.h1-container { font-size: 0.75rem; }
	.logo-philco {     max-width: 95px;
		padding-top: 7px; }
	.selo {
		padding-left: 0px;
	}
	.clear-selo {
		padding: 20px 0px 5px 0px;
	}
}


@media (min-width: 768px) {
	.desk-mobile {display: none;}

	.content-intro {
		font-size: 2.2em;
		padding: 30px 20px 80px 100px;
	}

	.ar-intro {
		margin: 0px;
		position: absolute;
		right: -20px;
		top: 160px;
	}

	.info-modelo {
		margin-right: 25px;
	}

	.title-inverter {
		margin-bottom: 50px;
	}

	.title-inverter h4{
		font-size: 2em;
		text-align: left;
	}

	.item-inverter {
		margin: 30px 0px 0px 0px;
	}

	#fluxo {
		font-size: 1.2em;
		position: relative;
		top: -110px;		
	}

	#builtin {
		margin-top: -110px;
		font-size: 1.5em;
		line-height: 1.2em;
	}

	#smartlife{
		text-align: left;
		padding-bottom: 80px;
	}

	.celulares {
		position: absolute;
		right: 0px;
		top: -80px;
		z-index: 15;
	}

	.info-invisivel {
		font-size: 1.2em;
	}

	.funcoes {
		position: absolute;
		bottom: -140px;
		z-index: 10;
	}

	.info-climatizacao {
	    top: 260px;
	    font-size: 1em;
	}

	.hexagon {
	    left: 130px;
	    padding: 10px 5px;
	}

	.hexagon::before, .hexagon::after {
	    border-top: 50px solid transparent;
	    border-bottom: 53px solid transparent;
	}

	.info-serpentina {
	    left: 100px;
	    font-size: 1.2em;
	    bottom: 30px;
	}

}

@media (min-width: 992px) {

	

	footer {
		padding: 15px 0px;
	}

	footer .logo-philco {
		margin-bottom: 0px;
		padding-top: 10px !important;
	}

	.content-intro {
		font-size: 3em;
		padding: 30px 0px 150px 80px;
	}

	.info-modelo {
		padding: 40px 20px 10px 20px;
		font-size: 2em;
	}

	.item-inverter {
		margin: 35px 0px 0px 0px;
		font-size: 1.2em;
	}

	.icone-inverter {
		margin-bottom: 15px;
	}

	.title-inverter h4{
		font-size: 3em;
		text-align: left;
	}

	#fluxo p {
		margin: 30px 0px; 
	}

	#builtin {
		font-weight: 300;
	}

	#smartlife{
		font-size: 1.5em;
	}

	.celulares {
		top: -100px;
	}

	.celular2 {
		margin: 0px 0px 0px -90px;
	}

	.info-invisivel {
		font-size: 1.5em;
	}

	.info-climatizacao {
	    top: 350px;
	    font-size: 1.2em;
	}

	.info-climatizacao h4, .info-climatizacao h5 {
		font-size: 1.5em;
	}

	.hexagon {
	    left: 210px;
	    padding: 20px;
	}

	.hexagon::before, .hexagon::after {
	    border-top: 77px solid transparent;
	    border-bottom: 80px solid transparent;
	}

	.info-serpentina {
		left: 13%;
		font-size: 1.5em;
		bottom: 21%;
	}

}

@media (min-width: 1100px) {

	.content-intro {
		font-size: 3.5em;
		padding: 30px 0px 150px 80px;
	}

	.item-inverter {
	    font-size: 1.5em;
	}

	.info-modelo {
		font-size: 2.5em;
		margin-top: 25px;
	}

	#fluxo p {
		font-size: 1.2em;
		line-height: 1.2em
	}

	#builtin {
		font-size: 1.8em;
	}

	.celulares {
		top: -150px;
	}

	.info-invisivel {
		font-size: 1.8em;
		text-align: center;
		z-index: 2;
	}

	.funcoes {
		bottom: -200px;
	}

	.funcao {
		font-size: 1.2em;
	}

	.info-climatizacao {
	    top: 380px;
	    font-size: 1.5em;
	}

	.hexagon::before {
	    left: -50px;
	    border-right: 50px solid #FFF;
	}

	.hexagon::after {
	    right: -50px;
	    border-left: 50px solid #FFF;
	}

	.hexagon::before, .hexagon::after {
	    border-top: 90px solid transparent;
	    border-bottom: 90px solid transparent;
	}

	.info-serpentina {
		font-size: 1.5em;
		color: #fff;
		line-height: 1.8rem;
	}

}


@media (min-width: 768px) and (max-width: 991px)  {
	header h1 {     font-size: 38px; }
	header span {
		font-size: 38px;
	}
	#invisivel .back-rect { padding-top: 52px !important; }
	#invisivel h2 { font-size: 25px; }
	.info-invisivel {     margin-top: -15px;
		padding-bottom: 20px; }
}


@media (min-width: 950px) and (max-width: 1099px)  {

	#disco .max-imagem {  }
	#disco {  }
	#disco .pos-item { right: -230px;
		bottom: -12px; }
	#disco .pl-0 { padding-left: 0px !important; }
	#disco .center-content {     padding-left: 0px!important; }
	#disco h3 { font-size: 21px;
		line-height: 1.8rem; }
		
	#niveis .pos-item { right: -230px;
		bottom: -12px; }
	#niveis .pl-0 { padding-left: 0px !important; }
	#niveis .center-content {     padding-left: 0px!important; }
	#niveis h3 { font-size: 21px;
	line-height: 1.8rem; }

	#ergonomia h3 { font-size: 21px;
		line-height: 1.8rem; }

	#seguranca .max-imagem { max-width: 92%; }
	#seguranca { min-height: 682px; }
	#seguranca .pos-item { top: -16px; }
	#seguranca .pl-0 { padding-left: 0px !important; }
	#seguranca .center-content {     padding-left: 0px!important; }
	#seguranca h3 { font-size: 21px;
		line-height: 1.8rem; }	
}

@media (min-width: 768px) and (max-width: 950px)  {
	#disco .max-imagem {  }
	#ergonomia {  min-height: 585px; }
	#disco { min-height: 620px; }
	#disco .pos-item {position: absolute;
		right: -190px;
		bottom: -22px; }
	#disco .pl-0 { padding-left: 0px !important; }
	#disco .center-content {     padding-left: 0px!important; }
	#disco h3 { font-size: 21px;
		line-height: 1.8rem; }

	#ergonomia h3 { font-size: 21px;
		line-height: 1.8rem; }

    #seguranca .max-imagem { max-width: 92%; }
	#seguranca { min-height: 620px; }
	#seguranca .pos-item { top: 15px; }
	#seguranca .pl-0 { padding-left: 0px !important; }
	#seguranca .center-content {     padding-left: 0px!important; }
	#seguranca h3 { font-size: 21px;
		line-height: 1.8rem; }	

	#niveis { min-height: 620px; }
	#niveis .pos-item {position: absolute;
		right: -190px;
		bottom: -22px; }
	#niveis .pl-0 { padding-left: 0px !important; }
	#niveis .center-content {     padding-left: 0px!important; }
	#niveis h3 { font-size: 21px;
	line-height: 1.8rem; }
}


@media (min-width: 768px) and (max-width: 1099px)  {

	#profissional h3 {
		font-size: 21px;
		padding-left: 15%;
	}
	.pos-profissional {  max-width: 350px; }
	.info-invisivel {
		width: 100%; z-index: 9; 
	}
	#inverter h3 {
		margin-bottom: 0px;
		font-size: 1.1rem;
	}
	#inverter h4 {
		font-size: 1.2rem;
		font-weight: 200;
	}
	#inverter .icon {
		max-height: 50px;
	}
	#power .pos-titulo { bottom: 5%; }

	#power h3 {
		font-size: 21px;
		padding-left: 0%;
	}
	.pos-power {  max-width: 350px; }
}



@media (min-width: 420px) and (max-width: 767px)  {
	#descricao { min-height: 590px; }
	header h1 {     font-size: 23px; }
	header span {
		font-size: 23px;
	}
	#invisivel .back-rect { padding-top: 52px !important; background-size: contain;    height: 157px; }
	#invisivel h2 { font-size: 18px; }
	.info-invisivel { margin-top: -5px;padding-bottom: 15px; }
	#disponivel { padding: 60px 0px 20px 0px;  }

	.center-row { text-align: center !important; padding: 0px 20px 60px 20px; }
	#inverter h4 {
		font-size: 1rem;
	}
	#inverter .p-l {
		padding-left: 0px;
		padding-top: 60px;
	}
	.item-inverter {
		margin-bottom: 15px;
	}
	.ar-inverter {
		margin: 0px 0px 0px 0px;
		padding-left: 135px !important;
	}
	#inverter h3 {
		margin-bottom: 1px;
    font-size: 0.9rem;
	}
	#inverter .icon {
		max-height: 35px;
	}
	#inverter h4 {
		font-size: 1rem;
	}
	
	.hexagon-left {
		left: 16%;
		top: 120px;
	}
	.info-invisivel {
		width: 100%;
    z-index: 9;
    bottom: 21px;
    font-size: 1.2em;
    line-height: 1.1;
	}
	.clear-classificacao { padding: 55px 0px 55px 0px; text-align: center !important; }
	.clear-gas { padding: 55px 0px 55px 0px; text-align: center !important; }
	.selo { max-width: 175px; }
    #intro .position { max-width: 46%; }
	.h1-container { font-size: 0.9rem; }
	.logo-philco { max-width: 150px; }
	#profissional h3 {
		font-size: 1.1rem;
		line-height: 1;
	}

	#power h3 {
		font-size: 1.1rem;
		line-height: 1;
	}

	.clear-classificacao {
		padding: 55px 0px 30px 0px;
	}

	#classificacao .bold { font-size: 2rem; }

	#classificacao .clear {
		padding-left: 0px;
		padding-right: 0px;
	}

	#classificacao h2 {
		font-size: 1.8rem;
		padding-bottom: 35px;
		text-align: center;
	}


	.clear-gas {
		padding: 55px 0px 30px 0px;
	}

	#gas .bold { font-size: 2rem; }

	#gas .clear {
		padding-left: 0px;
		padding-right: 0px;
	}

	#gas h2 {
		font-size: 1.3rem;
		padding-bottom: 55px;
		text-align: center;
	}

	#power .bold {
		font-size: 2.5rem;
	}
	.pos-power {
		top: 35px;
	}
	#power .text {
		font-size: 0.88rem;
	}



	#profissional .bold {
		font-size: 2.5rem;
	}
	.pos-profissional {
		top: 35px;
	}
	#profissional .text {
		font-size: 0.88rem;
	}
	.box__04-spiral {
		position: absolute;
		top: -268px;
		right: -181px;
		max-width: 450px;
	}
}

@media (min-width: 576px) and (max-width: 767px)  {
	#disco .center-content {
		padding-top: 20px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	#disco .text-content {
		padding: 0px 0px 1px 33px !important;
	}

	#niveis .center-content {
		padding-top: 20px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	#niveis .text-content {
		padding: 0px 0px 1px 33px !important;
	}
}

@media (min-width: 768px) and (max-width: 990px)  {

	.pos-descricao { position: absolute;
		top: 70px;
		padding-left: 25px;
		padding-right: 25px; }

	#profissional .pos-titulo { right: 6%; }
	#power .pos-titulo { left: 8%; }
	.pos-car {
		position: absolute;
		max-width: 41%;
		left: 0px;
		top: 187px;
	}

	.pos-funcao {
		position: absolute;
		max-width: 41%;
		right: 0px;
		top: 6%;
	}

	.pos-profissional {
		top: 42px;
	}

	.pos-power {
		top: 42px;
	}

	.center-footer { text-align: center !important; }
	#classificacao h2 {
		font-size: 1.5rem;
	}
	#classificacao .bold {
		font-size: 2rem;
	}

	#gas h2 {
		font-size: 1.2rem;
	}
	#gas .bold {
		font-size: 2rem;
	}
	#profissional .bold {
		font-size: 3.4rem;
	}
	#profissional .text {
		font-size: 1.2rem;
	}
    #intro h2 {
		line-height: 1;
		font-size: 1.5rem;
		padding-top: 17px;
	}
	#intro .position { max-width: 35%; }

	#power .bold {
		font-size: 3.4rem;
	}
	#power .text {
		font-size: 1.2rem;
	}
}

@media (min-width: 991px) and (max-width: 1100px)  {
	.info-serpentina {
		left: 16%;
		font-size: 1.3em;
		bottom: 13%;
		line-height: 1.1;
	}
	#intro h2 {
		line-height: 1.1;
		font-size: 1.8rem;
		padding-top: 25px;
	}
	#intro .position { max-width: 35%; }
	#classificacao h2 { font-size: 2rem; }
	#classificacao .bold { font-size: 2.6rem; }
	#gas h2 { font-size: 1.4rem; }
	#gas .bold { font-size: 2.6rem; }
}


@media (min-width: 768px) and (max-width: 1200px)  {
    .clear-selo { margin-right: 10px; }
}


@media (min-width: 489px) and (max-width: 590px)  {
    .max-imagem {
		max-width: 100% !important;
	}
}


@media (min-width: 489px) and (max-width: 767px)  {
    .margin-min {  margin-top: -170px;
		margin-right: -37%;
		max-width: 60%; }

	#seguranca .pos-item { top: 20px; }
	#seguranca .center-content { padding-top: 30px !important; }
	#seguranca .pos-item { position: relative;     padding-left: 20px !important; }
	#seguranca .text-content {  padding: 0px 0px 0px 0px !important; }
	#seguranca { padding-bottom: 15px; }
	#seguranca h3 { 
		font-size: 16px;
		line-height: 1.5rem; }
	.max-imagem  { max-width: 550px; }
	#seguranca .pb-img { padding-bottom: 20px; }

	#disco h3 { font-size: 14px; line-height: 1.3rem; }
	#ergonomia h3 { font-size: 14px; line-height: 1.3rem; }

	#disco .pos-item {    position: relative;
		right: 5px;
		bottom: -55px; }
	#disco .display { display: none; }
	#disco .center-content { padding-top: 25px !important; padding-left: 0px !important; padding-right: 12px !important; }
	#disco .pos-item { position: relative;     right: 5px;
		bottom: -23px; }
	#disco .text-content { padding: 0px 0px 0px 15px !important; }
	#disco { min-height: 645px; }
	#disco .pb-img { margin-bottom: 15px;  padding-left: 16px; }
	#disco h3 {  font-size: 16px; line-height: 1.5rem; }
	#disco .tit-bloco {
		padding: 20px 0px 0px 10px;
	}

	#niveis h3 { font-size: 14px; line-height: 1.3rem; }
	#niveis .pos-item {  
		left: -145px;
        top: -70px; }
	#niveis .display { display: none; }
	#niveis .center-content { padding-top: 25px !important; padding-left: 0px !important; padding-right: 12px !important; }
	#niveis .text-content { padding: 0px 0px 0px 15px !important; }
	#niveis { min-height: 645px; }
	#niveis .pb-img { margin-bottom: 15px;  padding-left: 16px; }
	#niveis h3 {  font-size: 16px; line-height: 1.5rem; }
	#niveis .tit-bloco {
		padding: 50px 0px 0px 10px;
	}

	#ergonomia h3 {  font-size: 16px; line-height: 1.5rem; }

	#profissional h3 {
		font-size: 15px; padding-top: 10px;
		line-height: 1.3;
	}
	.pos-profissional {
		top: 25px;
		max-width: 55%;
	}
	#profissional .pos-titulo { right: 4%; }
	.pos-car {
			position: absolute;
			max-width: 41%;
			left: 0px;
			top: 40%;
	}

	.pos-funcao {
		position: absolute;
		max-width: 41%;
		right: 0px;
		top: 7%;
    }

	#power h3 {
		font-size: 15px; padding-top: 10px;
		line-height: 1.3;
	}
	.pos-power {
		top: 25px;
		max-width: 55%;
	}
	#power .pos-titulo { left: 8%;bottom: 2%; }
}	


@media (min-width: 419px) and (max-width: 488px)  {
    

	#seguranca .pos-item { top: 20px; }
	#seguranca .center-content { padding-top: 30px !important; }
	#seguranca .pos-item { position: relative;     padding-left: 20px !important; }
	#seguranca .text-content {  padding: 0px 0px 0px 0px !important; }
	#seguranca { padding-bottom: 15px; }
	#seguranca h3 { 
		font-size: 16px;
		line-height: 1.5rem; }
	#seguranca .pb-img {     margin-bottom: 10px; }

	#disco h3 { font-size: 14px; line-height: 1.3rem; }
	#ergonomia h3 { font-size: 14px; line-height: 1.3rem; }
	#disco .pos-item {    position: relative;
		right: 5px;
		bottom: -55px; }
	#disco .display { display: none; }
	#disco .center-content { padding-top: 25px !important; padding-left: 0px !important; padding-right: 0px !important; }
	#disco .pos-item { position: relative;     right: 5px;
		bottom: -23px; }
	#disco .text-content { padding: 0px 0px 0px 15px !important; }
	#disco { min-height: 645px; }
	#disco .pb-img { margin-bottom: 15px;  padding-left: 16px; }
	#disco h3 {  font-size: 16px; line-height: 1.5rem; }
	#ergonomia h3 {  font-size: 16px; line-height: 1.5rem; }
	#disco .tit-bloco {
		padding: 20px 0px 0px 10px;
	}

	#niveis h3 { font-size: 14px; line-height: 1.3rem; }
	#niveis .pos-item {  
		left: -145px;
        top: -70px; }
	#niveis .display { display: none; }
	#niveis .center-content { padding-top: 25px !important; padding-left: 0px !important; padding-right: 12px !important; }
	#niveis .text-content { padding: 0px 0px 0px 15px !important; }
	#niveis { min-height: 645px; }
	#niveis .pb-img { margin-bottom: 15px;  padding-left: 16px; }
	#niveis h3 {  font-size: 16px; line-height: 1.5rem; }
	#niveis .tit-bloco {
		padding: 50px 0px 0px 10px;
	}
	.margin-min {
		margin-top: -170px;
		margin-right: -37%;
		max-width: 60%;
	}
	
	#profissional h3 {
		font-size: 14px;
		padding-top: 8px;
		line-height: 1.1;
	}
	.pos-profissional {
		top: 25px;
		max-width: 55%;
	}
	#profissional .pos-titulo { right: 2%; padding-left: 0px; }
	.pos-car {
			position: absolute;
			max-width: 41%;
			left: 0px;
			top: 40%;
	}

	.pos-funcao {
		position: absolute;
		max-width: 41%;
		right: 0px;
		top: 5%;
    }

	#power h3 {
		font-size: 14px;
		padding-top: 8px;
		line-height: 1.1;
	}
	.pos-power {
		top: 25px;
		max-width: 55%;
	}
	#power .pos-titulo {     left: 10%;
		padding-left: 0px;
		bottom: 2%; }
}


@media (min-width: 420px) and (max-width: 767px)  {
	#ergonomia h3 { padding-top: 45px;
		padding-left: 13%;
		padding-right: 13%; }
	#ergonomia {     min-height: 565px; }
	.info-serpentina {
		bottom: 35px;
		left: 20px;
		line-height: 1em;
		font-size: 1em;
	}

	.center-footer { text-align: center !important; }
    .clear-selo { margin-right: 10px; }

	#intro h2 {
		line-height: 1.1;
		font-size: 1.1rem;
		padding-top: 10px;
	}

	.selo {
		padding-left: 0px;
	}
}


@media (min-width: 1200px) {

	#smartlife{
		padding-bottom: 100px;
	}

	.info-climatizacao {
	    top: 410px;
	    font-size: 1.5em;
	}

}