.wrap {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 310px;
}

a {
  text-decoration: none;
  color: #1a1a1a;
}

// Variables
$lato: 'Lato';

// Title
h1 {
  margin-bottom: 60px;
  text-align: center;
  font: 300 2.25em $lato;
  text-transform: uppercase;

  strong {
    font-weight: 400;
    color: #ea4c4c;
  }
}

h2 {
  margin-bottom: 80px;
  text-align: center;
  font: 300 0.7em $lato;
  text-transform: uppercase;

  strong {
    font-weight: 400;
  }
}

// Countdown
.countdown {
  width: 720px;
  margin: 0 auto;

  .bloc-time {
    float: left;
    margin-right: 45px;
    text-align: center;

    &:last-child {
      margin-right: 0;
    }
  }

  .count-title {
    display: block;
    margin-bottom: 15px;
    font: normal 0.94em $lato;
    color: #1a1a1a;
    text-transform: uppercase;
  }

  .figure {
    position: relative;
    float: left;
    height: 110px;
    width: 100px;
    margin-right: 10px;
    background-color: #fff;
    border-radius: 8px;
    @include box-shadow(0 3px 4px 0 rgba(0, 0, 0, .2),inset 2px 4px 0 0 rgba(255, 255, 255, .08));

    &:last-child {
      margin-right: 0;
    }

    >span {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      font: normal 5.94em/107px $lato;
      font-weight: 700;
      color: #de4848;
    }

    .top, .bottom-back {
      &:after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
      }
    }

    .top {
      z-index: 3;
      background-color: #f7f7f7;
      transform-origin: 50% 100%;
      -webkit-transform-origin: 50% 100%;
      @include border-top-radius(10px);
      @include transform(perspective(200px));
    }

    .bottom {
      z-index: 1;

      &:before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background-color: rgba(0, 0, 0, .02);
      }
    }

    .bottom-back {
      z-index: 2;
      top: 0;
      height: 50%;
      overflow: hidden;
      background-color: #f7f7f7;
      @include border-top-radius(10px);

      span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    }

    .top, .top-back {
      height: 50%;
      overflow: hidden;
      @include backface-visibility(hidden);
    }

    .top-back {
      z-index: 4;
      bottom: 0;
      background-color: #fff;
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
      @include transform(perspective(200px) rotateX(180deg));
      @include border-bottom-radius(10px);

      span {
        position: absolute;
        top: -100%;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}