@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;
}

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

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

.mokoko strong {
	font-weight: 900;
}

header {
	background: #000000;
	padding: 33px 0px;
	width: 100%;
	color: #FFF;
	text-transform: uppercase;
	font-size: 1.5em;
	position: relative;
    z-index: 99;
}

#intro {
	background: url(../img/bg-parede.webp) top center;
    background-size: cover;
    margin-top: -75px;
    z-index: 9;
    position: relative;
}


.content-intro {
	color: #FFF;
	font-size: 1.5em;
	background-size: cover;
	padding: 375px 20px 100px 20px;
}

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

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

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

.info-modelo {
	background: url('../img/selo-modelo.webp') no-repeat;
	background-size: 100% 100%;
	padding: 30px 20px 10px 20px;
	font-weight: 300;
	margin-bottom: 37%;
	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;
}

#inverter{
	color: #808285;
	background: url('../img/bg-colmeia.jpg') no-repeat #FFF;
	background-size: 100% auto;
	text-align: center;
	padding: 50px 0px
}

.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 -50px 0px;
}

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


.hexagon-intro {
	position: absolute;
    left: 0px;
    bottom: -256px;
    transform: translate(0%,-50%);
    text-align: left;
}


#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;
}

#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-hexagons.jpg');
	background-size: cover;
}

.info-invisivel {
	font-weight: 300;
	color: #FFF;
	position: absolute;
	top: 80px;
	left: 20px;
	line-height: 1em;
	font-size: 0.6em;
}

.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;
}

.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-serpentina {
    font-weight: 300;
    color: #808285;
    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;
}

.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: #000000;
	color: #a5a5a5;
	font-size: 0.5em;
	padding: 20px 0px;
	width: 100%;
}

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


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


@media (min-width: 980px) and (max-width: 1100px)  {
	.content-intro {
		padding: 280px 50px 70px 50px !important;
	}
	.info-modelo { margin-bottom: 45%; padding: 70px 30px 10px 30px; }
	.content-intro h2 { margin-top: 35px; }
	.info-invisivel {
		top: 225px !important;
	}
}


@media (min-width: 768px) and (max-width: 979px)  {
	.content-intro {
		font-size: 2.2em;
		padding: 250px 20px 86px 20px !important;
	}
	.info-invisivel {
		top: 215px !important;
	}
	#intro { margin-top: -50px; }
	.info-modelo { margin-bottom: 45%; padding: 50px 30px 10px 30px; }
	.content-intro h2 { margin-top: 35px; }

}



@media (min-width: 580px) and (max-width: 767px)  {
	.info-invisivel {
		top: 170px !important;
	}
	#inverter .position {     margin-top: -70px !important; }
	.content-intro {
		font-size: 2.2em;
		padding: 190px 20px 86px 20px !important;
	}
	#intro { margin-top: -50px; }
	.info-modelo {
		margin-bottom: 33%;
		padding: 50px 30px 10px 30px;
	}
	.content-intro h2 { margin-top: 35px; }


}


@media (min-width: 410px) and (max-width: 579px)  {
	.info-invisivel {
		top: 170px !important;
	}

	#inverter .position {     margin-top: -30px !important; }
	.hexagon-intro {
		bottom: -42%;
	}
	.content-intro {
		font-size: 2.2em;
		padding: 170px 20px 86px 20px !important;
	}
	#intro { margin-top: -50px; }
	.info-modelo {
		margin-bottom: 24%;
    padding: 35px 30px 10px 30px;
	}
	.content-intro h3 {
		font-size: 26px;}

	.content-intro h2 {
		margin-top: -5px;
		font-size: 30px;
	}
}


@media (min-width: 310px) and (max-width: 409px)  {

	#inverter .position {     margin-top: 0px !important; }

	.info-modelo .btu { font-size: 14px; }
	.content-intro {
		font-size: 2.2em;
		padding: 170px 20px 86px 20px !important;
	}
	#intro { margin-top: -50px; }
    .hexagon-intro {     bottom: -32%; }
	.info-modelo {
		margin-bottom: 41%;
		padding: 32px 20px 10px 20px; font-size: 14px;
	}
	
	.content-intro h3 {
		font-size: 26px;}

	.content-intro h2 {
		margin-top: -20px;
      font-size: 24px;
	}
}



@media (max-width: 309px) {

	.item-inverter { font-size: 14px; }

	.info-modelo .btu { font-size: 13px; }
	.content-intro {
		font-size: 2.2em;
		padding: 170px 20px 86px 20px !important;
	}
	#intro { margin-top: -50px; }
    .hexagon-intro {     bottom: -30%; }
	.info-modelo {
		margin-bottom: 42%;
		padding: 22px 20px 10px 20px;
		font-size: 13px;
	}
	.content-intro h3 {
		font-size: 20px;}

	.content-intro h2 {
		margin-top: -20px;
      font-size: 21px;
	}
}


@media (min-width: 390px) {

	#builtin {
		font-size: 0.9em;
	}

	.info-invisivel {
		top: 100px;
	}

	.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 (min-width: 768px) {

	.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;		
	}

	#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;
	}

	#invisivel {
		padding-bottom: 50px;
	}

	.info-invisivel {
		top: 180px;
		font-size: 1.2em;
		left: 50px;
	}

	.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) {

	header {
		padding-left: 33px;
	}

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

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

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

	.item-inverter {
		margin: 50px 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 {
		top: 230px;
		font-size: 1.5em;
		left: 80px;
	}

	.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: 160px;
	    font-size: 1.5em;
	    bottom: 40px;
	}

}

@media (min-width: 1100px) {

	.content-intro {
		font-size: 3.5em;
		padding: 375px 20px 100px 20px;
	}

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

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

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

	#builtin {
		font-size: 1.8em;
	}

	.celulares {
		top: -150px;
	}

	.info-invisivel {
		top: 270px;
		font-size: 1.8em;
		left: 70px;
	}

	.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.8em;
	}

}

@media (min-width: 1200px) {

	#smartlife{
		padding-bottom: 100px;
	}

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

}