/* countdown.css */


#countdownBody
{
    background-image: url("../images/SP Horizon - Portrait_250421.png");
    background-position: center center;
    height: 100vh;
}

#countdownTitle
{
  font-size: calc(1.3rem + 2.4vw);
  letter-spacing: calc(0.01rem + 0.1vw);
}

#countdownTitleDIV
{
  top: calc(1rem + 12vh);
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  margin: 0 auto;
}

#countdownTitle,
#countdownLearn,
#countdownBeta,
#countdownInfocomm,
#countdownLearn,
#countdownBreakthrough
{
  font-family: Helvetica;
  color: #FBF7FF;
  text-align: center;
  white-space: nowrap;
}

#countdownBreakthrough
{
  font-weight: 300;
  font-size: calc(0.4rem + 0.6vw);
  line-height: calc(0.5rem + 0.05vw);
  letter-spacing: calc(0.1rem + 0.22vw);
  color: #e7b7f7;
}


#countdownLearn
{
  font-weight: 300;
  font-size: calc(0.6rem + 0.9vw);
  line-height: calc(3rem + 1vw);
}

#countdownTopGradDIV,
#countdownBottomGradDIV
{
    width: 100vw;
    background-size: cover;
    background-repeat: no-repeat;
}

#countdownTopGradDIV
{
    height: calc(8rem + 10vw);
    background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

#countdownBottomGradDIV
{
    bottom: 0;
    position: fixed;
    height: calc(16rem + 4vw);
    background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}


.countdown
{
  display: flex;
  color: #FBF7FF;
  font-family: Helvetica;
  font-weight: 100;
  text-align: center;
  text-transform: uppercase;
  position: fixed;
  transform: translate(-50%, -50%);
  bottom: calc(1rem + 5vh);
  left: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-shadow:0 0 0.8em black, 0 0 0.5em white;
}

.countdownTime
{
  display: flex;
  font-family: Helvetica;
  font-weight: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px;
}

.countdownTime h2
{
  font-size: calc(2.5rem + 3.5vw);
  font-weight: 500;
  color: #FBF7FF;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 5px;
  white-space: nowrap;
  
}

#countdownBeta,
#countdownInfocomm
{
  font-weight: 300;
}

#countdownBeta
{
  font-size: calc(0.5rem + 0.4vw);
  height: calc(1.7em + 1vw);
}

#countdownInfocomm
{
  font-size: calc(0.4rem + 0.4vw);
}

#countdownVisit,
#countdownCoupon
{
  height: calc(0.8rem + 0.2vw);
}

#countdownFooterDIV
{
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    bottom: calc(0.2rem + 2vh);
}