@media (min-width: 768px) and (max-width: 1023px) {

    body {
        background-color: #19211d;
    }


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

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

    }


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

    }

    .abrir-menu,
    .cerrar-menu {
        opacity: 0;
    }
    .menu{
        flex-wrap: wrap;
        gap: 15px;
    }

    .menu a {        
        color: white;
        font-size: 1.2rem;
        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;
    }



    /* ASIDE IZQUIERDO */
    .asideIzq {
        grid-area: asideIzq;
 
    }

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

    }

    .main p{
        padding-left: 50px;
    }

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

    }

    /* FOOTER */
    .footer {
        grid-area: footer;

    }

}

@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
}