/************** menu amburguesa ***************/

#hamburguer {
    display: none;
}

#for-hamburguer {
    display: none;
}

/***************** header ***************/

header {
width: 100%;
height: 90px;
position: relative;
z-index: 1000;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}

.menu-fixed {
  position: fixed;
  height: 65px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 2px 4px rgba(25, 25, 25, 0.5);

}

.menu-fixed #menu-l {
    bottom: 40%;
}

.menu-fixed .ico-prov {
    top: 20%;
  }

.menu-fixed #menu-l li .drop-b { 
    background-color: rgba(255, 255, 255, 0.9);
}

header .ico-prov {
  width: 200px;
  position: relative;
  left: 5%;
  top: 25%;
}

 header .ico-prov img {
    width: 100%;
 }

 header #menu-l {
     position: relative;
     float: right;
     width: 800px;
     display: flex;
     margin: 0;
     bottom: 15%;
 }

 header #menu-l li {
     list-style: none;
     margin: 0 auto;
     position: relative;
 }

 header #menu-l #cascada:hover .drop-b {
     display: grid;
 }

 header #menu-l #cascada .drop-b a:hover { 
    color: #616161;
    text-decoration: underline;
 }

 header #menu-l li .drop-b { 
     position: absolute;
     width: 250px;
     height: auto;
     margin: 10% auto;
     left: 0;
     right: 0;
     top: 10px;
     display: none;
     background-color: rgba(255, 255, 255, 1);
     padding: 10px 15px;
     border-radius: 10px;
    }

    header #menu-l li .drop-b a { 
     margin-bottom: 10px;
     margin-top: 10px;
    }

 header #menu-l li:hover a { 
     color: red;
     
 }

 header #menu-l li a {
     text-decoration: none;
     color: #616161;
     font-family: AvertaRegular;
     font-size: 15px;
     transition: all .3s ease-in-out;
     -webkit-transition: all .3s ease-in-out;
  }

  




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

    /****************** hamburguer ****************/

#for-hamburguer {
    display: block;
    position: absolute;
    right: 30px;
    top: 15px;
    width: 50px;
    height: 40px;
}

#for-hamburguer .line-burger {
    width: 100%;
    height: 4px;
    background-color:#616161;
    position: relative;
    top: 8px;
    border-radius: 3px;
    transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
}

#hamburguer:checked ~  #for-hamburguer .line-burger {
    transform: rotate(-45deg);
    width: 80%;
}

#for-hamburguer:hover .line-burger,
#for-hamburguer:hover .line-burger::after,
#for-hamburguer:hover .line-burger::before { 
    background-color:#ff0000;
}

#for-hamburguer .line-burger:after {
    position: absolute;
    content: '';
    width: 80%;
    height: 4px;
    background-color:#616161;
    top: 10px;
    right: 0;
    border-radius: 3px;
    transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
}

#hamburguer:checked ~  #for-hamburguer .line-burger:after {
    width: 0%;
}

#for-hamburguer .line-burger::before {
    position: absolute;
    content: '';
    width: 60%;
    height: 4px;
    background-color:#616161;
    top: 20px;
    right: 0;
    border-radius: 3px;
    transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
}

#hamburguer:checked ~  #for-hamburguer .line-burger:before {
    width: 100%;
    transform: rotate(-90deg);
    top: 0;
}

/****************** header ****************/
header {
    width: 100%;
    height: 60px;
    
    }

    header .ico-prov {
        width: 130px;
        left: 5%;
        top: 25%;
    }

    header #menu-l {
        position: absolute;
        float: none;
        width: 0%;
        right: 0;
        top: 0;
        height: 0px;
        display: grid;
        margin: 0;
        bottom: 15%;
        background: #fff;
        border-bottom-left-radius: 50%;
        overflow: hidden;
        transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
    } 

   /********* chequed menu ********/

    #hamburguer:checked ~ #menu-l {
        width: 100%;
        height: 400px;

    }


    header #menu-l li {
        list-style: none;
        margin: 0 auto;
        transform: translateY(20px);
    }


    header #menu-l li a {
        font-size: 16px;
     }

}