:root{--box-size:62px;--clip-size:62px;--path-width:1px;--clip-distance:0;--subtraction:calc(var(--clip-size) - var(--path-width))}
@media screen and (min-width:960px){:root{--box-size:134px;--clip-size:134px;--subtraction:calc(var(--clip-size) - var(--path-width))}
}
@media(min-width:765px){.aem-herobannercountdown__base{margin-bottom:30px}
}
.aem-herobannercountdown__bgImage{height:100%;width:100%;top:0;inset-inline-start:0;overflow:hidden;position:absolute}
@media(min-width:960px){.aem-herobannercountdown__bgImage{position:static;grid-area:1/1}
}
.aem-herobannercountdown__bgImage img{-o-object-fit:cover;object-fit:cover}
.aem-herobannercountdown{font-family:var(--font-family);background-image:linear-gradient(to right,#434343 0,black 100%);position:relative;width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;margin-bottom:0;min-height:100vh}
@media(min-width:765px){.aem-herobannercountdown{margin-bottom:30px}
}
.aem-herobannercountdown__numbers-wrapper{display:flex;align-items:center;justify-content:center;width:100%}
.aem-herobannercountdown__wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;grid-area:1/1;position:relative;z-index:1;background:linear-gradient(180deg,#000 0,rgba(255,255,255,0) 30%)}
@media(min-width:960px){.aem-herobannercountdown__wrapper{align-self:center;padding-top:230px;padding-bottom:80px;height:100%}
.aem-herobannercountdown__wrapper--feature{padding-top:220px}
}
.aem-herobannercountdown .time-box{display:flex;flex-direction:column;align-items:center;color:#fff;padding:15px}
.aem-herobannercountdown .time-box__number{font-size:37px;line-height:34px;font-weight:bold;background:rgba(0,0,0,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);width:var(--box-size);height:var(--box-size);display:flex;align-items:center;justify-content:center;margin-bottom:21px;position:relative;z-index:2}
@media screen and (min-width:960px){.aem-herobannercountdown .time-box__number{font-size:80px;line-height:75px}
}
.aem-herobannercountdown .time-box__number::before{position:absolute;top:0;bottom:0;inset-inline:0;content:"";z-index:-1;margin-block:0;margin-inline:0;box-shadow:inset 0 0 0 1px;animation:clip 8s linear infinite}
.aem-herobannercountdown .time-box__text span{font-size:14px;line-height:21px;text-transform:capitalize}
.aem-herobannercountdown__product-info-wrapper{display:flex;align-items:center;padding-top:50px;flex-direction:column}
@media(min-width:960px){.aem-herobannercountdown__product-info-wrapper{padding-top:70px;flex-direction:row}
}
.aem-herobannercountdown__promo-text .aem-text__base{margin-top:0}
.aem-herobannercountdown__promo-text .aem-text__base .grid-inner{font-size:16px;line-height:23px;color:#fff}
.aem-herobannercountdown__promo-text .aem-text__base .grid-inner p,.aem-herobannercountdown__promo-text .aem-text__base .grid-inner span{font-size:16px;line-height:23px;color:#fff}
@media(min-width:960px){.aem-herobannercountdown__promo-text .grid-inner{padding-inline-start:10px}
}
.aem-herobannercountdown__product-image{width:160px;height:22px}
.aem-herobannercountdown__footer-wrapper{padding-top:40px;max-width:580px;text-align:center}
.aem-herobannercountdown__footer-wrapper .aem-text__base .grid-inner{font-size:16px;line-height:23px;color:#fff}
.aem-herobannercountdown__footer-wrapper .aem-text__base .grid-inner p,.aem-herobannercountdown__footer-wrapper .aem-text__base .grid-inner span{font-size:16px;line-height:23px;color:#fff}
.aem-herobannercountdown .fade-in{opacity:0;animation:fadeIn ease-in 1;animation-fill-mode:forwards;animation-duration:1.2s;animation-delay:1.1s}
.aem-herobannercountdown__sticky-banner-wrapper{display:flex;align-items:center;color:#fff !important;height:80px;padding-inline:18px}
@media(min-width:960px){.aem-herobannercountdown__sticky-banner-wrapper{padding-inline:10px}
}
.aem-herobannercountdown__small-logo-wrapper{width:36px;height:39px}
.aem-herobannercountdown__close-icon{width:20px;height:100%;display:flex;align-items:center;justify-content:center;margin-inline:auto 0}
.aem-herobannercountdown__close-icon .icon__wrapper{display:flex}
.aem-herobannercountdown__close-icon .icon{width:10px;height:10px}
.aem-herobannercountdown__close-icon svg{fill:#fff}
.aem-herobannercountdown__sticky-banner{background-color:#1d1d1d;transition:transform .2s ease;position:fixed;display:none;inset-inline:0;z-index:-1;transform:translateY(-100%)}
@media(min-width:960px){.aem-herobannercountdown__sticky-banner--active{display:block}
.aem-herobannercountdown__sticky-banner--fixed{transform:translateY(0);z-index:3}
}
.aem-herobannercountdown__sticky-banner .aem-text__base{margin-top:0;font-size:12px !important}
.aem-herobannercountdown__sticky-banner .date{font-weight:bold;font-size:18px !important}
@keyframes clip{0,100%{clip:rect(0,var(--clip-size),1px,0)}
25%{clip:rect(0,1px,var(--clip-size),0)}
50%{clip:rect(calc(var(--clip-size) - var(--path-width)),var(--clip-size),var(--clip-size),0)}
75%{clip:rect(0,var(--clip-size),var(--clip-size),calc(var(--clip-size) - var(--path-width)))}
}
@keyframes fadeIn{from{opacity:0}
to{opacity:1}
}