body{}
.main {position: relative; height:65vh;}
.main video{    object-fit: cover;max-height: 100%;width: 100%; height: 100%;}
.main button{color: #fff; background-color: #da2685;    line-height:36px; text-transform: uppercase; min-width:285px; border: none; outline: none; font-weight: bold;}
.banner-wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center;}
.banner-wrap h1{ font-weight: bold;}
.banner-wrap p{}
.banner-wrap ul{padding: 0; margin: 0;}
.banner-wrap ul li{ display: inline; padding: 0 10px;position: relative;font-size: 0.8rem;}
.banner-wrap ul li:after{ content: "|"; position: absolute; right:-3px;}
.banner-wrap ul li:last-child::after{ display: none;}
.counter-main{ padding: 50px 0;}
.counter-main h2{ text-transform: uppercase; text-align: center;font-size: 1.4rem;}
.countdown-container {width: 100%;text-align: center;width: 100%;}
.countdown {display: flex;transform-style: preserve3d;perspective: 500px;width:25em;margin: 0 auto;max-width: 100%;}
.countdown.remove {animation: hide-countdown 1s cubic-bezier(0, 0.9, 0.56, 1.2) forwards;overflow: hidden;height: 100%;}
.number, .separator {
display: block;
color: #333;
height: 85px;
font-size:35px;
line-height:85px;
position: relative;
text-align: center;
width: 100%;
font-weight: bold;
}
.separator {margin: 0;width:6rem;}
.new, .old, .current {
color: #fff;
position: absolute;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
background: #333;
}
.new {animation: show-new 0.4s cubic-bezier(0, 0.9, 0.5, 1.2) forwards;}
.old {animation: hide-old 2s cubic-bezier(0, 0.9, 0.56, 1.2) forwards;}
.countdown section {position: relative;}
#js-days:after, #js-hours:after, #js-minutes:after, #js-seconds:after {content: "DAYS";position: absolute;text-align: center;left: 0;right: 0;top:100%;font-size: 12px;line-height: 32px;}
#js-hours:after {content: "HOURS";}
#js-minutes:after {content: "MINUTES";}
#js-seconds:after {content: "SECONDS";}
@keyframes hide-countdown {
to {
    height: 0;
    overflow: hidden;
}
}
@keyframes show-new {
0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-2rem) scale(0.8) rotateX(-20deg);
}
100% {
    transform: translate(-50%, -50%);
}
}
@keyframes hide-old {
0% {
    transform: translate(-50%, -50%);
}
100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-5rem) scale(0.5) rotateX(-75deg);
}
}
@media only screen and (max-width:980px) {
    .banner-wrap h1{font-size: 2rem;}
}
@media only screen and (max-width: 480px) {
    .banner-wrap h1{font-size: 1.5rem;}
    .counter-main h2{font-size: 1rem;}
}