{}
html {
  height: 100%;
  box-sizing:borde-box;
}
#countdown{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width:1000px;margin:0 auto;
}
.flip-clock {
  text-align: center;
  perspective: 400px;
  margin: 20px auto;
}
.flip-clock *,
.flip-clock *:before,
.flip-clock *:after {
  box-sizing: border-box;
}
.flip-clock__piece {
  display: inline-block;
  margin: 0 10px;
}
.flip-clock__slot {
  margin-top: 5px;
  text-transform: lowercase;
  font: normal 600 20px/1.5em 'Montserrat';
}
.card {
  display: block;
  position: relative;
  padding-bottom: 0.72em;
  font-size: 115px;
  line-height: 1.5em;
 
}
.card b{ font-family:'american_captainregular';}
.card__top,
.card__bottom,
.card__back::before,
.card__back::after {
  display: block;
  height: 83px;
  color: #000;
  padding: 0;
  border-radius: 0.15em 0.15em 0 0;
  backface-visiblity: hidden;
  transform-style: preserve-3d;
  width:160px;
  transform: translateZ(0);
  background-image:url(count-top.png);
}
.card__bottom {
  color: #000;
  position: absolute;
  top: 50%;
  left: 0;
  background-image:url(count-bot.png);
  background-size:1px 83px;
  border-radius: 0 0 0.15em 0.15em;
  pointer-events: none;
  overflow: hidden;
}
.card__bottom::after {
  display: block;
  margin-top: -0.72em;
}
.card__back::before,
.card__bottom::after {
  content: attr(data-value);
}
.card__back {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0%;
  pointer-events: none;
}
.card__back::before {
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.flip .card__back::before {
  -webkit-animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
          animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  transform-origin: center bottom;
}
.flip .card__back .card__bottom {
  transform-origin: center top;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
          animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
}
footer .card__top,footer  .card__bottom,footer  .card__back::before,footer  .card__back::after{width:88px;height:44px;line-height:88px;background-size:1px 43px;}
footer #countdown{max-width:435px;}
footer .card{font-size:83px;line-height:88px;padding-bottom:44px;}
footer .card__bottom::after{margin-top:-44px;}
footer.main-footer .home-count .wp-block-cover .wp-block-cover__inner-container{ padding:3px 20px 0;}
footer .flip-clock__slot{font-size:14px; line-height:120%;}

@media(max-width:800px){
	.flip-clock__card.card{padding-bottom: 0.84em;line-height:1.55;font-size: 11vw;}
	.card__top, .card__bottom, .card__back::before, .card__back::after{height:0.85em;width:1.69em;background-size: 1px 96%;}
	.card__bottom::after,footer .card__bottom::after {margin-top:-0.84em;}
	footer .card__top,footer  .card__bottom,footer  .card__back::before,footer  .card__back::after{height:0.85em;width:1.69em;background-size: 1px 96%;line-height:1.55}
	footer #countdown{max-width:520px;}
	footer .flip-clock__card.card{padding-bottom: 0.84em;line-height:1.55;font-size: 8vw;}
	.flip-clock{margin:15px auto;}
	
}
@media(max-width:600px){
	.flip-clock__card.card{font-size:10vw;}
	.flip-clock__slot{font-size:16px;}
}
@media(max-width:480px){
	.flip-clock__card.card{padding-bottom: 0.84em;line-height:1.55;font-size:9vw;}
	.flip-clock__slot,.footer .flip-clock__slot{font-size:12px;}
	.flip-clock__piece {display: inline-block;margin: 0 5px;}
	
}
@-webkit-keyframes flipTop {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%,
  99% {
    opacity: 0.99;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@keyframes flipTop {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%,
  99% {
    opacity: 0.99;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@-webkit-keyframes flipBottom {
  0%,
  50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    transform: rotateX(0deg);
    z-index: 5;
  }
}
@keyframes flipBottom {
  0%,
  50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    transform: rotateX(0deg);
    z-index: 5;
  }
}