/*
==========================================================
= FOLHA DE ESTILO CRIADA POR: THIAGO CORRÊA - JULHO/2016 =
==========================================================
*/

/*
=========
==RESET==
=========
*/
* { color: #000; font-family:"OpenSans"; line-height: 20px; font-size: 100%; font-weight: 300; line-height: 25px;}
p { border: 0; font-size: 14px; color:#000; margin: 0; padding: 0; outline: 0; font-family:"OpenSans";}
ul { margin: 0; padding: 0;}
fieldset { border: 0; margin: 0; outline: 0; padding: 0;}
textarea { resize: none;}
a { color: #000; text-decoration: none; outline: none; font-size: 14px; display: block;}
a.active{ color: #000}
hr { border: none;}
img{max-width: 100%}
input, button, textarea { outline:none; box-sizing: border-box;}
h1{font-size: 20px; margin: 7px 0; padding: 5px 0; font-family: "OpenSans-Extrabold"; color: #000; display: block; line-height: 20px}
h2{font-size: 18px; font-family: "OpenSans-Bold"; color: #000; margin: 0; display: block; line-height: 28px}
h3{font-size: 18px; font-family: "OpenSans"; color: #000; margin: 0; line-height: 100%}
.clearfix {overflow: auto;}
div, header, footer, figure, ul, li, a{box-sizing: border-box;}
strong{font-family: "OpenSans-Bold"}
small{font-size: 12px}
figure{margin: 0}

::-webkit-input-placeholder { color: #000; font-size: 16px} /*cbcbcb*/
:-moz-placeholder { color: #000; font-size: 16px}
::-moz-placeholder { color: #000; font-size: 16px}
:-ms-input-placeholder { color: #000; font-size: 16px}

/*
=================
==GENERAL TOOLS==
=================
*/

body {width: 100%; background: #fff; font-size: 100%; overflow-x: hidden;}

#main-container{margin: 0 auto; position: relative; width: 100%; float: left;     min-height: 75vh;}
.container { display: table; margin: auto; position: relative; width: 960px; clear: both}
.conteudo{width: 100%; float: left;}
.hide{display: none;}
.mg-top20{width: 100%; float: left; height: 20px}
.mg-top10{width: 100%; float: left; height: 10px}
.clear{width: 100%; float: left; clear: both; height: 1px}
.floatleft{float: left;}
.floatright{float: right;}
.col{width: 50%;}
.input{width: 100%; float: left;}
.input-col{width: 49%;}
.padding20{padding: 20px}
.placeholder{color: #444; font-size: 16px}
.center{margin: auto; display: table; clear: both;}
.captcha{width: 40%; padding: 3px 0}

/*
==============
==SITE TOOLS==
==============
*/

/*.body{background: url(../img/bg-body.jpg) top left no-repeat; background-color: #fff; background-size: 100%}*/
.body{background: url(../img/bg-body2.jpg) top left no-repeat; background-color: #fff; background-size: 100%}
.body-pag{background: url(../img/bg-body2.jpg) top left no-repeat; background-color: #fff; background-size: 100%}
.banner{border-radius: 8px; overflow: hidden;}
.cycle-slideshow{width: 100%; float: left;}
h1.tt{display: table; margin: auto; clear: both; text-align: center; padding: 10px 0; border-bottom: 1px solid #df0000}
.textcenter{text-align: center;}
.margin-top50{margin-top: 50px}


/*
==========
==HEADER==
==========
*/

header{width: 100%; float: left;}
	header .container{padding: 20px 0 0}
	header .logo{width: 30%; float: left;}
		header .logo a{width: 100%; float: left; text-align: center;}
	header .menu{width: 70%; float: left; padding-left: 100px; padding-top: 10px}
		header .menu ul{width: 100%; float: left; margin-top: 10px}
			header .menu ul li{display: inline-block; float: left; list-style: none; margin: 0 10px 0 0}	
				header .menu ul li a{width: 100%; float: left; text-align: center; padding: 7px;}
				header .menu ul li:hover span{opacity: 1; width: 100%}
				header .menu ul li span{width: 10%; float: left; height: 2px; background: #ec2229; opacity: 0; transition: all .5s ease-in-out}
.separador-menu{width: 850px; right: 0; height: 1px; background: #ddd; position: absolute; margin-top: -65px}
/*
==========
==INDEX==
==========
*/

.index{text-align: center; padding-top: 20px}
.box-oferta{width: 24%; float: left; margin: 0 4px; border: 1px solid #ccc; padding: 20px 10px; border-radius: 8px}
.box-oferta:hover{border: 1px solid #ff8d05}
.box-oferta:hover figure img{transform:scale(1.05,1.05);}
	.box-oferta a{width: 100%; float: left;}
	.box-oferta p{width: 100%; float: left; text-align: center;}
	.box-oferta figure{width: 100%; height: 150px; overflow: hidden; float: left; text-align: center;}
		.box-oferta figure img{transition: all .5s ease-in-out}
.cycle-pager span{font-size: 40px; color: #fff; text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); cursor: pointer;}		
.cycle-pager-active{font-size: 40px !important; color: #df0000 !important}

#next, #prev{width: 50px; height: 50px; position: absolute; z-index: 101; background: url(../img/nextprev.png); margin-top: 140px; cursor: pointer;}
#next{right: 15px}
	#next:hover{background-position: -50px 0}
#prev{left: 15px; background-position: -150px 0}
	#prev:hover{background-position: -100px 0}

/*ASIDE*/
.aside{padding-top: 20px; background: #f5f5f5; text-align: center;}
	.aside h1 span{font-size: 14px}
.carousel{width: 81%; margin: auto; display: table; clear: both; padding: 20px 0}
	.box-carousel{width: 250px; float: left; opacity: 0.8; margin: 0 3px; position: relative; transition: all .5s ease-in-out}
		.box-carousel img{border-radius: 8px}
.box-ativo{transform: scale(1.2,1.2); z-index: 100; opacity: 1 !important}

#pop-cartao{width: 800px; display: none; padding: 50px; float: left; background: url(../img/supermarket.jpg) top center no-repeat;}	
	#pop-cartao .conteudo{background: rgba(255,255,255,0.7); padding: 20px}
	#pop-cartao h1{display: table; clear: both; padding: 7px 0; margin: auto; text-align: center; border-top: 3px solid #df0000}
	#pop-cartao p:before{content: "✔"; color: #df0000; font-size: 25px}
	#pop-cartao h2{margin: 5px 0; text-align: center;}
	#pop-cartao a{display: table; clear: both; margin: auto; text-align: center; padding: 5px 30px; background: #df0000; color: #fff; border: 1px solid #df0000;}
		#pop-cartao a:hover{background: none; color: #000}
.ctao{position: absolute;top: 250px; right: 0}
.fancybox-inner{overflow: hidden !important;}
/*
==========
==FOOTER==
==========
*/

footer{width: 100%; float: left; background: #f5f5f5; margin-top:10vh;}
.cadastro .col{padding: 20px 20px 40px; width: 320px;}
	.cadastro .col h1{margin: 0; padding: 0}
	.cadastro .col img{margin-top: 20px}
.cadastro form{width: 100%; float: left; padding: 20px 0 0}
	.cadastro form .input{width: 80%; float: left;}
	.cadastro form .input .input-col{width: 100%; float: left; margin-bottom: 5px;}
	.cadastro form input{width: 100%; float: left; border:1px solid #ddd; background: #fff; border-radius: 30px; height: 35px; padding: 10px}
		.cadastro form input:hover, .cadastro form input:focus{border:1px solid #2898ea;}
	.cadastro form button{width: 50px; background: #062347; color: #fff; height: 35px; border: 0; border-radius: 50px; margin-left: 5px; transition: all .5s ease-in-out; margin-top: 40px;}
		.cadastro form button:hover{background: #2898ea;}
.cadastro .whatsApp a{display: block; transition: 0.5s;}
.cadastro .whatsApp a:hover{transform: scale(1.1);}
	.cadastro .whatsApp a img{display: block; margin: 10px auto;}
	.cadastro .whatsApp a span{display: block; text-align: center; font-size: 18px;}
.footer-bottom{background: #fff}	
	.footer-bottom .logo-footer{width: 100%; float: left; height: 104px; background: url(../img/logo-almeida.png) top center no-repeat; background-position: center -6px; margin-top: -40px}	
.col-50{width: 100%;}
.floatleft{float: left;}
.floatright{float: right;}

.footer-col{    width: 43%;
    float: left;
    margin: 0;
    padding: 20px 0 20px 110px;}
	.footer-col a{font-family: "OpenSans-Bold"; font-size: 16px}
	.footer-col p a{font-family: "OpenSans"; font-size: 14px}
		.footer-col p a:hover{text-decoration: underline;}
.footer-col .bg-caixa{
    background-color: hsl(240deg 7% 97% / 34%);
    display: flex;
    flex-direction: column;
    padding: 50px;
    border-radius: 40px;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%);
    gap: 20px;
}
.footer-col .bg-caixa .btn{
    width: 100%;
    background: #062347;
    color: #fff;
    margin: auto;
    display: table;
    clear: both;
    border: 0;
    padding: 10px 20px;
    border-radius: 30px;
    transition: all .3s ease-in-out;
    margin-top: 25px;
    text-align: center;
}
.footer-col .bg-caixa .btn:hover{
background: #2898ea;
}
.park{margin-left: -22px;}	
.park:before{content:url('../img/parking.png'); margin-right: 3px; margin-top: 3px; display: block; float: left;}
.rodape{border-top: 1px solid #eee; padding: 20px 0; text-align: center;; background: #fff}
	.rodape p{width: 71%; margin: auto; display: table; clear: both}
	.rodape p a{float: right;}
		.rodape p a:hover{text-decoration: underline; color: #f7a600}
.facebook{width: 43%; float: right; margin-right: 15px}
.facebook:before{content:url('../img/social.png'); margin-right: 3px; margin-top: 2px; display: block; float: left;}
.mail{width: 52%; float: left;}
.mail:before{content:url('../img/social2.png'); margin-right: 3px; margin-top: 2px; display: block; float: left;}	

.img-loja{width: 230px; position: absolute; display: none; padding: 10px; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); border-radius: 10px; margin-top: -200px}
.img-loja span{width: 230px; position: absolute; height: 20px; display: block; background: url(../img/triangle.png) top center no-repeat; margin: 8px 0 0 -10px}

/*
====================
==TRABALHE CONOSCO==
======CONTATO=======
====================
*/

.trabalhe{padding: 50px 0 0; min-height: 500px; text-align: center;}
	.trabalhe form{width: 70%; margin: auto; display: table; clear: both; padding: 30px 0}
		.trabalhe form p{text-align: left;}
		.trabalhe form input{width: 100%; height: 35px; background: #fff; border:1px solid #ddd; float: left; padding: 0 10px; border-radius: 30px; margin: 3px 0; outline: none;}
			.trabalhe form input:hover, .trabalhe form input:focus{border: 1px solid #222;}
		.trabalhe form select{width: 100%; height: 35px; background: #fff; border:1px solid #ddd; float: left; padding: 0 10px; border-radius: 30px; margin: 3px 0; outline: none;}
		.trabalhe form textarea{width: 100%; height: 100px; background: #fff; border:1px solid #ddd; float: left; padding: 10px; border-radius: 30px; margin: 3px 0; outline: none;}
						.trabalhe form textarea:hover, .trabalhe form textarea:focus{border: 1px solid #222;}
		.trabalhe form button{width: 30%; background: #062347; color: #fff; margin: auto; display: table; clear: both; border:0; padding: 10px 0; border-radius: 30px; transition: all .5s ease-in-out}
			.trabalhe form button:hover{width: 33%; background: #2898ea}
#upload { position:relative; margin-top: -38px; opacity: 0}
.ui-selectmenu-menu .ui-menu {height: 65px !important}
/*
===============
==LOCALIZAÇÃO==
===============
*/			

.localizacao{background: #ccc; min-height: 500px; margin: 20px 0 0;}
	#map{height: 500px; width: 100%; float: left;}
.box-loc{width: 320px; padding: 10px; position: absolute; left: 20%; z-index: 100; background: #fff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); transition: all .5s ease-in-out}
	.box-loc h2{margin: 0}
	.box-loc p, .box-loc a{line-height: 18px}
	.box-loc a:hover{text-decoration: underline; color: #df0000}

#loc1{margin-top: 80px;}
#loc2{margin-top: 270px}
#loc3{margin-top: 327px}

.link-map{width: 50px; height: 50px; position: absolute;}
#link-map1{margin-left: 780px; margin-top: 92px;}
#link-map2{margin-left: 1000px; margin-top: 125px;}
#link-map3{margin-left: 935px; margin-top: 367px;}
.loc-ativo{background: #df0000}
	.loc-ativo h2, .loc-ativo a, .loc-ativo p{color: #fff}
	.loc-ativo a:hover{color: #fff; text-decoration: underline;}

/*
===========
==EMPRESA==
===========
*/

.empresa{padding-top: 40px; min-height: 600px}
.box-empresa{width: 100%; float: left; background: url(../img/empresa-bg.png) top right no-repeat; padding: 70px 0 0; min-height: 340px}
	.box-empresa .col{padding: 20px}
	.box-empresa .col h3{padding: 10px 0}
.empresa-col{width: 30%; height: 253px; float: left; margin: 0 15px; background: #fff; box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.); padding: 50px 15px; border-radius: 10px; text-align: center;}
	.empresa-col span{position: absolute; width: 288px; margin: -72px 0 0 -144px;}

/*
=========
==LOJAS==
=========
*/

.lojas{padding-top: 40px; min-height: 600px}
.box-lojas{width: 100%; float: left; text-align: center;padding: 20px 0}
	.box-lojas h3{padding: 10px 0}
.col-lojas{width: 50%; float: left; margin: 0 0px; text-align: center;}	
	.col-lojas h2{display: table; clear: both; margin: auto; background: #062347; padding: 7px 20px; color: #fff; text-align: center; border-radius: 30px}