html, body {
     height: 100%;
  }
    
  body{    
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-family: 'Fjalla One', sans-serif;
    color: #fff;
    background-color: rgb(28,60,119);
  }

  .main-example .proxi{
    font-size: 2em;
    text-transform: uppercase;
  }
  
  .main-example {      
      margin-top: 40vh; 
      margin: 0 auto;
      width: 355px;
      text-align: center;
  }
  .main-example .countdown-container {
      height: 130px;
  }
  .main-example .time {
      border-radius: 5px;
      box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
      display: inline-block;
      text-align: center;
      position: relative;
      height: 95px;
      width: 65px;
  
      -webkit-perspective: 479px;
      -moz-perspective: 479px;
      -ms-perspective: 479px;
      -o-perspective: 479px;
      perspective: 479px;
  
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
  
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
  
      -webkit-transform: translate3d(0,0,0);
      -moz-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
      -o-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
  }
  .main-example .count {
      background: #202020;
      color: #f8f8f8;
      display: block;
      font-family: 'Oswald', sans-serif;
      font-size: 2em;
      line-height: 2.4em;
      overflow: hidden;
      position: absolute;
      text-align: center;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      top: 0;
      width: 100%;
  
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
  
      -webkit-transform-style: flat;
      -moz-transform-style: flat;
      -ms-transform-style: flat;
      -o-transform-style: flat;
      transform-style: flat;
  }
  .main-example .count.top {
      border-top: 1px solid rgba(255,255,255,0.2);
      border-bottom: 1px solid rgba(255,255,255,0.1);
      border-radius: 5px 5px 0 0;
      height: 50%;
  
      -webkit-transform-origin: 50% 100%;
      -moz-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
      -o-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
  }
  .main-example .count.bottom {
      background-image: linear-gradient(rgba(255,255,255,0.1), transparent);
      background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), transparent);
      background-image: -moz-linear-gradient(rgba(255,255,255,0.1), transparent);
      background-image: -ms-linear-gradient(rgba(255,255,255,0.1), transparent);
      background-image: -o-linear-gradient(rgba(255,255,255,0.1), transparent);
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      border-radius: 0 0 5px 5px;
      line-height: 0;
      height: 50%;
      top: 50%;
  
      -webkit-transform-origin: 50% 0;
      -moz-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
      -o-transform-origin: 50% 0;
      transform-origin: 50% 0;
  }

  .main-example .label {
      font-size: normal;
      margin-top: 5px;
      display: block;
      position: absolute;
      top: 95px;
      width: 100%;
  }
  /* Animation start */
  .main-example .count.curr.top {
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      -o-transform: rotateX(0deg);
      transform: rotateX(0deg);
      z-index: 3;
  }
  .main-example .count.next.bottom {
      -webkit-transform: rotateX(90deg);
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      -o-transform: rotateX(90deg);
      transform: rotateX(90deg);
      z-index: 2;
  }
  /* Animation end */
  .main-example .flip .count.curr.top {
      -webkit-transition: all 250ms ease-in-out;
      -moz-transition: all 250ms ease-in-out;
      -ms-transition: all 250ms ease-in-out;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
  
      -webkit-transform: rotateX(-90deg);
      -moz-transform: rotateX(-90deg);
      -ms-transform: rotateX(-90deg);
      -o-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
  }
  .main-example .flip .count.next.bottom {
      -webkit-transition: all 250ms ease-in-out 250ms;
      -moz-transition: all 250ms ease-in-out 250ms;
      -ms-transition: all 250ms ease-in-out 250ms;
      -o-transition: all 250ms ease-in-out 250ms;
      transition: all 250ms ease-in-out 250ms;
  
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      -o-transform: rotateX(0deg);
      transform: rotateX(0deg);
  }
  
  .main-example {
    width: 100%;
  }
  .main-example .countdown-container {
      height: 100px;
  }
  .main-example .time {
      height: 73%;
      width: 6%;
  }
  .main-example .count {
      font-size: 1.5em;
      line-height: 70px;
  }
  .main-example .label {
      font-size: 0.8em;
      top: 72px;
  }

  @media (max-width: 800px) {
    .main-example
    .logo-pic
    img{
        width: 100%;
    }

    .main-example .time{
        width: 18%;
    }
}