/*=========== RESET ==========*/
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box;
font-family: 'Lato', sans-serif;}
body {background-color: #f5f5f5;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
/*=========== CONTAINER ==========*/

/*=========== BG COLORS ==========*/

/*=========== HELPERS ==========*/

/* CABEÇALHO */

.cabecalho {width: 100%;  background-color: white; width: 100%; display: flex; flex-direction: row; align-items:center; justify-content: space-around; opacity: 1;  z-index: 5;  }

.menu { display: none; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.9); top: 0; left: 0; color: aliceblue;z-index: 1;}  

.botao { position: relative;  display: block;  color: white;  font-size: 11px;  text-decoration: none;  margin: 30px 70px;;  border: 2px solid #4682B4;  padding: 14px 60px;  text-transform: uppercase; text-align: center;}
.logo {width: 114px; margin:3%; height: 114px; float: left; background: url(../img/logo-mobile.png) center center/114px no-repeat;}
.btn:hover {color: aliceblue;background-color: cadetblue;}



/* MENU */
.btn-close {font-size: 1.5em; color: #fff; float: left; cursor: pointer; margin: 2% 3% 0 0; }
.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #696969; background-color: transparent; cursor: pointer; }


/* BANNER */

.banner {width: 100%; height: 50vh; float: left;  float: left; top 0; left: 0; position: relative; background-image: url(../img/bg-03.jpg);  background-size: cover; background-repeat: no-repeat;}

.img_servico { background-image: url(../img/grid.png); background-attachment:fixed; position:relative; width:100%; height:50vh; background-repeat: repeat; background-color: rgba(0,0,0,0.3); }

.txt_banner {display: flex; align-items: center; justify-content: center; width:70%; height: 5%; position: relative;  margin: auto; text-align: center;   bottom: 210px; }
    
.titulo h1 {width: 100%; font-size: 2em; font-weight: 700; color: #fff; text-align: center;  } 



/* ATUACAO */
.contato {width: 100%; height: auto; }
.seta	{width: 45px; height: 6px; border-radius: 15px; background-color: grey; float: left; margin-left: 5%;}

.title2 h2{font-size: 2em; font-weight: 700; color: color: #030e10; padding: 5%;}
.title2 form { line-height: 1.5em; width: 50%; margin:5%; text-align: left;color: #030e10; }
.title2 label {line-height: 1em; text-align: left; float: left; color: #030e10; display: inline-block;  margin-top: 7%; }
.title2 input {border-radius: 7px; width: 170%; padding-left: 2%; margin-top: 5%;  height: 40px;}
.title2 textarea { box-shadow: 2px 2px 2px rgba(0,0,0,0.2); margin-top: 5%;}
.title2 #Submit { box-shadow: 2px 2px 2px rgba(0,0,0,0.2);border-radius: 7px; width: 80%; background-color: white; color: #030e10; text-align: center; margin-left:40%; cursor: pointer;}


/* SERVIÇOS */

/* RODAPÉ */
.rodape {background: rgb(38,38,38); width: 100%; float: left; padding: 3% 4%; text-align: center;}

.social-icons a {font-size: 1.2em; 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 {color: rgba(255, 255, 255, 0.7); margin-top:2%; font-size: 0.9em;}

/* ========== MOBILE FIRST ==========*/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
.logo {width: 120px; background: url(../img/logo.png) center center/120px no-repeat;}

    



}
/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {
    


}
/* MEDIUM DEVICES - TABLETS & DESKTOPS*/
@media screen and (min-width: 960px) {
    



/* LARGE DEVICES - WIDE SCREENS*/
@media screen and (min-width: 1280px) {
.cabecalho {width: 100%; background-color: white; display: flex; flex-direction: row; align-items: center; justify-content: space-around; position: fixed; padding:   1.5%; top:0; z-index: 5;  }    
.btn-menu {display: none;}
.btn-close {display: none;}
.menu {  top: 0; left: 0; transform: translate(0%, 0%);  display: flex; justify-content: flex-end; align-items: center; position: relative; background-color: white; width:70%;  } 
    
.botao { position: relative;  display: inline-block;  color: darkslategrey; font-weight: 700;  font-size: 11px;  text-decoration: none;  margin: 10px 10px;  border: 2px solid #4682B4;  padding: 11px 30px;  text-transform: uppercase;  overflow: hidden;  transition: 1s all ease; }
    
.btn::before{  background: #4682B4;  content: "";  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  z-index: -1;  transition: all 0.4s ease;    }

.btn::before{  width: 100%; height:0%;  transform: translate(-50%,-50%) rotate(-45deg); }

.btn:hover::before{ height: 380%;}
    
.btn:hover {color: aliceblue;transition: all 0.3s ease-out}
    
.banner {width: 100%; height: 80vh; float: left; top 0; left: 0; background-image: url(../img/bg-03.jpg);  position: relative; background-size: 100%; }
    
.img_servico { background-image: url(../img/grid.png); background-attachment:fixed; position:absolute; width:100%; height: 80vh; background-repeat: repeat; background-color: rgba(0,0,0,0.3); }
    
.txt_banner {display: block; width:700%; height: 5%;  position: relative; left: 0; bottom: 210px; margin: auto; text-align: center;
  width: 600px;  }
    
.titulo h1 {width: 100%; font-size: 2em; font-weight: 700; color: #fff; text-align: center; } 


    [data-anime] {opacity: 0; transition: 1s;}
    [data-anime = "left"] {transform: translate3d(-1000px,0,0)}
    [data-anime].animate {opacity: 1; transform:translate3d(0px,0px,0px);}
    
.anime-start {opacity: 1; transform: translate3d(0,0,0);}    
    
    
.contato {width: 50%; height: auto; position: relative; margin: auto;}
}
@media screen and (min-width: 1920px) {
 
 .txt_banner {display: block; width:70%; height: 5%;  position: relative; left: 0; bottom: 400px; margin: auto; text-align: center; }
}
    

}