/*--------------------------*/
/*  ELEMENTOS DO HEADER     */
/*--------------------------*/

@media screen and (max-width: 1200px) {
    header{
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

@media screen and (max-width: 600px) {
    header{
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

/*------- NAVEBAR ------------*/

@media screen and (max-width: 1110px){
    header nav#nav-esquerda ul.menu-principal li a{
        font-size: 90%;
    }
}

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

    header nav#nav-esquerda div#logo{
        margin-left: 1rem;
    }

    /*-------- MENU HAMBURGUER -----------*/

    header nav#nav-esquerda{
        justify-content: space-between;
    }

    header nav#nav-esquerda ul#icone-menu{
        display: flex;
    }

    header nav#nav-esquerda ul#icone-menu li#menuX{
        display: none;
    }   

    /*-------- MENU -------------- */
    header nav#nav-esquerda ul.menu-principal{
        flex-direction: column;
        width: 30%;
        height: 40vh;
        flex-direction: column;
        background: linear-gradient(rgba(228, 176, 5, 0.938) 0%, rgb(3, 7, 248) 45%, rgba(241, 186, 3, 0.945) 100%);
        padding-top: .5rem;
        border-radius: 4%;
        position: absolute;
        top: 7rem;
        right: 0;
        z-index: 999;

        display: none;
    }

    header nav#nav-esquerda ul.menu-principal li{
        margin: .5rem;
    }

    header nav#nav-esquerda ul.menu-principal li a{
        font-size: 120%;
    }
}
/**para serviços*/
@media screen and (max-width: 970px) {

.titulo1  .tooltip-text{ 
    position: absolute;
    width: 300px;
    top: 4px;
    left: -144px;
    padding: 9px;
    border-radius: 8px;
    text-align: center;
    background-color: #1b13f8fb;
    color: #f4e408;
    opacity: 0;
    transition: opacity 0.4s;
    margin-left: 45%;
    margin-top: -20%;
    font-size: 1rem;
    border: 1px solid;
  }

  .titulo1:hover   .tooltip-text{
    visibility: visible;
    opacity: 1;
   
  }

  
.titulo1  .tooltip-text1{ 
    position: absolute;
    width: 300px;
    top: 4px;
    left: -144px;
    padding: 9px;
    border-radius: 8px;
    text-align: center;
    background-color: #f8c713d4;
    color: #1408f4;
    opacity: 0;
    transition: opacity 0.4s;
    margin-left: 45%;
    margin-top: 85%;
    font-size: 1rem;
  }

  .titulo1:hover   .tooltip-text1{
    visibility: visible;
    opacity: 1;
   
  }

  .titulo1  .tooltip-text2{ 
    position: absolute;
    width: 300px;
    top: 4px;
    left: -144px;
    padding: 9px;
    border-radius: 8px;
    text-align: center;
    background-color: #f8c713d4;
    color: #1408f4;
    opacity: 0;
    transition: opacity 0.4s;
    margin-left: 45%;
    margin-top: 55rem;
    font-size: 1rem;
  }

  .titulo1:hover   .tooltip-text2{
    visibility: visible;
    opacity: 1;
   
  }
}
/**para academia*/
@media screen and (max-width: 970px) {

    .titulo  .tooltip-text{ 
        position: absolute;
        width: 300px;
        top: 4px;
        left: -144px;
        padding: 9px;
        border-radius: 8px;
        text-align: center;
        background-color: #1b13f8fb;
        color: #f4e408;
        opacity: 0;
        transition: opacity 0.4s;
        margin-left: 45%;
        margin-top: -20%;
        font-size: 1rem;
        border: 1px solid;
      }
    
      .titulo:hover   .tooltip-text{
        visibility: visible;
        opacity: 1;
       
      }
    
      
    .titulo  .tooltip-text1{ 
        position: absolute;
        width: 300px;
        top: 4px;
        left: -144px;
        padding: 9px;
        border-radius: 8px;
        text-align: center;
        background-color: #f8c713d4;
        color: #1408f4;
        opacity: 0;
        transition: opacity 0.4s;
        margin-left: 45%;
        margin-top: 100%;
        font-size: 1rem;
      }
    
      .titulo1:hover   .tooltip-text1{
        visibility: visible;
        opacity: 1;
       
      }
    
      .titulo  .tooltip-text2{ 
        position: absolute;
        width: 300px;
        top: 4px;
        left: -144px;
        padding: 9px;
        border-radius: 8px;
        text-align: center;
        background-color: #f8c713d4;
        color: #1408f4;
        opacity: 0;
        transition: opacity 0.4s;
        margin-left: 45%;
        margin-top: 55rem;
        font-size: 1rem;
      }
    
      .titulo1:hover   .tooltip-text2{
        visibility: visible;
        opacity: 1;
       
      }
    }