/* 

Theme Name: Reclamar Adianta
Description: Developer Leonardo Silva, layout Vinícius Lauria
Author: Leonardo Silva
URL Author: https://www.facebook.com/LeonardoWLS;
Version: 1.0

 */

.verde{

color: #B8CB4B;


}


/* ==========
STYLE LAYOUT
========== */
*{margin: 0; padding: 0;}

ul, li, a{list-style-type: none; text-decoration: none;}

@font-face {
    font-family: DINPro-Bold;
    src: url(assets/fonts/DINPro-Bold_0.otf);
}

@font-face {
    font-family: DINPro-Regular;
    src: url(assets/fonts/DINPro-Regular_0.otf);
}

article {width: 80%; margin: 0 auto; overflow: hidden;}
p {font-family: DINPro-Regular;}
strong, span {font-family: DINPro-Bold;}

.error {color: #560003;}

/* ========== HEADER ========== */
#header article {padding: 15px 0; text-align: center;}
#header .col1 {float: left;}
#header .col2 {float: right;}
#header .redes-sociais li {display: inline-block;}
#header .redes-sociais li a {padding: 10px; display: block;}

#header .preview, .btn {background: #006299; padding: 9px 20px; float: none; display: inline-block;}
#header .preview:hover, .btn:hover {background: #093F6D;}
#header .preview a, .btn {color: #B8CB4B; text-transform: uppercase; font-size: 28px; font-family: DINPro-Bold;}
#header .preview img {vertical-align: middle; margin-left: 25px; width: 40px;}

/* ========== SLIDER RESPONSIVE ========== */
.slider {position: relative; height: auto; overflow: hidden;}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.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;
  float: left;
  width: 100%;
  height: auto;
  border: 0;
}

#header-rodape article {padding: 35px 0;}
#header-rodape .col1 {float: left;}
#header-rodape .col1 p {text-transform: uppercase; color: #074171; font-size: 28px; border: 1px solid #074171; padding: 15px 10px; border-radius: 4px;}
#header-rodape .col2 {float: right; text-align: center;}
#header-rodape .col2 li {display: inline-block;}
#header-rodape .col2 p {color: #074171; text-align: left; text-transform: uppercase;}

.content {margin-bottom: 50px;}

#conteudo {background: url(images/fundo_reclame.jpg) no-repeat; background-size: cover;}

#conteudo .col1 {float: left; width: 45%; padding: 230px 0 240px 0;}
#conteudo .col1 p {color: #FFF;}
#conteudo .col1 p span {font-size: 28px;}
#conteudo .col1 h1, #conteudo .col1 h2 {color: #B8CB4B; font-family: DINPro-Regular;}
#conteudo .col1 h2 {font-size: 40px;}
/*#conteudo .col2 {float: right; width: 55%; text-align: center; padding: 265px 0 240px 0;}
#conteudo .col2 a {display: inline-block; padding: 20px 45px; background: #006299; color: #B8CB4B; text-transform: uppercase; font-size: 28px; font-family: DINPro-Bold; border-radius: 8px;}
#conteudo .col2 a:hover {background: #093F6D;}
#conteudo .col2 a img {vertical-align: middle; margin-left: 25px; width: 40px;}*/


/* ==== AJAX FANCYBOS CONTATO */
.fancybox-wrap {
  z-index: 999;
  height: auto !important;
  position: fixed !important;
  top: 0% !important;
  left: 0% !important;
  opacity: 1 !important;
  overflow: visible !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 100% !important;
  background: rgba(0, 0, 0, 0.99) !important;
}
.fancybox-skin {
  position: relative;
  width: 100% !important;
  height: 100% !important;
}
.fancybox-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50% !important;
  height: auto !important;
  overflow-y: scroll;
}
.fancybox-inner #form {
  width: 80%;
  margin: 0 auto;
  padding-top: 25px;
  color: #FFFFFF;
}
.fancybox-inner #form h1 {
  text-align: center;
}
.fancybox-inner #form label {
  line-height: 40px;
}
.fancybox-inner #form input {
  height: 50px;
}
/* ==== PAGE CONTATO ==== */
#form {width: 43%; margin: 0 auto; padding-top: 25px; color: #006299;}
#form h1 {margin-bottom: 15px; font-family: DINPro-Bold; font-size: 29px;}
#form p {margin-bottom: 5px; clear: both;}
#form input {padding-left: 5px; border-radius: 4px; border: 1px solid #006299; width: 99%; height: 40px; color: #006299;}
#form textarea {padding-left: 5px; border-radius: 4px; border: 1px solid #006299; width: 100%; color: #006299}
#form .botao {
  background: #B9CD4A;
  color: #FFF;
  cursor: pointer;
  float: right;
  width: auto;
  height: 60px;
  border: none;
  padding: 0px 20px;
  font-family: DINPro-Bold;
}
.fancybox-close {
  background: url(images/CLOSE.png) no-repeat;
  position: absolute;
  top: -18px;
  right: -18px;
  width: 193px;
  height: 157px;
  cursor: pointer;
  z-index: 8040;
}

.cadastro {
  position: relative;
  width: 100%;
  height: 76vh;
}
/*.cadastro #form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}*/
.col-md-6 {width: 50%;float: left;}
.col-md-6 img {width: 100%;height: auto;}

#footer {padding: 50px 0; text-align: center; color: #fff; background: #074171;clear: both;}
#footer a {color: #B8CB4B}
#footer a:hover {color: #fff}


/* RESPONSIVO */
@media screen and (max-width: 769px){
  #conteudo {background: url(images/fundo_reclame.jpg) no-repeat 100%; background-size: cover;}
  .col-md-6 {width: 100%;}
}

@media screen and (min-width: 600px) and (max-width: 1024px){
  #header-rodape article {width: 95%}
  #header-rodape .col1 p {font-size: 16px;}
  #header-rodape .col2 p {font-size: 14px;}

  #conteudo article {padding: 100px 0 100px 0;}
  #conteudo .col2 a {font-size: 16px;}
}



@media screen and (max-width: 601px){

  #header article {width: 95%}
  #header article .col1 img {width: 150px;}
  #header-rodape article {width: 95%}
  #header-rodape .col1 {text-align: center; margin-bottom: 10px;}
  #header-rodape .col2 {float: left;}
  #header-rodape .col2 p {font-size: 14px;}

  #conteudo article {width: 95%; padding: 15px 0 15px 0;}
  #conteudo .col1 p {font-size: 12px;}
  #conteudo .col1 p span {font-size: 14px}
  #conteudo .col2 a {font-size: 12px; padding: 10px;}
  #conteudo .col2 a img {width: 15px;}

  #footer p {font-size: 12px;}
}