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


.wedding-title {
    text-align: center;
    position: relative;
}

.small-text {
    font-size: 16px; /* Tamaño pequeño para "THE" */
    letter-spacing: 3px; /* Espaciado entre letras para "THE" */
    margin-bottom: -10px; /* Ajusta la altura relativa entre los textos */
    font-weight: bold; /* Hace "THE" en negrita */
}

.large-text {
    font-size: 72px; /* Tamaño grande para "WEDDING" */
    letter-spacing: 8px; /* Espaciado entre letras para "WEDDING" */
    font-weight: bold; /* Negrita para "WEDDING" */
    position: relative;
    display: inline-block;
    padding: 0 20px; /* Espacio para las líneas */
}

.large-text::before,
.large-text::after {
    content: '';
    position: absolute;
    top: 50%; /* Centra verticalmente las líneas con respecto al texto "WEDDING" */
    width: 50px; /* Longitud de las líneas */
    height: 1px; /* Grosor de las líneas */
    background-color: #000; /* Color de las líneas */
}

.large-text::before {
    left: -70px; /* Distancia desde el texto "WEDDING" a la izquierda */
}

.large-text::after {
    right: -70px; /* Distancia desde el texto "WEDDING" a la derecha */
}
.title{
            letter-spacing: 14px;
            line-height: 26px;
            margin-bottom: 10px;
        }
        .noto{
            font-family: 'Noto Serif Display', serif;
        }
        .cursiva{
            /*             font-family: 'Oooh Baby', cursive;*/
            font-family: 'beautifully_delicious_scripRg', cursive;
        }
        .cursivaTitle{
            /*             font-family: 'Oooh Baby', cursive;*/
            font-family: 'beautifully_delicious_scripRg', cursive;
            font-size: clamp(50px, 12vw, 75px);
            margin-bottom: -35px;
        }

        .montserrat{
            font-family: 'Montserrat', sans-serif;
        }
        .azul{
            color: #11047B ;
            border-color: #11047B   
        }
        .page{
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            align-items: center;
            align-self: stretch;
            gap: 18px;
            padding-block:20px;
            position: relative;
        }
        .newtitle{
            letter-spacing: var(--text-spacing);            
            font-size: var(--font-size-fluid-1);
            font-family: 'Montserrat', sans-serif;
/*            font-family: Futura Bk BT;*/
            text-transform: uppercase;
            font-weight: 400;
            padding-left: var(--size-relative-3);

        }
        .loader {
          width: 50px;
          aspect-ratio: 1;
          display: grid;
        }
        .loader::before,
        .loader::after {    
          content:"";
          grid-area: 1/1;
          --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
          background: 
            var(--c) 50%  0, 
            var(--c) 50%  100%, 
            var(--c) 100% 50%, 
            var(--c) 0    50%;
          background-size: 12px 12px;
          animation: l12 1s infinite;
        }
        .loader::before {
          margin: 4px;
          filter: hue-rotate(45deg);
          background-size: 8px 8px;
          animation-timing-function: linear
        }

        @keyframes l12 { 
          100%{transform: rotate(.5turn)}
        }
        .fontSize3{
                font-size: 3vw;
        }
        .fontSize5{
                font-size: 5vw;
        }
        .fontSize7{
                font-size: 8vw;
        }
        .fontSize8{
                font-size: 8vw;
        }
        .fontSize12{
                font-size: 12vw;
        }
        .nonrounded{
                border-top-left-radius: 0px !important;
                border-top-right-radius:  0px !important;
                border-bottom-left-radius:0px !important;
                border-bottom-right-radius: 0px !important;
        }
        .photoRounded{
                border-top-left-radius: var(--bs-border-radius)!important;
                border-top-right-radius:  var(--bs-border-radius)!important;
                border-bottom-left-radius:0px !important;
                border-bottom-right-radius: 0px !important;
        }
        
          
             .parallax-section {
               position: relative;
                width: 100%;
                height:700px;
            }
            .parallax-child-section {
                clip: rect(0, auto, auto, 0);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height:700px;
            }

            #parallax1ID{
                position: fixed;
                display: block;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform: translateZ(0);
                will-change: transform;
                z-index: 1;
            }
            #parallaxMAP1ID{
                position: fixed;
                display: block;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform: translateZ(0);
                will-change: transform;
                z-index: 1;
            }
            #parallaxMAP2ID{
                position: fixed;
                display: block;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform: translateZ(0);
                will-change: transform;
                z-index: 1;
            }
              #parallax2ID{
                position: fixed;
                display: block;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform: translateZ(0);
                will-change: transform;
                z-index: 1;
            }
             .parallax1{
                background-attachment:scroll;
                background-image: url(https://lh3.googleusercontent.com/pw/AP1GczPljBKVorfzfmkuVXWfL-Pxvp53IsMGf1FjuJfizGk098CfWGCGBs8ye9ZSLrtVFb9DeDTW0v3rej2H4VTz1y9R6s74Ts5Gxid4NRkWjkzn24y_41Og=w2400);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
             .map1{
                background-attachment:scroll;
                background-image: url(map1.png);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .map2{
                background-attachment:scroll;
                background-image: url(map2.png);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .parallax2{
                background-attachment:scroll;
                background-image: url(https://lh3.googleusercontent.com/pw/AP1GczO_hGShhgYjDXXRHX_EbkBSyfwgyQtjhvZ6NXJdpwc8zgqpXwkd6fvude7opO8EURTqx3-zzBAWtuUV1YQGTIm-Inn9ZekCybF8N6ENq_V8D3-Wsm-6=w2400);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .parallax3{
                background-attachment:scroll;
                background-image: url(https://lh3.googleusercontent.com/pw/AP1GczPcb-9oRon-bT8_PP-jtuAmGl0RPpwZlPIzCYTOZtLzWL27GuvOLUf_FHgiFBA0tYUBffcPPBRk8MGP4PQD5kKNC0mtPtGzhoLG5XCkS3s_sZldxKjF7CtY0vee3urOUKvJDQmMaHB0TFR_4q3yIx3nKw=w1225-h919-s-no-gm?authuser=0);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        .OLDparallax1 {
          background-image: url("BODA1.jpg");
          height: 600px;
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .OLDmap1 {
          background-image: url("map1.png");
          min-height: 600px;
          max-height: 95vh; 
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .OLDmap2 {
          background-image: url("map2.png");
          min-height: 600px;
          max-height: 95vh; 
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .OLDparallax3 {
          background-image: url("BODA2.jpg");
          height: 600px; 
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .OLDparallax4 {
          background-image: url("BODA3.jpg");
          height: 600px; 
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .v-enter-active,
        .v-leave-active {
          transition: opacity 0.5s ease;
        }
        .v-enter-from,
        .v-leave-to {
          opacity: 0;
        }
       .countdown-container {
            margin: auto;
            max-width: 300px;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
            font-family: 'Noto Serif Display', serif;
            margin-top: auto;
        }

        .inner-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .countdown-number {
            font-size: 2.5rem; 
            line-height: 1.2;
            letter-spacing: 0.1em;
            margin-bottom: 4px; 
        }

        .countdown-text {
            font-size: 1.3rem; 
            letter-spacing: 0.1em;
        }

        .countdown-v-separator {
            border-color: #11047B;
            border-left: 2px solid;
            margin-left: 8px;
            margin-right: 8px;
            height: 60px; 
            padding-top: 20%;
            box-sizing: border-box;
        }
     

@media (min-width: 576px) { 
    .container-countdown-container {
        width: 90%;
    }
    .fontSize7{
         font-size: clamp(45px, 6vw, 55px);
    }
    .fontSize5{
         font-size: clamp(25px, 5vw, 28px);
    }
    .cursivaTitle{
         font-size: clamp(75px, 12vw, 80px);
    }
    .newtitle{               
            font-size: var(--font-size-fluid-1);
        }


}
@media (min-width: 768px) {
    .container-countdown-container {
        width: 90%;
    }
    .fontSize7{
         font-size: clamp(45px, 6vw, 55px);
    }
    .fontSize5{
         font-size: clamp(25px, 5vw, 30px);
    }
    .cursivaTitle{
         font-size: clamp(90px, 12vw, 100px);
    }
}
@media (min-width: 992px) { 
    .fontSize7{
          font-size: clamp(60px, 7vw, 70px);
    }
    .fontSize5{
         font-size: clamp(40px, 5vw, 45px);
    }
    .cursivaTitle{
         font-size: clamp(100px, 12vw, 110px);
    }
 }

@media (min-width: 1200px) {
    .countdown-container{
        width: 80%;
    }
    .fontSize7{
          font-size: clamp(40px, 4vw, 60px);
    }   
    .fontSize5{
         font-size: clamp(20px, 3vw, 30px);
    }
     .fontSize8 {
        font-size: clamp(60px, 5vw, 70px);
    }
     .fontSize12 {
        font-size: clamp(60px, 5vw, 70px);
    }
    .cursivaTitle{
         font-size: clamp(100px, 6vw, 110px);
         margin-bottom: -50px;   
    }
    .photoRounded{
        border-top-left-radius: var(--bs-border-radius)!important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
   .container-countdown-container {
        padding-top: 45px;
    }
 }

 @media (min-width: 965px) and (max-width: 992px) {               
        
        .photoRounded{
            border-top-left-radius: var(--bs-border-radius)!important;
            border-top-right-radius: 0px !important;
            border-bottom-left-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
        }
    }