@charset "utf-8";

#paginas { float: left; width: 90%; min-height: 400px; padding: 30px 5%;}

#titulo { float: left; width: 98%; margin: 0 1%;}
#titulo h1 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 2em; color: #010101;}
#titulo em { float: left; width: 20px; height: 20px; margin: 13px 5px 0 0; background-color: #010101; -webkit-border-radius: 10000px; -moz-border-radius: 10000px; border-radius: 10000px;}
#titulo strong { float: left; width: 100%; height: 5px; background-color: rgb(235, 235, 235); -webkit-border-radius: 10000px; -moz-border-radius: 10000px; border-radius: 10000px;}

#texto { float: left; width: 100%;}
#texto h2 { float: left; width: 100%; margin: 10px 0; font-size: 1.1em;}
#texto h3 { float: left; width: 98%; margin: 10px 1%; font-size: 1.1em;}
#texto h4 { float: left; width: 96%; margin: 15px 2%; text-align: center; font-size: 1.1em;}
#texto h5 { float: left; width: 96%; margin: 15px 2%; text-align: justify; font-size: 1.1em;}
#texto h5 a { color: #9E3939;}
#texto h5 a:hover { text-decoration: underline;}

#institucional { float: left; width: 100%; min-height: 600px;}
#institucional .topo { float: left; width: 100%; padding: 15px 0 10px; position: relative; text-align: center; font-size: 0;}
#institucional .topo .voltar { position: absolute; top: 34%; left: 2%; padding: 4px 17px 3px 25px; opacity: 0.7; background-color: rgb(255, 255, 255); font-size: 14px; color: rgb(9, 11, 15); background-image: url('../imagens/voltar.png'); background-position: 5px 50%; background-repeat: no-repeat; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#institucional .topo .voltar:hover { opacity: 1;}
#institucional .topo .logo { max-width: 190px; max-height: 90px;}

#institucional .banners { float: left; width: 100%; position: relative; z-index: 1;}
#institucional .banners .fundo { float: left; width: 100%; position: relative;}
#institucional .banners .fundo.m { display: none;}
#institucional .banners .slides, .slides > li, .flex-control-nav { float: left; margin: 0; padding: 0; list-style: none;}
#institucional .banners .slides > li { display: none;}
#institucional .banners .slides > li img { float: left; width: 100%;}
#institucional .banners .flex-control-nav { display: none;}
#institucional .banners .flex-direction-nav { padding: 0; margin: 0; font-size: 0; list-style: none;}
#institucional .banners .flex-direction-nav a { position: absolute; width: 30px; height: 30px; top: 45%; z-index: 5; cursor: pointer;}
#institucional .banners .flex-direction-nav a.flex-prev { left: 2%; background-image: url('../imagens/seta1.png');}
#institucional .banners .flex-direction-nav a.flex-next { right: 2%; background-image: url('../imagens/seta2.png');}

#institucional .listar { float: left; width: 100%; padding: 20px 0;}
#institucional .listar .lado1 { width: 38%;}
#institucional .listar .lado2 { width: 60%;}
#institucional .listar.a .lado1 { float: left;}
#institucional .listar.a .lado2 { float: right;}
#institucional .listar.b .lado1 { float: right;}
#institucional .listar.b .lado2 { float: left;}
#institucional .youtube { float: left; width: 100%;}
#institucional .youtube .iframe { position: relative; width: 100%; padding-bottom: 55%; margin: 8px 0; overflow: hidden;}
#institucional .youtube .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#institucional .imagem { float: left; width: 100%; background-color: rgb(255, 255, 255);}
#institucional .imagem img { float: left; width: 96%; margin: 2%;}
#institucional .texto { float: left; width: 100%;}
#institucional .texto h3 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 1.2em;}
#institucional .texto h4 { float: left; width: 100%; line-height: 1.7; text-align: justify; font-size: 1.1em; color: rgb(80, 80, 80);}

#lodeen { float: left; width: 98%; margin: 0 1%;}
#lodeen .entrega { float: left; width: 100%; margin: 15px 0 0; position: relative;}
#lodeen .entrega .imagem { position: absolute; width: 220px; max-width: 100%; top: 0; left: 0; background-color: rgb(255, 255, 255);}
#lodeen .entrega .imagem img { float: left; width: 94%; margin: 3%; background-color: rgb(240, 240, 240);}
#lodeen .entrega .detalhes { float: left; min-height: 130px; margin: 5px 0 0 240px;}
#lodeen .entrega .detalhes h2 { float: left; width: 100%; font-weight: bold; font-size: 1.5em;}
#lodeen .entrega .detalhes h3 { float: left; width: 96%; padding: 8px 2% 6px; margin: 0 0 5px; border: 1px solid rgb(200, 200, 200); font-size: 1em; color: rgb(80, 80, 80);}
#lodeen .entrega .detalhes h3 b { color: rgb(9, 11, 15);}

#filiais { float: left; width: 100%;}
#filiais .meio { margin: 0 auto; width: 700px; max-width: 100%;}
#filiais .infor { float: left; width: 100%;}
#filiais .infor h1 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2em; line-height: 1.2;}
#filiais .infor h2 { float: left; width: 100%; text-align: center; font-size: 1.4em; color: rgb(100, 100, 100);}
#filiais .infor h3 { float: left; width: 90%; padding: 5px 5% 4px; margin: 10px 0; background-color: rgb(0, 0, 0, 10%); text-align: center; font-size: 1.2em; color: rgb(100, 100, 100);}
#filiais .tab { float: left; width: 94%; padding: 20px 3%; margin: 10px 0; background-color: rgb(255, 255, 255); position: relative;}
#filiais .tab .detalhes { float: left; margin: 0 130px 0 0;}
#filiais .tab .detalhes h2 { float: left; width: 100%; font-weight: bold; font-size: 2em;}
#filiais .tab .detalhes h3 { float: left; width: 100%; font-size: 1.3em; color: rgb(100, 100, 100);}
#filiais .tab .detalhes h4 { float: left; width: 100%; font-size: 1.3em; color: rgb(100, 100, 100);}
#filiais .tab .botao { position: absolute; top: 50%; right: 10px; margin: -30px 0 0;}
#filiais .tab .botao a { float: left; width: 110px; padding: 21px 0 20px; background-color: rgb(38, 144, 90); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255);}
#filiais .tab .botao a:hover { background-color: rgb(31, 104, 66);}

#contato { float: left; width: 100%; margin: 20px 0 0;}
#contato .subtexto { float: right; width: 45%;}
#contato .subtexto h3 { float: left; width: 100%; line-height: 1.5; font-size: 1.1em; color: rgb(31, 26, 23);}
#contato .subtexto h3 strong { font-size: 1.2em;}
#contato .form { float: left; width: 35%; margin: 0 0 0 15%;}
#contato .form .campo { height: 60px; padding: 0 2%; margin: 0 0 10px; border: 1px solid rgb(170, 170, 170); font-size: 1em;}
#contato .form .campo.c1 { float: right; width: 50%;}
#contato .form .campo.c2 { float: right; width: 65%;}
#contato .form .campo.c3 { float: right; width: 80%;}
#contato .form .textarea { float: right; width: 95.6%; height: 100px; padding: 12px 2%; margin: 0 0 10px; border: 1px solid rgb(170, 170, 170); font-size: 1em;}
#contato .form .botao { float: right; padding: 15px 20px; background-color: #010101; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255); cursor: pointer;}
#contato .form .botao:hover { background-color: rgb(35, 35, 35);;}

#installPWA { float: left; width: 100%; padding: 15px; background-color: #E3E3E3; box-sizing: border-box; text-align: center;}
#installPWA span { padding: 20px 0 20px 40px; background-image: url('../imagens/app.png?v1'); background-position: 0 50%; background-repeat: no-repeat; text-transform: uppercase; font-weight: bold;}

@media only screen and (max-width: 900px){
	#paginas { padding: 15px 5%;}

	#institucional .listar { width: 80%; padding: 0 10% 20px;}
	#institucional .listar .lado1 { width: 100%;}
	#institucional .listar .lado2 { width: 100%; margin: 20px 0 0;}

	#contato { padding: 20px 5%;}
	#contato .subtexto { float: left; width: 45%;}
	#contato .form { float: right; width: 50%; margin: 0;}
	#contato .form .campo.c1 { width: 90%;}
	#contato .form .campo.c2 { width: 90%;}
	#contato .form .campo.c3 { width: 90%;}
}
@media only screen and (max-width: 800px){
	#institucional .banners .fundo.d { display: none;}
	#institucional .banners .fundo.m { display: block;}

	#lodeen .entrega { margin: 15px 0 20px;}
	#lodeen .entrega .imagem { position: relative; width: 100%; text-align: center; font-size: 0;}
	#lodeen .entrega .imagem img { float: none; width: 50%; margin: 0; background-color: transparent;}
	#lodeen .entrega .detalhes { float: left; width: 100%; margin: 15px 0 0;}
	#lodeen .entrega .detalhes h2 { text-align: center;}
	#lodeen .entrega .detalhes h3 { padding: 15px 2% 13px; text-align: center;}
	#lodeen .entrega .detalhes h3 b { color: rgb(9, 11, 15);}

	#contato .subtexto { width: 100%;}
	#contato .form { width: 100%;}
	#contato .form .campo.c1 { width: 95.6%;}
	#contato .form .campo.c2 { width: 95.6%;}
	#contato .form .campo.c3 { width: 95.6%;}
}
@media only screen and (max-width: 600px){
	#titulo h1 { font-size: 1.5em;}
	#titulo h2 { font-size: 1.5em;}
	#titulo em { margin: 7px 5px 0 0;}
	#texto h5 { font-size: 1em;}

	#institucional .topo .voltar { width: 20px; height: 20px; padding: 0; font-size: 0; background-position: 50%;}
	#institucional .listar { width: 100%; padding: 0 0 20px;}
}