@charset "utf-8";

/* Typical Device Breakpoints
pequenas telas: até 600px
celular: de 600px até 768px
tablets: 768px até 992px
desktops: 992px até 1200px
grandes telas: acimda de 1200px
*/ 


  @media (width <  999px) {


    #h-agende{
      font-size: 14px;
      color: white;
    }
    
    #a-header{
      display: block;
      font-size: 4vw;
      color: rosybrown;
    }

    body {
      overflow-x: hidden;
      
    }
    .nav-list {
      position: absolute;
      top: 6vh;
      right: 0;
      width: 50vw;
      height: 70vh;
      background: #e2e2e4;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      transform: translateX(100%);
      transition: transform 0.3s ease-in;
      margin-top: 2vh;
    }
    .nav-list li {
      margin-left: 0;
      opacity: 0;
    }
    .mobile-menu {
      display: block;
    }
  
  
  .nav-list.active {
    transform: translateX(0);
  }
  
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .mobile-menu.active .line1 {
    transform: rotate(-45deg) translate(-0px, 8px);
  }
  
  .mobile-menu.active .line2 {
    opacity: 0;
  }
  
  .mobile-menu.active .line3 {
    transform: rotate(45deg) translate(-2px, -10px);
  }

}




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

         /* Animações */

[data-anime] {
  opacity: 0;
  transition: .3s;
}

[data-anime = "bottom"] {
  transform: translate3d(0px, 40px, 0px);
  transition: .5s;
}

[data-anime].animate{
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

[data-anime = "left"] {
  transform: translate3d(-40px, 0px, 0px);
}

[data-anime = "right"] {
  transform: translate3d(40px, 0px, 0px);
}


nav{
  height: 10vh;
  padding: 0;

}

header a{
  font-size: 4vw;
  color: rosybrown;
}

header nav {
  height: 7vh;
}
header{
  position: fixed;
  margin-top: -10vh;
  z-index: 999;

}
#c-one{
  margin-bottom: 15vh;
}

}



@media screen and (min-width:940px) and (max-width: 999px){




.container-tratamentos{
  margin-bottom: 17vh;
}

.titulo{
  font-size: 3vw;
  margin-bottom: 10vh;
}

header a {
  font-size: 1.7vw;
}

#a-header{
  font-size: 2.5vw;
}

}

@media screen and (min-width:768px) and (max-width: 940px){ /* Tablet grande */



.titulo{
  font-size: 3vw;
  margin-bottom: 10vh;
}

.nav-list {
  position: absolute;
  top: 8vh;
  right: 0;
  width: 46vw;
  height: 90vh;
  background: #e2e2e4;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transform: translateX(100%);
  transition: transform 0.3s ease-in;
  margin-top: 2.3vh;
}

#a-header{
  font-size: 2vw;
}


}


@media screen and (min-width:999px) and (max-width:1250px) {
  .titulo{
    font-size: 3vw;
    margin-bottom: 10vh;
  }

  header a {
    font-size: 1.7vw;
  }

}

@media screen and (min-width:1250px) and (max-width:1550px){

}

@media screen and (min-width:1250px) and (max-width:1880px){

  header a {
    font-size: 1vw
  }

}

/* Celular deitado */

@media screen and (min-width:769px) and (max-width:950px) and (min-height: 280px) and (max-height:400px){

  header nav{
    height: 14vh;
  }





}

@media screen and (min-width:120px) and (max-width:510px){
  .nav-list {
    width: 70vw;
  }

  #h-agende{
    font-size: 10px;
    color: white;
  }

  #a-header{
    display: block;
    font-size: 4.5vw;
  }

}