/* pages-Information */

/* General Css */

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    --text-color: rgba(255, 255, 255, 0.918);
    --second-text-color: #81080a;
}

h3 {

    margin: 40px auto 5px auto;
    color: var(--second-text-color);
    font-size: 1.2rem;

}

/* wines first section background */

#wine-1,
#wine-2,
#wine-3,
#wine-4,
#wine-5,
#wine-6 {


    background-image: url(../assets/wines-description/wines-bg.png);
    background-color: black;

}



/* wine 1 */


#wine-1 .containerPagina1 {


    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

}

#wine-1 #fondoImagen-1a {

    background-image: url(../assets/wines-description/wine-1/img-2a.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: center center;
    height: 100vh;
    width: 50%;


}

#wine-1 #fondoImagen-1a #botella-1 {

    background-image: url(../assets/wines-description/wine-1/wineShadow-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    width: 100%;
    position: fixed;
}

#wine-1 #fondoImagen-2a {

    background-image: url(../assets/wines-description/wine-1/img-1a.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 40vh;
    width: 50%;
    display: flex;
    justify-content: end;
    margin: auto 3rem;

}

#wine-1 #white-logo {

    margin: 60px 6rem;
    position: absolute;
    right: 6rem;
}


/* second section of first wine description */

#description-1 {
    background-image: url(../assets/wines-description/info-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: end;
    color: var(--text-color);


}

#description-1 .logo {
    padding: 80px 0px 60px 0px;

}


#description-1 .containerDescription1 {

    height: 100%;

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-right: 20%;

}


#description-1 .containerDescription1 .containerTextDescription1 {

    display: flex;
    flex-direction: column;
    max-width: 500px;

}

#description-1 h2 {

    margin: 0px auto 10px auto;
    color: var(--second-text-color);
    text-align: center;
    font-size: 1.8rem;


}



#description-1 .containerDescription1 h4 {

    margin-top: 30px;
    font-size: 0.9rem;

}

#description-1 .containerDescription1 p {
    font-size: 1.2rem;
}


#description-1 .mendoza {
    display: flex;
    align-items: center;
    padding: 60px 0px 70px 0px;
}



/* Wine-2 */

#wine-2 .containerPagina2 {


    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

}

#wine-2 #fondoImagen-1b {

    background-image: url(../assets/wines-description/wine-2-4-5/img-1b.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 50%;


}

#wine-2 #fondoImagen-1b #botella-2 {

    background-image: url(../assets/wines-description/wine-2-4-5/wineShadow-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    width: 100%;
    position: fixed;
    margin-left: -120px;

}

#wine-2 #fondoImagen-2b {

    background-image: url(../assets/wines-description/wine-2-4-5/img-2b.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
    width: 50%;
    display: flex;
    margin: auto;

}

#wine-2 #white-logo {

    margin: 60px 6rem;
    position: absolute;
    right: 6rem;
}


/* second section of second wine description */

#description-2 {
    background-image: url(../assets/wines-description/info-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: end;

}

#description-2 .logo {
    padding: 80px 0px 60px 0px;
}


#description-2 .containerDescription2 {

    height: 100%;

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-right: 20%;

    color: var(--text-color);
}


#description-2 .containerDescription2 .containerTextDescription2 {

    display: flex;
    flex-direction: column;
    max-width: 500px;
}



#description-2 .containerDescription2 h2 {

    margin: 0px auto 10px auto;
    color: var(--second-text-color);
    text-align: center;
    font-size: 1.8rem;


}



#description-2 .containerDescription2 h4 {

    margin-top: 30px;
    font-size: 0.9rem;

}

#description-2 .containerDescription2 p {
    font-size: 1.2rem;
}

#description-2 .containerDescription2 .containerTextDescription2 .smallText {

    font-size: 0.8rem;
    font-weight: bold;
    padding: 20px 0px 20px 0px;

}

#description-2 .mendoza {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0px 70px 0px;
}


/* Wine-3 */

#wine-3 .containerPagina3 {


    background-position: center center;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

}

#wine-3 #fondoImagen-1c {

    background-image: url(../assets/wines-description/wine-3-6/img-1c.png);
    background-repeat: no-repeat;

    background-size: contain;
    height: 100vh;
    width: 50%;


}

#wine-3 #fondoImagen-1c #botella-3 {

    background-image: url(../assets/wines-description/wine-3-6/wineShadow-3.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    width: 100%;
    position: fixed;
}

#wine-3 #fondoImagen-2c {

    background-image: url(../assets/wines-description/wine-3-6/img-2c.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100vh;
    width: 50%;
    display: flex;
    margin-right: 4rem;
}

#wine-3 #white-logo {

    margin: 60px 6rem;
    position: absolute;
    right: 6rem;
}


/* second section of third wine description */

#description-3 {
    background-image: url(../assets/wines-description/info-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: end;


}

#description-3 .logo {
    padding: 80px 0px 60px 0px;

}


#description-3 .containerDescription3 {

    height: 100%;


    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-right: 20%;
    color: var(--text-color);
}


#description-3 .containerDescription3 .containerTextDescription3 {

    display: flex;
    flex-direction: column;
    max-width: 500px;

}

#description-3 .containerDescription3 h2 {

    margin: 0px auto 10px auto;
    color: var(--second-text-color);
    text-align: center;
    font-size: 1.8rem;

}



#description-3 .containerDescription3 h4 {

    margin-top: 30px;
    font-size: 0.9rem;

}

#description-3 .containerDescription3 p {
    font-size: 1.2rem;
}


#description-3 .mendoza {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0px 70px 0px;
}

#description-3 .containerDescription3 .containerTextDescription3 .smallText {

    font-size: 0.8rem;
    font-weight: bold;
    padding: 20px 0px 0px 0px;

}








/* Wine- 4 */

#wine-4 .containerPagina4 {


    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

}

#wine-4 #fondoImagen-1d {

    background-image: url(../assets/wines-description/wine-2-4-5/img-1b.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 50%;


}

#wine-4 #fondoImagen-1d #botella-4 {

    background-image: url(../assets/wines-description/wine-2-4-5/wineShadow-4.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    width: 100%;
    position: fixed;

}

#wine-4 #fondoImagen-2d {

    background-image: url(../assets/wines-description/wine-2-4-5/img-2b.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
    width: 50%;
    display: flex;
    margin: auto
}

#wine-4 #white-logo {

    margin: 60px 6rem;
    position: absolute;
    right: 6rem;
}


/* second section of fourth wine description */

#description-4 {
    background-image: url(../assets/wines-description/info-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: end;

}

#description-4 .logo {
    padding: 80px 0px 60px 0px;
}


#description-4 .containerDescription4 {

    height: 100%;

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-right: 20%;

    color: var(--text-color);
}


#description-4 .containerDescription4 .containerTextDescription4 {

    display: flex;
    flex-direction: column;
    max-width: 500px;
}



#description-4 .containerDescription4 h2 {

    margin: 0px auto 10px auto;
    color: var(--second-text-color);
    text-align: center;
    font-size: 1.8rem;


}



#description-4 .containerDescription4 h4 {

    margin-top: 30px;
    font-size: 0.9rem;

}

#description-4 .containerDescription4 p {
    font-size: 1.2rem;
}

#description-4 .containerDescription4 .containerTextDescription4 .smallText {

    font-size: 0.8rem;
    font-weight: bold;
    padding: 20px 0px 20px 0px;

}

#description-4 .mendoza {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0px 70px 0px;
}



/* Wine- 5 */


#wine-5 .containerPagina5 {


    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

}

#wine-5 #fondoImagen-1e {

    background-image: url(../assets/wines-description/wine-2-4-5/img-1b.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 50%;


}

#wine-5 #fondoImagen-1e #botella-5 {

    background-image: url(../assets/wines-description/wine-2-4-5/wineShadow-5.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    width: 100%;
    position: fixed;

}

#wine-5 #fondoImagen-2e {

    background-image: url(../assets/wines-description/wine-2-4-5/img-2b.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
    width: 50%;
    display: flex;
    margin: auto
}

#wine-5 #white-logo {

    margin: 60px 6rem;
    position: absolute;
    right: 6rem;
}


/* second section of fifth wine description */

#description-5 {
    background-image: url(../assets/wines-description/info-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: end;

}

#description-5 .logo {
    padding: 80px 0px 60px 0px;
}


#description-5 .containerDescription5 {

    height: 100%;

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-right: 20%;

    color: var(--text-color);
}


#description-5 .containerDescription5 .containerTextDescription5 {

    display: flex;
    flex-direction: column;
    max-width: 500px;
}



#description-5 .containerDescription5 h2 {

    margin: 0px auto 10px auto;
    color: var(--second-text-color);
    text-align: center;
    font-size: 1.8rem;

}


#description-5 .containerDescription5 h4 {

    margin-top: 30px;
    font-size: 0.9rem;

}

#description-5 .containerDescription5 p {
    font-size: 1.2rem;
}

#description-5 .containerDescription5 .containerTextDescription5 .smallText {

    font-size: 0.8rem;
    font-weight: bold;
    padding: 20px 0px 20px 0px;

}

#description-5 .mendoza {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0px 70px 0px;
}


/* Wine - 6 */


#wine-6 .containerPagina6 {


    background-position: center center;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

}

#wine-6 #fondoImagen-1f {

    background-image: url(../assets/wines-description/wine-3-6/img-1c.png);
    background-repeat: no-repeat;

    background-size: contain;
    height: 100vh;
    width: 50%;


}

#wine-6 #fondoImagen-1f #botella-6 {

    background-image: url(../assets/wines-description/wine-3-6/wineShadow-6.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    width: 100%;
    position: fixed;
}

#wine-6 #fondoImagen-2f {

    background-image: url(../assets/wines-description/wine-3-6/img-2c.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100vh;
    width: 50%;
    display: flex;
    margin-right: 4rem;
}

#wine-6 #white-logo {

    margin: 60px 6rem;
    position: absolute;
    right: 6rem;
}


/* second section of sixth wine description */

#description-6 {
    background-image: url(../assets/wines-description/info-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: end;


}

#description-6 .logo {
    padding: 80px 0px 60px 0px;

}


#description-6 .containerDescription6 {

    height: 100%;


    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-right: 20%;
    color: var(--text-color);
}


#description-6 .containerDescription6 .containerTextDescription6 {

    display: flex;
    flex-direction: column;
    max-width: 500px;

}

#description-6 .containerDescription6 h2 {

    margin: 0px auto 10px auto;
    color: var(--second-text-color);
    text-align: center;
    font-size: 1.8rem;

}



#description-6 .containerDescription6 h4 {

    margin-top: 30px;
    font-size: 0.9rem;

}

#description-6 .containerDescription6 p {
    font-size: 1.2rem;
}


#description-6 .mendoza {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0px 70px 0px;
}

#description-6 .containerDescription6 .containerTextDescription6 .smallText {

    font-size: 0.8rem;
    font-weight: bold;
    padding: 20px 0px 0px 0px;

}

/* Text animation */

[data-animation="fade"] {

    opacity: 0;
    transform: translateX(-100%);
    transition: .7s ease-in-out .2s;

    --opacity: 1;
    --transform: translate(0);
}

.unset {

    opacity: var(--opacity);
    transform: var(--transform);
}







/* Breack Points */

/* 1024 */

@media (max-width:1024px) {

    /* Wine- sections */

    #wine-1 #fondoImagen-1a #botella-1 {
        position: static;
    }

    #wine-2 #fondoImagen-1b #botella-2 {

        position: static;
        background-size: cover;

    }

    #wine-3 #fondoImagen-1c #botella-3,
    #wine-4 #fondoImagen-1d #botella-4,
    #wine-5 #fondoImagen-1e #botella-5,
    #wine-6 #fondoImagen-1f #botella-6 {

        position: static;


    }



    /* Wines Descriptions */


    #description-1 .containerDescription1,
    #description-2 .containerDescription2,
    #description-3 .containerDescription3,
    #description-4 .containerDescription4,
    #description-5 .containerDescription5,
    #description-6 .containerDescription6 {


        margin-right: auto;
        margin-left: auto;

    }

}

/* 900 */




@media (max-width: 900px) {

    /* Wine 1 section */

    #wine-1 .containerPagina1 {
        flex-direction: column-reverse;
        align-items: center;
    }

    #wine-1 #fondoImagen-1a {

        background-image: none;
        width: 100%;
        height: 100%;
        margin-top: auto;
        display: flex;
        justify-content: center;


    }

    #wine-1 #fondoImagen-1a #botella-1 {

        display: flex;
        height: 100%;
        background-position: center;
        z-index: 999;
        margin-left: 30px;
    }

    #wine-1 #fondoImagen-2a {

        display: flex;
        position: absolute;
        height: 65vh;
        width: 92%;
        top: 30%;

    }

    #wine-1 #white-logo {
        position: static;
        margin: 60px auto 20px;

    }

    /* Wine 2, 4 and 5 sections */


    #wine-2 .containerPagina2,
    #wine-4 .containerPagina4,
    #wine-5 .containerPagina5 {
        flex-direction: column-reverse;
        align-items: center;
    }

    #wine-2 #fondoImagen-1b,
    #wine-4 #fondoImagen-1d,
    #wine-5 #fondoImagen-1e {

        background-image: none;
        width: 100%;
        height: 100%;
        margin-top: auto;
        display: flex;
        justify-content: center;


    }

    #wine-2 #fondoImagen-1b #botella-2,
    #wine-4 #fondoImagen-1d #botella-4,
    #wine-5 #fondoImagen-1e #botella-5 {

        display: flex;
        height: 100%;
        background-position: center;
        z-index: 999;
        margin-left: 35px;
        background-size: contain;

    }

    #wine-2 #fondoImagen-2b,
    #wine-4 #fondoImagen-2d,
    #wine-5 #fondoImagen-2e {

        display: flex;
        position: absolute;
        height: 65vh;
        width: 100%;
        top: 30%;

    }

    #wine-2 #white-logo,
    #wine-4 #white-logo,
    #wine-5 #white-logo {
        position: static;
        margin: 60px auto 20px;

    }

    /* Wine 3 and 6 sections */

    #wine-3 .containerPagina3,
    #wine-6 .containerPagina6 {
        flex-direction: column-reverse;
        align-items: center;
    }

    #wine-3 #fondoImagen-1c,
    #wine-6 #fondoImagen-1f {

        background-image: none;
        width: 100%;
        height: 100%;
        margin-top: auto;
        display: flex;
        justify-content: center;


    }

    #wine-3 #fondoImagen-1c #botella-3,
    #wine-6 #fondoImagen-1f #botella-6 {

        display: flex;
        height: 100%;
        background-position: center;
        z-index: 999;
        margin-left: 26px;
        background-size: contain;

    }

    #wine-3 #fondoImagen-2c,
    #wine-6 #fondoImagen-2f {

        display: flex;
        position: absolute;
        height: 65vh;
        width: 100%;
        top: 30%;
        margin-right: 5px;


    }

    #wine-3 #white-logo,
    #wine-6 #white-logo {
        position: static;
        margin: 60px auto 20px;

    }



}

/* 580 for responsive bottle 2. 4 and 5 dont need this chage */
@media (max-width: 580px) {

    #wine-2 #fondoImagen-1b #botella-2 {


        background-size: cover;

    }




}

/* 650 height for responsive bottle 2. 4 and 5 dont need this chage */

@media (max-height: 650px) {
    #wine-2 #fondoImagen-1b #botella-2 {


        background-size: contain;
        margin-left: -60px;

    }
}


@media (max-width:768px) {

    /* Wine description sections */

    #description-1,
    #description-2,
    #description-3,
    #description-4,
    #description-5,
    #description-6 {

        background-image: none;
        background-color: black;

    }

    #description-1 .containerDescription1 .containerTextDescription1,
    #description-2 .containerDescription2 .containerTextDescription2,
    #description-3 .containerDescription3 .containerTextDescription3,
    #description-4 .containerDescription4 .containerTextDescription4,
    #description-5 .containerDescription5 .containerTextDescription5,
    #description-6 .containerDescription6 .containerTextDescription6 {


        max-width: 300px;

    }

    #description-1 .mendoza,
    #description-2 .mendoza,
    #description-3 .mendoza,
    #description-4 .mendoza,
    #description-5 .mendoza,
    #description-6 .mendoza {

        justify-content: center;

    }

    #description-1 .mendoza img,
    #description-2 .mendoza img,
    #description-3 .mendoza img,
    #description-4 .mendoza img,
    #description-5 .mendoza img,
    #description-6 .mendoza img {

        width: 80%;

    }

}