@import "font-awesome/css/font-awesome.min.css";
@import "featherlight.min.css";

/*! HTML5 Boilerplate v4.3.0 - INICIO */
html,button,input,select,textarea{color:#222}html{font-size:1em;line-height:1.4}::-moz-selection,::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,img,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}



/* ==========================================================================
   Site
   ========================================================================== */

body { font: 100% Verdana, Geneva, sans-serif; background: #eef3f6; font-size: 14px; line-height: 1.6em; color: #4d4d4d; }

a { color: inherit; outline: none !important; text-decoration: none; }
a:hover { color: inherit; text-decoration: none; }
a:active,
a:focus { color: inherit; text-decoration: none; }
a, button, input { outline: none !important; }

a, a *, button, input, div, span { transition: color 0.2s, background-color 0.2s, opacity 0.2s, border-color 0.2s; }

ul, li { display: block; list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; display: block; font-weight: normal; }
p { margin: 0 0 1.5em 0; }
p:last-child { margin-bottom: 0 !important; }

/* *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* usar se não incluir o bootstrap */

.container { position: relative; }

.form-group { margin: 0 0 10px 0; }
.form-control { border: solid 1px #ccc; padding: 5px 10px; line-height: 20px; font-size: 15px; width: 100%; }
textarea.form-control { resize: none; }


#wrapper { position: relative; width: 100%; max-width: 2600px; margin: auto; overflow: hidden; }



#header { background: #304A7F; }

#logos { float: left; overflow: hidden; padding: 10px 0 25px 0; }

#logo { float: left; }
#logo a { display: block; }
#logo img { display: block; }

#logo2 { float: left; line-height: 27px; border-left: solid 1px #99aed3; margin: 27px 0 0 16px; padding: 0 0 0 16px; white-space: nowrap; font-size: 14px; color: #C4D8F7; }


#hcontato { background: #26395F; position: relative; color: #fff; height: 100%; display: block; position: absolute; right: 0; top: 0; padding: 0 15px 0 40px; font-size: 13px; line-height: 1.3em; text-align: center; }
#hcontato:after { position: absolute; height: 100%; width: 2000px; right: -2000px; background: inherit; content: ""; display: block; top: 0; }
#hcontato .base { display: table; width: 100%; height: 100%; vertical-align: middle; }
#hcontato .base .base { display: table-cell; }
#hcontato h5 { text-transform: uppercase; font-weight: bold; color: #F39D63; font-size: 1.077em; line-height: 1.3em; margin: 0 0 0.1em 0; }
#hcontato a:hover { color: #C4D8F7; }


#menu { background: #fff; font-size: 16px; color: #314B7F; text-transform: uppercase; line-height: 1.438em; padding: 1.125em 0; }
#menu ul { display: block; text-align: center; }
#menu ul li { display: inline-block; position: relative; }
#menu ul li:after { display: block; content: ""; position: absolute; right: -0.5px; top: 10%; height: 80%; width: 1px; background: #314B7F; }
#menu ul li:last-child:after { display: none; }
#menu ul li a { display: block; padding: 0 1.4em; }
#menu ul li a:hover,
#menu ul li a:active { color: #488EFE; }



#animacao { position: relative; width: 100%; height: 470px; z-index: 300; box-shadow: 0 5px 5px rgba(0,0,0,0.3); }
#animacao .slides { position: relative; width: 100%; height: inherit; overflow: hidden; }
#animacao .slides .slide { width: 100%; height: inherit; background-size: cover; background-position: center center; background-repeat: no-repeat; }
#animacao .slides .slide a { display: block; width: 100%; height: 100%; position: relative; }
#animacao .slides .slide img { display: block; width: 100%; height: 100%; position: relative; opacity: 0; }
#animacao .setas { position: absolute; left: 0; top: 50%; height: 0; overflow: visible; z-index: 400; width: 100%; }
#animacao .setas .seta { color: #fff; position: absolute; width: 35px; height: 35px; line-height: 35px; background: #314B7F; text-align: center; top: -18px; cursor: pointer; border-radius: 9px; font-size: 24px; }
#animacao .setas .seta:hover { background: #4B70BA; }
#animacao .setas .seta:active .fa { font-size: 0.9em; }
#animacao .setas .prev { left: 1.5vw; }
#animacao .setas .next { right: 1.5vw; }



#home-banner { height: 177px; background-size: auto 100%; background-position: center center; background-repeat: no-repeat; position: relative; z-index: 2; }
#home-banner img { position: relative; display: block; width: 100%; height: 100%; opacity: 0; }


#main { padding: 35px 0 80px 0; min-height: 300px; }

.titulo { color: #133361; font-size: 20px; text-transform: uppercase; line-height: 1.3em; font-weight: normal; display: block; text-align: center; position: relative; display: block; margin: 0 0 1.25em 0; }
.titulo:after { position: absolute; content: ""; display: block; width: 100%; height: 1px; z-index: 1; left: 0; top: 50%; background: #9ea0a2; }
.titulo span { display: inline-block; max-width: 80%; padding: 0 1.22em; background: #eef3f6; z-index: 2; position: relative; }

.titulo.dl { color: #599BFF; }
.titulo.dl strong { color: #26395F; }


.produtos { }

.produto { width: 24%; float: left; position: relative; margin: 0 1.333% 1.333% 0; }
.produto a { display: block; position: relative; overflow: hidden; width: 100%; height: 100%; padding: 12px; border: solid 1px #e5e5e5; border-radius: 10px; background: #fff; font-size: 16px; line-height: 1.3em; color: #133361; transition: all 0.2s; }
@media (min-width: 768px) { .produto a:hover { xbox-shadow: 1px 2px 4px rgba(0,0,0,0.2); transform: scale(1.05); } }
.produto .codigo { position: absolute; z-index: 10; right: 9px; top: 9px; font-size: 9px; line-height: 1.1em; }
.produto .foto { position: relative; width: 100%; padding: 100% 0 0 0; z-index: 1; border-bottom: solid 1px #e5e5e5; margin: 0 0 0.3em 0; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(../img/produto_loading.gif); }
.produto .foto img { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; opacity: 0; }
.produto .nome { text-align: center; }
.produto .info { text-align: center; font-size: 0.875em; line-height: 1.3em; color: #5A9BFF; }


#home-produtos { }
#home-produtos .produtos { margin-bottom: 42px; }


.x4 .produto:nth-child(4n) { margin-right: 0; }
.x4 .produto:nth-child(4n+1) { clear: both; }


#banner-produtos { display: block; position: relative; margin: 0 auto 32px auto; height: 130px; width: 100%; max-width: 1920px; background-size: auto 100%; background-position: center; }
#banner-produtos > a { display: block; position: absolute; width: 100%; height: 100%; }


#produtos { }
#produtos .produtos { float: left; width: 75%; min-height: 100px; }
#produtos .produto { width: 31.333%; margin: 0 2% 2% 0; }

#filtros { float: right; width: 24%; }
#filtro { background: #fff; position: relative; z-index: 300; }
#filtros h2 { text-align: center; text-transform: uppercase; font-weight: normal; padding: 0.714em; line-height: 1.425em; font-size: inherit; color: #fff; background: #314B7F; }
#filtros h2 .icon { display: none; }
#filtros .main { display: block; border: solid 1px #e5e5e5; padding: 22px; }
#filtros .box { border-top: solid 1px #e5e5e5; padding: 14px 0; }
#filtros .fbox { border: solid 1px #bcbcbc; border-radius: 10px; overflow: hidden; }
#filtros .fbox h3 { text-align: center; font-weight: normal; padding: 0.4em; line-height: 1.425em; font-size: inherit; color: #fff; background: #314B7F; border-bottom: solid 1px #bcbcbc; }
#filtros .fbox ul { padding: 15px; }
#filtros .fbox ul li { display: block; padding: 0.2em 0; }
#filtros .fbox ul li a { display: block; line-height: 1.3em; }
#filtros .fbox ul li a:hover { color: #5A9BFF; }
#filtros .fbox ul li a .on { display: none; }
#filtros .fbox ul li a.active .on { display: inline-block; }
#filtros .fbox ul li a.active .off { display: none; }
#filtros .select { display: block; position: relative; height: 33px; margin: 0; }
#filtros .select + .select { margin-top: 12px; }
#filtros .select .mask { line-height: 33px; height: inherit; background: #314B7F; position: absolute; left: 0; top: 0; width: 100%; border-radius: 10px; padding: 0 40px 0 20px; text-align: center; color: #fff; white-space: nowrap; z-index: 1; }
#filtros .select .mask .label { line-height: inherit; width: 100%; }
#filtros .select .mask .icon { position: absolute; right: 0; top: 0; font-size: 20px; text-align: center; width: 40px; }
#filtros .select select { position: relative; width: 100%; height: 33px; line-height: 33px; opacity: 0; z-index: 2; cursor: pointer; }



#produto { }
#produto h3 { font-size: 12px; line-height: 20px; color: #757575; text-transform: uppercase; font-weight: normal; position: relative; z-index: 1; }
#produto .dbox { background: #fff; border: solid 1px #e5e5e5; border-radius: 12px; overflow: hidden; padding: 30px 15px; display: table; width: 100%; }
#produto .header { position: relative; height: 20px; margin: 0 0 8px 0; text-align: center; }
#produto .header .voltar { position: absolute; left: 10px; top: 0; display: inline-block; line-height: 20px; color: #fff; background: #133361; font-size: 12px; color: #EDF2F5; text-transform: uppercase; padding: 0 8px; z-index: 2; }
#produto .header .voltar:after { content: ""; display: block; position: absolute; left: -10px; top: 0; background: none; border-top: solid 10px transparent; border-bottom: solid 10px transparent; border-right: solid 10px #133361; transition: border-color 0.2s; }
#produto .header .voltar:hover { background: #304A7F; }
#produto .header .voltar:hover:after { border-right-color: #304A7F; }

#produto .produto-base { margin: 0 0 35px 0; }

#detalhes { float: left; width: 73.5%; }
#detalhes .dbox { display: table; width: 100%; }
#detalhes .dbox .foto { display: table-cell; width: 44%; text-align: center; vertical-align: middle; }
#detalhes .dbox .foto img { display: inline-block; max-width: 100%; }
#detalhes .dbox .desc { display: table-cell; border-left: solid 1px #e5e5e5; vertical-align: middle; font-size: 15px; color: #133361; line-height: 1.3em; padding: 0 0 0 40px; }
#detalhes .dbox .desc h1 { color: inherit; font-weight: bold; font-size: 2.1em; line-height: 1.2em; margin: 0 0 0.5em 0; }
#detalhes .dbox .desc .volume { font-size: 1.5em; line-height: 1.3em; margin: 0 0 0.6em; }
#detalhes .dbox .desc .info { margin: 0 0 1em 0; }
#detalhes .dbox .desc .codigo { font-weight: bold;	 }

#tambem { float: right; width: 25%; }
#tambem .dbox { padding: 18px 15px; }
#tambem .tproduto { border-bottom: solid 1px #e5e5e5; }
#tambem .tproduto:last-child { border-bottom: none; }
#tambem .tproduto a { display: table; width: 100%; overflow: hidden; height: 116px; color: #133361; }
#tambem .tproduto a:hover { color: #478EFE; }
#tambem .tproduto a .foto { display: table-cell; width: 50%; background-size: contain; background-position: center center; background-repeat: no-repeat; }
#tambem .tproduto a .foto img { display: none; }
#tambem .tproduto a .desc { display: table-cell; vertical-align: middle; font-size: 15px; line-height: 1.1em; }
#tambem .tproduto a .desc .volume { font-weight: bold; font-size: 0.9em; line-height: 1.4em; }





#sobre { text-align: center; }
#sobre p { display: block; margin-left: auto; margin-right: auto; max-width: 750px; }
#sobre p.foto { margin-bottom: 1.6em; }
#sobre p.foto img { display: block; margin: auto; max-width: 100%; }


#contato { text-align: center;  }
#contato p a:hover { color: #304a7f; }

#mapa { padding: 15px 0 25px 0; position: relative; }
#mapa iframe { width: 100%; height: 620px; max-height: 92vh; border: none; position: relative; z-index: 1; }
#mapa .cover { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }






#footer { background: #25395F; text-align: center; font-size: 12px; line-height: 1.4em; color: #fff; padding: 4.6em 0 5em 0; }
#flogo { display: block; text-align: center; margin: 0 0 0.5em 0; }
#flogo a { display: inline-block; max-width: 100%; }
#flogo img { display: block; margin: auto; max-width: 100%; }



#loading { position: fixed; left: 0; top: 0; z-index: 5000; width: 100%; height: 100%; width: 100vw; height: 100vh; background: url(../img/loading.gif) center center no-repeat rgba(255,255,255,0.95); }



/* ==========================================================================
   Resposivo
   ========================================================================== */

/* 1200px+ */
@media (min-width: 1200px) {
	#menu ul li a { padding: 0 2em; font-size: 1.2em; }
}


/* até 1199px */
@media (max-width: 1199px) {
}

/* até 991px */
@media (max-width: 991px) {
	.titulo { font-size: 18px; }

	#animacao { height: 420px; }

	#home-banner { height: 150px; }
	#banner-produtos { height: 110px; }

	.produto a { font-size: 14px; }
	#filtros { font-size: 12px; }
	#filtros .main { padding: 10px; }
	#filtros .fbox ul { padding: 10px; }
	#filtros .select .mask { padding: 0 25px 0 10px; }
	#filtros .select .mask .icon { font-size: inherit; width: 25px; }

	#detalhes { margin-bottom: 30px; }
	#detalhes,
	#tambem { width: 100%; float: none; }
	#tambem .tproduto { float: left; width: 33%; border-bottom-width: 0; border-right: solid 1px #e5e5e5; padding-right: 5px; }
	#tambem .tproduto:last-child { border-right: none; padding-right: 0;  }
	#tambem .tproduto a .desc { font-size: 14px; }
}


@media (min-width: 768px) {
	#filtros .main { display: block !important; }
}
/* até 767px */
@media (max-width: 767px) {
	#logos { padding: 8px 0 12px 0; }
	#logo { float: none; }
	#logo2 { float: none; margin: 0; padding: 0; border: none; line-height: 1.3em; font-size: 13px; }
	#hcontato { font-size: 11px; padding: 0 10px }
	#menu ul { display: table; width: 100%; }
	#menu ul li { display: table-cell; }
	#menu ul li:after { opacity: 0.2; }
	#menu ul li a { padding: 0 3px; }

	#animacao { height: 310px; }

	#home-banner { height: 100px; }
	#banner-produtos { height: 90px; }
	
	#filtros { clear: none; display: block; width: 100%; margin: 0 0 30px 0; }
	#filtros h2 { cursor: pointer; padding-right: 25px; padding-left: 10px; position: relative; }
	#filtros h2 .icon { display: block; position: absolute; right: 0; top: 0; width: 25px; text-align: center; padding-top: inherit; padding-bottom: inherit; line-height: inherit; }
	#filtros h2 .icon .aberto { display: none; }
	#filtros .main { display: none; }
	#produtos .produtos { float: none; clear: both; width: 100%; display: block; }
	#tambem .tproduto a .desc { font-size: 12px; }
	#detalhes .dbox .desc { font-size: 14px; }
	#detalhes .dbox .desc h1 { font-size: 1.5em; }

	.x4 .produto { width: 49%; margin: 0 2% 2% 0; }
	.x4 .produto:nth-child(2n) { margin-right: 0; }
	.x4 .produto:nth-child(2n+1) { clear: both; }

}

/* até 550px */
@media (max-width: 550px) {
	#animacao { height: 250px; }
	#banner-produtos { height: 70px; }
	#produtos .produto { width: 48%; margin: 0 2% 2% 0; }
	#produtos .produto:nth-child(3n) { margin-right: 2%; }
	#produtos .produto:nth-child(2n) { margin-right: 0; }
	#tambem .tproduto { float: none; width: 100%; border-bottom-width: 1px; border-right-width: 0; padding: 0; }
	#detalhes .dbox .foto,
	#detalhes .dbox .desc { display: block; width: 100%; }
	#detalhes .dbox .desc { border: none; padding: 15px 0 0 0; }
}

/* até 450px */
@media (max-width: 450px) {
	#header .container { padding: 0; }
	#logos { display: block; float: none; width: 100%; }
	#logo { text-align: center; }
	#logo a { display: inline-block; max-width: 100%; }
	#logo img { max-width: 90%; }
	#logo2 { text-align: center; font-size: 11px; opacity: 0.7; display: none; }
	#hcontato { position: relative; right: auto; top: auto; width: 100%; line-height: 1.5em; padding: 0.5em; }
	#hcontato h5 { display: none; }
	#menu { font-size: 14px; letter-spacing: -0.05em; }
	#menu .container { padding: 0 5px; }
	
	.titulo:after { display: none; }
	.titulo span { background: none; padding: 0; }
	
	#home-banner { height: auto; background: none; }
	#home-banner img { width: 100%; opacity: 1; height: auto; }
	#banner-produtos { height: 60px; }

	#produtos .produto { width: 100%; float: none; margin: 0 0 10px 0; }
	#detalhes h3 { text-align: right; }

	.x4 .produto { width: 100%; margin: 0 0 12px 0; }
}






/*! HTML5 Boilerplate v4.3.0 - FINAL */
.ir{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.ir:before{content:"";display:block;width:0;height:150%}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}