/* ==================================================
===== 500 GOTAS
==================================================  */

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

@font-face {
    font-family: 'Futura';
    src: url('fonts/FuturaStd-Medium.woff2') format('woff2'),
        url('fonts/FuturaStd-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.page-template-page-500gotas #peu {
    display: none;
}

.page-template-page-500gotas {
    font-family: 'Open Sans', sans-serif;
    font-size:15px;
    background-color: #d7f0f7;
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: repeat-x;
    background-image: url(img/500-bg.jpg);
}

#scroll500 {
    width: 100%;
    position:fixed;
    z-index: 9;
    text-align: center;
    font-size:20px;
    animation-name: enterscroll;
    animation-duration: 3s;
    bottom:0px;
    font-family: 'Fluctus';
    color:#5c5c5c;
    line-height: 1.2;
-moz-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
}

@keyframes enterscroll {
    0% {
        bottom:-100px;
    }
    50% {
        bottom:-100px;
    }
    100% {
        bottom:0px;
    }
}

#scroll500.hide {
    opacity: 0;
}

img.fledown {
    width: 15px;
    animation-name: fletxascroll;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes fletxascroll {
    0% {
        margin-top: 0px;
        margin-bottom:7px;
    }
    50% {
        margin-bottom: 0px;
        margin-top: 7px;
    }
    100% {
        margin-top: 0px;
        margin-bottom:7px;
    }
}



#botelladest,
#reflexebotelladest {
    position: fixed;
    z-index: 7;
    background-repeat: no-repeat;
    background-position:  center bottom;
    height: 100vh;
    width: 100%;
    background-image: url("img/500-gotas-principal.png");
}

#botelladest2,
#reflexebotelladest2 {
    top:0;
    position: absolute;
    z-index: 7;
    background-repeat: no-repeat;
    background-position:  center bottom;
    height: 100vh;
    width: 100%;
    background-image: url("img/500-gotas-principal.png");
}

#botelladest.hide,
#botelladest2.hide,
#reflexebotelladest.hide,
#reflexebotelladest2.hide {
    opacity: 0
}

#reflexebotelladest {
    z-index: 6;
    background-image: url(img/500-gotas-principal-ombra.png);
}


#reflexebotelladest2 {
    z-index: 6;
    background-repeat: no-repeat;
    background-position:  center bottom;
    height: 100vh;
    width: 100%;
    opacity: 1;
    background-image: url(img/500-gotas-principal-ombra.png);
}

#tap {
    display: none;
    position: fixed;
    z-index: 8;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-position: center bottom;
    background-image: url("img/500-gotas-tap.png");
    opacity:0;
-moz-transition: all ease-in-out 1s;
-webkit-transition: all ease-in-out 1s;
-o-transition: all ease-in-out 1s;
}

#tap.active {
    background-position:center top;
    animation-name: amagartap;
    animation-duration: 2s;
}

@keyframes amagartap {
    10% {
        opacity:0        
    }
    40% {
        opacity:1;
    }
}







#botelladest {
/*
-moz-transition: all ease-in-out 0.9s;
-webkit-transition: all ease-in-out 0.9s;
-o-transition: all ease-in-out 0.9s;
*/
}

#reflexebotelladest {
/*-moz-transition: all ease-in-out 0.9s;
-webkit-transition: all ease-in-out 0.9s;
-o-transition: all ease-in-out 0.9s;*/
}

#botelladest.botellados {
    background-image: url("img/500-gotas-aixafada2.png");
}

#botelladest.active3 {    
    /*transform: rotate(7deg);
    background-position: center center;*/
}

#reflexebotelladest.active3 {
    opacity:0;
}



#fase1 {
    width: 100%;
    height: 100vh;
    position: relative;
}

.bafarada {
    position:absolute;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.bafarada1 {
    width: 50%;
    padding-bottom: 33%;
    display:block;
    top:12%;
    animation-name: bafarada1;
    animation-duration: 5s;
}

@keyframes bafarada1 {
    0% {
        right: 3%;
    }
    50% {
        right:1%;
    }
    100% {
        right: 3%;
    }
}

#fase2 {
    width: 100%;
    height: 100vh;
    position: relative;
    margin-bottom: 50vh;
}


#botelladest[data-imatge='1'] {
    background-image: url("img/pos1.png");
}

#botelladest[data-imatge='2'] {
    background-image: url("img/pos2.png");
}

#botelladest[data-imatge='3'] {
    background-image: url("img/pos3.png");
}

#botelladest[data-imatge='4'] {
    background-image: url("img/pos4.png");
}

#botelladest[data-imatge='5'] {
    background-image: url("img/pos5.png");
}

#botelladest[data-imatge='6'] {
    background-image: url("img/pos6.png");
}

#botelladest[data-imatge='7'] {
    background-image: url("img/pos7.png");
}

#botelladest[data-imatge='8'] {
    background-image: url("img/pos8.png");
}

#botelladest[data-imatge='9'] {
    background-image: url("img/pos9.png");
}

#botelladest[data-imatge='10'] {
    background-image: url("img/pos10.png");
}

#botelladest[data-imatge='21'] {
    background-image: url("img/post1.png");
}

#botelladest[data-imatge='22'] {
    background-image: url("img/post2.png");
}

#botelladest[data-imatge='23'] {
    background-image: url("img/post3.png");
}

#botelladest[data-imatge='24'] {
    background-image: url("img/post4.png");
}

#botelladest[data-imatge='25'] {
    background-image: url("img/500-gotas-principal.png");
}


.pos1 {
    position: absolute;
    width: 100%;
    height: 10vh;
}

.pos2 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:16.66vh;
}

.pos3 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:20vh;
}

.pos4 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:30vh;
}

.pos5 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:40vh;
}

.pos6 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:50vh;
}

.pos7 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:60vh;
}

.pos8 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:70vh;
}


.pos9 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:80vh;
}

.pos10 {
    position: absolute;
    width: 100%;
    height: 10vh;
    top:90vh;
}


.bafarada2 {
    width: 42%;
    padding-bottom: 29%;
    display:block;
    top:20%;
    left: 4%;
    animation-name: bafarada2;
    animation-duration: 5s;
}

@keyframes bafarada2 {
    0% {
        left: 4%;
    }
    50% {
        left:2%;
    }
    100% {
        left: 4%;
    }
}


#fase3 {
    width: 100%;
    height: 100vh;
    position: relative;
}

.bafarada3 {
    z-index: 8;
    width: 38%;
    padding-bottom: 28%;
    display: block;
    top:45%;
    left: 20%;
    animation-name: bafarada3;
    animation-duration: 10s;
}

@keyframes bafarada3 {
    0% {
        left: 15%;
    }
    50% {
        left:20%;
    }
    100% {
        left: 15%;
    }
}




.post1 {
    position: absolute;
    width: 100%;
    height: 20vh;
}

.post2 {
    position: absolute;
    width: 100%;
    height: 20vh;
    top:20vh;
}

.post3 {
    position: absolute;
    width: 100%;
    height: 20vh;
    top:40vh;
}

.post4 {
    position: absolute;
    width: 100%;
    height: 20vh;
    top:60vh;
}

.post5 {
    position: absolute;
    width: 100%;
    height: 20vh;
    top:80vh;
}




#fase4a {
    display:flex;
}

#fase4a > div {
}

.nubolsfase4 {
    width: 50%;
}



.contfase4 {
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top:0;
   
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 0 10% 0 13%;
    width: 50%;
}


#fase4a .bafarada4 {
    padding-bottom: 25%;
    display: block;
}

.nubolsfase4 > div {
    height:100vh;
    display: flex;
    align-items: flex-end;
}
.nubolsfase4 img {
    max-width: 100%;
    margin-bottom: 200px;
}

.cont4a img {
    max-width: 200px
}

.parfas {
    display: none;
}
.parfas.active {
    display: block;
}

.cont4a img.none, .iconreci.none {
    visibility: hidden;
}

 




   
#fase4 {
    display: none;
    width: 100%;
    height: 100vh;
    position: relative;
}

.bafarada4 {
    width: 50%;
    padding-bottom: 34%;
    display: block;
    top:25%;
    animation-name: bafarada4;
    animation-duration: 10s;
}

@keyframes bafarada4 {
    0% {
        left: 1%;
    }
    50% {
        left:3%;
    }
    100% {
        left: 1%;
    }
}

.cont4 {
    display: none;
    position:absolute;
    width: 30%;
    left:60%;
    top:10%
}

.cont4 img {
    width: 300px;
}

.iconreci {
    position:absolute;
    width: 20%;
    padding-bottom: 20%;
    left: 24%;
    top: 71%;
    z-index: 8;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(img/500-icon.png);
/*
    animation-name: iconreci;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
*/
}


#reflexebotelladest2 {
    display: none;
}


@keyframes iconreci {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);        
    }
}





#fase5 {
    position: relative;
}

#ghost500 {
    height: 100vh;
}

.bodegofinal {
    position:absolute;
    background-repeat: no-repeat;
    background-position:  center bottom;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-image: url(img/500-gotas-fons.png);
}

.bafarada5 {
    position: absolute;
    z-index: 0;
    width: 45%;
    padding-bottom: 25%;
    display: block;
    margin-top: 5%;
    left:15%;
-moz-transition: all ease-in-out 3s;
-webkit-transition: all ease-in-out 3s;
-o-transition: all ease-in-out 3s;

}

.bafarada5.in {
    left:30%;
}

.cont5 {
    position:absolute;
    width: 16%;
    left: 26%;
    margin-top: 18%;
}


#divfinal {
    background-color: white;
    padding: 100px 0;
    font-family: 'Utopia Std';
    color: #2d2a26;
    font-size:17.6px;
}


.stickymobile {
    display: none;
}

#popup_500_gotes{
    position: fixed;
    top:0;
    height: 100%;
    width: 100%;
    z-index: 901;
    background-color: #00000080;
}

#popup_500_gotes_mobile{
    display:none;
    position: fixed;
    top:0;
    height: 100%;
    width: 100%;
    z-index: 901;
    background-color: #00000080;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#popup_500_gotes #popup_container{
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 1500px;
    height: 90%;
    margin: 5% auto;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 110%;
    border-radius: 25px;
}

.text_popup{
    width: 70%;
    color: #BAD0D8;
    text-align: center;
    margin: 0px auto;
    font-family: Futura, sans-serif;
    font-weight: bold;
    font-size: calc( 12px +  5 *  (100vw - 400px) /  800 );
}

@media (min-width: 1500px) {
.text_popup{
font-size: 20px;
}
}

#popup_500_gotes #popup_container div #tancar{
    cursor:pointer;
    text-decoration: underline;
}


#popup_500_gotes #popup_container #nuvol{
    position: absolute;
    top: -5%;
    width: 40%;
}

#popup_500_gotes #popup_container #ampolles{
    position: relative;
    display: block;
    margin: 25px auto;
    top: 5%;
    width: 70%;
}

@media (max-width:1550px){
    #popup_500_gotes #popup_container{
        width:100%;
    }
}

@media (max-width: 1024px){

    #popup_500_gotes #popup_container{
    justify-content: space-around;
    background-position-y: 50px;
    /* height: 81%; */
    top: 45px;
    }

    #popup_500_gotes #popup_container #nuvol{
    width:60%;
    }

    .text_popup{
        width: 80%;
        padding:10px;
    }
}
@media (max-width: 410px){

    #popup_500_gotes #popup_container{
    /* height: 60%; */
    top: 15px;
    }

@media (max-width: 800px){

    #popup_500_gotes #popup_container #nuvol{
        position: relative;
        display:block;
        width: 70%;
        margin: 0 auto -60px auto;
    }

    #popup_500_gotes #popup_container #ampolles{
        margin: 0px auto;
        width: 90%;
    }
}


/* Responsive */
/*---------------------------------------------------------------------------*/
        /*---------------------------------------------------------------------------*/
        /*---------------------------------------------------------------------------*/
        /*---------------------------------------------------------------------------*/

@media
only screen and (max-width : 2100px) {
           
           
            .cont5 {
                width: 19%;
                left: 22%;
            }            
}

@media
only screen and (max-width : 1800px) {
           
           
            .cont5 {
                width: 21%;
                left: 19%;
            }            
            .contfase4 {
                padding: 0 5% 0 13%;
            }
           
}


@media
only screen and (max-width : 1700px) {
           
            .cont4 {
                width: 28%;
                left: 64%;
            }            
           
            .cont5 {
                width: 23%;
                left: 15%;
            }            
}


/* Extra Large (Big screens) */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 1600px) {
           
           
            .bafarada4 {
                width: 44%;
            }
           
            .cont4 {
                left:68%;
            }
           
            .contfase4 {
                padding: 0 4% 0 17%;
            }
           
            .iconreci {
                left:60%;
            }
           
            #fase4a .iconreci {
                left:30%
            }
           
            .cont5 {
                width: 26%;
                left: 11%;
            }
}


@media
only screen and (max-width : 1300px) {
           
            .cont5 {
                width: 28%;
                left: 5%;
            }          
}

/* Large (Laptop) */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 1200px) {


            .bafarada3 {
                width: 48%;
                padding-bottom: 39%;
            }
           
            .cont4 {
                left:72%;
                width: 25%;
            }
           
            .cont4 img {
                width: 100%;
                height: auto;
            }
           
            .cont5 {
                width: 28%;
            }
           
            .contfase4 img {
                max-width: 150px;
            }
           
            .contfase4 {
                padding: 0 2% 0 20%;
            }
           

           
}

/* Medium (Large Tablet) */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 992px) {

           
            #botelladest,
            #reflexebotelladest,
            #tap,
            .bodegofinal {
                height: 70vh;
                margin-top: 30vh;
                -webkit-background-size: cover;
                background-size: cover;
            }
           
            .bafarada {
                width: 90%;
                padding-bottom: 55%;
            }
           
            .cont4 {
                width: 80%;
                left:10%;
                margin-top: 65%;
            }
           
            .cont4 img {
                width:  auto;
                height: auto;
            }
           
            .cont5 {
                width: 70%;
                left:10%;
                padding-top: 18%;
            }
           
            .iconreci {
                width: 20%;
                padding-bottom: 20%;
                top: 55%;
            }
           
            #fase4a .iconreci {
                width: 20%;
                padding-bottom: 20%;
                top: 90%;
            }
           
            #fase4a {
                flex-direction:column;
            }
            .nubolsfase4,
            .contfase4 {
                width: 100%;
            }
           
            .contfase4 {
                padding: 2% 10%;
                height: auto;
            }
           
           
            .nubolsfase4 > div {
                height:auto;
                padding: 0 0 25px 0;
            }
            .stickymobile {
                display: block;
                padding: 0 15%;
            }
           
            .cont4a {
                display: none;
            }
           
            #botelladest2 {
                display: none;
            }
           
            #ghost500,
            #divfinal {
                display: none;
            }
           



}

/* Small (Tablet) */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 768px) {
           
            #st-trigger-effects  {
                top:0px !important;
            }
            .bafarada{
                position:inherit;
            }
           
            #scroll500 {
                padding: 0 2%;
                font-size:20px;
            }
           
            #botelladest,
            #reflexebotelladest,
            #tap {
                bottom:50px;
            }
           
            #tap.active {
                bottom:150px;
            }
           
            #botelladest.active3 {
                /*bottom:150px;*/
            }
           
            #fase1,
            #fase2,
            #fase3,
            #fase4,
            #fase5 {
                height: auto;
                min-height: 90vh;
            }
           
            .iconreci {
                top:25%;
                width: 25%;
                padding-bottom: 25%;
            }
           
            .bafarada1 {
                margin-top: 75px;
            }
           
            .bafarada3 {
                width: 70%;
            }
           
            .bafarada5.in {
                left: 9%;
            }
           
            .cont4 {
                margin-top: 0;
                position: inherit;
            }
           
            .cont4 img {
                max-width: 50%;
            }
           
            .cont5 {
                position:inherit;
                margin-top: 0;
                padding-top: 0;
                width: 80%;
                left:10%;
            }
           
            .bodegofinal {
                margin-top: -10vh;
                position:inherit;
                margin-bottom:50px;
            }
           
            #botelladest.bottom,
            #reflexebotelladest.bottom,
            .bodegofinal.bottom {
                height: 59vh;
            }
           
            #reflexebotelladest {
                background-image: none;
            }
           
            .bodegofinal.bottom {
                background-image: url("img/500-gotas-fons-bottom.png");
            }
           
            #reflexebotelladest.shadowbottom {
                /*background-image: url(img/500-gotas-principal-ombra.png);
                animation-name: ombramobile;
                animation-duration: 2s;*/
            }

            @keyframes ombramobile {
                0% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            }

           
           

}

/* Extra small (Mobile) */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 544px) {
           
            #scroll500 {
                font-size:15px;
                line-height: 1.7;
            }
           
            .bodegofinal {
                margin-top: 50px;
                bottom:50px;
            }
}

/* ALCADES */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-height : 1000px) and (min-width : 544px) {

            #tap {
                bottom:0;
            }

            #tap.active {
                bottom:20vh;
                background-position:center top;
            }
           
           
           
           
}

/* ALCADES */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-height : 850px) and (min-width : 768px) {
           
            #botelladest,
            #reflexebotelladest,
            #tap {
                height:90vh;
                bottom:0;
                -webkit-background-size: contain;
                background-size: contain;
            }
           
           
           
           
            .bafarada1 {
                padding-bottom: 29%;
            }
           
            .bafarada3 {
                top:15%;
            }
           
            #fase4 {
                display:flex;
                height: auto;
                position: inherit;
                justify-content: space-between;
            }
           
            .bafarada4,
            .cont4 {
                position:inherit;
                animation-name: none;
            }
           
            .iconreci {
                display: none;
            }
           
            .cont4 {
                width: 40%;
                padding: 0 5%;
            }
           
            #flex5 {
                height:auto;
            }
           
            .bafarada5,
            .cont5 {
                position:inherit;
            }
           
            .cont5 {
                margin-top: -90px;
                width: 35%;
            }
           
            .bodegofinal {
                height:90vh;
                -webkit-background-size: contain;
                background-size: contain;
                margin-top: -50px;

            }
           
            /*
            .cont5 {
                padding-bottom: 500px;
            }
           
            .bodegofinal {
                margin-top: 0;
                position: inherit;
            }
            */
}



/* ALCADES */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-height : 1200px)  {
           
            .cont5 {
                margin-top: 0px !important;
            }
}



        /* Mobile Landscape*/
/*---------------------------------------------------------------------------*/
        @media only screen
        and (min-device-width: 320px)
        and (max-device-width: 850px)
        and (orientation: landscape) {
           
}