#contenedor-order-online select {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    margin: 5px 0;
    text-transform: capitalize;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#contenedor-order-online {
    width: 100vw;
    height: calc(100vh - 40px);
    min-height: 650px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    position: relative;
}

#logo-setorder-principal {
    width: 175px;
    height: auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s ease;
    z-index: 2;
} #logo-setorder-principal:hover {
    width: 180px;
} @media screen and (max-width: 1000px) { #logo-setorder-principal { width: 125px; } }

#atras-setorder {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #2a1410;
    font-family: 'Comfortaa', cursive; 
    font-size: 1.2em;
    text-shadow: 1px 1px #f15a22;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    
    position: absolute;
    top: 20px;
    left: 20px;
}

#cancelar-setorder {
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #2a1410;
    font-family: 'Comfortaa', cursive; 
    font-size: 1.2em;
    text-shadow: 1px 1px #f15a22;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    
    position: absolute;
    top: 20px;
    left: 20px;
}

#foto-decorativa-order-online {
    width: 50%;
    height: 100%;
    background-image: url(../../imgs/slide_1.jpg);
    background-size: cover;
    background-position: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

@supports (display: grid) {
    #contenedor-order-online select {
        width: 100%;
        background-color: white;
        border-radius: 5px;
        margin: 5px 0;
        text-transform: capitalize;
    }

    #contenedor-order-online {
        width: 100vw;
        height: calc(100vh - 40px);
        min-height: 650px;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        position: relative;
    }

    #logo-setorder-principal {
        width: 175px;
        height: auto;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        transition: all .2s ease;
        z-index: 2;
    } #logo-setorder-principal:hover {
        width: 180px;
    } @media screen and (max-width: 1000px) { #logo-setorder-principal { width: 125px; } }

    #atras-setorder {
        display: block;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: var(--cafe);
        font-family: var(--comfortaa); 
        font-size: 1.2em;
        text-shadow: 1px 1px var(--naranja);
        color: var(--blanco);
        border-radius: 20px;
        cursor: pointer;

        position: absolute;
        top: 20px;
        left: 20px;
    }

    #cancelar-setorder {
        width: 50px;
        height: 50px;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: var(--cafe);
        font-family: var(--comfortaa); 
        font-size: 1.2em;
        text-shadow: 1px 1px var(--naranja);
        color: var(--blanco);
        border-radius: 50%;
        cursor: pointer;

        position: absolute;
        top: 20px;
        left: 20px;
    }

    #foto-decorativa-order-online {
        width: 50%;
        height: 100%;
        background-image: url(../../imgs/slide_1.jpg);
        background-size: cover;
        background-position: center;
    }
}


/* -- AQUÍ COMIENZA LA SECCIÓN DE LA ORDEN INTERNA -- */
#orden-interna {
    width: 50%;
    height: 100%;
    background-color: var(--verde);
    font-family: var(--comfortaa);
    text-align: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /*filter: grayscale(100%);
    pointer-events: none;*/
} 

#terminosycondicioneslink_setorder {
    color: var(--blanco);
    font-size: .85em;
} #terminosycondicioneslink_setorder:hover {
    color: var(--cafe);
}

#orden-interna-options {
    width: 65%;
    max-width: 375px;
    height: auto;
}

.select-inactive {
    pointer-events: none;
    color: gainsboro;
}

.select-active {
    pointer-events: all;
    color: var(--cafe);
}

.iniciarorder {
    width: 100%;
    height: 60px;
    margin: 20px auto;
    background-color: var(--cafe);
    color: var(--verde);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 20px;
    text-decoration: none;
} .iniciarorder:hover {
    color: var(--blanco);
}


/* -- AQUÍ COMIENZA LA SECCIÓN DE LA ORDEN EXTERNA -- */
#orden-externa-links {
    width: 90%;
    max-width: 350px;
    height: auto;
    padding: 10px;
    /* margin-top: 20px;
    border-top: 2px dashed var(--verde-oscuro); */
    background-color: #f15a22;
    color: #ffffff;
    border-radius: 20px;
    font-family: var(--comfortaa);
    
    text-align: center;
}

#orden-externa-links span {
    width: 100%;
    padding: 5px;
    display: block;
    box-sizing: border-box;
}

#ubereats {
    display: inline-block;
    width: 55px;
    height: 53px;
    margin: 5px 10px;
    background-image: url(../imgs/ubereats.png);
    background-size: 100%;
    background-position: top;
} #ubereats:hover { background-position: bottom; }

#damejidlo {
    display: inline-block;
    width: 93px;
    height: 53px;
    margin: 5px 10px;
    background-image: url(../imgs/damejidlo.png);
    background-size: 100%;
    background-position: top;
} #damejidlo:hover { background-position: bottom; }

/* -- Aquí comienzan las ventanas modales para los links externos en UberEats y DameJidlo -- */
.ventanatargets {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--naranja);
    justify-content: center;
    align-items: center;
    z-index: 10;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenedortargets {
    width: 90%;
    max-width: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#cancelar-target {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: var(--cafe);
    font-family: var(--comfortaa); 
    font-size: 1.2em;
    text-shadow: 1px 1px var(--naranja);
    color: var(--blanco);
    border-radius: 50%;
    cursor: pointer;
    
    position: absolute;
    top: 20px;
    left: 20px;
}

#targetubereats, #targetdamejidlo {
    display: none;
} #targetubereats:target, #targetdamejidlo:target {
    display: flex;
}

#ubereatstargetimg {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    background-image: url(../imgs/ubereats.png);
    background-size: 100%;
    background-position: top;
}

#damejidlotargetimg {
    width: 100px;
    height: 55px;
    margin-bottom: 20px;
    background-image: url(../imgs/damejidlo.png);
    background-size: 100%;
    background-position: top;
}

/* -- Footer -- */
#footer-setorder {
    width: 100vw;
    height: 40px;
    color: var(--blanco);
    background-color: var(--cafe);
    text-align: center;
    font-family: var(--comfortaa);
    font-size: .8em;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -- ACCIONES ESPECÍFICAS -- */
#separador860 { /* Este # separa el titulo para que se vea siempre bien y no se corte */
    display:none;
} @media screen and (max-width: 860px) { #separador860 { display: block; } }


/* -- -- -- -- -- -- --- -- -- -- -- -- -- */
/* -- -- AQUÍ COMIENZA EL RESPONSIVE -- -- */
/* -- -- -- -- -- -- --- -- -- -- -- -- -- */

@media screen and (max-width: 650px) { 
    #contenedor-order-online { 
        flex-direction: column-reverse; 
        height: auto;
    } 
    
    #cancelar-setorder { display: flex; }
    #atras-setorder { display: none; }
    
    #foto-decorativa-order-online {
        display: none;
    }
    
    #orden-interna {
        width: 100%;
        height: auto;
        padding: 200px 0 30px 0;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 375px) {
    #orden-interna-options {
        width: 85%;
    }
}