/* ===== reset ===== */
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 400; box-sizing: border-box; font-family: 'Open Sans', sans-serif;}
body {background-color: #f5f1f1;}
a {text-decoration: none;}
ul {list-style: none;}
img{max-width: 100%;}
h1 {font-size: 1.0em; letter-spacing: 0px; color: #e11931; font-weight: 600; }
h2 {font-size: 0.8em; letter-spacing: 0px; color: #839097; font-weight: 400; }
p {font-size: 0.8em; letter-spacing: 0px; color: #000; font-weight: 400; }

/* ==== cabecalho ==== */
.cabecalho {width: 100%; float: left; padding: 3% 4%; background: #f5f1f1;}
.logo {width: 120px; height: 120px; float: left; background: url(../img/logo.png) center center/90px no-repeat; font-size: 0;}
.btn-menu{width: 60px; height: 120px; float: right; text-align: center; color: #e11931; border-radius: 0px; cursor: pointer; background: #f5f1f1; font-size: 1.5em;}
.btn-menu:hover{color: #839097;}

/* ==== menu ==== */
.menu {display: none; width: 100%; height: 100%; position: fixed; background: #839097; top: 0; left: 0; z-index: 100;}
.btn-close {font-size: 2.0em; color: #fff; float: right; cursor: pointer; margin: 2% 4% 2% 2%;}
.btn-close:hover{color: #e11931;}
.menu ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 2.5%;}
.menu li a {font-size: 1.5em; letter-spacing: 1px; color: #f5f1f1; padding: 1% 1.5%; font-weight: 600;}
.menu li a:hover {color: #e11931;}

/* ==== BANNER ROTATIVO ==== */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin-bottom: 15px;
  z-index: 1;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

/* ==== lightbox ==== */
.fundobox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0); z-index:100; display: none;}
.box {position: absolute; top: 20%; left: 30%; width: 500px; height: 500px; background-color: #ffffff; z-index:101; padding: 14px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; box-shadow: 2px 2px 2px #333333; -moz-box-shadow: 2px 2px 2px #333333; -webkit-box-shadow: 2px 2px 2px #333333; display: none;}
.closebox {float: right; margin-right: 10px; cursor: pointer;}

/* ==== CONTEUDO ==== */
.categoria {width: 100%; float: left; padding: 0% 4%;}

.servico {width: 100%; background: #fff; text-align: center; border-radius: 7px; margin-bottom: 3%;}
.inservico {padding: 15px;}
.servico img {border-radius: 7px 7px 0 0;}
.servico ul {margin:9px;}
.servico a div:hover {border-radius: 5px;
-webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
		filter: grayscale(100%);

-moz-opacity:0.5;
	 opacity:0.50;
	  filter: alpha(opacity=50);
}
.local {width: 100%; background: #fff; text-align: left; border-radius: 7px; margin-bottom: 3%;}
.inlocal {padding: 15px;}

.contato {width: 100%; background: #fff; text-align: left; border-radius: 7px; margin-bottom: 3%;}
.incontato {padding: 15px;}
.contato a {border-radius: 5px; background: #e11931; color: #fff; font-size: 0.7em; padding: 3px 5px; margin:10px 0px;}
.contato a:hover {background: #839097;}
.contato i {font-size: 1.5em; color: #e11931;}

.orcamento {width: 100%; background: #fff; text-align: left; border-radius: 7px; margin-bottom: 3%;}
.inorcamento {padding: 15px;}
.orcamento a {border-radius: 5px; background: #e11931; color: #fff; font-size: 0.7em; padding: 3px 5px; margin:10px 0px;}
.orcamento a:hover {background: #839097;}
.orcamento i {font-size: 1.5em; color: #e11931;}

.produto {width: 100%; background: #fff; text-align: left; border-radius: 7px; margin-bottom: 2%;}
.produto img{border-radius: 7px; background: #f5f1f1;}
.produto a{border-radius: 5px; background: #e11931; color: #fff; font-size: 0.7em; padding: 3px 5px; margin:10px 0px;}
.produto a:hover {background: #839097;}
.produto i{font-size: 1.5em; color: #e11931;}
.produto td{width:20px; height:20px; border-radius: 5px; border: 1px solid #839097;}
.inproduto {padding: 15px;}

.indescri {padding: 15px; background:#839097; border-radius: 7px;}
.indescri h1{color: #fff; font-weight: 700; line-height: 1.7em;}
.indescri p{color: #fff; line-height: 1.3em;}

.inpreco {padding: 15px; background:#e11931; border-radius: 7px;}
.inpreco h1{color: #fff; font-size: 2.5em; font-weight: 700; line-height: 1em;}
.inpreco p{color: #fff;}

.formulario {width: 100%;}
.formulario  input {border: 1px solid rgba(0,0,0,0.2); padding: 5px 5px; margin-top: 10px;}
.formulario  select {border: 1px solid rgba(0,0,0,0.2); padding: 5px 5px; margin-top: 10px;}
.formulario  textarea {border: 1px solid rgba(0,0,0,0.2); padding: 5px 5px; margin-top: 10px;}
.botao {cursor: pointer; border: 0px; border-radius: 5px; background: #e11931; color: #fff; font-size: 0.7em; padding: 3px 5px; margin:10px 0px;}
.botao:hover {background: #839097;}
.anexo {font-size: 0.87em;}
#msg {width: 100%; background: #839097; color: #fff; text-align: center; padding: 4px; border-radius: 5px;}

.trabalho {width: 100%; background: #f5f1f1; text-align: left; border-radius: 7px; margin-bottom: 3%;}
.trabalho img {border-radius: 7px;}

.indice {width: 100%; float: left; padding: 0; margin: 0px 0px 15px 0px ; padding: 0% 4%;}
.indice h1 {color: #839097;}
.bordado {width: 100%; background: #f5f1f1; text-align: left; border-radius: 7px; margin-bottom: 1%;}
.bordado img {border-radius: 7px;}

/* ==== rodape ==== */
.rodape {width: 100%; float: left; margin: 0px; padding: 3% 4%; text-align: center; background: #e11931;}
.social-icons a {font-size: 1.5em; color: rgba(255,255,255,0.7); margin-right: 3%;}
.social-icons a:last-child{margin-right: 0;}
.social-icons a:hover{color: rgb(255,255,255);}
.copyright {font-size: 0.80em; margin-top: 1%; margin-bottom: 2%; color: rgba(255,255,255,0.7);}

/* ==== MOBILE FIRST ==== */
/* Smartphone */
@media screen and (min-width: 0px){
.servico {width: 49%; float: left; margin-right: 2%;}
.servico:nth-child(2){margin-right: 0;}
.servico:nth-child(4){margin-right: 0;}

.produto {width: 49%; float: left; margin-right: 2%;}
.produto:nth-child(1){width: 100%; margin-right: 0;}
.produto:nth-child(3){margin-right: 0;}
.produto:nth-child(4){width: 100%; margin-right: 0;}

.bordado {width: 49%; float: left; margin-right: 2%;}
.bordado:nth-child(2){margin-right: 0;}
.bordado:nth-child(4){margin-right: 0;}
.bordado:nth-child(6){margin-right: 0;}
.bordado:nth-child(8){margin-right: 0;}
.bordado:nth-child(10){margin-right: 0;}
.bordado:nth-child(12){margin-right: 0;}
.bordado:nth-child(14){margin-right: 0;}
.bordado:nth-child(16){margin-right: 0;}
}

/* tablet */
@media screen and (min-width: 500px){
.bordado {width: 32%;}
.bordado:nth-child(2){margin-right: 2%;}
.bordado:nth-child(3){margin-right: 0;}
.bordado:nth-child(4){margin-right: 2%;}
.bordado:nth-child(8){margin-right: 2%;}
.bordado:nth-child(9){margin-right: 0;}
.bordado:nth-child(10){margin-right: 2%;}
.bordado:nth-child(14){margin-right: 2%;}
.bordado:nth-child(15){margin-right: 0;}
.bordado:nth-child(16){margin-right: 0;}

.rodape {padding: 1% 4%;}
}

/* Smartphone */
@media screen and (min-width: 620px){
.contato {width: 49%; float: left; margin-right: 2%;}
.contato:nth-child(2){margin-right: 0;}
.contato:nth-child(3){margin-right: 0;}

.trabalho {width: 49%; float: left; margin-right: 2%;}
.trabalho:nth-child(2){margin-right: 0;}

.produto {width: 23.5%; float: left; margin-right: 2%;}
.produto:nth-child(1){width: 49%; margin-right: 2%;}
.produto:nth-child(4){width: 49%; float: right; margin-right: 0;}
}

/* tablet */
@media screen and (min-width: 800px){
.servico {width: 23.5%;}
.servico:nth-child(2){margin-right: 2%;}
.servico:nth-child(4){margin-right: 0;}

.bordado {width: 23.5%;}
.bordado:nth-child(3){margin-right: 2%;}
.bordado:nth-child(4){margin-right: 0%;}
.bordado:nth-child(6){margin-right: 2%;}
.bordado:nth-child(8){margin-right: 0%;}
.bordado:nth-child(9){margin-right: 2%;}
.bordado:nth-child(15){margin-right: 2%;}
}

/* wide screen */
@media screen and (min-width: 1000px){
.tudo {width: 1000px; margin: 0px auto 0px auto;}
.cabecalho {padding: 15px 15px 15px 20px;}
.categoria {padding: 0%;}
.rodape {padding: 15px;}
.social-icons a {margin-right: 15px;}
.copyright {margin-top: 10px; margin-bottom: 0px;}

.bordado {width: 15.0%;}
.bordado:nth-child(4){margin-right: 2%;}
.bordado:nth-child(6){margin-right: 0;}
.bordado:nth-child(8){margin-right: 2%;}

.servico {width: 23.5%; float: left; margin-right: 2%;}
.servico:nth-child(4){margin-right: 0;}

.indice {margin-bottom: 15px; padding: 0;}

.btn-menu {display:none;}
.btn-close {display:none;}
.menu {width: auto; height: 120px; line-height: 120px; float: right; background: #f5f1f1; display: block !important; position: static;}
.menu li {padding: 0; float: left;}
.menu li a {font-size: 0.8em; padding: 15px; color: #e11931;}
.menu li a:hover {color: #839097;}

.rslides img{width: 100%; height: 300px; border-radius: 7px;}

}