.count-banner {
    width: 100%;
    height: 600px;
    align-content: center;
    background: url(../img/fondo.jpg) no-repeat center;
    background-size: cover;
    text-wrap: balance;

    .row {
        width: 100%;
    }

    p {
        color: #fff;
        font-size: 27px;
        line-height: normal;
        font-weight: 300;
        padding-block: 37px;
        margin-top: -27px;
        font-family: 'Roboto';
    }

    h3 {
        color: #fff;
        font-size: 14px;
        /* margin-top: 16px; */
        font-weight: 300;
        font-family: 'Roboto';
    }

    h3 span {
        color: #fff;
        font-size: 19px;
        /* margin-top: 16px; */
        font-weight: 500;
    }

    img {
        width: 273px;
        height: 297px;
        margin: 0 auto;
        display: block;
    }
}


.count-container {
    &.absolute {
        position: absolute;
        width: 100%;
        inset: auto auto -10% auto;
        z-index: 10;

        .upaep__counterdown {
            width: 500px;
            box-shadow: 1px 5px 8px rgb(60 60 60 / 40%);
        }
    }

    &.glass {
        .upaep__counterdown {
            backdrop-filter: blur(1px);
            border: 1px solid rgba(255, 255, 255, 0.25);
            --upaep-counterdown-bg: rgba(255, 255, 255, 0.1);
            --upaep-counterdown-timeunit-color: #ffffff;
            --upaep-counterdown-timelabel-color: #ffffff;
            --upaep-counterdown-timezone-color: #ffffff;
        }

        .upaep__counterdown-item {
            text-shadow: 3px 3px 3px #000000;
        }
    }
}

.upaep__counterdown {
    --upaep-counterdown-bg: #F5F5F5;
    --upaep-counterdown-margin: 1rem auto;
    --upaep-counterdown-padding: 1rem;
    --upaep-counterdown-ff: "Fira Sans Extra Condensed", sans-serif;
    --upaep-counterdown-timeunit-color: #52565A;
    --upaep-counterdown-timeunit-fz: 1.5rem;
    --upaep-counterdown-timeunit-fw: bold;
    --upaep-counterdown-timelabel-color: #52565A;
    --upaep-counterdown-timelabel-fz: 1.25rem;
    --upaep-counterdown-timelabel-fw: regular;
    --upaep-counterdown-timezone-color: #52565A;
    --upaep-counterdown-timezone-fz: 1rem;
    --upaep-counterdown-timezone-fw: regular;
    --upaep-counterdown-message-color: #28A745;
    --upaep-counterdown-message-fz: 1rem;
    --upaep-counterdown-message-fw: regular;
    --upaep-counterdown-message-animation: animationTada;
    background: var(--upaep-counterdown-bg);
    margin: var(--upaep-counterdown-margin);
    padding: var(--upaep-counterdown-padding);
    font-family: var(--upaep-counterdown-ff);
    width: 100%;
    border-radius: 12px;

    &:has(.upaep__counterdown-message) {
        overflow: hidden;
    }
}

.upaep__counterdown-wrapper {
    width: 100%;
    padding: .5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.upaep__counterdown-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.upaep__counterdown-timeunit {
    color: var(--upaep-counterdown-timeunit-color);
    font-size: var(--upaep-counterdown-timeunit-fz);
    font-weight: var(--upaep-counterdown-timeunit-fw);
    line-height: 1em;

    &>* {
        height: 1em;
        display: inline-block;
        overflow-y: hidden
    }

    >:before {
        font-family: var(--upaep-counterdown-ff);
        content: "00\a 01\a 02\a 03\a 04\a 05\a 06\a 07\a 08\a 09\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a 60\a 61\a 62\a 63\a 64\a 65\a 66\a 67\a 68\a 69\a 70\a 71\a 72\a 73\a 74\a 75\a 76\a 77\a 78\a 79\a 80\a 81\a 82\a 83\a 84\a 85\a 86\a 87\a 88\a 89\a 90\a 91\a 92\a 93\a 94\a 95\a 96\a 97\a 98\a 99\a";
        white-space: pre;
        top: calc(var(--upaep-counterdown-time)*-1em);
        text-align: center;
        transition: all 1s cubic-bezier(1, 0, 0, 1);
        position: relative
    }
}

.upaep__counterdown-timelabel {
    color: var(--upaep-counterdown-timelabel-color);
    font-size: var(--upaep-counterdown-timelabel-fz);
    font-weight: var(--upaep-counterdown-timelabel-fw);
}

.upaep__counterdown-timezone {
    color: var(--upaep-counterdown-timezone-color);
    font-size: var(--upaep-counterdown-timezone-fz);
    font-weight: var(--upaep-counterdown-timezone-fw);
    text-align: center;
}

.upaep__counterdown-message {
    color: var(--upaep-counterdown-message-color);
    font-size: var(--upaep-counterdown-message-fz);
    font-weight: var(--upaep-counterdown-message-fw);
    text-align: center;
    animation: var(--upaep-counterdown-message-animation) 1s infinite ease-in-out;
}

@keyframes animationTada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@media(width<=480px) {

    .count-container {
        &.absolute {
            inset: auto auto -25% auto;

            .upaep__counterdown {
                width: 75%;
            }
        }
    }

    .upaep__counterdown {
        --upaep-counterdown-timeunit-fz: 1.25rem;
        --upaep-counterdown-timelabel-fz: 1rem;
        --upaep-counterdown-timezone-fz: .8rem;
        --upaep-counterdown-message-fz: .8rem;
    }

    /* .blank {
        height: 100px;
    } */
    .count-banner {
        .row {
            width: auto;
        }

        img {
            width: 200px;
        }

        p {
            text-align: center;
            font-size: 17px;
        }

        h3 {
            text-align: center;
            font-size: 12px;
        }
    }
}