/*
ELIERRE - estilo.css
Folha de Estilo Principal
Por Bruno
*/

/* ------- TAGS ------- */

body {font-family:'Open Sans', sans-serif;	font-size:62.5%; color:#555555; margin:0; text-align:left; text-rendering:optimizelegibility;}

h1 {color:#d40101; font-size:2.6em; font-weight:700; margin:1em 0 0.5em; padding:0;}
h2 {color:#2f6a9b; font-size:1.8em; font-weight:700; margin:1em 0 0.5em; padding:0;}
h2 a {color:#2f6a9b; text-decoration: none}
h3 {color:#de5252; font-size:1.3em; font-weight:700; margin:1em 0 0.5em; padding:0; text-transform:uppercase;}

a {color:#999999; transition:.3s ease 0s; text-decoration:underline;}a:hover {color:#2f6a9b; text-decoration:none;}

a img {border:none;}

form {margin:0;}

div.int {width:950px; margin:0 auto;}
div.int:after, div.int:before {clear:both;}

input, textarea, select {-webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; background:#e4e4e4; border:#9cabb7 1px solid; padding:0.5em 0.7em; color:#000; font-family:'Open Sans', sans-serif; transition:.3s ease 0s;}
input:focus, textarea:focus, select:focus {background:#efedee;}

i, cite, em, var, address, dfn {font-style:italic;}

strong, b {font-weight:700;}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 16px;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
  -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: #b8b8b8;
  -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
  height: 5px;
  background-color: #b8b8b8;
  -webkit-border-radius: 3px;
}

*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

/* -------- IDS -------- */

#topo {background:#cf2727; font-size:1.5em; padding-bottom:1em;}
#topo .direita {background:url(../img/icone-whats.png) right 20% no-repeat; padding-right:2em; text-align:right; color:#f2c8c8; margin-top:3.3em;}
#topo .direita p {margin:0; padding:0; font-size:1.53333333333em; color:#FFF;}
#topo .direita p span {font-size:0.69565217391em;}
#topo a {color: #f2c8c8; text-decoration: none}
#topo a:hover {color:#fff;}

#rodape {overflow:hidden; background:#c93333; color:#f6adad; font-size:1.3em; line-height: 1.6; padding:1.5em 0;}
#rodape .int > p {margin:0; padding:0;}
#rodape .esquerda a {color:#f6adad; text-decoration: none;}
#rodape .direita {color:#8f0303; clear:both;}
#rodape .direita a {color:#eb6161;}

/* ------- CLASSES ------- */

.logo {width:100%; max-width:390px;}

.menu {width:100%; font-size:1.4em; background: #1872bd; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4NzJiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNjYwYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top,  #1872bd 0%, #0660ab 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1872bd), color-stop(100%,#0660ab)); background: -webkit-linear-gradient(top,  #1872bd 0%,#0660ab 100%); background: -o-linear-gradient(top,  #1872bd 0%,#0660ab 100%); background: -ms-linear-gradient(top,  #1872bd 0%,#0660ab 100%); background: linear-gradient(to bottom,  #1872bd 0%,#0660ab 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1872bd', endColorstr='#0660ab',GradientType=0 ); -webkit-box-shadow:0px 3px 7px 0px rgba(84, 110, 131, 1); -moz-box-shadow:0px 3px 7px 0px rgba(84, 110, 131, 1); box-shadow:0px 3px 7px 0px rgba(84, 110, 131, 1); margin-top:-1.1em; position:relative;}
.menu ul, .menu li {margin:0; padding:0; display:inline-block; font-style:normal;}
.menu li {float:left;}
.menu a {line-height:3.4em; padding:1em 1.5em; background:transparent; color:#FFF; border-right:#3681c0 2px solid; text-decoration:none;}
.menu a:hover {background:#c93333;}

.lateral {width:21.308411215%; padding-top:3.5em;padding-bottom: 2em;}
.lateral h1 {margin-left:0.3em;}
.listagem, .listagem li {margin:0; padding:0; list-style:none;}
.listagem {font-size:1.2em;}
.listagem a {color:#383838; background:#FFF; display:block; padding:0.5em 0.7em 0.5em 1.5em; text-decoration:none;}
.listagem a:hover {color:#FFF; background:#136db8;}
.listagem a:before {content:"• ";}

.conteudo {width:78.691588785%; border-left:#f2f2f2 16px solid; padding:2.5em 0 2% 3.3%; font-size:1.4em;}
.conteudo h1 {font-size:1.85714285714em;}
.conteudo h2 {font-size:1.28571428571em;}
.conteudo h3 {font-size:1.14285714286em;}

.jquery {position:relative; overflow:hidden;}
.jquery img {width:100%; max-width:791px;}

.produto {display:inline-block; vertical-align:top; text-align:center; width:24.6%; margin-bottom:2em;}
.produto img {border:#f1f3f3 3px solid; transition:.3s ease 0s; width:100%; max-width:165px;}.produto img:hover {border:#cbe7ff 3px solid;}
.produto .tit {padding:0 2em; font-size:1.18181818182em; margin:1em 0 0.5em;}
.produto .tit a {color:#2f6a9b; text-decoration:none;}.produto .tit a:hover {color:#d40101;}
.produto .envolve-botao {text-align:center;}

.fotos {width:46.270543615%;}
.fotos > div {margin:0 0 1em; position:relative; transition:.3s ease 0s;}
.fotos div img, .fotos div div {position:absolute; border:#f1f3f3 3px solid; transition:.7s ease 0s;}.fotos div div:hover, .fotos img:hover {border:#cbe7ff 3px solid;}
.fotos div img {z-index:1;}
.fotos div div {z-index:2; opacity:0; width:100%; height:100%; background:#323232; padding:0.5em;}.fotos div:hover div {opacity:0.8;}
.fotos a {display:block; height:100%; color:#FFF; text-decoration:none;}
.fotos .foto-maior, .fotos .foto-maior img {width:100%; max-width:360px;}
.fotos .foto-maior {min-height:301px;}
.fotos .foto-menor {width:47.5%; max-width:168px; display:inline-block; margin:0 0.25em 1em 0.25em; min-height:141px;}
.fotos .foto-menor img {width:100%;}

.descricao {width:50%; margin-left:3.729456385%;}
.descricao h2 {margin:0;}
.descricao h3 {margin:2em 0 0;}
.descricao h3 + p {margin-top:0;}
.descricao .envolve-botao {clear:none; text-align:center; text-transform:uppercase; font-size:1.81818181818em;}
.descricao .botao {display:block; margin:0; padding:0;}
.descricao .botao a {display:block; font-weight:400; background:#de5252; color:#f3cbcb;}.descricao .botao a:hover {background:#136db8; color:#f2f2f2;}

.paginacao {text-align:center; margin-top:1em;}
.paginacao .selecionado {font-weight:700;}
.noticia_foto {float:right; margin:0 0 16px 16px; border:1px solid #aeaeae;}

.container {overflow:hidden;}

.esquerda {float:left;}
.direita {float:right;}

.envolve-botao {clear:both; overflow:hidden; text-align:right; margin:1em 0; text-transform:capitalize;}
.envolve-botao * {margin:0; padding:0;}
.botao {display:inline-block; margin:0; padding:0;}
.botao a, input.botao {line-height:2em; padding:0.5em 1em; text-decoration:none;}
.botao a:hover, input.botao:hover {cursor:pointer;}
.botao a {background:#c7c7c7; color:#FFF; font-weight:700;}.botao a:hover {background:#f2f2f2; color:#136db8;}
input.botao {background:#136db8; color:#FFF; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border:none;}input.botao:hover {background:#DFF1FF; color:#000;}

.gal {width:33%; float:left; text-align:center; margin-bottom:2em; font-size:1.5em;}
.gal img {-webkit-border-radius: 50px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius: 50px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright:10px; border-radius:50px; border-top-left-radius:10px; border-bottom-right-radius:10px; border:#6a92bb 1px solid;}

.form-horizontal {width:75%; margin:0 auto;}
.form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {width:100%;}
.form-horizontal textarea {height:60px;}
.tit-form {font-size:1.07142857143em; text-align: center; margin: 1em 0;}
.form-horizontal .control-group {margin-bottom: 1.5em;}
.form-horizontal .control-group:before, .form-horizontal .control-group:after {display: table; line-height: 0; content: "";}
.form-horizontal .control-label {display:block; padding: 6px 0; color:#363636; cursor:pointer; transition:.3s ease 0s;}.form-horizontal .control-label:hover{color:#136db8;}
.form-horizontal .control-right {text-align:right;}
.form-horizontal .control-right input {width:auto;}

@media screen and (min-width:1100px) {
	div.int {width:1070px;}
	.fotos > a:nth-of-type(2n+2) {margin-left:5.6%;}
	div.telefonem, div.whatsm {display: none;}
}

@media (min-width: 768px) and (max-width: 960px) {
	div.int {width: 724px;}
	.menu a {line-height:3.5em;}
	.listagem a {padding:0.7em 0.7em 0.7em 1.5em;}
	.produto {width:32.6%;}
	.fotos .foto-maior {min-height:205px;}
	.fotos .foto-menor {min-height:98px; margin:0 0.14em 1em 0.14em;}
	div.telefonem, div.whatsm {display: none;}
}

@media (max-width: 767px) {
	div.int {width: auto; padding: 0 10px; box-sizing: border-box;}
	.lateral h1 {font-size:1.8em;}
	.listagem a {padding:0.7em 0.7em 0.7em 1.5em;}
	.produto {width:48.6%;}
	.produto .tit {padding:0 0.5em;}
	.fotos {width:100%;}
	.descricao {width:100%; margin:3em 0 0;}
	.form-horizontal {width:100%;}
	.form-horizontal input, .form-horizontal textarea {width: 99%;}
	h1 {font-size:2em;}
	#topo .esquerda {text-align:center; display: flex; align-items: center; justify-content: space-between;}
	#topo .esquerda .telefonem {flex: 3; font-size: 1.2em;}
	#topo .esquerda .logom {flex: 5;}
	#topo .esquerda .whatsm {flex: 1;}
	#topo .direita {display:none;}
	.menu ul {width:100%; text-align:center;}
	.menu li {display:block; float:none;}
	.menu a {line-height:3.4em; border-right:none; border-bottom:#3681c0 2px solid; display:block; padding:0 1.5em;}
	.lateral {display:none;}
	.conteudo {width:100%; border-left:none; padding:0;}
	.jquery {display:none;}
	#rodape .esquerda {float:none; text-align:center;}
	#rodape .int > p.direita {padding-top:1em;}
}

@media (max-width: 480px) {
	.listagem a {padding:0.7em;}
}

@media (max-width: 400px) {
	.produto {width:49%;}
}