.main-example {
    margin: 0 auto;
    width: 355px;
}
.main-example .countdown-container {
    height: 130px;
}
.main-example .box{

    transform: skewY(-15deg);
}
.main-example .time {
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    position: relative;
    height: 95px;
    width: 96px;
    margin: 0 20px;


    -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 .time span.text {
    transform: skewY(15deg);
}
.main-example .time::after {
    display: inline-block;
    position: absolute;
    content: ':';
    right: -27px;
    top: 12px;
}
.main-example .time:last-of-type::after {
    display: none;
}
.main-example .count {
    background: var(--match_counter_background);
    color: var(--match_counter_numbers);
    display: block;
    font-size: 54px;
    font-weight: 600;
    /*line-height: 2.4em;*/
    overflow: hidden;
    position: absolute;
    text-align: center;
    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 small{
    transform: skewY(15deg);
    display: block;
    
    position:relative;
    top:50%;
}

.main-example .count.top {
    padding-top: 25%;
    line-height: 54px;
    left: 0.5px;
}
/*.main-example .count.top small::before{*/
    /*content: '';*/
    /*display: block;*/
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 1px;*/
    /*background: #2f2f2f;*/
    /*bottom: 20px;*/
    /*z-index: 999;*/
/*}*/

/*.main-example .top.count small::after {*/
    /*display: block;*/
    /*width: 100%;*/
    /*height: 1px;*/
    /*background: red;*/
    /*content: '';*/
    /*top: 0;*/
    /*position: absolute;*/
/*}*/
/* .main-example .count.top {
    
    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.top::before {
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 1PX;
    background: #000;
    bottom: 0;
    z-index: -1;
} */
.main-example .count.bottom {
    background: var(--match_counter_background);
    /*border-top: 1px solid #000;*/
    /*border-bottom: 1px solid #000;*/
    line-height: 5px;
    height: 100%;/*50%;*/
    top: 0;/*49%;*//*50%;*/
    left: 0.5px;
    -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: 13px;
    text-transform: uppercase;
    color: var(--match_counter_labels);
    margin-top: 12px;/*5px;*/
    display: block;
    position: absolute;
    top: 100px;
    width: 100%;
    transform: skewY(15deg);
}
.main-example .label::before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
}
/* 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); */
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    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);
    
    display:none;
}
.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 .count.next::before {*/
    /*content: '';*/
    /*width: 100%;*/
    /*height: 50px;*/
    /*display: block;*/
    /*backround-color: red;*/
/*}*/
/* @media screen and (max-width: 48em) {
    .main-example {
        width: 100%;
    }
    .main-example .countdown-container {
        height: 100px;
    }
    .main-example .time {
        height: 70px;
        width: 48px;
    }
    .main-example .count.top {
        font-size: 54px;
        line-height: 70px;
    }
    .main-example .label {
        font-size: 13px;
        text-transform: uppercase;
        top: 72px;
    }
} */

/* 640 - 759px */
@media only screen and (max-width: 759px) {
  .main-example .time {
    width: 80px;
    margin: 0;
  }
  .main-example .count.top {
    padding-top: 30%;
  }
}

/* 480 - 639px */
@media only screen and (max-width: 639px) {
  .main-example .time {
    width: 60px;
    height:70px;
  }
  .main-example .count {
    font-size: 40px;
  }
  .main-example .count.top {
    padding-top: 19%;
  }
  .main-example .label {
    margin-top: 0;
  }
}

/* 320 - 479px */
@media only screen and (max-width: 479px) {
  .main-example .time {
    width: 46px;
    height:45px;
  }
  .main-example .count {
    font-size: 24px;
  }
  .main-example .count.top {
    line-height: 0;
    padding-top: 0;
  }
  .main-example .label {
    margin-top: -40px;
  }
}