/*=========== 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 */
.atuacao {width: 100%; height: auto; position: relative; margin-bottom: 5%; margin-top: -20%;}

.atuacao_box1 {width: 70%; height: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; margin-bottom: 20%; }
    
.img_box1 {padding-top: 20px;}
.txt_box1 {padding-top: 20px;}
.txt_box1 h2 {font-size: 1.5em; font-weight: 400;}
.txt_box1 h3 p {padding-top: 20px; line-height: 1.5em; color: black; font-size: 1.1em;}
.linha_separa_box { width: 70%; border: 1px dotted rgba(192, 192, 192, 0.5); margin: auto; margin-bottom: 10%;}

.gallery{ }
.gallery img {transition: 1s; padding: 15px; width: 100px; }
.gallery img:hover { filter: grayscale(100%); transform: scale(1.1);}
.img { border-radius: 20px;}


/* SERVIÇOS */

/* NEWSLETTER */

/* 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:70%; height: 5%;  position: relative; left: 0; bottom: 210px; margin: auto; text-align: center; }
    
.titulo h1 {width: 100%; font-size: 2em; font-weight: 700; color: #fff; text-align: center; } 

.atuacao {width: 100%; height: auto; position: relative; margin-bottom: 2%; margin-top:  -4%; }
    
    
.atuacao_box1 {width:70%; height: 50%; display: flex; flex-direction: row; justify-content:center; align-items: center; margin: auto; padding: 2%;  }

    [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);}
    
.img_box1 {width: 100%;background-repeat: no-repeat;}
.txt_box1 { width: 100%;}
.txt_box1 h2 { width: 100%; font-size: 1.7em; padding-bottom:4px;}
.txt_box1 h3 p { line-height: 1.7em; color: black; font-size: 1em;}
    
    
.linha_separa_box { box-sizing: border-box; width: 70%; margin: 1%; border: 1px dotted rgba(192, 192, 192, 0.5); 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; }
}