@font-face {
    font-family: Centrale-Sans-Medium;
    src: url(fonts/Centrale_Sans_Medium.otf);
    font-display: swap;
}@font-face {
    font-family: Centrale-Sans-Bold;
    src: url(fonts/Centrale_Sans_Bold.otf);
    font-display: swap;
}

.countdown-timer-banner-url{position: relative; margin: 20px auto;}
.countdown-timer-banner{position: absolute; top: 0; left: 0; overflow: hidden; cursor: pointer; background: #fff;}
.countdown-timer > .day-frame {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(70, 120, 150, 0.10), inset 0 0 8px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.countdown-timer > .day-frame > .day-number{
    font-family: Centrale-Sans-Bold, sans-serif;
    line-height: 1;
}

.countdown-timer > .day-frame > .day-text {
    font-family: Centrale-Sans-Medium, sans-serif;
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.countdown-timer-banner-url-desktop{position: relative; margin: 20px auto; width:100%; max-width: 980px; height: 130px;}
.countdown-timer-banner-desktop{width:100%; max-width: 980px; height: 130px;}
.countdown-timer-banner-desktop > img{width: 100%; max-width: 980px;}

.countdown-timer-banner-url-mobile{position: relative; margin: 20px auto; width:100%; max-width: 320px; height: 100px;}
.countdown-timer-banner-mobile{width: 100%; max-width: 320px; height: 100px;}
.countdown-timer-banner-mobile > img{width: 100%; max-width: 320px;}
.countdown-timer-banner-mobile .countdown-timer{position: absolute; top: 44px; right: 18%; width: 100px; height: 23px; text-align: center; color: #003766;}
.countdown-timer-banner-mobile .countdown-timer > .day-frame{width: 25px; height: 28px; border-radius: 5px;}
.countdown-timer-banner-mobile .countdown-timer > .day-frame:first-of-type{right: 90px;}
.countdown-timer-banner-mobile .countdown-timer > .day-frame:nth-of-type(2){right: 60px;}
.countdown-timer-banner-mobile .countdown-timer > .day-frame:nth-of-type(3){right: 30px;}
.countdown-timer-banner-mobile .countdown-timer > .day-frame:nth-of-type(4){right: 0;}
.countdown-timer-banner-mobile .countdown-timer > .day-frame > .day-number{font-size: 12px; letter-spacing: -1px;}
.countdown-timer-banner-mobile .countdown-timer > .day-frame > .day-text {font-size: 5px; margin-top: 1px;}


@media (min-width: 1040.1px) {
    .countdown-timer-banner-desktop .countdown-timer{position: absolute; top: 40px; right: 190px; width: 300px; height: 55px; text-align: center; color: #003766;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame{width: 45px; height: 55px; border-radius: 10px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:first-of-type{right: 240px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(2){right: 183px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(3){right: 126px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(4){right: 69px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame > .day-number{font-size: 26px; letter-spacing: -3px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame > .day-text {font-size: 10px;}
}

@media (min-width: 768.1px) and (max-width: 1040px) {
    .countdown-timer-banner-desktop .countdown-timer{position: absolute; top: 48px; right: 200px; width: 164px; height: 45px; text-align: center; color: #003766;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame{width: 35px; height: 45px; border-radius: 8px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:first-of-type{right: 129px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(2){right: 86px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(3){right: 43px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(4){right: 0;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame > .day-number{font-size: 20px; letter-spacing: -3px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame > .day-text {font-size: 6px;}
}

@media (min-width: 576.1px) and (max-width: 768px) {
    .countdown-timer-banner-desktop .countdown-timer{position: absolute; top: 50px; right: 27%; width: 132px; height: 40px; text-align: center; color: #003766;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame{width: 30px; height: 40px; border-radius: 8px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:first-of-type{right: 99px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(2){right: 66px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(3){right: 33px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame:nth-of-type(4){right: 0;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame > .day-number{font-size: 14px; letter-spacing: -1px;}
    .countdown-timer-banner-desktop .countdown-timer > .day-frame > .day-text {font-size: 6px;}
}

@media (min-width: 576.1px) {
    .countdown-timer-banner-url-desktop{display: block !important;}
    .countdown-timer-banner-url-mobile{display: none !important;}
}

@media (max-width: 576px) {
    .countdown-timer-banner-url-mobile{display: block !important;}
    .countdown-timer-banner-url-desktop{display: none !important;}
}