/* FOLHA DE APARÊNCIAS PERSONALIZADA */



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

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

::selection {
	background-color: #173c67;
	color: #eae7e7;
	text-shadow: none;
}
.negativo ::selection {
	background-color: #eae7e7;
	color: #173c67;
}

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

/* FUNDOS */

	body {background-color: #eae7e7}
	
	.bg-azul {background-color: #334f7a;}
	.bg-roxo {background-color: #5e3a8b;}
	.bg-branco {background-color: #fff;}
	.bg-perola {background-color: #eae7e7;}
	.bg-amarelo {background-color: #ebe7d8;}
	.bg-cinza {background-color: #f2f2f2;}
	.bg-laranja {background-color: #ec5b16;}
	.bg-rosa {background-color: #c91466;}




/* EFEITO ONDA SEÇÕES */ 

.onda {	margin-top: 15vw; }

.onda::before {
	content: '';
	display: table;
	width: 100vw;
	height: 15vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	margin-top: calc(-15vw - 100px);
	margin-bottom: -3px;
}

.after-cinza::after {
	content: '';
	display: table;
	width: 100vw;
	height: 15vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	margin-bottom: -101px;
	background-image: url("../img/bg/before_cinza.svg");
}

	.onda-rosa::before		 {background-image: url("../img/bg/before_rosa.svg")}
	.onda-azul::before		 {background-image: url("../img/bg/before_azul.svg")}
	.onda-laranja::before	 {background-image: url("../img/bg/before_laranja.svg")}
	.onda-amarelo::before	 {background-image: url("../img/bg/before_amarelo.svg")}
	.onda-cinza::before	 {background-image: url("../img/bg/before_cinza.svg");}




/* BOTÕES */

.front-page .botao {
	margin: 15px auto;
}

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

.botao {
	text-align: center;
	display: table;
	float: left;
	font-size: 20px;
	font-family: "Brandon", Arial, sans-serif;
	padding: 10px 20px;
	color: #334f7a;
	margin: 10px 15px 10px -5px;
	border: 2px solid #334f7a;
	text-transform: uppercase;
}

.botao:hover {
	background-color: #ebe7d8;
}

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

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

.e-commerce::before {
	content: '';
	display: table;
	width: 47px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
	margin-left: -15px;
    margin-right: 15px;
}

.negativo .e-commerce::before, .e-commerce.negativo::before {
	background-image: url("../img/icones/loja_negativo.svg");
}

.botao.loja-azul {color: #334f7a; border-color: #334f7a !important;}
.botao.loja-laranja {color: #ec5b16; border-color: #ec5b16 !important;}
.botao.loja-rosa {color: #c91466; border-color: #c91466 !important;}

.e-commerce.loja-azul::before {background-image: url("../img/icones/loja_azul.svg");}
.e-commerce.loja-laranja::before {background-image: url("../img/icones/loja_laranja.svg");}
.e-commerce.loja-rosa::before {background-image: url("../img/icones/loja_rosa.svg");}


/* 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);
		opacity: .5;
		z-index: 99;
	}

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

	
h1, h2, h3 { font-family: "Brandon", Arial, sans-serif; color: #334f7a; text-transform: uppercase; font-weight: normal; text-align: center;}

	h1 {
		font-size: 37px;
}

	h3 {
		color: #4e4e4f;
		font-size: 30px;
		padding: 0;
		line-height: 1.2;
		margin-bottom: 25px;
	}

	p, li { color: #646464; font-size: 20px; line-height: 1.4; }

	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;}
	.txt-esq {text-align: left;}

	.txt-azul {color: #334f7a;}
	.txt-laranja {color: #ec5b16;}
	.txt-rosa {color: #c91466;}

	a {}

	a:hover {}

	.negativo a:hover {	
		color: #faa61a;
	}



/* TELA INICIAL */

#tela-inicial {
	max-height: calc(100vh - 200px);
}

#tela-inicial::before {
	content:'';
	display: table;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../img/bg/folha_before.png");
	position: absolute;
	top: 0;
	right: 0;
	width: 50vw;
	height: 50vw;
	background-position: top right;
	z-index: 10;
	
}

#tela-inicial::after {
	content:'';
	display: table;
	width: 50vw;
	height: 40vw;
	position: relative;
	z-index: 9;
	bottom: -100px;
	margin-bottom: -250px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../img/bg/folha_after.png");
	background-position: bottom left;
}

#tela-inicial h1, #tela-inicial h2 {color: #4d4d4f; line-height: 1.2; margin: 5px;}

#tela-inicial img {
	margin-bottom: calc(-40vw - 700px);
}

#tela-inicial .col-media {
	margin-top: 200px;
	margin-bottom: -25vh;
	font-size: 1.5em;
}

#aneethun-topo {
	position: absolute;
	top: 10px;
	left: 20px;
	width: 200px;
	height: auto;
}



/* SOBRE */

#sobre {padding-bottom: 0;}

#sobre img {
	max-width: 80%;
	margin: -10% auto 0 auto;
}

#sobre .col-media {
	font-size: 1.2em;
	margin-top: 180px;
}


/* PRODUTOS */

#produtos {
	margin-top: 50px;

}

#produtos::before {
	 margin-top: calc(-15vw - 100px); position: relative; z-index: 9;
}

#produtos .wrap {
	margin-top: -250px;
    position: relative;
    z-index: 9;
}

#produtos img {width: 70%;}

#produtos .wrap .col-media * {text-align: center; float: none; margin: 20px auto;}

/* SELOS */


.selos {
	margin-top: -100px;
}



/* BANNER FRANQUIAS */

.franquias {
	padding: 100px 0 300px 0;
	margin-bottom: -120px;
	margin-top: 150px;
}

.franquias .wrap {
	margin-bottom: -100px;
}

.franquias img {
	width: 50%;
	margin: 30px auto;
}

.franquias a {
	float: none;
	margin: 35px auto;
}



/* VÍDEO */

.video.onda::before {
	margin-top: -15vw ;
}

.video.after-cinza::after {
	margin-bottom: -1px;
}

.video {
	padding: 0;
	margin: 250px 0 10px 0;
}

.video .col-tripla {
	margin: -370px 0 -200px 0;
}

.video iframe {
	min-height: calc(990px / 16 * 9);
    border-radius: 15px;
	position: relative;
	z-index: 99;

}


/* FAQ */

.faq {
	padding-top: 300px; 
	margin-top: -200px;
}

.faq .accordion span {
	display: table;
	float: left;
	width: calc(100% - 35px);
}


/* BANNER RODAPÉ */


.banner {
	padding: 0;
	margin-bottom: -130px;
}

.modelo-rodape {
	margin-top: -300px;
}

.banner::before {
	margin-top: -230px;	
}

.banner h1 {
	margin: 0 auto;
}

.banner .col-media img {
	margin-bottom: 40px;
}

.banner .botao {
	float: none;
	margin: 20px auto 40px auto;
}



/* RODAPÉ */

footer {
	position: relative;
	z-index: 3;
}

footer a {
	width: 100%;
}


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

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


/* animação rolagem */

.animacao {opacity: 0; transition: ease 1.5s;}
.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;}


/* ACORDEON PRODUTOS */

		/* Style the buttons that are used to open and close the accordion panel */
		.accordion {
			font-size: 20px;
			text-transform: uppercase;
			background-color: #ec5b16;
			color: white;
			cursor: pointer;
			padding: 20px 25px;
			width: 100%;
			text-align: left;
			border: none;
			outline: none;
			transition: 0.4s;
			border-radius: 10px;
			margin: 15px 0;
		}

		.active, .accordion:hover {
		  background-color: #c91466;
		}

		.panel {
			border-radius: 10px;
			margin: -30px 0 5px 0;
			padding: 10px 20px 0 20px;
			background-color: #eae7e7;
			max-height: 0;
			overflow: hidden;
			transition: max-height .5s ease-out;
			border: 2px solid #ec5b16;
		}

		.accordion:before {
			content: '+';
			font-size: 20px;
			color: white;
			display: table;
			position: relative;
			top: 0;
			float: left;
			padding: 5px 20px 3px 0px;
		}

		.active:after {
			content: "-";
		}


/* controles de rolagem */

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

::-webkit-scrollbar-thumb {
    background: #334f7a;
}