.countdown-container{
  position: relative;
}
.countdown{
  position: absolute;
  top:0;
  left:0;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  color: inherit;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;
  opacity: 1;
  transition: opacity 1s 1s;
  user-select: none;
}
.countdown.countdown-init{
  opacity: 0;
}
.countdown.countdown-step1{
  opacity: 1!important;
  border: 2px solid green;
}
.countdown.countdown-closed{
  display: none;
}
.countdown-text{
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-around;
  
  position: absolute;
  top: 5%;
  right: 5%;
  bottom: 5%;
  left: 5%;
}
.countdown .text-end {
  align-content: center;
}
.countdown .text-end,
.countdown .text-countdown {
  transition: opacity 1s;
  text-align: center;
}
.countdown.countdown-end .text-countdown,
.countdown .text-end{
  display: none;
  opacity: 0;
}
.countdown .text-countdown,
.countdown.countdown-end .text-end{
  display: flex;
  opacity: 1;
}
.cd-transition.countdown .text-countdown,
.cd-transition.countdown.countdown-end .text-end{
  display: flex;
}

.countdown .text-end,
.countdown .cd-title {
  font-weight: 700;
}
.countdown .cd-duration{
  display: flex;
  padding: 10px 30px;
  width: 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.countdown .cd-title{
  width: 100%;
  padding: 10% 0 0;
  box-sizing: border-box;
}

.countdown .cd-days,
.countdown .cd-hours,
.countdown .cd-minutes,
.countdown .cd-seconds{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.countdown .cd-hours,
.countdown .cd-minutes,
.countdown .cd-seconds{
  margin: 0 .5em;
}
.countdown .cd-days{
  margin: 0 2em 0 .5em;
}
.countdown .cd-val{
  width: 100%;
  font-size: 2em;
}
.countdown .cd-unit{
  margin: .5em 0 0 0;
}
.seconds-0 .cd-seconds.cd-hide0,
.minutes-0 .cd-minutes.cd-hide0,
.hours-0 .cd-hours.cd-hide0,
.days-0 .cd-days.cd-hide0{
  display: none;
}
.cd-0-transition.seconds-0 .cd-seconds.cd-hide0,
.cd-0-transition.minutes-0 .cd-minutes.cd-hide0,
.cd-0-transition.hours-0 .cd-hours.cd-hide0,
.cd-0-transition.days-0 .cd-days.cd-hide0{
  display: flex;
  font-size: 0;
  opacity: 0;
  margin-left: 0;
  margin-right: 0;
  transition: opacity 1s, margin 1s, font-size 1s;
}

@media only screen and (max-width: 450px){
  #player.countdown-container .countdown{
    top:2%;
    right:5%;
    bottom:18%;
    left:5%;
  }
}