@font-face {
  font-family: "Maison Neue";
  src: url("/platform-content/themes/generic-2021/fonts/maisonneuebold-webfont.woff2") format("woff2"), url("/platform-content/themes/generic-2021/fonts/maisonneuebold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue";
  src: url("/platform-content/themes/generic-2021/fonts/maisonneuebook-webfont.woff2") format("woff2"), url("/platform-content/themes/generic-2021/fonts/maisonneuebook-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.tns-nav {
  text-align: center;
}
.tns-nav button {
  margin: 0 5px;
  background: #ccc;
  border: 0;
  width: 24px;
  height: 2px;
}
.tns-nav button.tns-nav-active {
  background: #2A96CE;
}

.clip {
  box-sizing: border-box;
  color: var(--countdown-text-color);
  font-family: var(--countdown-font);
  font-size: var(--countdown-font-size);
}
.clip * {
  box-sizing: border-box;
  margin: 0;
}
.clip__countdown-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  justify-content: center;
  align-items: center;
}
.clip__countdown-count {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.clip__countdown-count-element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--countdown-count-color);
  font-size: var(--countdown-count-font-size);
  padding: 0 0.35em;
  font-weight: var(--countdown-count-font-weight);
  font-family: var(--countdown-count-font);
  min-width: var(--countdown-count-min-element-width);
}
@media screen and (max-width: 980px) {
  .clip__countdown-count-element {
    font-size: calc(var(--countdown-count-font-size)/2);
    min-width: 0;
  }
}
.clip__countdown-count-element span {
  font-size: var(--countdown-count-info-font-size);
  color: var(--countdown-text-color);
}
@media screen and (max-width: 980px) {
  .clip__countdown-count-element span {
    font-size: calc(var(--countdown-count-info-font-size)/1.5);
  }
}
.clip__countdown-count-separator {
  margin: var(--countdown-count-separator-margin);
  font-family: var(--countdown-count-separator-font);
  font-size: var(--countdown-count-separator-size);
  color: var(--countdown-count-separator-color);
}
@media screen and (max-width: 980px) {
  .clip__countdown-count-separator {
    font-size: calc(var(--countdown-count-separator-size)/2);
    margin-top: -0.5em !important;
  }
}
.clip__countdown-done {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.clip__countdown-done a {
  transition: all 0.2s ease-in-out;
  background-color: var(--countdown-button-bg-color);
  color: var(--countdown-button-color);
  font-size: var(--countdown-button-font-size);
  padding: var(--countdown-button-padding);
  border-radius: var(--countdown-button-radius);
  text-decoration: none;
  margin: var(--countdown-button-margin);
}
.clip__countdown-done a:hover {
  background-color: var(--countdown-button-bg-hover-color);
}
.clip__countdown-title {
  margin: var(--countdown-header-margin);
  text-align: center;
}

.block--countdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 160px);
  width: 100%;
  font-family: "FiraGO", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}
.dashboard .block--countdown {
  height: auto;
  margin-bottom: 40px;
}
.block--countdown h2 {
  color: var(--context-color);
}
.block--countdown .clip__countdown-count {
  color: var(--context-color);
  font-weight: 600;
  letter-spacing: 2px;
}
.block--countdown span.clip__countdown-count-separator {
  font-size: 8rem;
}
.block--countdown .clip__countdown-count-element {
  padding: 0 5px;
  color: var(--context-color);
}
.block--countdown.ext-block--countdown-stage {
  position: relative;
  padding: 10px 0;
  height: auto;
}
.block--countdown.ext-block--countdown-stage .clip {
  color: white;
}
.block--countdown.ext-block--countdown-stage span.clip__countdown-count-separator {
  padding-bottom: 80px;
}
@media (max-width: 980px) {
  .block--countdown.ext-block--countdown-stage span.clip__countdown-count-separator {
    font-size: 6rem;
    padding-bottom: 22px;
  }
}

:root {
  --countdown-text-color: #000;
  --countdown-font: $main-font;
  --countdown-font-size: 4rem;
  --countdown-count-font-size: 12rem;
  --countdown-count-info-font-size: 2rem;
  --countdown-count-color: $primary-color;
  --countdown-count-separator-margin: -1.5em 0 0 0;
  --countdown-button-color: #fff;
  --countdown-button-bg-color: #322F3D;
  --countdown-button-radius: 50px;
  --countdown-button-font-size: 2rem;
  --countdown-button-margin: 1em 0 0 0;
  --countdown-button-bg-hover-color: #000;
  --countdown-header-margin: 0 0 1em 0;
  --countdown-button-padding: .25em 1em;
}