@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"); /* MOKOKO */ 

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

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

.relative {
	position: relative;
}

.mokoko {
	font-family: mokoko, serif;
	text-transform: uppercase;
}

strong	{
	font-weight: 900;
}

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

header {
	background: #353532;
	padding: 20px 0px;
}

.info-intro {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.slogan {
	background: url('../img/text-mobile.webp') no-repeat bottom center;
	background-size: cover;
	color: #FFF;
	text-align: center;
	font-weight: 900;
	font-size: 2em;
	line-height: 1em;
	padding: 30px 15px;
}

.slogan p {
	margin: 0px;
}

.slogan-philco {
	font-weight: 300;
	font-size: 0.9em;
}

.nome-produto {
	color: #038494;
	text-align: center;
	position: absolute;
	top: 16px;
	left: 195px;
	z-index: 50;
}

.nome-produto h2 {
	font-weight: 900;
	font-size: 1em;
	margin: 0px;
}

.nome-produto h3 {
	font-weight: 300;
	font-size: 1em;
	margin: 0px;
}

#potencia {
	background: url('../img/bg-hexagons.webp') no-repeat;
	background-size: cover;
	padding: 0px 0px 0px 0px;
}

#intro h1 {     font-size: 23px;
    color: #038494;
    font-weight: 400; }

.prato {
	position: absolute;
	bottom: 0px;
}

.selo-potencia {
	margin-bottom: 45px;
}

.info-potencia { line-height: 1.6; }

.info-potencia {
	color: #FFF;
	font-weight: 300;
	padding-bottom: 50px;
	font-size: 1.2em;
}

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

.design-title {
	position: absolute;
	top: 10px;
}

.info-design {
	color: #FFF;
	font-weight: 300;
	position: absolute;
	bottom: 10px;
    right: -20px;
    font-size: 0.7em;
    line-height: 1em;
    padding: 0px 20px 0px 10px;
}

#espelhada {
	background: #03899a;
	padding-top: 30px;
	padding-bottom: 80px;
}

.menu {
	color: #FFF;
	font-weight: 300;
	font-size: 1em;
	line-height: 1em;
}

.menu h5 {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.3em;
	margin: 0px;
}

#receitas {
	background: #FFF;	
}

#receitas h4 {
	color: #9d9d9d;
	font-weight: 900;
	font-size: 1.1em;
	margin:  15px 0px 0px 0px;
}

#receitas h5 {
	color: #a9d3af;
	text-transform: uppercase;
	font-weight: 100;
	font-size: 0.8em;
	margin:  0px;
}

#receitas p {
	color: #9d9d9d;
	font-size: 0.7em;
	font-weight: 300;
	line-height: 1em;	
}

footer {
	background: #353532;
	padding: 20px 0px;
	position: relative;
	z-index: 10;
}

.nota-footer {
	color: #FFF;
	font-size: 0.6em;
	padding-top: 20px;
	text-align: center;
}

.pos-funcoes { position: absolute;  top: 80px; }
.pos-dimensoes { position: absolute;  top: 120px; }

.col-funcoes {     position: relative !important;
	-ms-flex: 0 0 100% !important;
	flex: 0 0 100%;
	max-width: 100%;
	bottom: 0px !important;
	padding-top: 20px;
	left: 13px !important; }


#funcoes h4 {     color: #676767;
    font-size: 20px;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.1; }


#funcoes p { color: #676767;line-height: 1.3rem; }

#funcoes .feature01 {
	z-index: -1;
	position: absolute;
	max-width: 455px;
    top: 298px;
}

#funcoes .feature02 {
	z-index: -1;
    position: absolute;
    top: 510px;
    width: 372px;
    right: 83px;
}

#funcoes .feature03 {
	z-index: -1;
    position: absolute;
	bottom: 23px;
    left: 180px;
}

#funcoes .feature04 {
	z-index: -1;
    position: absolute;
    top: 166px;
    left: 219px;
}

#funcoes .feature05 {
	z-index: -1;
    position: absolute;
    top: 0px;
    right: 7%;
    padding-left: 0px;
}

#funcoes { position: relative;  height: 745px;
    z-index: 10; background-color: #fff;
    background: url(../img/bg-silver.webp) no-repeat; }


#dimensoes {     position: relative;
    height: 640px;
    z-index: 10;
    background: #038a9b;
	 }

#dimensoes h2 { text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 42px;
    padding-top: 30px;
    margin-bottom: 20px; }


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

@media (max-width: 991px)  {
	.slogan {
	background-size: cover;
	color: #353532;
	text-align: center;
	font-weight: 900;
	font-size: 2em;
	line-height: 1em;
	padding: 30px 15px;
	background: #e4e1d7;
	}
}



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

    #potencia {
		padding: 115px 0px 0px 160px !important;
	}
	.info-potencia {
		line-height: 1.4 !important; padding-bottom: 85px;     padding-right: 40px;
	}
	.selo-potencia {
		margin-bottom: 20px;
	}
	
}



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

	.nome-produto {
		top: 17% !important;
		left: 32% !important;
	}

	#funcoes .feature05 {
		top: -3px;
		right: 10%;
		padding-left: 9px;
	}
	#funcoes .feature01 {     top: auto;
		bottom: -424px; }

	#funcoes .feature02 {
		bottom: 393px;
		max-width: 295px;
		top: 591px;
		left: 25px;
	}

	#funcoes .feature03 {
		bottom: 57px;
    left: auto;
    right: -130px;
	}

	#funcoes .feature04 {
		top: auto;
    max-width: 206px;
    bottom: -289px;
    left: auto;
    right: 8px;
	}
}


@media (min-width: 540px) and (max-width: 767px)  {
	#funcoes .frigobar {
		height: 320px;
	}


	#funcoes h4 { font-size: 15px !important;
		margin-bottom: 4px !important; }

	#funcoes p {
		color: #676767;
		line-height: 1rem !important;
		font-size: 14px !important; 
	}

	#funcoes .feature05 {
		top: -20px;
    right: 6%;
    padding-left: 0px;
	}
	#funcoes .feature01 {  bottom: 350px !important;
		top: 204px;
		max-width: 168px;
		padding-left: 0px;
		left: 4%; }

	#funcoes .feature02 {
		bottom: 350px !important;
    top: 366px;
    max-width: 168px;
    padding-left: 0px;
    left: 4%;
	}

	#funcoes .feature03 {
		bottom: 165px;
    left: auto;
    left: 72%;
	}

	#funcoes { height: 545px; }

	#funcoes .feature04 {
		top: auto;
		max-width: 182px;
		bottom: -29px;
		left: auto;
		right: -9px;
	}
	.nome-produto {
		top: 16.5% !important;
		right: 39% !important;
		left: 29% !important;
	}
	#intro h1 { font-size: 19px!important; }

	.selo-potencia {
		margin-bottom: 42px !important;
		padding-top: 95px !important;
	}
	.info-potencia {
		padding-right: 160px !important;
		padding-left: 30px !important;
	}
}


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

	.pos-dimensoes {
		position: absolute;
		top: 120px;
		padding: 0px 21px !important;
	}

	#dimensoes h2 { font-size: 28px;
		padding-top: 35px; }

	#funcoes .frigobar {
		height: 235px;
	}

	#funcoes h4 { font-size: 12px !important;
		margin-bottom: 3px !important;}

	#funcoes p {
		color: #676767;
		line-height: 0.8rem !important;
    font-size: 12px !important;
	}

	#funcoes .feature05 {
		top: -30px;
    right: 6%;
    padding-left: 0px;
	}
	#funcoes .feature01 { bottom: 350px !important;
		top: 172px;
		max-width: 168px;
		padding-left: 0px;
		left: 2%; }

	#funcoes .feature02 {
		bottom: 322px !important;
    top: 293px;
    max-width: 168px;
    padding-left: 0px;
    left: 2%;
	}

	#funcoes .feature03 {
		bottom: 104px;
    left: auto;
    left: 68%;
	}

	#funcoes { height: 440px; }

	#funcoes .feature04 {
		top: auto;
		max-width: 161px;
		bottom: -36px;
		left: auto;
		right: -11px;
	}

	.selo-potencia {
		margin-bottom: 42px !important;
		padding-top: 95px !important;
	}
	.info-potencia {
		padding-right: 60px !important;
		padding-left: 30px !important;
	}
	.info-potencia {
		color: #FFF;
		font-weight: 300;
		padding-bottom: 50px;
		font-size: 1.2em;
		line-height: 1.4;
	}
	.nome-produto {
		top: 16% !important;
		right: 36% !important;
		left: 25% !important;
	}
	#intro h1 { font-size: 16px!important; }
}


@media (min-width: 308px) and (max-width: 408px)  {
	#dimensoes {
		height: 505px;
	}

	.pos-dimensoes {
		position: absolute;
		top: 120px;
		padding: 0px 10px !important;
	}

	#dimensoes h2 { font-size: 28px;
		padding-top: 35px; }

	#funcoes .frigobar {
		height: 182px;
	}

	#funcoes h4 { font-size: 11px !important;
		margin-bottom: 1px !important;}

	#funcoes p {
		color: #676767;
		line-height: 0.7rem !important;
		font-size: 11px !important;
	}

	#funcoes .feature05 {
		top: -30px;
    right: 6%;
    padding-left: 0px;
	}
	#funcoes .feature01 { bottom: 279px !important;
		top: 75px;
		max-width: 115px;
		padding-left: 0px;
		left: 2%; }

	#funcoes .feature02 {
		bottom: 322px !important;
    top: 244px;
    max-width: 168px;
    padding-left: 0px;
    left: 2%;
	}

	#funcoes .feature03 {
		top: auto;
    max-width: 161px;
    bottom: 63px;
    left: auto;
    right: -64px;
	}

	#funcoes {
		height: 357px;
	}

	#funcoes .feature04 {
		top: auto;
		max-width: 161px;
		bottom: -45px;
		left: auto;
		right: -20px;
	}

	.selo-potencia {
		margin-bottom: 42px !important;
		padding-top: 95px !important;
	}
	.info-potencia {
		padding-right: 20px !important;
		padding-left: 25px !important;
		color: #FFF;
    font-weight: 300;
    padding-bottom: 50px;
    font-size: 1.1em;
    line-height: 1.4;
	}

	.nome-produto {
		top: 17% !important;
		right: 36% !important;
		left: -13% !important;
	}
	#intro h1 {
		font-size: 14px!important;
	}
	#intro .hex-img { width: 140%; } 
}


@media (max-width:  307px) {

	#dimensoes {
		height: 415px;
	}

	.pos-dimensoes {
		position: absolute;
		top: 120px;
		padding: 0px 3px !important;
	}

	#dimensoes h2 { font-size: 28px;
		padding-top: 35px; }

	#funcoes .frigobar {
		height: 157px;
	}

	#funcoes h4 { font-size: 11px !important;
		margin-bottom: 1px !important;}

	#funcoes p {
		color: #676767;
		line-height: 0.7rem !important;
		font-size: 11px !important;
	}

	#funcoes .feature05 {
		top: -30px;
    right: 6%;
    padding-left: 0px;
	}
	#funcoes .feature01 { bottom: 279px !important;
		top: 75px;
		max-width: 115px;
		padding-left: 0px;
		left: 2%; }

	#funcoes .feature02 {
		bottom: 322px !important;
    top: 227px;
    max-width: 168px;
    padding-left: 0px;
    left: 2%;
	}

	#funcoes .feature03 {
		top: auto;
		max-width: 161px;
		bottom: 66px;
		left: auto;
		right: -67px;
	}

	#funcoes {
		height: 357px;
	}

	#funcoes .feature04 {
		top: auto;
		max-width: 161px;
		bottom: -28px;
		left: auto;
		right: -20px;
	}

	.selo-potencia {
		margin-bottom: 42px !important;
		padding-top: 95px !important;
	}
	.info-potencia {
		padding-right: 20px !important;
		padding-left: 25px !important;
		color: #FFF;
    font-weight: 300;
    padding-bottom: 50px;
    font-size: 1.1em;
    line-height: 1.4;
	}
	.nome-produto {
		top: 16.5% !important;
		right: 36% !important;
		left: -13% !important;
	}
	#intro h1 {
		font-size: 14px!important;
	}
	#intro .hex-img { width: 140%; } 
}


@media (min-width:  360px) {

	.nome-produto {
		top: 20px;
		left: 97px;
		font-size: 1.1em;
	}

	.info-design {
		bottom: 10px;
	    right: -20px;
	    font-size: 0.8em;
	    line-height: 1em;
	    padding: 0px 30px 0px 10px;
	}

}

@media (min-width:  375px) {

	.nome-produto {
		top: 20px;
		left: 98px;
		font-size: 1.2em;
	}

}

@media (min-width:  390px) {

	.nome-produto {
		top: 20px;
		left: 103px;
		font-size: 1.2em;
	}

}

@media (min-width:  400px) {

	.nome-produto {
		top: 23px;
		left: 110px;
		font-size: 1.3em;
	}

	.info-design {
	    bottom: 20px;
	    right: -20px;
	    font-size: 0.8em;
	    line-height: 1em;
	    padding: 0px 30px 0px 10px;
	}

}

@media (min-width:  540px) {

	.nome-produto {
		top: 33px;
		left: 155px;
		font-size: 1.5em;
	}

}

@media (min-width: 768px) {
	
	.nota-footer {
		padding-top: 0px !important;
		position: absolute;
		text-align: left;
		left: 0px;
		bottom: 0px;
	}

	.slogan {
		font-size: 3em;
	}

	.nome-produto {
		top: 40px;
		left: 205px;
		font-size: 2.3em;
	}

	#potencia {
		padding: 0px 0px 0px 0px;
	}

	#potencia .hexagon {
		max-width: 10%;
	}

	.info-design {
	    bottom: 60px;
	    right: 0px;
	    font-size: 1.2em;
	    line-height: 1.1em;
	    padding: 0px 30px 0px 10px;
	}

	#espelhada {
		padding-bottom: 0px;
	}

	#receitas {
		font-size: 2em;
	}

	#receitas h4 {
		font-size: 1.3em;
	}
	
}


@media (min-width: 992px) {

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

	#intro h1 { font-size: 21px; }

	.slogan {
		text-align: left;
		background: none;
		font-size: 3em;
		padding: 10px 180px 30px 95px;
	}

	.info-intro {
		position: relative;
		bottom: 0px;
		right: 0px;
	}

	.nome-produto {
		top: 16%;
		left: 28%;
		font-size: 1.4em;
	}

	#potencia {
		padding: 0px 0px 0px 0px;
	}

	.design-title {
		top: 30px;
	}

	.info-design {
	    bottom: 80px;
	    right: 0px;
	    font-size: 1.5em;
	    line-height: 1.2em;
	    padding: 0px 30px 0px 10px;
	}

	
	#espelhada {
		padding-top: 0px;
	}


}


@media (min-width: 1100px) {

	header {
		padding: 30px;
	}

	.slogan {
		font-size: 3.2em;
		padding: 22px 225px 0px 80px;
		text-align: left;
	}

	#intro h1 {
		font-size: 22px; }

	.nome-produto {
		top: 16%;
    left: 28%;
    font-size: 1.8em;
	}

	.info-potencia {
		margin-top: 50px;
		padding-left: 20%;
		padding-top: 9%;
		padding-right: 20px;
	}

	#potencia {
		padding: 0px 0px 80px 0px;
	}

	.info-design {
	    bottom: 100px;
	    right: 0px;
	    font-size: 1.5em;
	    line-height: 1.2em;
	    padding: 0px 100px 0px 10px;
	}

}


@media (min-width: 1200px) {

	.nome-produto {
		top: 66px;
		left: 175px;
	}

	.slogan {
		font-size: 3.2em;
		padding: 10px 160px 0px 190px;
		text-align: left;
	}

	#intro h1 {
		font-size: 23px; }

}