/* IMPRIMIR */
/* 
.no-print,.con-foto{display: none !important;}
.aro{filter: opacity(0);}
.foto .principal,.aro-foto{
    width: 85%;
    height: 85%;
    left:8%;
    top: 5%;
}
body {animation: none !important;
    background-size: contain !important;
}
.date{
    margin-bottom: 0;
}
.lugar{transform: none !important;opacity: 1;}

.horas{
    margin-top:-8% !important;
}
.sin-foto{
    width: 20% !important;
}
.background{
    width: 90%;
    margin-top: 4%;
    margin-bottom: 4% !important;
}
.person-name{
    margin-top: -11.4% !important;
}
.iglesia{
    margin-bottom: -3%;
}
*/

.sin-foto{
    display: none !important;
}

/* FIN IMPRIMIR */ 







/* COLORES */
:root{
    --color-principal: #098074;
    --color-elementos: rgb(26, 161, 134);
    --invertir-img-itinerario: invert(100%);
    --nombre-color: #B78946;
    --subtitulos-color: #B78946;
    --texto-color: rgb(255, 255, 255);
    --itinerario-card-color: rgba(32, 102, 64, 0.12);
}

/* 
.countdown-container{
    margin-top: 0%;
}
 */

 body {
    background: url(../../../../media/fondos/verde_oro.jpg);
    animation: moveBackground 50s infinite;
}

.background {
    background: rgba(9, 128, 116, 0.6);
    -webkit-box-shadow: 0px 3px 23px 0px rgb(4, 43, 25);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}


.texto{
    color: var(--texto-color);
}

h2{
    color: var(--subtitulos-color);
}
.person-name{
    color: var(--nombre-color) !important;
}

.footer {
    background: var(--color-elementos);
}

.footer span span {
    color: var(--texto-color);
}

.footer svg {
    stroke: rgb(154, 115, 87);
}

.invertir-img-itinerario{
    filter: var(--invertir-img-itinerario);
}

.circulo{
    background: var(--color-elementos) !important;
}

.evento{
    background: var(--itinerario-card-color) !important;
}

.evento .item h4{
    color: var(--texto-color) !important;
}

.evento .item p{
    color: var(--texto-color) !important;
}


/* Espacio Abajo */
.background {
    margin-bottom: 19vw;
}


/* CONTENIDO */
.mensaje {
    width: 90%;
    font-size: 4vw;
    font-family: 'Old Standard TT', serif;
    font-weight: 600;
}

.mensaje-buzon {
    margin-top: -5%;
    margin-bottom: 6%;
    border-radius: 2vw;
    padding: 2vw;
    width: 70%;
    height: 2em;
    border: 0.4vw solid var(--button-background-color);
    resize: none;
}

.person-name {
    font-size: 8vw;
    /* margin-top: -14% !important; */
}

.ubicacion {
    height: 10vw;
}


/* Sobre Colores */
:root {
    --color-sobre: var(--color-principal);;
    --text-sello-shadow1: rgba(121, 172, 155, 0.7);
    --text-sello-shadow2: rgba(192, 202, 196, 0.5);
    --line-sobre: #b88585;
}

.sobre .first {
    background-color: var(--color-sobre);
    border-bottom: var(--line-sobre) solid 1px;

}

.sobre .second {
    background-color: var(--color-sobre);
    border-top: var(--line-sobre) solid 1px;
}

.sello {
    background: var(--color-sobre);
    border: none;
    color: #ffffff;
    font-size: 18px;
    transition: .2s ease-in-out;
    box-shadow: -6px -6px 14px var(--text-sello-shadow1),
        -6px -6px 10px var(--text-sello-shadow2),
        6px 6px 8px rgba(255, 255, 255, .075),
        6px 6px 10px rgba(0, 0, 0, .15);
    -webkit-box-shadow: -6px -6px 14px var(--text-sello-shadow1),
        -6px -6px 10px var(--text-sello-shadow2),
        6px 6px 8px rgba(255, 255, 255, .075),
        6px 6px 10px rgba(0, 0, 0, .15);
}

.pases{
    font-size: 4.6vw;
    line-height: 0.95;
}

.pase{
    margin-top: 2%;
    margin-bottom: 2%;
    width: 18% !important; 
}

.qr{
    width: 50% !important;
    margin-top: 2%;
    margin-bottom: 2%;
}

@media (min-width:1100px) {
    .pases{
        font-size: 30px;
    }
    .background {
        margin-bottom: 30px;
    }

    .mensaje {
        font-size: 30px;
    }

    .person-name {
        font-size: 60px;
    }

    .ubicacion {
        height: 105px;
    }

    .sello{
        font-size: 16px;
    }
}



/* DECORACIONES */

/* itemX */
.decorations .item1{
    position: absolute;
    width: 17vw;
    right: 4vw;
    top: 2vw;
    animation: rotar 2.5s linear infinite;
}

.decorations .item2{
    position: absolute;
    width: 14vw;
    left: 3vw; 
    top: 96vw;
    animation: rotar 2.5s linear infinite;
}

.decorations .item3{
    position: absolute;
    width: 14vw;
    right: 3vw; 
    top: 143vw;
    animation: rotar 2.5s linear infinite;
}

.decorations .item4{
    position: absolute;
    width: 14vw;
    left: 3vw; 
    top: 350vw;
    animation: rotar 2.5s linear infinite;
}

.decorations .item5{
    position: absolute;
    width: 13vw;
    right: 4vw; 
    top: 1110vw;
    animation: rotar 2.5s linear infinite;
}

/* item1X */
.decorations .item11{
    position: absolute;
    width: 14vw;
    left: 4vw; 
    top: 4vw;
    animation: aumentar 2.5s linear infinite;
}

.decorations .item12{
    position: absolute;
    width: 12vw;
    right: 5vw; 
    top: 97vw;
    animation: aumentar 2.5s linear infinite;
}

.decorations .item13{
    position: absolute;
    width: 14vw;
    left: 4vw; 
    top: 144vw;
    animation: aumentar 2.5s linear infinite;
}

.decorations .item14{
    position: absolute;
    width: 12vw;
    right: 4vw; 
    top: 525vw;
    animation: aumentar 2.5s linear infinite;
}

.decorations .item15{
    position: absolute;
    width: 12vw;
    left: 5vw; 
    top: 900vw;
    animation: aumentar 2.5s linear infinite;
}

/* item2X */
.decorations .item21{
    position: absolute;
    width: 10vw;
    left: 46vw; 
    top: 2vw;
}

.decorations .item22{
    position: absolute;
    width: 12vw;
    left: 5vw; 
    top: 40vw;
}

.decorations .item23{
    position: absolute;
    width: 12vw;
    right: 4vw; 
    top: 65vw;
}

.decorations .item24{
    position: absolute;
    width: 10vw;
    right: 6vw; 
    top: 240vw;
}

.decorations .item25{
    position: absolute;
    width: 11vw;
    left: 5vw; 
    top: 578vw;
}

.decorations .item26{
    position: absolute;
    width: 12vw;
    right: 5vw; 
    top: 760vw;
}



/* ANIMACIONES */
.boom {
    animation: 1s boom infinite;
}

@keyframes boom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes moveBackground {
    0% {
        background-position: -200px 0px;
    }

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

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