@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,900&display=swap');

body { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 1em; line-height: 1.5em;}
h1 { width: 100%; height: 200px; display: inline-block; overflow: hidden; text-indent: -10000%; background: blue url(../img/titulo_livro.svg); background-size: contain; background-repeat: no-repeat; background-position: center; grid-column: 1 / 5; grid-row: 3 / 4;}
h2 { text-transform: uppercase; font-weight: 900; color: #F1BA24; font-size: 1.1em; padding-bottom: 10px;}
h3 { text-transform: uppercase; font-weight: 300; color: black; font-size: 1em; padding-bottom: 10px;}
strong { font-weight: 900;}

/*Grides*/
.grid_abertura { padding: 20px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: max-content 100px repeat(4, max-content) 60px; grid-gap: 10px; }
.grid_conteiner { padding: 20px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: max-content; grid-gap: 10px; }

#abertura { width: 100%;/* height: 100vh;*/ background: url(../img/dipositivos_moveis/001.jpg); background-size: cover ; background-repeat: no-repeat; background-position: center; overflow: hidden; }
#topbar { grid-column: 1 / 7; grid-row: 1 / 2; position: relative; text-align: center; z-index: 3; }
#topbar > h2  { color: #fff;  }
#topbar > #logo_furtini { position: absolute; right: 0; bottom: 0;  transform: translateY(calc(100% + 10px));}
/*#titulo_pagina { grid-column: 1 / 7; grid-row: 2 / 4; width: 100%; height: 30vh; display: inline-block; overflow: hidden; text-indent: -10000%; background: url(../img/titulo_livro.svg); background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateY(10vh);}
*/

#titulo_pagina {
    grid-column: 1 / 7;
    grid-row: 3 / 4;
    width: 100%;
    height: 40vw;
    display: inline-block;
    overflow: hidden;
    text-indent: -10000%;
    background: url(../img/titulo_livro.svg);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50px);
}





#label_abertura { display: contents;}
/*#label_abertura::after { content: "";  z-index: 1; width: calc(100% + 40px); height: calc(100% + 20px); background: #f1ba24; grid-column: 1 / 7; grid-row: 5 / 8; transform: translateX(-20px);}
#label_abertura::before { content: ""; z-index: 1; width: calc(100% + 40px); height: 20vh; grid-column: 1 / 7; grid-row: 4 / 5; background: #f1ba24; transform: skewY(-10deg) translate(-20px , 15vh);}
*/


#label_laranja {
    width: calc(100% + 40px);
    height: calc(100% + 20px);
    background: #f1ba24;
    grid-column: 1 / 7;
    grid-row: 5 / 8;
    transform: translateX(-20px);
    position: relative;
}
#label_laranja::before{
	content: "";
	position: absolute;
	background: #f1ba24;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*width: calc(100% + 40px); 
	height: 20vh; 
	background: #f1ba24; 
	transform: skewY(-10deg) translate(-20px , 15vh);}*/
	transform: translateY(-50px) skewY(-8deg);
}




#label_abertura > p { grid-column: 1 / 7; grid-row: 5 / 7; text-align: center; display: flex; flex-direction: column; justify-content: center;align-items: center; position: relative; padding-bottom: 15px;}
#label_abertura > p > em { z-index: 2; }

/*curiosidades */
#curiosidades div { grid-column: 2 / 6; padding-top: 30px; padding-bottom: 30px; text-align: center;}
#curiosidades div:nth-child(1) { grid-row: 1 / 2;}
#curiosidades div:nth-child(2) { grid-row: 2 / 3;}
#curiosidades div:nth-child(3) { grid-row: 3 / 4;}
#curiosidades div:nth-child(even) { border-top: 1px dashed #C4C4C4; border-bottom: 1px dashed #C4C4C4;}

/*ingredientes*/
#ingredientes, #beneficios_extras { /*border: solid gold 1px; */width: 100%; /*min-height: 100vh;*/padding: 0 20px;  padding: 0 20px; grid-gap: 0px;}
#ingredientes figure, #beneficios_extras figure { grid-column: 1 / 7; grid-row: 1 / 2; height: 100vw; position: relative; overflow: hidden; }
#ingredientes figure img,  #beneficios_extras figure img, #historia figure img { width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; object-fit: cover; transform: translate(-50% , -50%); }
#label_ingredientes, #label_beneficios_extras { position: relative; grid-column: 1 / 7; grid-row: 2 / 3; background: black; color: #fff; z-index: 2; padding: 20px; font-size: 1.3em; line-height: 1.5em; transform: translateY(-25%); }


/*
#label_ingredientes::after {
	content: "";
	position: absolute;
	background: olive;
	width: 100%;
	height: 100%;
	transform: translate(-40px, 25%);

}*/




/*Utensilios */
#utensilios { background: /*#FFF8EB*/ #F7EBD6; position: relative;}
#bigode { grid-column: 2 / 6; grid-row: 1 / 2; padding-bottom: 20px;}
#fundamentais, #auxiliares { display: contents;}
	#fundamentais h3 { grid-column: 2 / 6; grid-row: 2 / 3; }
	#fundamentais ul { grid-column: 3 / 6; grid-row: 3 / 4; }
	#fundamentais ul li, #auxiliares ul li, #beneficios ul li {position: relative;  padding-bottom: 25px;}

	#fundamentais ul li::before, #auxiliares ul li::before  { content: ""; position: absolute; width: 50px; height: 50px; left: -70px; }

	#fundamentais ul li:nth-child(1)::before {
	background: url(../img/svg/balanca_icone.svg);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;	    
	}
	#fundamentais ul li:nth-child(2)::before {
	background: url(../img/svg/forno_icone.svg);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	}
	
	#auxiliares h3 { grid-column: 2 / 6; grid-row: 5 / 6; }
	#auxiliares ul { grid-column: 3 / 6; grid-row: 6 / 7; }

	#auxiliares ul li:nth-child(1)::before {
	background: url(../img/svg/termometro_icone.svg);
	background-size: 58%;
	background-repeat: no-repeat;
	background-position: center;	    
	}
	#auxiliares ul li:nth-child(2)::before {
	background: url(../img/svg/panela_icone.svg);
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: center;
	}
	.italico{
		border-top: 1px dashed #C4C4C4;
		margin-top: 10px;
		padding-top: 10px;
	}
	.italico p { font-style: italic;}

/*Beneficios*/

#beneficios {
	justify-content: center;
	align-items: center;
	position: relative;
	
}
#utensilios::after {
    content: "";
    width: 100%;
    height: calc(50vw + 40px);
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #F7EBD6;
    z-index: 0;
    transform: translateY(calc(50vw + 40px));

}
#beneficios::before {
    content: "";
    width: 100%;
    height: calc(100vw - 40px);
    background: url(../img/dipositivos_moveis/003.jpg);
	background-position-x: 0%;
 	background-position-y: 0%;
	background-repeat: repeat;
	background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    grid-column: 1 / 7;
    grid-row: 1 / 2;
}

#beneficios::after {
    content: "";
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50% , -50%);
    border: solid 3px #f1ba24;
}

#beneficios h2 {
	grid-column: 2 / 6;
	grid-row: 2 / 3;
	padding-bottom: 20px;
	z-index: 2
}
#beneficios ul { grid-column: 2 / 6; grid-row: 3 / 4;  z-index: 2; padding-bottom: 40px;} 

/*historia */
#historia { background: #F1BA24; overflow: hidden; position: relative;}
#historia::after {
	content: "";
	width: 100%;
	height: calc(20vh + 20px);
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 1;
}
#historia figure { grid-column: 1 / 7; grid-row: 1 / 2; overflow: hidden; width: 100%; height: 40vh; position: relative; z-index: 2;}
	#historia figcaption { position: absolute; transform: rotate(-90deg); transform-origin: top right; right: 30px; top: 13px; color: #fff; font-size: 0.7em;}
#historia #olho { grid-column: 2 / 6; grid-row: 2 / 3; padding: 25px 0; font-weight: 900; font-size: 1.2em;}
#historia .conteiner_texto { grid-column: 2 / 6; grid-row: 3 / 4; }
	#historia .conteiner_texto p, .conteiner_introducao p { padding-bottom: 25px; }
#historia .cta_contanier { grid-column: 1 / 7; grid-row: 5 / 6; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center;  padding-bottom: 25px;}
#historia .cta_contanier .cta { height: 70px;}

/*investimento*/

#investimento figure { grid-column: 1 / 7; grid-row: 1 / 2; overflow: hidden; width: 100%; height: 40vh; position: relative;

background: url(../img/dipositivos_moveis/006.jpg);
background-repeat: repeat;
background-size: auto;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#investimento h2 { grid-column: 2 / 6; grid-row: 2 / 3; }
#investimento .valor { grid-column: 2 / 6; grid-row: 3 / 4; text-align: center; font-weight: 900; font-size: 3.6em; line-height: 1.5em}
.valor strong { font-size: 22px; transform: translateY(-26px); display: inline-block;}
#investimento .conteiner_texto { grid-column: 2 / 6; grid-row: 4 / 5; }
	#investimento .conteiner_texto p {padding-bottom: 25px}
#investimento .cta_contanier { grid-column: 2 / 6; grid-row: 5 / 6;}
#investimento .cta_contanier .cta { height: 70px;}
#investimento  #formas_pagamento { display: contents;}
	#formas_pagamento #lista_formas { grid-column: 2 / 6; grid-row: 6 / 7;}
	#formas_pagamento .info_complementar { grid-column: 2 / 6; grid-row: 7 / 8; font-size: 0.8em;}

#depoimentos_conteiner > #introducao  { display: contents; }
	#depoimentos_conteiner > #introducao > .conteiner_introducao { grid-column: 2 / 6; grid-row: 1 / 2;	}

#depoimentos_conteiner > .content {
    margin: auto;
    padding: 40px;
    width: 100%;
    max-width: 1200px;
    min-width: 300px;
    grid-column: 1 / 7;
    grid-row: 2 / 3;
}
#depoimentos_conteiner {
  background:#F1BA24 /*url(../img/noisebg.png)*/;
  width: 100%;

}






.cta_contanier{
	grid-column: 1 / 7;
	grid-row: 7 / 8;
	z-index: 2;	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.cta {
    background: black;
    width: 250px;
    display: block;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 80px;
    color: #fff;
}
#utensilios .cta_contanier{
	grid-column: 1 / 7;
	grid-row: 7 / 8;
	z-index: 2;	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.cta_orange {
    background: #f1ba24;
    width: 250px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 80px;
    color: black;
}



#formas_pagamento > #lista_formas{ display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;
justify-content: center;
align-items: center;
padding: 20px 0;



 }
li[id$="icon_pagamento"] { width: 70px; height: 45px; text-indent: -10000%;}
#mastercard_icon_pagamento { background: url(../img/svg/master_card.svg); background-size: contain 80%; background-repeat: no-repeat; background-position: center;}
#visa_icon_pagamento { background: url(../img/svg/visa.svg); background-size: 75%; background-repeat: no-repeat; background-position: center; }
#american_icon_pagamento { background: url(../img/svg/american_express.svg); background-size: 80%; background-repeat: no-repeat; background-position: center; }
#elo_icon_pagamento { background: url(../img/svg/elo.svg); background-size: 80%; background-repeat: no-repeat; background-position: center;}
#hipercard_icon_pagamento { background: url(../img/svg/hipercard.svg); background-size: 80%; background-repeat: no-repeat; background-position: center; }
#hiper_icon_pagamento{ background: url(../img/svg/hiper.svg); background-size: contain 80%; background-repeat: no-repeat; background-position: center; }
#diners_icon_pagamento { background: url(../img/svg/diners.svg); background-size: 70%; background-repeat: no-repeat; background-position: center;}
#boleto_icon_pagamento { background: url(../img/svg/codigo_barras.svg); background-size: 70%; background-repeat: no-repeat; background-position: center;}
#paypal_icon_pagamento { background: url(../img/svg/pay_pal.svg); background-size: 85%; background-repeat: no-repeat; background-position: center;}
/*rodape*/
footer { 
	background: black; 
	/*height: 91px; 
	width: 100%; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center;*/
}
footer a { font-size: 1.2em; color: #fff; position: relative; left: 25px;}
#instagram {
    grid-column: 3 / 5;
    text-align: center;
}
footer a::before {content: ""; background: #fff; width: 30px; height: 30px; position: absolute; top: 0; left: -50px; background: url(../img/svg/icone_instagram.svg); background-size: 80%; background-repeat: no-repeat; background-position: center; }



@media (max-height: 420px) and (max-width: 850px)  {
.info_dispositivo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    width: 100%;
    height: 100%;
    background: #f1ba24;
    top: 0;
    left: 0;
    z-index: 999;
}
.info_dispositivo #icone_girar { width: 35vh; height: 35vh;
    background: url(../img/svg/girar_dispositivo.svg) no-repeat;
    background-size: 80%;
    background-position: center;
    position: relative;
    transform: translateX(-50%);

}
.info_dispositivo #icone_girar::after {
    content: "Gire o dispositivo para a posição vertical e veja o conteúdo desta página";
    position: absolute;
    width: 50vh;
    height: 35vh;
    left: 100%;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 300;
    line-height: 1.5;
}

}

@media screen and (min-width: 900px) {
	.grid_abertura{
	    display: grid;
	    grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
	    grid-template-rows: max-content 100px repeat(4, max-content) 60px;
	}
	#abertura {
	    width: 100%;
	    height: 100vh;
	    background: #fff0;
	    overflow: hidden;
	    position: fixed;
	    z-index: -1;
	}
	#abertura .cta_contanier { display: none; }
	#topbar {
	    grid-column: 1 / 6;
	    grid-row: 1 / 2;
	    /*position: relative;
	   text-align: center;
	    z-index: 1;*/
	}
	#topbar > #logo_furtini {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    transform: translate( -50px , calc(100% + 10px));
	    width: 110px;
	    height: 110px;
	}
	#titulo_pagina {
	    grid-column: 3 / 6;
	    grid-row: 3 / 4;
	    width: calc(100% - (3vw + 40px));
	    height: 25vw;
	    display: inline-block;
	    overflow: hidden;
	    text-indent: -10000%;
	    background: url(../img/titulo_livro.svg);
	    background-size: contain;
	    background-repeat: no-repeat;
	    background-position: center;
	    transform: translateY(-50px);
	    z-index: 3;
	}

	#label_abertura > p {
	    grid-column: 5 / 6;
	    grid-row: 5 / 7;
	    /*text-align: center;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    position: relative;*/
	    padding-bottom: 15px;
	    background: black;
	    padding: 30px;
	    color: #fff;
	    transform: translate(50%, 0px);
	}

	
#label_laranja {
    width: calc(100% + 20px);
    height: calc(100% + 80px);
    grid-column: 1 / 6;
    grid-row: 1 / 8;
    transform: translate(-20px , -20px);
    position: relative;
    background: blue;
    z-index: ;
    background: url(../img/dipositivos_moveis/001.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
	#label_laranja::before { display: none;}

	.grid_conteiner, #ingredientes, #beneficios_extras{
		display: grid;
		grid-template-columns: 1vw 2vw 4vw repeat(5, 1fr) 4vw 2vw 1vw;
		grid-auto-rows: max-content; 
		grid-gap: 10px; 
	}
	#curiosidades div { grid-column: 7/ 9;}
	#ingredientes figure, #beneficios_extras figure {
    grid-column: 7 / 9;
    grid-row: 1 / 2;
    height: 30vw;
    }
    #label_ingredientes, #label_beneficios_extras {
    position: relative;
    grid-column: 8 / 9;
    grid-row: 2 / 3;
    background: black;
    color: #fff;
    z-index: 2;
    padding: 20px;
    font-size: 1.3em;
    line-height: 1.5em;
    transform: translate( calc(4vw + 10px), -50%);
}
#label_ingredientes, #label_beneficios_extras {
    color: #fff;
    font-size: 1em;
    line-height: 1.5em;
    text-align: center;
}


#bigode {
    grid-column: 7 / 9;}


#beneficios::before {
    content: "";
    width: 100%;
    height: calc(30vw - 40px);
    grid-column: 7 / 9;
}
#utensilios {
    background: #F7EBD600;
    position: relative;
}
#utensilios::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #F7EBD6;
    z-index: -2;
}
#utensilios::after {
    content: "";
    width: 100%;
    height: calc(15vw + 40px);
    position: absolute;
bottom: 0;
left: 0;
background: #F7EBD6;
z-index: 0;
transform: translateY(calc(15vw + 40px));
z-index: -2;
}
#fundamentais h3 {
    grid-column: 7 / 9;
    grid-row: 2 / 3;
}
#fundamentais ul {
    grid-column: 7 / 9;
    grid-row: 3 / 4;
    transform: translateX(60px);
}
#auxiliares h3 {
    grid-column: 7 / 9;
    grid-row: 5 / 6;
}
#auxiliares ul {
    grid-column: 7 / 8;
    grid-row: 6 / 7;
    transform: translateX(60px);
}
#utensilios .cta_contanier {
    grid-column: 7 /9;
    grid-row: 7 / 8;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#beneficios::after {
    content: "";
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    grid-column: 7 / 9;
    grid-row: 1 / 4;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50% , -50%);
    border: solid 3px #f1ba24;
}
#beneficios h2 {
    grid-column: 7 / 9;
    grid-row: 2 / 3;
    padding: 0 50px 20px 50px;
    z-index: 2;
}
#beneficios ul {
    grid-column: 7 / 9;
    grid-row: 3 / 4;
    z-index: 2;
    padding: 0 50px 40px 50px;
}
#historia {
    background: #F1BA2400;
    overflow: hidden;
    position: relative;
}#historia::after {
    content: "";
    width: 100%;
    height: calc(20vh + 20px);
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: -2;
}
#historia::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    background: #f1ba24;
    z-index: -3;
}
#historia figure {
    grid-column: 7 / 9;
    grid-row: 1 / 2;
    overflow: hidden;
    width: 100%;
    height: 40vh;
    position: relative;
    z-index: 2;
}
#historia #olho {
    grid-column: 7 / 9;
    grid-row: 2 / 3;
    padding: 25px 0;
    font-weight: 900;
    font-size: 1.2em;
}
#historia .conteiner_texto {
    grid-column: 7 / 9;
    grid-row: 3 / 4;
}
#historia .cta_contanier {
    grid-column: 7 / 9;
    grid-row: 5 / 6;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px;
}
#depoimentos_conteiner {
  background: #00f0 /*url(../img/noisebg.png)*/;
  width: 100%;
  position: relative;
}
#depoimentos_conteiner::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	background: #f1ba24;
	z-index: -2;
}

#depoimentos_conteiner > #introducao > .conteiner_introducao {
    grid-column: 7 / 9;
}

#depoimentos_conteiner > .content {
    margin: auto;
    padding: 40px;
    width: 100%;
    max-width: 1200px;
    min-width: 300px;
    grid-column: 7 / 9;
    grid-row: 2 / 3;
}


#investimento figure {
    grid-column: 7 / 9;
    grid-row: 1 / 2;
    overflow: hidden;
    width: 100%;
    height: 40vh;
    position: relative;
    background: url(../img/dipositivos_moveis/006.jpg);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#investimento h2 {
    grid-column: 7 / 9;
    grid-row: 2 / 3;
}
#investimento .valor {
    grid-column: 7 / 9;
    grid-row: 3 / 4;
    text-align: center;
    font-weight: 900;
    font-size: 3.6em;
    line-height: 1.5em;
}
#investimento .conteiner_texto {
    grid-column: 7 / 9;
    grid-row: 4 / 5;
}
#investimento .cta_contanier {
    grid-column: 7 / 9;
    grid-row: 5 / 6;
}
#formas_pagamento #lista_formas {
    grid-column: 7 / 9;
    grid-row: 6 / 7;
}
#formas_pagamento .info_complementar {
    grid-column: 7 / 9;
    grid-row: 7 / 8;
    font-size: 0.8em;
}
footer {
    background: #FFF0;
    position: relative;
    padding: 0;
}
footer::after{
	content: "";
	background: black;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -3;
	position: absolute;
	height: 100%;

}
#instagram {
    grid-column: 7 / 9;
    text-align: center;
}
}