/* FOLHA DE APARÊNCIAS PERSONALIZADA */



/* fontes e tamanhos padrão para textos */

	* { font-family: "brandon-grotesque", Arial, sans-serif; text-decoration: none;}


::selection {
	background-color: #012841;
	color: white;
	text-shadow: none;
}
.negativo ::selection {
	background-color: white;
	color: #012841;
}

.negativo *, .negativo { color: #ebe8e8; }
.sombra { text-shadow: 1px 1px 5px rgba(0,0,0,0.7); }

/* FUNDOS */

.bg-preto {background-color: #050505;}
.bg-branco {background-color: #fff;}
.bg-cinza {background-color: #f2f2f2;}

.bg-dourado {background-color: #a89454;}
.bg-perola {background-color: #ebe8e8}
.bg-creme {background-color: #e8e5d4;}
.bg-azul {background-color: #334f7a;}
.bg-grafite {background-color: #4d4d4f;}

/* BOTÕES */

.botoes {
	margin-top: -40px;
}

.botao {
	text-align: center;
	display: table;
	float: left;
	font-size: 20px;
	padding: 10px 20px;
	color: #a89454;
	margin: 10px 15px 10px -5px;
	border: 2px solid #a89454;
}

.botao:hover {
}

.negativo .botao {
	color: #ebe8e8;
	border-color: #ebe8e8;
}

.negativo .botao:hover {
	background-color: rgba(255,255,255,0.1);
}


/* SCROLL ÍCONE TOPO ÍCONE */

	.scroll {
		display: table;
		background-color: rgba(255, 255, 255, 1);
		background-image: url('../img/scrolling_mousewheel.gif');
		background-size: cover;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		position: absolute;
		bottom: 30px;
		left: calc(50vw - 50px);
		z-index: 99999;
	}

	#target {
		position: absolute;
		top: calc(100vh + 100px);
	}

	.botao-topo {
		display: table;
		width: 40px;
		height: 40px;
		text-align: center;	
		position: fixed;
		bottom: 50px;
		right: 50px;
		padding: 1px;
		border-radius: 50%;
		transform: rotate(270deg);
		font-size: 35px;
		font-weight: bold;
		color: #1a4796;
	}

/* textos - definições específicas */

	
h1, h2, h3 {color: #4d4d4f; text-transform: uppercase; font-weight: 400;}

	h1 {
		font-weight: 700 !important; 
		font-size: 30px;
		padding: 0;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 25px;
	}

	p, li { color: #4d4d4f; font-size: 20px; font-weight: 300; line-height: 1.5 }
	
	.bold {font-weight: 700;}
	.regular {font-weight: 400;}
	.destaque-fonte {font-size: 1.4em}

	ul {padding-left: 20px;}
	li {margin: 10px; line-height: 1.2;}

	hr { color: transparent; border: none; border-bottom: 1px solid #606060; margin: 50px 0; }

	.txt-jus {text-align: justify;}

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

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

	a {color: #334f7a; }

	a:hover {}

	.negativo a {
		color: #ebe8e8;
	}




/* ------------------------------ CONTEÚDO - COMEÇA AQUI ------------------------------------ */


/* TELA INICIAL */


#inicio .aneethun {
	max-width: 60%;
}

#inicio {
	display: flex;
	align-items: center;
	text-align: center;
	background-image: url("../img/bgs/bg_frascos.png?v1.1");
}

#inicio::before {
	content: '';
	display: table;
	position: absolute;
	top: 0;
	right: 0;
	width: calc(33vw / 2);
	height: calc(43vw / 2);
	background-image: url("../img/bgs/detalhe_telabefore.svg");
	background-position: top right;
	background-repeat: no-repeat;
}

#inicio::after {
	content: '';
	display: table;
	position: absolute;
	top: calc(100vh - (30vw / 2));
	left: 0;
	width: calc(40vw / 2);
	height: calc(30vw / 2);
	background-image: url("../img/bgs/detalhe_telaafter.svg");
	background-position: bottom left;
	background-repeat: no-repeat;
}


/* SOBRE */

#sobre {
	background-image: url("../img/bgs/bg_azul.png?v2");
	background-size: 40% 100%;;
	background-repeat: no-repeat;
}

#sobre iframe {
	width: 100%;
	height: calc(((50vw - 20px) / 16 * 9));	
}

#sobre h1, #indica h1 {
	color: #334f7a;
}

#sobre .no-wrap {
	display: flex;
	align-items: center;
}

#sobre .video {
	height: calc((50vw - 20px) / 16 * 9);	
}

/* EVOLUÇÃO MARCA */

#evolucao {
	background-color: #e8e6d4;
}

video {
	max-width: 100%;
}

#evolucao h2 {
	font-weight: 400 !important;
	text-align: center;
	color: #334f7a;
}

.produto {
	min-height: 400px;
}

.produto p {
	line-height: 1.2;
	width: 70%;
	margin: 10px auto;
}

.nome-produto {
	text-transform: uppercase;
	font-weight: 700;
}

/* MAPA */

#mapa .media.only-mobile {
	margin-bottom: 100px;
}

.highlight h2, .highlight h3 {
	line-height: 1;
	color: #334f7a;
	font-weight: 700;
	margin: 0;
}

.highlight h2 {
	font-size: 95px;
}

.highlight h3 {
	font-size: 40px;
	margin-bottom: -20px;
}

.highlight .unidade {
	font-size: 30px;
}

.highlight p {
	font-size: 23px;
	margin: 20px 0 0 0;
}

.quadro1, .quadro2 {
	display: table;
}

.quadro1 {
	margin: 90px 0px -220px -5px;
	width: 140px;
	height: 120px;
}

.quadro2 {
	margin: 30px 0 -230px 25px;
	width: 200px;
	height: 190px;
}

#mapa .botao {
	float: left;
	margin: 100px auto;
	padding: 15px 40px;
	text-transform: uppercase;
	background-color: #a89454;
	color: #ebe8e8;
	border: none;
	border-radius: 15px;
	box-shadow: 5px 5px 0 #756A39;
}

#mapa .botao:hover {
	transform: scale(1.01);
	box-shadow: 7px 7px 0 #756A39;
}


/* SUSTENTABILIDADE */


#globo {
	margin-top: -150px;
	position: absolute;
	
}

#lista-sustentabilidade {
	padding: 30px 55px 25px 30px;
	margin-top: 30px;
	margin-bottom: -180px;
}

#lista-sustentabilidade h3 {
	color: #a89454;
	font-weight: 700;
	margin: 5px 0 0 0;
	padding-left: 35px; 
}

#lista-sustentabilidade p {
	line-height: 1.3;
	font-size: 18px;
	margin: 0 0 25px 0;
	padding-left: 35px;
}

#lista-sustentabilidade h3::before {
	content: '';
	display: inline;
	float: left;
	width: 25px;
	height: 25px;
	margin: 0 10px 0 -35px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#lista_Etica::before 	{background-image: url("../img/icones/lis_ic1.png");}
#lista_ISO14::before	{background-image: url("../img/icones/lis_ic2.png");}
#lista_PEA::before 		{background-image: url("../img/icones/lis_ic3.png");}
#lista_Fotovolt::before {background-image: url("../img/icones/lis_ic4.png");}
#lista_Eurec::before 	{background-image: url("../img/icones/lis_ic5.png");}
#lista_ADCirc::before 	{background-image: url("../img/icones/lis_ic6.png");}

#lista-sustentabilidade a {font-style: italic;}


/* CARROSSEL INDICAÇÕES */

#indica {
	padding: 150px 0 200px 0
}

#indica h1 {
	text-align: center;
	margin-bottom: 80px;
}


.post-instagram {
	overflow: hidden;
	border-radius: 15px 15px 0 0;
}

.post-instagram::after {
	content: '';
	display: table;
	width: 310px;
	height: 60px;
	background-image: url("../img/bgs/detalhe_afterinsta.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.item h3 {
	margin: 10px 0 50px 0;
}


/* RODAPÉ */


footer a {
	width: 100%;
}


footer .aneethun {
	max-width: 80%;
	margin-top: 10px;
}

.icon {
	float: left;
	margin: 25px 10px;
	width: 30px;
	height: 30px;
}

/* ------------------------------ CONTEÚDO - TERMINA AQUI ------------------------------------ */




/* CARROSSEL */

.carrossel1 {
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

	button {font-family: sans-serif; font-weight: 600;}

	.carrossel-container {
		position: relative;
		padding: 15px 0;
		max-width: 900px;
		margin: 0 auto;
	}

	.carrossel-wrap {
	  	overflow-x: auto;
	}

	.carrossel p {font-size: 16px;}


	.seta-esquerda, .seta-direita {
		position: absolute;
		top: 0;
		left: -70px;
		right: auto;
		bottom: 0;
		font-size: 20px;
		line-height: 250px;
		width: 80px;
		color: #a89454;
		background: transparent;
		cursor: pointer;
		border: none;
   		z-index: 99;
   		opacity: .8;
		text-align: center;
	}

	.seta-esquerda:hover, .seta-direita:hover {
		opacity: .9;
	}


	.seta-direita {
		right: -70px;
		left: auto;
	}


	.carrossel {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 50px;
	}

	.item {
		flex-shrink: 0;
		transition: all 600ms ease-in-out;
		opacity: .5;
	}

	.item-atual {
		opacity: 1;
	}


	.carrossel-wrap::-webkit-scrollbar {
    background-color: #c9c9c9;
    height: 5px;
	}


	.carrossel-wrap::-webkit-scrollbar-thumb {
    background-color: #a89454;
    height: 5px;
	}




/* animação rolagem */

.animacao {opacity: 0; transition: ease 2s;}

.animacao-subir {translate: 0 30px;}
.animacao-descer {translate: 0 -30px;}
.animacao-esquerda {translate: 30px 0;}
.animacao-direita {translate: -30px 0;}
.animacao-delay {transition-delay: .3s;}
.rodar-animacao {opacity: 1; translate: 0;}


/* controles de rolagem */

::-webkit-scrollbar {
    float: right;
    position: fixed;
    top: 0;
    right: 0;
    width: 5px;
    background-color: #D9D9D9;
}

::-webkit-scrollbar-thumb {
    background-color: #a89454 ;
}