@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

    .number-box {
        padding: 6px;
        border-radius: 5px;
        justify-content: center;
    }

    .number-box span {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    @media screen and (min-width: 1024px) {
        .number-box {
            display: inline-block;
            border: 2px solid black;
            padding: 10px;
            border-radius: 5px;
        }
    }

    .linea-3 {
        color: white;

        font-family: sans-serif;
        font-weight: 700;
    }

    .expo {

        font-family: 'fuente_3';
        font-size: 2.3rem;
        color: rgb(255 200 42);
    }

    .titulo2 {
        font-family: fuente_1;
        font-size: 2.1rem;
        color: rgb(244, 164, 15);
    }

    .fecha {
        font-family: sans-serif;
        font-size: 1.1rem;
        color: rgb(244, 164, 15);
    }

    .campof {
        font-family: inherit;
        font-size: 1rem;
        color: rgb(255 255 255);
        padding: 11px 0px 13px 0;
    }

    @media screen and (max-width: 1024px) {
    .campof {
       display: none;
    }
}




    @import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap');

    @keyframes santa__mov {

        0%,
        100% {
            bottom: 0;
            left: 0;
            transform: translateX(-100%) rotate(-10deg);
        }

        30% {
            bottom: 100%;
            left: 100%;
            transform: translateX(100%) rotate(-10deg);
        }

        40% {
            bottom: 0;
            left: 100%;
            transform: translateX(100%) rotateY(180deg);
        }

        70% {
            bottom: 0;
            left: 0;
            transform: translateX(-100%) rotateY(180deg);
        }
    }

    @keyframes santa__hand-left {
        0% {
            transform: rotate(15deg);
        }

        100% {
            transform: rotate(-30deg);
        }
    }

    @keyframes santa__hand-right {
        0% {
            transform: rotate(15deg);
        }

        100% {
            transform: rotate(-6deg);
        }
    }

    @keyframes rope__left {
        0% {
            transform: rotate(2deg);
        }

        100% {
            transform: rotate(5deg);
        }
    }

    @keyframes rope__right {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-4deg);
        }
    }

    @keyframes rope__inner {
        0% {
            transform: rotate(-15deg);
        }

        100% {
            transform: rotate(-15deg) translateY(3px);
        }
    }

    @keyframes reindeer__leg-front {
        0% {
            transform: rotate(-24deg);
        }

        100% {
            transform: rotate(-13deg);
        }
    }

    @keyframes reindeer__leg-front-extension {
        0% {
            transform: rotate(131deg);
        }

        100% {
            transform: rotate(0);
        }
    }

    @keyframes reindeer__leg-back {
        0% {
            transform: rotate(-73deg);
        }

        100% {
            transform: rotate(-95deg);
        }
    }

    @keyframes reindeer__leg-back-extension {
        0% {
            top: 4px;
            left: -4px;
            transform: rotate(50deg);
        }

        100% {
            top: 0;
            left: 0;
            transform: rotate(0);
        }
    }

    @keyframes snow {
        0% {
            fill-opacity: 1;
        }

        100% {
            fill-opacity: 0;
            transform: translateY(50%);
        }
    }

   

    
 

    

    .countdownSection {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        align-content: center;
        width: 100%;
        /* min-height: 100vh; */
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        background: radial-gradient(87% 275% at 6% 15%, #102054 0, #11366b 23%, #114c80 40%, #1d5a9e 58%, #1e639c 66%, #246dbf 75%, #1c65a9 83%, #225294 93%, #1a4a98 100%);;
    }

    .countdownSection:before,
    .countdownSection:after {
        content: "";
        position: absolute;
    }

    .countdownSection:before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(255, 255, 255, .3), transparent);
        pointer-events: none;
    }

    /* .countdownSection:after {
        width: 90%;
        height: 90%;
        border: 1px solid rgba(255, 255, 255, .1);
    } */

    .countdownSection .decorations {
        pointer-events: none;
    }

    .countdownSection .decorations .decoration {
        background-image: url('https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/navidad%2Fdecoration.png?alt=media&token=201ed160-2a86-4b14-869f-85981e9ff5fb');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        width: 500px;
        height: 500px;
        filter: blur(3px);
        z-index: 1;
    }

    .countdownSection .decorations .decoration[data-pos="top left"] {
        top: 0;
        left: 0;
        transform: rotate(90deg);
    }

    .countdownSection .decorations .decoration[data-pos="top right"] {
        top: 0;
        right: 0;
        transform: rotate(180deg);
    }

    .countdownSection .decorations .decoration[data-pos="bottom left"] {
        bottom: 0;
        left: 0;
    }

    .countdownSection .decorations .decoration[data-pos="bottom right"] {
        bottom: 0;
        right: 0;
        transform: rotate(-90deg);
    }

    .countdownSection .decorations .snow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .countdownSection .decorations .snow .particle {
        fill: #fff;
        animation: snow 5s ease-out infinite;
    }

    .countdownSection .decorations .snow .particle:nth-child(2n) {
        animation-delay: 1.5s;
    }

    .countdownSection .decorations .snow .particle:nth-child(3n) {
        animation-delay: 2.5s;
        animation-duration: 5.3s;
    }

    .countdownSection .decorations .snow .particle:nth-child(4n) {
        animation-delay: 1s;
        animation-duration: 5.2s;
    }

    .countdownSection .decorations .snow .particle:nth-child(5n) {
        animation-delay: 3s;
    }

    .countdownSection .decorations .santaWrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 430px;
        height: 155px;
        transform: translateX(-100%);
        animation: santa__mov 15s linear infinite;
    }

    .countdownSection .decorations .santaWrapper .santa {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 125px;
        height: 107px;
        z-index: 10;
        transform: rotateY(180deg);
    }

    .countdownSection .decorations .santaWrapper .santa:before,
    .countdownSection .decorations .santaWrapper .santa:after {
        content: "";
        position: absolute;
        bottom: 0;
        background-color: #520d0d;
    }

    .countdownSection .decorations .santaWrapper .santa:before {
        left: -10px;
        width: 126px;
        height: 30px;
        border-radius: 10px 50% 10px 50%;
        transform: rotate(0);
        z-index: 10;
    }

    .countdownSection .decorations .santaWrapper .santa:after {
        left: 70px;
        width: 50px;
        height: 53px;
        border-radius: 50% 10px 22px 10px;
        transform: rotate(8deg);
    }

    .countdownSection .decorations .santaWrapper .santa .hat>* {
        position: absolute;
        top: 7px;
        left: 31px;
        width: 43px;
        height: 58px;
        border-radius: 50%;
        transform: rotate(28deg);
        background-color: #d63527;
    }

    .countdownSection .decorations .santaWrapper .santa .hat>*:nth-child(1):before,
    .countdownSection .decorations .santaWrapper .santa .hat>*:nth-child(1):after {
        content: "";
        position: absolute;
    }

    .countdownSection .decorations .santaWrapper .santa .hat>*:nth-child(1):before {
        top: 9px;
        left: 45px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #fff;
    }

    .countdownSection .decorations .santaWrapper .santa .hat>*:nth-child(1):after {
        top: 3px;
        left: 19px;
        width: 30px;
        height: 7px;
        border-radius: 50%;
        transform: rotate(22deg);
        background-color: #d63527;
    }

    .countdownSection .decorations .santaWrapper .santa .hat>*:nth-child(2) {
        position: absolute;
        top: 18px;
        left: 31px;
        width: 44px;
        height: 34px;
        border-radius: 50%;
        transform: rotate(12deg);
        background-color: #fff;
    }

    .countdownSection .decorations .santaWrapper .santa .face {
        position: absolute;
        top: 25px;
        left: 37px;
        width: 31px;
        height: 17px;
        border-radius: 20px 20px 50% 50%;
        transform: rotate(10deg);
        background-color: #fde2b7;
        z-index: 10;
    }

    .countdownSection .decorations .santaWrapper .santa .face .eyeBrows {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 7px;
        border-radius: 50%;
        background-color: #fff;
    }

    .countdownSection .decorations .santaWrapper .santa .face .eyeBrows.left {
        top: 2px;
        left: 22px;
        transform: rotate(-65deg);
    }

    .countdownSection .decorations .santaWrapper .santa .face .eyeBrows.right {
        top: 1px;
        left: 4px;
        transform: rotate(65deg);
    }

    .countdownSection .decorations .santaWrapper .santa .face .eye {
        position: absolute;
        top: 8px;
        left: 2px;
        width: 3px;
        height: 4px;
        border-radius: 50%;
        background-color: #000;
    }

    .countdownSection .decorations .santaWrapper .santa .face .eye.left {
        top: 8px;
        left: 2px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .eye.right {
        top: 8px;
        left: 20px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .nose {
        position: absolute;
        top: 10px;
        left: 6px;
        width: 12px;
        height: 9px;
        border-radius: 50%;
        z-index: 10;
        background-color: #f7d194;
    }

    .countdownSection .decorations .santaWrapper .santa .face .cheek {
        position: absolute;
        top: 10px;
        left: 6px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        z-index: 10;
        background-color: #f4cfe3;
    }

    .countdownSection .decorations .santaWrapper .santa .face .cheek.left {
        top: 12px;
        left: -3px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .cheek.right {
        top: 13px;
        left: 22px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>* {
        position: absolute;
        top: 8px;
        left: -14px;
        width: 15px;
        height: 17px;
        border-radius: 50%;
        background-color: #fff;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>*:before,
    .countdownSection .decorations .santaWrapper .santa .face .beard>*:after {
        content: "";
        position: absolute;
        background-color: #fff;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>*:before {
        top: 12px;
        left: 1px;
        width: 15px;
        height: 17px;
        border-radius: 50%;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>*:nth-child(2) {
        top: 16px;
        left: -8px;
        width: 26px;
        height: 30px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>*:nth-child(2):before {
        top: 16px;
        left: 13px;
        width: 19px;
        height: 17px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>*:nth-child(2):after {
        top: 1px;
        left: 13px;
        width: 19px;
        height: 17px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>*:nth-child(3) {
        top: 16px;
        left: 14px;
        width: 27px;
        height: 28px;
    }

    .countdownSection .decorations .santaWrapper .santa .face .beard>*:nth-child(3):before {
        top: -4px;
        left: 13px;
        width: 17px;
        height: 17px;
    }

    .countdownSection .decorations .santaWrapper .santa .body {
        position: absolute;
        top: 54px;
        left: 16px;
        width: 88px;
        height: 53px;
    }

    .countdownSection .decorations .santaWrapper .santa .body:before {
        content: "";
        position: absolute;
        top: -23px;
        right: -10px;
        width: 53px;
        height: 51px;
        border-radius: 42% 50%;
        background-color: #f3f0f0;
        z-index: -1;
    }

    .countdownSection .decorations .santaWrapper .santa .body .sweater {
        top: -3px;
        left: 10px;
        position: absolute;
        width: 45px;
        height: 39px;
        border-radius: 50% 50% 10% 10%;
        background-color: #d63527;
        z-index: 5;
    }

    .countdownSection .decorations .santaWrapper .santa .body .sweater:before {
        content: "";
        top: 28px;
        left: 0px;
        position: absolute;
        width: 45px;
        height: 5px;
        background-color: #000;
        transform: rotate(1deg);
    }

    .countdownSection .decorations .santaWrapper .santa .body .sweater:after {
        content: "";
        top: 27px;
        left: 10px;
        position: absolute;
        width: 7px;
        height: 5px;
        background-color: #000;
        border: 1px solid #fff;
        border-radius: 3px;
        transform: rotate(1deg);
    }

    .countdownSection .decorations .santaWrapper .santa .body .hand {
        position: absolute;
    }

    .countdownSection .decorations .santaWrapper .santa .body .hand.left {
        top: 5px;
        left: 19px;
        width: 33px;
        height: 30px;
        overflow: hidden;
    }

    .countdownSection .decorations .santaWrapper .santa .body .hand.left .inner {
        position: absolute;
        top: 10px;
        left: 8px;
        width: 49px;
        z-index: 100;
        height: 7px;
        border-radius: 10px;
        transform: rotate(12deg);
        background-color: #d63527;
        animation: santa__hand-right 0.3s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .santa .body .hand.left .inner:before {
        content: "";
        position: absolute;
        width: 8px;
        height: 7px;
        top: -2px;
        left: -6px;
        background-color: #000;
        border-radius: 50%;
        transform: rotate(25deg);
    }

    .countdownSection .decorations .santaWrapper .santa .body .hand.right {
        top: 4px;
        left: 3px;
        width: 11px;
        height: 7px;
        border-radius: 10px;
        background-color: #d63527;
        transform: rotate(25deg);
        animation: santa__hand-left 0.3s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .santa .body .hand.right:before {
        content: "";
        position: absolute;
        width: 8px;
        height: 7px;
        top: -2px;
        left: -6px;
        background-color: #000;
        border-radius: 50%;
        transform: rotate(10deg);
    }

    .countdownSection .decorations .santaWrapper .rope {
        position: absolute;
        top: 92px;
        left: 84px;
        width: 182px;
        height: 33px;
        overflow: hidden;
        z-index: 10;
        transform: rotate(0deg);
        transform-origin: bottom right;
        animation: rope__right 0.3s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .rope.back {
        top: 85px;
        left: 105px;
        width: 149px;
        transform: rotate(4deg);
        z-index: 0;
        transform-origin: top left;
        animation: rope__left 0.3s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .rope:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -12px;
        width: 100%;
        height: 48px;
        border-bottom: 1px solid #fff;
        border-radius: 50%;
    }

    .countdownSection .decorations .santaWrapper .sled {
        position: absolute;
        bottom: -12px;
        left: 0px;
        width: 145px;
        height: 11px;
        transform: rotate(-3deg);
        border-bottom: 5px solid #690e00;
        border-right: 5px solid #690e00;
        border-radius: 10px;
        z-index: 10;
    }

    .countdownSection .decorations .santaWrapper .sled:before,
    .countdownSection .decorations .santaWrapper .sled:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 5px;
        background-color: #690e00;
    }

    .countdownSection .decorations .santaWrapper .sled:before {
        top: 2px;
        left: 34px;
        height: 9px;
    }

    .countdownSection .decorations .santaWrapper .sled:after {
        top: 3px;
        left: 108px;
        width: 5px;
        height: 8px;
    }

    .countdownSection .decorations .santaWrapper .reindeer {
        position: absolute;
        width: 115px;
        height: 155px;
        top: 50px;
        right: 0;
        transform: rotate(14deg) translateX(calc(-100% - 30px));
        z-index: 0;
    }

    .countdownSection .decorations .santaWrapper .reindeer.second {
        top: 0;
        transform: rotate(14deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer.second .rope {
        top: 70px;
        left: -55px;
        width: 155px;
        transform: rotate(-15deg);
        animation: rope__inner 0.3s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .reindeer:before {
        content: "";
        position: absolute;
        top: 65px;
        left: 76px;
        width: 8px;
        height: 31px;
        background-color: #520d0d;
        z-index: 10;
        transform: rotate(-55deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer:after {
        content: "";
        position: absolute;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face {
        position: absolute;
        width: 30px;
        height: 22px;
        top: 44px;
        left: 72px;
        border-radius: 10px 10px 50% 50%;
        transform: rotate(-3deg);
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face:before {
        content: "";
        position: absolute;
        background-color: #cca58b;
        width: 29px;
        height: 16px;
        border-radius: 50%;
        top: 0px;
        left: 11px;
        transform: rotate(-49deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer .face:after {
        content: "";
        position: absolute;
        background-color: #000;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        top: -8px;
        left: 31px;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .ear {
        position: absolute;
        width: 21px;
        height: 11px;
        top: 4px;
        left: -18px;
        border-radius: 4px 0 50% 50%;
        transform: rotate(4deg);
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .ear:before {
        content: "";
        position: absolute;
        top: -2px;
        left: 34px;
        width: 4px;
        height: 5px;
        border-radius: 50%;
        transform: rotate(-35deg);
        background-color: #000;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn {
        position: absolute;
        width: 29px;
        height: 4px;
        top: -7px;
        left: -21px;
        border-radius: 2px;
        transform: rotate(38deg);
        background-color: #f0dbc2;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn:before,
    .countdownSection .decorations .santaWrapper .reindeer .face .horn:after {
        content: "";
        position: absolute;
        background-color: #f0dbc2;
        border-radius: 2px;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn.left {
        top: -7px;
        left: -21px;
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn.left:before {
        top: -4px;
        left: 6px;
        width: 14px;
        height: 4px;
        transform: rotate(43deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn.left:after {
        top: -4px;
        left: 13px;
        width: 14px;
        height: 4px;
        -webkit-transform: rotate(43deg);
        transform: rotate(53deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn.right {
        top: -12px;
        left: -6px;
        width: 24px;
        transform: rotate(62deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn.right:before {
        top: -3px;
        left: 5px;
        width: 10px;
        height: 4px;
        transform: rotate(43deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer .face .horn.right:after {
        top: -3px;
        left: 11px;
        width: 10px;
        height: 4px;
        transform: rotate(53deg);
    }

    .countdownSection .decorations .santaWrapper .reindeer .body {
        position: absolute;
        width: 58px;
        height: 31px;
        top: 84px;
        left: 28px;
        border-radius: 50% 0;
        transform: rotate(-3deg);
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body:before {
        content: "";
        position: absolute;
        width: 46px;
        height: 26px;
        top: -15px;
        left: 32px;
        border-radius: 0 0 50% 50%;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-55deg);
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body:after {
        content: "";
        position: absolute;
        width: 43px;
        height: 26px;
        top: -11px;
        left: 29px;
        border-radius: 0 0 50% 50%;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-30deg);
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.front .inner {
        position: absolute;
        width: 40px;
        height: 8px;
        top: 13px;
        left: 35px;
        border-radius: 0 50%;
        transform: rotate(-17deg);
        background-color: #cca58b;
        animation: reindeer__leg-front 0.3s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.front .inner .extension {
        position: absolute;
        width: 28px;
        height: 8px;
        top: 3px;
        left: 100%;
        border-radius: 2px 50%;
        transform: rotate(131deg);
        background-color: #cca58b;
        transform-origin: top left;
        animation: reindeer__leg-front-extension 0.2s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.front .inner .extension:after {
        content: "";
        position: absolute;
        top: 0;
        right: -2px;
        width: 7px;
        height: 8px;
        border-radius: 2px;
        background-color: #000;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner {
        position: absolute;
        width: 56px;
        height: 9px;
        top: 37px;
        left: -29px;
        border-radius: 0 50%;
        transform: rotate(-73deg);
        animation: reindeer__leg-back 0.3s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner:before {
        content: "";
        position: absolute;
        width: 25px;
        height: 16px;
        top: 4px;
        left: 25px;
        border-radius: 0 50%;
        transform: rotate(15deg);
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner:after {
        content: "";
        position: absolute;
        right: 0;
        width: 65%;
        height: 100%;
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner .extension {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 8px;
        background: #cca58b;
        border-radius: 2px 50%;
        transform-origin: top right;
        animation: reindeer__leg-back-extension 0.2s linear alternate infinite;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner .extension:after {
        content: "";
        position: absolute;
        width: 8px;
        height: 9px;
        top: -2px;
        left: -2px;
        border-radius: 2px 0 2px 2px;
        transform: rotate(14deg);
        background-color: #000;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .tail {
        position: absolute;
        width: 27px;
        height: 26px;
        top: 6px;
        left: -8px;
        border-radius: 50% 2px;
        transform: rotate(-17deg);
        background-color: #cca58b;
    }

    .countdownSection .decorations .santaWrapper .reindeer .body .tail:before {
        content: "";
        position: absolute;
        background-color: #cca58b;
        border-radius: 50%;
        top: -2px;
        left: -3px;
        width: 15px;
        height: 5px;
        transform: rotate(25deg);
    }

    .countdownSection .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        align-content: center;
        width: 90%;
        padding: 50px 0;
    }

    .countdownSection .container .counterWrapper {
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 1;
    }

    .countdownSection .container .counterWrapper p {
        background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/navidad%2Fpattern-2.jpg?alt=media&token=c3ebea10-d285-4b2a-846b-12154d670bf2);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 100px;
    }

    .countdownSection .container .counterWrapper .countdown {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .countdownSection .container .counterWrapper .countdown .countdownProp {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        align-content: center;
        width: 240px;
        margin: 10px;
        font-size: 200px;
        line-height: 150px;
        background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/navidad%2Fpattern-1.png?alt=media&token=e62eb3c2-bea0-49ae-a398-ab426f5605c1);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 100px #fff;
    }

    .countdownSection .container .counterWrapper .countdown .countdownProp:not(:first-child):before {
        content: ":";
    }

    .countdownSection .container .counterWrapper .countdown .countdownProp:after {
        content: attr(date-count);
        width: 100%;
        font-size: 20px;
        -webkit-text-fill-color: #fff;
        line-height: normal;
    }

    @media only screen and (max-width: 700px) {
        .countdownSection .decorations .decoration {
            width: 300px;
            height: 300px;
        }

        .countdownSection .container .counterWrapper p {
            font-size: 70px;
        }

        .countdownSection .container .counterWrapper .countdown {
            margin: 20px 0;
        }

        .countdownSection .container .counterWrapper .countdown .countdownProp {
            width: 120px;
            font-size: 100px;
            line-height: 80px;
        }
    }

    @media only screen and (max-width: 500px) {
        .countdownSection .decorations .santaWrapper {
            display: none;
        }

        .countdownSection .container .counterWrapper p {
            font-size: 50px;
        }

        .countdownSection .container .counterWrapper .countdown .countdownProp {
            display: block;
        }

        .countdownSection .container .counterWrapper .countdown .countdownProp:not(:first-child):before {
            display: none;
        }

        .countdownSection .container .counterWrapper .countdown .countdownProp:after {
            display: block;
        }
    }

    .snowflake {
      color: #fff;
    }
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
    @-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}
    @keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
    @keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}




    @media screen and (max-width: 600px){
        .hero-area.style3::before {
            display: none;
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    top: 90%;
    height: 100px;
    width: 100%;
    background-image: url(../images/hero/shape1.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9;
}
    }
    .scene{
        display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background:radial-gradient(80.16% 104.9% at 80.16% 50%,#0f78c2 0,#0b4181 100%);
}

.night{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    /* background: #000000;
    background: -moz-linear-gradient(top, #000000 0%, #00021e 36%, #12113f 74%);
    background: -webkit-linear-gradient(top, #000000 0%,#00021e 36%,#12113f 74%);
    background: linear-gradient(to bottom, #000000 0%,#00021e 36%,#12113f 74%); */
    background: radial-gradient(87% 275% at 6% 15%,#031225 0,#051935 23%,#072149 40%,#0e2761 58%,#13346f 66%,#113f73 75%,#1b4f7b 83%,#10458f 93%,#15438d 100%);
    opacity: 0;
    animation: day 16s alternate infinite;
}

/* Media Queries para diferentes tamaños de pantalla */

/* Dispositivos móviles */
@media screen and (max-width: 600px) {
    .night {
    height: 100%;
    top: -3%;
    left: 0%;
    animation: day 16s alternate infinite;
    }
}

/* Tabletas */
@media screen and (min-width: 601px) and (max-width: 1200px) {
    .night {
        /* Estilos para tabletas */
        height: 100%;
        top: -2%;
    }
   
}

/* Pantallas extra grandes (más de 1200px) */
@media screen and (min-width: 1201px) {
    .night {
        /* Estilos específicos para pantallas grandes, como ajustes en el tamaño del fondo, la animación, etc. */
        /* Ejemplo: Aumentar la duración de la animación */
        animation: day 16s alternate infinite;
    }
}



#landscape{
  display:block;
  position:fixed;
  background-image:url("https://picturelements.github.io/images/winterscene.png");
  width:100%;
  height:40vh;
  background-size:133vh 40vh;
  bottom:0;
  animation:night 15s alternate infinite;
}

#snow, #snow2{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  background-image:url("https://picturelements.github.io/images/snow1.png");
}

#snow{
  animation:snow 10s linear infinite,night 15s alternate infinite;
}

#snow2{
  background-image:url("https://picturelements.github.io/images/snow2.png");
  animation:snow 15s linear infinite,night 15s alternate infinite;
}


.celestial{
    display: block;
    position: absolute;
    width: 20vh;
    height: 20vh;
    border-radius: 50%;
    background-color: #ffee5d;
    box-shadow: 0 0 20vh #fffe9f, 0 0 10vh #fffe9f;
    left: 50%;
    margin-left: -10vh;
    /* bottom: 30vh; */
    bottom: 35vh;
    animation: daycycle 16s alternate linear infinite;
}

@keyframes snow{
  to{background-position:200px 400px}
}

@keyframes day{
  to{opacity:1;}
}

@keyframes night{
  to{
    -webkit-filter:brightness(25%);
    -moz-filter:brightness(25%);
    -ie-filter:brightness(25%);
    filter:brightness(25%);
  }
}
@keyframes daycycle {
    0%, 25% {
    clip-path: none;
    background-color: #efce2d;
    box-shadow: 0 0 20vh #fffe9f, 0 0 10vh #fffe9f;
    bottom: calc(27vh + 25%);
    /* z-index: 9999; */
}
50% {
    /* background-image: url(https://proposgradolocal.upea.bo/edugrids/assets/images/navidad/luna.png); */
    /* clip-path: none; */
    /* background-size: cover; */
    /* background-color: #fff495; */
    box-shadow: 0 0 15vh #ffffff;
    bottom: -65vh;
    z-index: 99;
}
  75%, 100% {
    /* De 75% a 100%, es de noche y la luna está subiendo */
    /* background-image: url('<?= base_url("/edugrids/assets/images/navidad/luna.png");?>'); */
    background-image: url('/edugrids/assets/images/navidad/luna.png'); 
    background-size: cover; 
    background-color: transparent; 
    box-shadow: 0 0 15vh #ffffff;
    bottom: calc(2vh + 75%); /* Subiendo */
  }
}



    .rama{
        width: 19%;
    position: absolute;
    top: -3%;
    left: -2%;
    transform: rotate(359deg);
    /* transform: scaleY(1.5); */
    /* transform: scaleX(1) scaleY(-1) rotate(272deg); */
    z-index: 10;
    }

    @media screen and (max-width:1400px) {
        .rama{
            width: 16%;
    position: absolute;
    top: -5%;
    left: -2%;
    transform: rotate(358deg);
    /* transform: scaleY(1.5); */
    /* transform: scaleX(1) scaleY(-1) rotate(272deg); */
    z-index: 98;
        }
}

    @media screen and (max-width:1350px) {
        .rama{
            width: 20%;
    position: absolute;
    top: -6%;
    left: -2%;
    transform: rotate(360deg);
    /* transform: scaleY(1.5); */
    /* transform: scaleX(1) scaleY(-1) rotate(272deg); */
    z-index: 98;
        }
}

    @media screen and (max-width:1300px) {
        .rama{
            width: 20%;
    position: absolute;
    top: -6%;
    left: -2%;
    transform: rotate(360deg);
    /* transform: scaleY(1.5); */
    /* transform: scaleX(1) scaleY(-1) rotate(272deg); */
    z-index: 98;
        }
}

@media screen and (max-width:1200px) {
        .rama{
            /* display: none; */
            top: -1%;
    width: 17%;
    transform: rotate(361deg);
        }
}
@media screen and (max-width:1000px) {
        .rama{
            display: none;
            /* top: -8%; */
        }
}



    .ramacel{
        width: 55%;
    position: absolute;
    top: -2%;
    left: 23%;
}

@media screen and (min-width: 600px) {
    .ramacel {
        display: none;
    }
}


    
    .rama2{
        width: 16%;
    position: absolute;
    top: -108%;
    left: 85%;
    /* transform: rotate(268deg); */
    /* transform: scaleY(1.5); */
    transform: scaleX(1) scaleY(-1) rotate(90deg);
    }

    /* rama2 */
    @media  (min-width: 1200px) and (max-width: 1900px) {
        .rama2{
            display: none;
        }
}
  @media screen and (max-width:1400px) {
        .rama2{
            display: none;
        }
}

    @media screen and (max-width:1350px) {
        .rama2{
            display: none;
        }
}

    @media screen and (max-width:1300px) {
        .rama2{
            display: none;
        }
}

@media screen and (max-width:1200px) {
        .rama2{
            /* display: none; */
            display: none;
        }
}
@media screen and (max-width:1000px) {
        .rama2{
            display: none;
            /* top: -8%; */
        }
}



    .seccion-con-triangulos {
        position: relative;
background: #f7f7f7;
padding: 50px;
}


.seccion-con-triangulos::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-left: 50vw solid transparent;
border-right: 53vw solid transparent;
border-top: 100px solid #386f9d;
}




    .countdown-container {
        /* background-color: #000a4f; */
        background: radial-gradient(80.16% 104.9% at 80.16% 50%,#0f78c2 0,#0b4181 100%);
       
        color: white;
        text-align: center;
        padding: 2rem 0;
      }
    
      .countdown-container h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
      }
    
      .countdown-container .countdown {
        display: flex;
        justify-content: center;
        gap: 1rem;
      }
      @media only screen and (max-width: 767px){
.cel-responsive {
    padding: 20px !important;
}
}
      .countdown-item {
        background: none;
        /* border: 2px solid white; */
        padding: 1rem;
        min-width: 3rem;
        color: white;
      }
    
      .countdown-label {
        font-size: 1rem;
        color: #aaa;
      }

@media screen and (max-width: 767px){
    .t1{
        font-size: 1.6rem;
        text-align: center;
    }
}