.timed-content-number {
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.15);
}
.timed-content-title {
  padding: 6px 0px 0px 0px;
  font-size: 14px;
  font-weight: normal;
}
.timed-content-wrap {
  margin: 0px auto;
  width: 100%;
  padding: 0px;
}
.timed-content-wrap .tc-active > div {
  display: none;
}
.timed-content-wrap.tc-loaded .tc-active > div,
.timed-content-wrap .tc-active > .timed-content-before {
  display: block;
}
.timed-content-inline .timed-content-countdown-wrap {
  display: none;
}
.timed-content-countdown-wrap {
  padding: 30px;
  font-family:  "HelveticaNeue", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;
}
.timed-content-countdown-wrap > div {
  opacity: 0;
}
.timed-content-countdown-wrap.tc-cd-active > div {
  opacity: 1;
  transition: opacity 300ms ease;
}
.timed-content-countdown {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(60px, max-content));
  perspective: 2000px;
  justify-content: center;
}
.timed-content-countdown div {
  display: grid;
  grid-template-row: 1fr 1fr;
   text-align: center;
  align-content: center;
  justify-content: center;
}
.timed-content-number,
.timed-content-number div,
.timed-content-fold .timed-content-number > div:after,
.timed-content-fold .timed-content-number > div:before,
.timed-content-paper-fall .timed-content-number .timed-content-anim:before {
  position: relative;
  width: 60px;
  height: 40px;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0px;
  text-align: center;
  background-color: #fff;
}
.timed-content-title {
  overflow: hidden;
}
.timed-content-part {
  position: relative;
}
.timed-content-part:before {
  content:"";
  position: absolute;
  width: 100%;
  right: -50%;
  height: 80px;
  top: 0;
}
.timed-content-part:last-child:before {
  display: none;
}
.timed-content-number:after,
.timed-content-number:before {
  content:"";
    position: absolute;
    width: 5px;
    height: 5px;
    background: #fff;
    right: -10px;
    top: 50%;
    border-radius: 0px;
    transform: translateY(-7px);
}
.timed-content-number:after {
    transform: translateY(5px);
}
.timed-content-part:last-child .timed-content-number:before,
.timed-content-part:last-child .timed-content-number:after {
  display: none;
}

.timed-content-number div,
.timed-content-paper-fall .timed-content-number .timed-content-anim:before {
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.timed-content-paper-fall .timed-content-number .timed-content-anim:before {
  transform: translate3D(0,0,-1px);
}
.timed-content-number .timed-content-still {
  z-index: 1;
/*   box-shadow: 0px 1px 2px rgba(0,0,0,0.1); */
  transform: translate3D(0,0,0px);
}
.timed-content-number .timed-content-anim {
  z-index: 2;
  opacity: 0;
}
.timed-content-progress-bar {
  margin: 15px 0px;
  height: 10px;
  background: rgba(0,0,0,0.15);
  grid-column: 1 / -1;
  border-radius: 2px;
  display: block;
  text-align: left;
  overflow: hidden;
}
.timed-content-progress-bar > div {
  background: limegreen;
  width: 0%;
  border-radius: 2px;
  height: 100%;
  transition: width linear 1000ms;
}
.timed-content-countdown .timed-content-hide {
  display: none !important;
}

.timed-content-fall-forward .timed-content-number .timed-content-still {
  z-index: 1;
}
.timed-content-fall-forward .timed-content-number .timed-content-anim {
  z-index: 2;
  opacity: 0;

  animation: fall-forward 1200ms 1 cubic-bezier(.51,-0.04,1,.77),
             fall-forward-3d 1200ms 1 cubic-bezier(.51,-0.04,1,.77),
             fall-forward-shadows 1200ms 1 linear;
  transform-origin: bottom;
}
@keyframes fall-forward {
  from {
    opacity: 1;
    top: 0%;
  }
  40% {
    opacity: 1;
    top: 0%;
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    top: 250%;
  }
}
@keyframes fall-forward-3d {
  from {
    transform: translate3D(0,0,1px) rotateX(0);
  }
  to {
    transform: translate3D(0,0,50px) rotateX(-100deg);
  }
}
@keyframes fall-forward-shadows {
  from {
    box-shadow: inset 0px 200px 0px rgba(0,0,0,0.0),
                0px 0px 0px -2px rgba(0,0,0,0.2);
  }
  40% {
    box-shadow: inset 0px 200px 0px rgba(0,0,0,0.15),
                0px 25px 2px -2px rgba(0,0,0,0.1);
  }
  to {
     box-shadow: inset 0px 200px 0px rgba(0,0,0,0.3),
                0px 60px 20px -10px rgba(0,0,0,0.0);
  }
}
.timed-content-cycle .timed-content-number .timed-content-anim {
  z-index: 2;
  opacity: 0;
  animation: timed-content-cycle 1200ms 1 linear;
  transform-origin: bottom;
}
@keyframes timed-content-cycle {
  from {
    opacity: 1;
    transform: translate3D(0,0,0) scale(1.0);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    z-index: 2;
    animation-timing-function: ease;
  }
  50% {
    transform: translate3D(0,-130%,0) scale(1.0);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    z-index: 2;
    animation-timing-function: ease;
  }
  51% {
    z-index: 0;
  }
  to {
    transform: translate3D(0,0,0) scale(0.9);
     box-shadow: 0px 0px 0px rgba(0,0,0,0.2),
                 inset 0px -30px 0px rgba(0,0,0,0.1);
    z-index: 0;
    animation-timing-function: ease;
    opacity: 1;
  }
}
.timed-content-paper-fall .timed-content-number .timed-content-still {
  z-index: 0;
  transform: translate(0,0);
}
.timed-content-paper-fall .timed-content-number .timed-content-anim {
  z-index: 2;
  opacity: 0;
  animation: paper-fall 3000ms 1 ease-in-out;
  transform-origin: bottom;
}
.timed-content-paper-fall .timed-content-number .timed-content-anim:before {
  z-index: -1;
  opacity: 1;
  animation: paper-fall-shadows 3000ms 1 ease-in-out;
  transform-origin: bottom;
  content: "";
}
@keyframes paper-fall {
  from {
    opacity: 1;
    transform: translate3D(0,0,1px) rotateX(0) rotateY(0);
  }
  20% {
    opacity: 1;
    transform: translate3D(-50%,100%,10px) rotateX(55deg) rotateY(15deg);
  }
  60% {
    opacity: 1;
    transform: translate3D(75%,175%,20px) rotateX(60deg) rotateY(-15deg);
  }
  to {
    opacity: 0;
    transform: translate3D(-75%,300%,30px) rotateX(60deg) rotateY(15deg);
  }
}
@keyframes paper-fall-shadows {
  from {
    opacity: 1;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.15);
  }
  20% {
    opacity: 1;
    box-shadow: 0px 30px 20px rgba(0,0,0,0.075);
  }
  60% {
   opacity: 1;
   box-shadow: 0px 40px 20px rgba(0,0,0,0.0.075);
  }
  to {
    opacity: 1;
    box-shadow: 0px 40px 20px rgba(0,0,0,0.0.075);
  }
}
.timed-content-rotate .timed-content-number {
  overflow: hidden;
  perspective: 200px;
  height: 80px;
  box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.25);
}
.timed-content-rotate .timed-content-number:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
.timed-content-rotate .timed-content-number div {
  margin-top: 20px;
  background: transparent;
}
.timed-content-rotate .timed-content-number > div.state-start {
    transition: all 1000ms linear;
}
.timed-content-rotate .timed-content-number .state-out {
  opacity: 1;
  transform: translate3D(0,-70px,0) rotateX(75deg);
  transform-origin: bottom;
}
.timed-content-rotate .timed-content-number .state-after {
  opacity: 1;
  transform: translate3D(0,-40px,0px) rotateX(37.5deg);
  transform-origin: bottom;
}
.timed-content-rotate .timed-content-number .state-active {
  opacity: 1;
  transform: translate3D(0,0,0px) rotateX(0deg);
  transform-origin: bottom;
}
.timed-content-rotate .timed-content-number .state-before {
  opacity: 1;
  transform: translate3D(0,40px,0px) rotateX(-37.5deg);
  transform-origin: top;
}
.timed-content-rotate .timed-content-number > div.state-in {
  opacity: 1;
  transition: all 0ms linear;
  transform: translate3D(0,70px,0) rotateX(-75deg);
  transform-origin: top;
  z-index: 0;
}
.timed-content-rotate.rotate-smooth .timed-content-number div {
  border-radius: 0px;
}
.timed-content-rotate.rotate-smooth .timed-content-number:after {
  box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.3),
              inset 0px -5px 5px -3px rgba(0,0,0,0.3);
  background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.05) 20%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.05) 60%,rgba(0,0,0,0.15) 80%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.timed-content-fold .timed-content-countdown-wrap * {
    box-sizing: border-box;
}
.timed-content-fold .timed-content-number {
  perspective: 200px;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.5),
              inset 0px 0px 5px rgba(0,0,0,0.5);
}
.timed-content-fold .timed-content-number > div {
  height: 50%;
  overflow: hidden;
  transition: all 0ms linear;
  transform-origin: bottom;
  transform-style: preserve-3d;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  box-sizing: border-box;
}
.timed-content-fold .timed-content-number > div span {
    opacity: 0;
}
.timed-content-fold .timed-content-number > div:after,
.timed-content-fold .timed-content-number > div:before {
  content: attr(data-value-back);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 50%);
}
.timed-content-fold .timed-content-number > div:before {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.05) 100%);
  z-index: 1;
  box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5);
}
.timed-content-fold .timed-content-number > div:after {
  content: attr(data-value-front);
  transform: translate3D(0px,0px,0px) rotateX(180deg);
  box-shadow: inset 0px -1px 0px rgba(0,0,0,0.15);
}
.timed-content-fold .timed-content-number > div {
  z-index: 0;
}
.timed-content-fold .timed-content-number > div.state-in {
  transform: translate3D(0px,0px,0px) rotateX(0deg);
   z-index: 1;
}
.timed-content-fold .timed-content-number > div.state-before {
  animation: fold-start 700ms 1 linear;
  transform-origin: bottom;
  z-index: 2;
}
.timed-content-fold .timed-content-number > div.state-active {
 animation: fold-end 700ms 1 linear;
  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  transform-origin: bottom;
  z-index: 2;
    border-bottom: 1px solid rgba(255,255,255,0.0);
}
.timed-content-fold .timed-content-number > div.state-before {
  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}
.timed-content-fold .timed-content-number > div.state-active:before {
  animation: fold-flip 700ms 1 linear;
  transform-origin: bottom;
  z-index: 2;
    border-bottom: 0px solid rgba(0,0,0,0.3);
}
.timed-content-fold .timed-content-number > div.state-before:before {
  animation: fold-flip-shadow 700ms 1 linear;
}
.timed-content-fold .timed-content-number > div.state-after:after {
  animation: fold-flip-shadow-b 700ms 1 linear;
}
.timed-content-fold .timed-content-number > div.state-after:before {
  opacity: 0;
}
.timed-content-fold .timed-content-number > div.state-after  {
  transform: translate3D(0px,0px,0px) rotateX(-180deg);
  border-bottom: 1px solid rgba(255,255,255,0.0);
  z-index: 1;
}
.timed-content-fold .timed-content-number > div.state-out {
  transform: translate3D(0px,0px,0px) rotateX(0deg);
  z-index: 0;
}
.timed-content-fold .timed-content-number > div.state-active:before {
    opacity: 0;
}
/* Firefox fixes */
.timed-content-fold .timed-content-number > div.state-out,
.timed-content-fold .timed-content-number > div.state-in:after,
.timed-content-fold .timed-content-number > div.state-before:after {
    opacity: 0;
}
.timed-content-fold .timed-content-number > div:before {
    transform: rotateX(0deg);
    backface-visibility: hidden;
}
.timed-content-fold .timed-content-number > div.state-active:before {
    display: none;
}
@keyframes fold-start {
  from {
    opacity: 1;
    transform: translate3D(0px,0px,0px) rotateX(0deg);
  }
  50% {
   opacity: 1;
    transform: translate3D(0px,0px,0px) rotateX(-90deg);
  }
  to {
    opacity: 0;
    transform: translate3D(0px,0px,0px) rotateX(-90deg);
  }
}
@keyframes fold-end {
  from {
    opacity: 0;
    transform: translate3D(0px,0px,0px) rotateX(-90deg);
  }
  50% {
    opacity: 1;
    transform: translate3D(0px,0px,0px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: translate3D(0px,0px,0px) rotateX(-180deg);
  }
}
@keyframes fold-flip {
  from {
    opacity: 1;

  }
  50% {
    opacity: 1;

  }
   51% {
    opacity: 0;

  }
  to {
    opacity: 0;

  }
}
@keyframes fold-flip-shadow {
  from {
    box-shadow: inset 0px 200px 0px rgba(0,0,0,0.0),
                inset 0px 1px 0px rgba(255,255,255,0.3);

  }
  50% {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,0.15),
                inset 0px 1px 0px rgba(255,255,255,0.0);

  }
  to {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,0),
                inset 0px 1px 0px rgba(255,255,255,0.0);

  }
}
@keyframes fold-flip-shadow-b {
  from {
    box-shadow: inset 0px 200px 0px rgba(0,0,0,0.0),
                inset 0px -1px 0px rgba(0,0,0,0.15),
                0px 2px 3px rgba(0,0,0,0.3);

  }
  50% {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,0.0),
                inset 0px -1px 0px rgba(0,0,0,0.15),
                0px 2px 3px rgba(0,0,0,0.3);

  }
  to {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,.3),
                inset 0px -1px 0px rgba(0,0,0,0.15),
                0px 2px 3px rgba(0,0,0,0.3);

  }
}
.tc-dark-shadows.timed-content-fold .timed-content-number {
  box-shadow: 0px 2px 3px rgba(0,0,0,0.5),
              inset 0px 0px 5px rgba(0,0,0,0.5);
}
.tc-dark-shadows.timed-content-fold .timed-content-number > div {
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
.tc-dark-shadows.timed-content-fold .timed-content-number > div:after,
.tc-dark-shadows.timed-content-fold .timed-content-number > div:before {
  background-image: linear-gradient(0deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.0) 50%);
}
.tc-dark-shadows.timed-content-fold .timed-content-number > div:before {
  background-image: linear-gradient(0deg, rgba(255,255,255,0.0) 50%, rgba(255,255,255,0.15) 100%);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,0.25);
}
.tc-dark-shadows.timed-content-fold .timed-content-number > div:after {
  box-shadow: inset 0px -1px 0px rgba(0,0,0,0.5);
}
.tc-dark-shadows.timed-content-fold .timed-content-number > div.state-active {
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.tc-dark-shadows.timed-content-fold .timed-content-number > div.state-before:before {
  animation: fold-flip-shadow-dark 700ms 1 linear;
}
.tc-dark-shadows.timed-content-fold .timed-content-number > div.state-after:after {
  animation: fold-flip-shadow-b-dark 700ms 1 linear;
}
@keyframes fold-flip-shadow-dark {
  from {
    box-shadow: inset 0px 200px 0px rgba(0,0,0,0.0),
                inset 0px 1px 0px rgba(255,255,255,0.3);

  }
  50% {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,0.5),
                inset 0px 1px 0px rgba(255,255,255,0.0);

  }
  to {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,0),
                inset 0px 1px 0px rgba(255,255,255,0.0);

  }
}
@keyframes fold-flip-shadow-b-dark {
  from {
    box-shadow: inset 0px 200px 0px rgba(0,0,0,0.0),
                inset 0px -1px 0px rgba(0,0,0,0.15),
                0px 2px 3px rgba(0,0,0,0.3);

  }
  50% {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,0.0),
                inset 0px -1px 0px rgba(0,0,0,0.15),
                0px 2px 3px rgba(0,0,0,0.3);

  }
  to {
   box-shadow: inset 0px 200px 0px rgba(0,0,0,.9),
                inset 0px -1px 0px rgba(0,0,0,0.15),
                0px 2px 3px rgba(0,0,0,0.3);

  }
}
.timed-content-inline .timed-content-countdown-wrap {
    display: inline !important;
    padding: 0;
    margin: 0;
}
.timed-content-inline .timed-content-countdown-wrap > div {
  display: none;
  transition: none;
}
.timed-content-inline .timed-content-countdown-wrap.tc-cd-active > div {
  display: inline;
}
.timed-content-inline .timed-content-countdown,
.timed-content-inline .timed-content-countdown div,
.timed-content-inline .timed-content-countdown div span {
    display: inline;
    font-size: inherit;
    width: auto;
    height: auto;
    position: relative;
}
.timed-content-inline .timed-content-part:before,
.timed-content-inline .timed-content-number:after,
.timed-content-inline .timed-content-number:before,
.timed-content-inline .timed-content-countdown div.timed-content-hide {
  display: none;
}
.timed-content-inline .timed-content-number {
    box-shadow: none;
    background: transparent;
}
.timed-content-inline .timed-content-number > div {
    display: none;
}
.timed-content-inline .timed-content-number > div.timed-content-still {
    display: inline;
    background: transparent;
}