*{margin:0; padding:0; font-family: 'Josefin Sans', sans-serif;}
*:hover{-webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease;}
*:focus{outline:none;}
img{border:none;}
li {list-style: none;}
a img{border:none;}
a{border:none; margin:0; text-decoration: none;}
/*====================================================================*/
.setw{ width:1010px; margin:0 auto; position:relative;}
.clear{clear:both;}
.radius{border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
.mostrar{display:block;}
h2 {font-size: 2em;}
.logo {margin: 90px auto; width: 300px; height: 124px;}
h1 a span{background:url(../images/logo.png) no-repeat center; background-size: 100% 100%; display:block; float:left; position: absolute; height:124px; width:300px; /* 700px ÷ 1200px = 0.58333333333333 x 100 = 58.333333333333%*/}

/*====================================================================*/
#menu {width:100%; float: left; position: fixed; top: 0; z-index: 99;background: #000; height: 50px; }
#menu li {float: left; position: relative;}
#menu li a {float: left; font-weight: 400; font-size: 1em; text-transform: capitalize; color: #FFF; padding: 15px 29px;}
#topo {width: 100%; float: left; position: relative; background: url(../images/bg-topo.jpg) center no-repeat; min-height: 600px; background-size: 100%  600px;}
#services {width: 100%; float: left; position: relative; margin-top: -60px;}
#services li {float: left; position: relative; width: 230px; margin: 0 10px;}
#services li a img {width: 100%;}
#sobre {margin-top: 50px; text-align: center; width: 100%; float: left; position: relative; background: url(../images/bg-sobre.jpg)center no-repeat; min-height: 600px; background-size: 100%  600px;}
#sobre article {float: left; position: relative;}
#sobre h2 {padding-top: 100px; color: #FFF; margin-bottom: 50px;}
#sobre p {font-size: 1.2em; margin-bottom: 10px; color: #FFF; text-align: center;}
#fazemos {width: 100%; float: left; position: relative; text-align: center;}
#fazemos h2 {color: #545454; margin: 50px 0;}
#trabalhista {float: left; position: relative; width: 100%; background: url(../images/bg-trabalhista.png) left no-repeat #333; height: 450px; background-size: auto 100%;}
#trabalhista article {float: right; width: 500px; font-size: 1.1em; text-align: justify; color: #FFF;}
#trabalhista article h3 {font-size: 25px !important; text-transform: uppercase; margin: 20px 0 10px; color: #DDD !important;}
#trabalhista article p { margin: 25px 0px;}
#tributario {float: left; position: relative; width: 100%; background: url(../images/bg-tributario.png) right no-repeat #FFF; height: 450px; background-size: auto 100%;}
#tributario article {float: left; width: 500px; font-size: 1.1em; text-align: justify; color: #333;}
#tributario article h3 {font-size: 25px !important; text-transform: uppercase; margin: 20px 0 10px; color: #660000 !important;}
#tributario article p { margin: 25px 0px;}
#civel {float: left; position: relative; width: 100%; background: url(../images/bg-civel.png) left no-repeat #999; height: 450px; background-size: auto 100%;}
#civel article {float: right; width: 500px; font-size: 1.1em; text-align: justify; color: #FFF;}
#civel article h3 {font-size: 25px !important; text-transform: uppercase; margin: 20px 0 10px; color: #DDD !important;}
#civel article p { margin: 15px 0px;}
#previdenciario {float: left; position: relative; width: 100%; background: url(../images/bg-previdenciario.png) right no-repeat #FFF; height: 450px; background-size: auto 100%;}
#previdenciario article {float: left; width: 500px; font-size: 1.1em; text-align: justify; color: #333;}
#previdenciario article h3 {font-size: 25px !important; text-transform: uppercase; margin: 20px 0 10px; color: #660000 !important;}
#previdenciario article p { margin: 25px 0px;}
#contato {float: left; width: 100%; position: relative; background: #CCC;}
#mapas {float: left; width: 100%; position: relative; margin-top: 30px; }
#mapas h3 {font-size: 25px !important; text-transform: uppercase; margin-bottom: 50px; color: #5D1516 !important;  border-bottom: none !important; width: 960px; margin: 0 auto; padding: 0 0 5px 0; text-align: left !important;}
#mapas article {width: 45%; margin: 0 2.5%; float: left; margin-top: 30px;}
#mapas article header {margin-bottom: 20px; text-align: center;}
#mapas article p {font-size: 1em;}
#mapas article p span {font-size: 0.7em;}
#mapas article iframe {border: 2px solid #000 !important;}
#rodape {width: 100%; float: left; position: relative; background: #000; margin-top: 50px;}
#rodape .copyright .copy{float: left; width: 100%; text-align:center; font-size:14px; color:#FFF; margin: 15px 0;}
#rodape .copyright .webpan{font-size:16px; color: #666; text-decoration:none;}
#rodape .copyright .webpan:hover{color: #00AFEF;}

form h3 {font-size: 25px !important; text-transform: uppercase; color: #5D1516 !important;  border-bottom: none !important; width: 960px; margin: 0 auto; padding: 0 0 5px 0; text-align: left !important;}
form{max-width:990px; text-align:center; margin:20px auto 30px auto;clear:both;font-size:16px; float: left;}
form input{width:190px;height:25px; font-size:16px; font-family: 'Lato', sans-serif;margin:0px 10px 22px 10px;border:0;border-bottom:2px solid #5D1516;padding:10px;background:#eee; color: #aaa;}
form #nome_campo {width: 220px;}
form #email_campo {width: 130px;}
form #telefone_campo {width: 80px;}
form #arquivo {width: 350px; float: left;}
form select {width:190px; color: #aaa; font-size:16px; height:47px; font-family: 'Lato', sans-serif;margin:25px 10px 22px 10px;border:0;border-bottom:2px solid #5D1516;padding:10px;background:#eee;}
form textarea{width:945px; height:150px; font-size:16px; resize:none; font-family: 'Lato', sans-serif; margin:0 auto 22px 0px;border:0;border-bottom:2px solid #5D1516;padding:10px;background:#eee; color: #aaa;}
form input:hover{border-bottom:2px solid #000} form textarea:hover{border-bottom:2px solid #000} form button:hover{background:#000; color: #FFF; cursor: pointer;}
form select:hover{border-bottom:2px solid #000}
form button{width:200px;height:50px; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; background:#5D1516;border:0;color:#fff;font-size:21px;font-size:900;float:right; margin-right: 10px;   margin-top: -70px;}
#envia-contato{width:200px;height:50px; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; background:#5D1516;border:0;color:#fff;font-size:21px;font-size:900;float:right; margin-right: 10px; margin-top: 0px;}
#envia-contato:hover{background:#000 !important; color: #FFF;  cursor: pointer;}
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}
/*====================================================================*/
.arrow-down {position: absolute; top: 0; left:0; right:0; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 50px 100px 0 100px; border-color: #ffffff transparent transparent transparent;}
.arrow-up {position: absolute; top:550px; left:0; right:0; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 0 100px 50px 100px; border-color: transparent transparent #ffffff transparent;}

#preloader {
  width: 100%;
  height: 100%;
  z-index: 9000;
  padding: 0px;
  margin: 0px;
  background: #5D1415;
  opacity: 0.95;
  position: fixed;
  top: 0px;
  left:0px;
  overflow: hidden;
}
.spinner {
  width: 50px;
  height: 50px;
  background-color: #FFF;
  position: absolute; 
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #660000;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}