#chk {
    display: none;
}

#boton-menu {
    color: white;
    font-size: 1.5em;
    display: none;
}

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

.menu {
    list-style: none;    
    
}

.menu-item {
    float: right;            
}

.menu-item > a, .submenu a{    
    color: black;
    background: #E0E0E0;
    display: block;
    text-transform: uppercase;
    text-decoration: none;    
    padding: 0 15px 0 15px;
    transition: color 0.3s, background 0.3s;
    cursor: pointer;
    width: 180px;
    text-align: center;
    position: relative;
    z-index: 100;    
}

.menu-item > a:hover, .submenu-item > a:hover{
    color: rgb(108, 2, 25);
    background: rgba(255, 255, 255, 0.8);;
}

.menu-item:hover > .submenu {
    position: absolute;
    display: block;
} 

/*--------------SUBMENU---------------*/
.submenu {
    display: none;
    list-style: none;    
}

.submenu a {
    border-left: 1px solid rgb(108, 2, 25);
    border-right: 1px solid rgb(108, 2, 25);
}

/* ----------- RESPONSIVO ------------- */

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

    .menu {
        display: none;        
    }

    #boton-menu {
        display: block;
    }

    .menu-item {
        float: none;
        margin: 0;
    }

    #chk:checked ~ .menu {
        position: absolute;        
        display: block;       
        right: 0;         
    }

    .submenu {
        right: 100%;
        top: 25%;        
    }

    .menu a {
        border-left: 1px solid rgb(108, 2, 25);
        border-right: 1px solid rgb(108, 2, 25);
    }
}