@media (max-width: 767px) {

    body {
        background-color: #19211d;
    }


    .contGeneral {
        display: grid;
        grid-template:
            "header" 100px
            "navbar" 100px
            "main" auto
            "asideIzq" auto
            "asideDer" auto
            "footer" 100px/
            1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }


    /* HEADER */
    .header {
        grid-area: header;

    }



    /* NAVBAR */
    .navbar {
        grid-area: navbar;

    }


    .menu {
        width: 50vw;
        list-style: none;
        /* height: 1em; */
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        
    
    }
    
    .menu ul li {
        color: white;
    }
    
    .menu a {
        color: white;
        font-size: 1.2rem;
        margin-left: 30px;
        text-transform: uppercase;
        position: relative;
        text-decoration: none;
        text-underline-offset: 4px;
    }
    
    .menu a::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: white;
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
    }
    
    .menu a:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    .abrir-menu,
    .cerrar-menu {
        opacity: 0;
    }


    /* ASIDE IZQUIERDO */
    .asideIzq {
        grid-area: asideIzq;
        border-radius: 7px;
        background-color: #165452;
        color: #fad628;
        
        
    }
    
    .main h1{
        margin-left: 10px;
    }

    /* MAIN */
    .main {
        grid-area: main;

    }

    /* ASIDE DERECHO */
    .asideDer {
        grid-area: asideDer;

    }

    /* FOOTER */
    .footer {
        grid-area: footer;
        font-size: x-small;
    }


}

@font-face {
    font-family: 'La Roja AnchaBold';
    src: url("LaRoja-AnchaBold.eot");
    src: url("LaRoja-AnchaBold.eot?#iefix") format("embedded-opentype"), url("/fuentes/LaRoja-AnchaBold.woff2") format("woff2"), url("LaRoja-AnchaBold.woff") format("woff"), url("LaRoja-AnchaBold.ttf") format("truetype"), url("LaRoja-AnchaBold.svg#LaRoja-AnchaBold") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}