@media (orientation: landscape) {

    body {
    font-family: "Antonio";

    }
/*Barra superior*/

.hamburger {
    display: none;
    background: none;
    border: none;

    color: white;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

.encabezado {

    height: auto;

    width: 100%;
    z-index: 2;
}

.navigator {
    max-width: 100vw;
    height: auto;
    background-color: black;

    position: relative;
}

.menu-items {
    width: 100%;
    height: auto;
    min-width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton_navegacion {
    width: auto;
    height: auto;
    padding: 0%;

    max-width: 22vw;
    max-height: 6vh;



    font-size: clamp(0.8rem, 3vh, 1.6rem);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.084);
    color: white;
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0,0,0,0);

    text-overflow: ellipsis;
    white-space: nowrap;
    transition: 0.4s ease;
}

#separador_hd {
    min-width: 2vw;
}

.boton_navegacion:hover { /*Animacion al pasar el cursor encima de cada opcion*/
    background-color: rgb(196, 196, 196,0.5);
}

.submenu_navegador {
    position: relative;
    display: inline-block;
}

.boton_informacion {
    width: auto;
    height: auto;

}

.submenu_informacion {
    list-style: none;
    padding: 10px;
    margin: 0;

    position: absolute;
    top: calc(95%);
    left: 0;
    width: min-content;
    height: auto;

    background-color: #000000;
    padding: 10px;
    border-radius: 8px;
    display: none;
    z-index: 10;
    transition: opacity 0.3s ease;
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
}

.submenu_informacion ul {
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.2s ease;
    list-style: none;

}

.submenu_informacion a {
    all: unset;
    font-size: clamp(1rem, 3vh, 1rem);
}

.submenu_informacion ul:hover {
    background-color: rgba(31, 31, 31, 0.5);
}

.submenu_navegador:hover .submenu_informacion {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

}

/*Display en celular*/
@media (orientation: portrait) {

    body {
        font-family: "Antonio";
    }




.encabezado {
    position: fixed;
    height: auto;
    width: 100vw;
    z-index: 2;

}

.navigator {
    width: 100%;
    height: auto;
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.menu-items {
    position: relative;
    display: flex;
    gap: 0.2rem;
    z-index: 3;
}

.hamburger {
    position: absolute;
    left: calc(1.5%);
    top: calc(0%);
    transform: translateY(-10%);
    border: 0;
    padding: 0;
    display: block;
    font-size: clamp(3rem, 4vh, 5.0rem);
    z-index: 3;
    border-radius: 2vh;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    color: white;
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);

    }

    .menu-items {
        opacity: 0;
        display: flex;
        flex-direction: column;
        height: auto;
        width: auto;
        background-color: #111;
        position: absolute;
        top: calc(6vh);
        left: calc(0%);
        border-top-right-radius: 2vh;
        border-bottom-right-radius: 2vh;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
        visibility: hidden;
    }




    .menu-items.show {
        opacity: 1;
        display: flex;
        transition: all 0.3s ease-in-out;
        pointer-events: auto;
        visibility: visible;
    }


.boton_navegacion {

    width: auto;
    min-width: min-content;
    padding: 0%;

    max-width: 22vw;
    max-height: 6vh;
    margin: 0.4vh;
    padding-left: 1vh;
    padding-right: 1vh;
    text-align: left;
    font-size: clamp(1rem, 3vh, 4rem);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.084);
    color: white;
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0,0,0,0);

    text-overflow: ellipsis;
    white-space: nowrap;
    transition: 0.4s ease;
}

.boton_navegacion:hover { /*Animacion al pasar el cursor encima de cada opcion*/
    background-color: rgb(196, 196, 196,0.5);
}

.submenu_navegador {
    position: relative;
    display: inline-block;
}

.boton_informacion {
    width: auto;
    height: auto;

}

.submenu_informacion {
    list-style: none;
    padding: 10px;
    margin: 0;

    position: absolute;
    top: calc(95%);
    left: 0;
    width: min-content;
    height: auto;

    background-color: #000000;
    padding: 10px;
    border-radius: 8px;
    display: none;
    z-index: 10;
    transition: opacity 0.3s ease;
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
}

.submenu_informacion ul {
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.2s ease;
    list-style: none;

}

.submenu_informacion a {
    all: unset;
    font-size: clamp(0.5rem, 3vh, 1rem);
}

.submenu_informacion ul:hover {
    background-color: rgba(31, 31, 31, 0.5);
}

.submenu_navegador:hover .submenu_informacion {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

}