/*=========== 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 */

.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.slide.current {
  opacity: 1;
}

.slide .content {
  position: absolute;
  bottom: 70px;
  left: -600px;
  opacity: 0;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  padding: 35px;
}

.slide .content h2 {
  margin-bottom: 10px;
}

.slide .content h2 {
    font-size:1em;
}

.slide.current .content {
  opacity: 1;
  transform: translateX(600px);
  transition: all 0.7s ease-in-out 0.3s;
}

.buttons button#next {
  position: absolute;
  top: 40%;
  right: 15px;
}

.buttons button#prev {
  position: absolute;
  top: 40%;
  left: 15px;
}

.buttons button {
  border: 2px solid #333;
  background-color: transparent;
  color: #333;
  cursor: pointer;
  padding: 13px 15px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #fff;
  color: #333;
}

@media (max-width: 500px) {
  .slide .content {
    bottom: -300px;
    left: 0;
    width: 100%;
  }

  .slide.current .content {
    transform: translateY(-300px);
  }
}


.slide:first-child {
  background: url(../img/img1.jpg) no-repeat
    center top/cover;
}
.slide:nth-child(2) {
  background: url(../img/img2.jpg) no-repeat
    center top/cover;
}
.slide:nth-child(3) {
  background: url(../img/img3.jpg) no-repeat
    center top/cover;
}


/* ATUACAO */
.about_us {width: 100%; height: auto; position: relative; margin-bottom: 5%; }

.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 h1 {font-size: 1.5em; font-weight: 400;}
.txt_box1 h3 p {padding-top: 20px; line-height: 1.5em; color: black; font-size: 1.1em;}
/* SERVIÇOS */

/* NEWSLETTER */

/* RODAPÉ */
.rodape {background: rgba(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;  background-color: rgba (255, 255, 255, 0,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: transparent; 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}
    

.about_us {width: 100%; height: auto; position: relative; margin-bottom: 7%; margin-top:  2%;}
    
    
.atuacao_box1 {width:100%; height: 50%; display: flex; flex-direction: row; justify-content:space-between; 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; margin-left: 3%;}
.txt_box1 {margin-left:6%;  width: 100%;}
.txt_box1 h1 { 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;}

.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.slide.current {
  opacity: 1;
}

.slide .content {
  position: absolute;
  bottom: 70px;
  left: -600px;
  opacity: 0;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  padding: 35px;
}

.slide .content h2 {
  margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.7em;
}

.slide.current .content {
  opacity: 1;
  transform: translateX(600px);
  transition: all 0.7s ease-in-out 0.3s;
}

.buttons button#next {
  position: absolute;
  top: 40%;
  right: 15px;
}

.buttons button#prev {
  position: absolute;
  top: 40%;
  left: 15px;
}

.buttons button {
  border: 2px solid #333;
  background-color: transparent;
  color: #333;
  cursor: pointer;
  padding: 13px 15px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #fff;
  color: #333;
}

@media (max-width: 500px) {
  .slide .content {
    bottom: -300px;
    left: 0;
    width: 100%;
  }

  .slide.current .content {
    transform: translateY(-300px);
  }
}



/* Backgorund Images */
 
.slide:first-child {
  background: url(../img/img1.jpg) no-repeat
    center top/cover;
}
.slide:nth-child(2) {
  background: url(../img/img2.jpg) no-repeat
    center top/cover;
}
.slide:nth-child(3) {
  background: url(../img/img3.jpg) no-repeat
    center top/cover;
}


}