*{margin: 0;padding: 0;box-sizing: border-box;}

body{background-color: rgb(220, 219, 219);overflow-x: hidden;}
.body{overflow-y: hidden;}

/*---- Barra superior de pag ----*/
.header{
    background-color: #fff;
    display: flex;
    justify-content:center;
    align-items: center;
    height: 80px;
    position: relative
}
/*---- Menu desplegable ----*/
.menu{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    padding: 60px 0;
    max-width: 400px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: start;
    height: 100vh;
    /*---- color del menu ----*/
    background-color: #4a4a4a;
    color: #fff;
    font-weight: bold;
    transform: translate(-100%);
    transition: transform 1s;
    font-family: Arial, Helvetica, sans-serif;
    overflow-y: scroll;
}
.menu_open{
    transform: translate(0);
}
.menu ul{
    height: 100%;
    width: 100%;
}
.menu ul li div{
    width: 100%;
    list-style: none;
    padding: 20px 0 20px 25px;
    cursor: pointer;
    position: relative;
    &:hover{
        background-color: #b9b8b8;
    }
    &:hover > i{
        transform: rotate(90deg);
    }
}
.menu ul li a{
    text-decoration: none;
    color: #fff;
}
.menu ul li > ul{
    display: none;
    transition: .3s;
    list-style: none;
    transition: display .4s;
}
.menu ul li > ul li{
    padding: 20px 0 20px 25px;
    margin-left: 30px;
    &:hover{
        background-color: #b9b8b8;
    }
}

/*----- DESPLEGAR MENU ------*/
.menu ul .desplace > ul{
    display: block;
    transition: display .4s;
}
.desplegar  .arrow_R{
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    width: 20px;
    display: flex;
    align-items: center;
    transition: transform .3s;
    
}
.row  .arrow_R{
    transform: rotate(90deg);
}

/*--- Botones de abrir y cerrar menu ---*/
#botom_menu{
    display: flex;
    align-items: center;
    padding: 10px 20px;
    transition: .5s;
    position: absolute;
    left: 0;
    top: 0;
}
#botom_menu i, #mover_x i{
    cursor: pointer;
    font-size: 2em;
    padding: 10px;
    transition: .5s;
    &:hover{
        scale: 1.3;
    }
    &:active{
        scale: .9;
    }
}

#mover_x{
    color: #fff;
    transform: translateY(-100%);
    margin-right: 15px;
    &:hover > #closed_menu{
        rotate: 90deg;
    }
}
#botom_menu .closed{
    display: none;
}

/*--- Logo estilos ---*/

.logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: auto;
    height: 100%;
    gap: 15px;
    & h3{
        font-size: 1.8rem;
        font-family: sans-serif;
        font-weight: 800;
    }
}
.logo .img_logo{
    width: 80px;
    height: 100%;
}
.logo .img_logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}