*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* overflow-x: hidden; */
}



body{
    background: url(/media/fondos/rojo3_infinito.jpg);
    background-position: center;
    background-size: contain;
    /* background-attachment: fixed; */
    animation: moveBackground2 50s infinite;
    /* backdrop-filter: blur(3px); */
    /* overflow: hidden; */
}


@keyframes moveBackground2 {
    0% {
        background-position: 0px 0px;
    }

    50% {
        background-position: 0px 200px;
    }

    100% {
        background-position: 0px 0px;
    }
}

.contain{
    width: 100%;
    height: fit-content;
    text-align: center;
    

    display: flex;
    flex-direction: column;
    align-items: center;
    color: aliceblue;
    justify-content: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9), 1px 1px 1px rgba(0,0,0,0.5), 3px 3px 3px rgba(0,0,0,0.75), 3px 3px 3px rgba(0,0,0,0.4), -2px -2px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.2) !important; 
}

.contain .frase-container h2{
    font-size: 8vw;
}

.contain .frase-container img{
    width: 80%;
    margin-top: 5%;
    margin-bottom: 5%;
    filter: 
    drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
    -webkit-filter: 
    drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
}
.contain p{
    font-size: 6vw;
    
}

.contain .ubicaciones{
    margin-top: 10%;
    /* margin-bottom: 10%; */
}
.contain .ubicaciones h2{
    font-size: 8vw;
}
.contain .ubicaciones .vector{
    width: 80%;
    margin-top: 5%;
    margin-bottom: 5%;
}
.contain .ubicaciones a{
    text-shadow: none;
    margin-top: 10%;
    margin-bottom: 10%;
}

.contain .ubicaciones a h4{
    font-size: 5vw;
}

.contain .ubicaciones a .direccion{
    font-size: 4vw;
}

.contain .ubicaciones a .button , .liverpool-container .button, .gift-object-container .button{
    /* border: 1px solid #000; */
    background-color: var(--button-background-color);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1), 2px 2px 2px rgba(0,0,0,0.1),2px 2px 2px rgba(0,0,0,0.1);
    border-radius: 20px;
    width: 80%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none;
    margin: auto;
    text-decoration: none;
    color: var( --button-text-color);


}
.contain .ubicaciones a img{
    width: 100% !important;
}

.contain .familiares .vector-long{
    margin-top: 5%;
    width: 80%;
}

.contain .familiares h2{
    font-size: 8vw;
}

.time{
    width: 100%;
}

#countdown{
    width: 100%;
}

.time #countdown .container{
    width: 100%;
}

.time #countdown .container .countdown-container{
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.time #countdown .container .segment{
    width: 24%;
    margin-top: 5%;
    margin-right: 3px;
    margin-left: 3px;
    height: fit-content;
    padding-top: 10px;
    padding-bottom: 10px;

    
}

.time #countdown .container .segment span{
    /* overflow: hidden; */
}




.itinerario{
    width: 90%;
}

.itinerario h2{
    font-size: 8vw;
    width: 100%;
}

#grid .container-grid {
    /* overflow: hidden; */
}
#grid .column {
    /* overflow: hidden; */
}
.album img{
    width: 80%;
}

.album h2{
    font-size: 8vw;
}

.modal{
   
    
}

.close-btn {
   
   
   
}

.contain{
    overflow: hidden;
}

.extra{
    /* overflow: hidden; */
}

.contain .extra .vector-long{
    margin-top: 5%;
    width: 80%;
}

.contain .extra h2{
    font-size: 8vw
    /* overflow: hidden; */
}

.contain .extra .icon-extra{
    width: 20vw !important;
     margin-bottom: 5% !important;
}

.extra .liverpool-container img{
    width: 50vw !important;
    margin-top: 5%;
    margin-bottom: 5%;
}

.informacion-importante-container p {
    font-size: 5vw;
    text-align: left;
    margin-top: 5%;
    padding-left: 5.5vw;
    /* overflow: hidden; */
}

#extra-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 1vw;
    width: 75%;
    
}

#extra-info .content-container .item{
    flex-direction: column;
}
#extra-info .content-container .item img{
    width: 20vw;
    margin-bottom: 5%;
    margin-top: 5%;
}
#extra-info .content-container .item .qr-image{
    width: 45vw;
    margin-bottom: 5%;
    margin-top: 5%;
    border-radius: 10px;
}
#extra-info .content-container .item p{
   font-size: 6vw;
   font-weight: 500;
}
#extra-info .content-container .item .cantidad-pase{
    font-size: 7vw;
    font-weight: 600;
 }
@media (min-width: 1100px){
    .lugar .hora {
        font-size: 4vw;
    }
}