* {
        margin: 0;
        padding: 0;
        box-sizing: border-box; /* Incluye el padding y el border en el ancho y alto total del elemento */  
    }

body {
    margin: 0;
    display: flex;
    flex-direction: column;                 
    height: 100vh;
    background-color: #b2c2b8;
    justify-content: center;
    color: #333;
}

.container {
    display: flex;
    width: 80%;
    min-width: 760px;
    aspect-ratio: 2 / 1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    align-items: stretch;  /* NUEVO */
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    text-align: center;}

.isflex {
    display: flex;
}

.dc {
    flex-direction: column;
}

.dr {
    flex-direction: row;
}

.ax1 {
    flex:1;
}

.ax2 {
    flex:2;
}

.ax3 {
    flex: 3;
}

.ax4 {
    flex: 4;
}

.ax5 {
    flex: 5;
}

.ax7 {
    flex: 7;
}

.ax9 {
    flex: 9;
}

.ax12 {
    flex: 12;
}

.ax17 {
    flex: 17;
}

.ax31 {
    flex: 31;
}

.w25 {
    width: 25%;
}

.w33 {
    width: 33.33%;
}

.w50 {
    width: 50%;
}

.w66 {
    width: 66.66%;
}

.w75 {
    width: 75%;
}

.w80 {
    width: 80%;
}


.w100 {
    width: 100%;
}

.h50 {
    height: 50%;
}

.h100 {
    height: 100%;
}


.wrp {
    flex-wrap: wrap;
}

.innercaja {
    width: calc(100% - 30px); /* Resta el margin    */  
    height: calc(100% - 30px); /* Resta el margin */
    margin: 15px;
}

#formnavigation {
    width: 100%;
}

#europa {
    position:absolute;
    right:10px;
    bottom:10px;
    padding:5px;
    max-height:80px;
}

.eu-wrapper {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    align-items: center;
}
.eu-wrapper img {
    max-height: 80px;
}

/* Medium devices such as tablets (1440px or lesser) */
@media only screen and (max-width: 1440px) {
    .innercaja {
	    width: calc(100% - 20px);
	    height: calc(100% - 20px);
	    margin: 10px;
    }

    #galeria {
        display: flex;
        height: 100%;
        align-items: center;
    }

}

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

    main > .container { 
        width: 90%;       
    }

    #navcontainer {
        font-size: 14px;
    }

}

@media (max-width: 780px) 
{ 
    #navcontainer {
        font-size: 16px;
    }
    
    .innercaja {
        width: auto;
        height: auto;
    }
    
    body {
        height: auto;
    }    
    
    main > .container { 
        min-width: unset; /* Elimina el ancho mínimo para pantallas pequeñas */
        flex-direction: column; 
        aspect-ratio: unset;
        width: 90%;
        
    }

    nav {
        order: -1;
        flex:initial;
    }

    main {
        order: 1;
        flex: 1;
        height: auto;
    }

    footer {
        order: 3;
        margin-top: 10px;
        flex:initial;
    }

    #europa {
        position: static;
        order: 2;
    }

    .eu-wrapper {
        justify-content: center;
        flex-wrap: nowrap;
        max-width: 95%;
        margin-left:auto;
        margin-right:auto;
    }

    .w25, .w33, .w50, .w66, .w75 {
        width: 100%;
    }

    .h50, .h100 {
        height: auto; /* Elimina la altura fija para pantallas pequeñas */
    }

    .innercaja.confondo {
        aspect-ratio: 1 / 1;
        /* width: 100%;
        max-height: 100%; */
        border: 15px solid #ccc;
    }

    .asprt-half {
        aspect-ratio: 2 / 1 !important;
    }

    .asprt-double {
        aspect-ratio: 1 / 2 !important;
    }

    .asprt-third {
        aspect-ratio: 3 / 1 !important;
    }

    .asprt-triple {
        aspect-ratio: 1 / 3 !important;
    }
}

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


    #europa {
        max-height: none;
    }
    .eu-wrapper {
        flex-direction: column;
    }

}


@media only screen and (min-width: 1700px) {
    #europa {
        max-height: none;
        width: 9%;
        flex-wrap: nowrap;
    }

    .eu-wrapper {
        flex-direction: column;
        align-items: center;  
    }

    .eu-wrapper img {
        
        width: 100%;
    }
}