@import "https://fonts.googleapis.com/css?family=Lato";
.countdown {
    width: 780px;
    position: absolute;
    top: 158px;
    left: 47%;
    transform: translate(-50%, -50%);
    font-family: "Lato", "Microsoft JhengHei", Arial, sans-serif;
    font-weight: 900;
}
.countdown-timer {
    height: 70px;
    display: flex;
    justify-content: space-around;
    /* background-color: #333; */
    color: #df3b27;
    border-radius: 10px;
}
.countdown-timer > * {
    width: 140px;
    height: 80px;
    padding: 0 10px;
    font-size: 90px;
    line-height: 70px;
    text-align: center;
    white-space: nowrap;
}
.countdown-timer > * span {
    display: block;
    width: 100%;
    height: 100%;
	transform: translate3d(0,0,0)
}
.countdown-timer > * span.pop {
    animation: pop 0.3s forwards;
}
.countdown-timer .days,
.countdown-timer .hours,
.countdown-timer .minutes,
.countdown-timer .seconds {
    position: relative;
}
/* .countdown-timer .days::before,
.countdown-timer .hours::before,
.countdown-timer .minutes::before,
.countdown-timer .seconds::before {
position: absolute;
font-size: 18px;
line-height: initial;
top: -24px;
letter-spacing: 2px;
left: 50%;
transform: translateX(-50%);
color: #555;
}
.countdown-timer .days::after,
.countdown-timer .hours::after,
.countdown-timer .minutes::after,
.countdown-timer .seconds::after {
content: ":";
position: absolute;
line-height: 60px;
font-size: 60px;
top: 0;
right: -8px;
}
.countdown-timer .days::before {
content: "days";
}
.countdown-timer .hours::before {
content: "Hours";
}
.countdown-timer .minutes::before {
content: "Minutes";
}
.countdown-timer .seconds::before {
content: "Seconds";
}
.countdown-timer .seconds::after {
display: none;
} */

.countdown-timer .days::after,
.countdown-timer .hours::after,
.countdown-timer .minutes::after,
.countdown-timer .seconds::after {
content: " ";
display: block;
position: absolute;
left: 128px;
bottom: 10px;
width: 45px;
height: 45px;
background-size: 100% 100%;
background-image: url("../images/timer-s.png");
}
.countdown-timer .minutes::after{
background-image: url("../images/timer-m.png");
}
.countdown-timer .hours::after{
background-image: url("../images/timer-h.png");
}
.countdown-timer .days::after{
background-image: url("../images/timer-d.png");
}

@keyframes pop {
0% {
    transform: scale(0.6);
}
30% {
    transform: scale(1.1);
}
}
/* countdown end css */


@media (max-width: 1440px) {
    .countdown-timer{
        transform: scale(0.9);
    }
}

@media (max-width: 780px) {
    .countdown{
        top: 60px;
    }
    .countdown-timer{
        transform: scale(0.4);
    }

}