:root {
    --color-background: black;
    --color-text: white;
    --font-family-primary: 'Cinzel', serif;
    --font-family-secondary: 'Dax', sans-serif;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    color: var(--color-text);
}



#background-image {
    background-image: url('/mediaAssets/Oro\ bailen\ -\ dossier\ fondo.jpg');
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}

#background {
    background-image: url('/mediaAssets/Oro\ Bailen\ -\ fondo.png');
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    height: 200px;
    position: relative;
    bottom: 0;
    padding-top: 70px;

}

/* Language selection page */
.language-selection {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8%;
    width: 100%;
    gap: 30px;

}

.language-selection span {
    font-family: var(--font-family-secondary);
    font-size: x-large;
}

.flag-selection {
    width: 50px;
}

.logo {
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    height: 75%;
    max-width: 300px;
}


/* Navigation elements */
.navigation {
    width: 100%;
    position: sticky;
    top: 95vh;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
}

.navigation img {
    max-height: 35px;
}


/* Bottle selection page */
.logo-small {
    width: 100%;
    padding-top: 20%;
}

.logo-small img {
    height: 20vh;
    margin: auto;

}

.bottle-image {
    width: 25%;
    max-width: 110px;
    height: auto;
    margin-bottom: -8%; /* see bottom for different aspect ratio */
    opacity: 0;
    animation: fadeIn 2s ease-out forwards;
    animation-delay: 1s;
}

.bottle-selection {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0px;
}

.flag-bottle {
    width: 15% !important;
    max-width: 86px;
    margin: 0 10px;
    position: relative;
    bottom: 50vh;
}


/**
Bottle landing page 
*/
.bottle-content {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 70%;
}

.bottle-links,
.bottle-bottle {
    width: 50%;
    min-height: 100%;
}

.bottle-content img.bottle-image {
    opacity: 0;
    animation: fadeIn 2s ease-out forwards;
    animation-delay: 1s;
    position: absolute;
    bottom: 0;
    right: 10%;

}

.bottle-links {
    text-align: center;
    opacity: 0;
    animation: fadeIn 2s ease-out forwards;
    animation-delay: 2s;
    /* see bottom for different aspect ratio */
}

.bottle-links img,
p {
    margin: 10% auto auto 15px;
}

.bottle-content img.bottle-link {
    width: 50%;
    height: 100%;

}

/* Awards page*/
.awards-list {
    width: 100%;
    height: auto;
}

#nav-premios {
    background-color: black;
    position: sticky;
    padding-top: 10px;

}


/* Tasting notes page */

#logos-cata {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10%;
    padding-top: 3vh;
    padding-bottom: 20px;

}

.logo-ar {
    width: 35px !important;
}

#logo-cata {
    width: 100px !important;
}


.nota-cata {
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; */
    text-align: center;
    max-height: fit-content;

}

.nota-cata p {
    font-family: 'Cinzel', serif;
    margin: 5px 20px;
    font-size: small;

}

.imagenes-cata {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    position: absolute;
    bottom: 12%;
}

.imagenes-cata img {
    width: 107px;
}

.imagenes-cata {
    width: 100%;
}

/* Promotional Video */
.imagen-promocional {
    max-height: 30vh;
    margin-top: 0;
}

.contenedor-video {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 1s;

}

.contenedor-video iframe {
    display: block;
    position: relative;
    min-width: 100vw;
    min-height: 250px;
    pointer-events: none;
}

/*#in-house {
    display: none !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    animation: fadeOut 1s forwards;
}

#in-house p {
    font-size: large;
}*/


/* SMALL DEVICES */

@media (max-width:350px) {
    .language-selection span {
        font-size: large;
    }

    .language-selection {
        gap: 15px;
    }

}

/* MODERN SMARTPHONE WITH LOWER ASPECT RATIO */

/**/
@media (min-aspect-ratio:0.58) and (max-aspect-ratio:0.59) and (min-width:380px) {
    .bottle-image {
        margin-bottom: -1vh;
    }
}

/* Samsung Galaxy S20 - Iphone 12/14 */
@media (max-aspect-ratio:0.49) and (max-width:550px) {
    .bottle-image {
        margin-bottom: -1%;
    }
}

/* IPad Pro */
@media (min-aspect-ratio:0.7) and (min-width: 850px) {
    .bottle-image {
        margin-bottom: 3% !important;

    }
}

/*IPad Mini, IPad Air*/
@media (min-aspect-ratio:0.6) and (min-width:600px) and (max-width: 850px) {
    .bottle-image {
        margin-bottom: -3vh !important;

    }
}

/* Surface Pro 7, Ipad Mini */
@media (min-aspect-ratio:0.6) and (min-width:600px) {
    .bottle-image {
        margin-bottom: 0;
        max-width: 180px;
        gap: 50px !important;
    }

    img.flag-bottle {
        margin-left: 100px;
        margin-right: 100px;
    }

    .navigation img {
        max-height: 70px;
    }

    .bottle-content img.bottle-link {
        width: 35% !important;
        margin: 0 auto 2% auto;
    }

    .bottle-content p {
        margin: 0 auto 5% auto;
    }

}


/* DEKSTOP VIEW */
@media (min-aspect-ratio:1.5) {
    .logo {
        height: 70vh;
        margin-bottom: 0;
    }

    .logo-small {
        padding-top: 2%;
    }

    .language-selection {
        top: 20%;
        transform: translateY(-50%);
        width: 100%;
        margin: auto;
        text-align: center;
    }

    #background-image {
        width: auto;
        background-size: contain;

    }

    .navigation img {
        max-height: 50px;
    }


    .bottle-image {
        margin-bottom: -4% !important;
        max-width: 8% !important;

    }

    img.flag-bottle {
        width: 50px !important;
    }

    .bottle-links {
        margin-bottom: 15%;
    }

    .bottle-content img.bottle-link {
        width: 15% !important;
        margin: 0 auto 2% auto;
    }

    .bottle-content p {
        margin: 0 auto 5% auto;
    }

    .imagen-promocional {
        max-height: 30vh;
    }

    .contenedor-video iframe {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -70%);
        min-width: 120vw;
        min-height: 80vh;
        pointer-events: none;
    }

    .nodisplay#background-image,
    .nodisplay#background {
        background-image: none;
    }

    .nota-cata p {
        max-width: 90%;
        text-align: center;
        padding-top: 20vh;
        margin-bottom: 0;
    }

    #logos-cata {
        display: none;
    }

    .imagenes-cata {
        margin-bottom: 10vh;
        margin-top: 0;
    }

    .imagenes-cata img {
        max-width: 70px;
    }

}

/* Only Desktop no mobile landscape */
@media (min-aspect-ratio:1.5) and (min-width:950px) {
    .nota-cata p {
        max-width: 60%;
        text-align: center;
        padding-top: 20vh;
        margin: 0 auto 0 auto;
        font-size: large;
    }

    #logos-cata {
        display: unset;
        top: 40px;
        position: relative;

    }

    .imagenes-cata img {
        max-width: 110px;
    }

    .bottle-image {
        margin-bottom: -3% !important;
        max-width: 7% !important;

    }
}


/* iPhone 6/7/8 */
@media (max-height:750px) {
    .bottle-content img.bottle-link {
        width: 35%;
    }

    /* #background-image {
        background-image: none;       
    } */
}

/** Soneweb - 2024 */
/* ANIMATION */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* FONTS DECLARATION */
@font-face {
    font-family: 'Cinzel';
    src: url('fonts/cinzeldecorative-regular-webfont.woff') format('woff'),
        url('fonts/cinzeldecorative-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Dax';
    src: url('fonts/dax_regular-webfont.woff2') format('woff2'),
        url('fonts/dax_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* REMOVAL FOR HEADER AND FOOTER
** Utiliza una clase ya existente para visualizar como una app
** .contanier-fluid es declarada en ambos header y footer.
** Si se cambiase la clase, hay que adaptar el código.
**/
.container-fluid {
    display: none;
}