.fliptimer {
 position:relative;
 cursor:default;
 text-align:center;
 font-size:1rem;
 line-height:1.5;
 box-sizing:border-box;
 white-space:nowrap;
 max-width:100%;
 height:100%;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-select:none;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-orient:horizontal;
 -webkit-box-direction:normal;
 -ms-flex-direction:row;
 flex-direction:row;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center
}
.fliptimer>img {
 display:none;
 clear:both;
 width:100%!important;
 height:0
}
.fliptimer .flip-container {
 display:none;
 clear:both
}
.fliptimer .flip-container *,
.fliptimer .flip-container :after,
.fliptimer .flip-container :before {
 box-sizing:border-box
}
.fliptimer .flip-container.onfinish {
 opacity:.2
}
.fliptimer .flip-wrapper {
 display:inline-block;
 box-sizing:inherit;
 white-space:nowrap;
 height:100%
}
.fliptimer .flip-message {
 position:absolute;
 max-width:100%;
 top:50%;
 left:50%;
 text-align:center;
 font-family:"Helvetica Neue",Helvetica,sans-serif;
 font-size:36px;
 line-height:36px;
 font-weight:700;
 color:red;
 -webkit-transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%)
}
.fliptimer .flip-wrapper {
 display:inline-block;
 text-align:center;
 margin:0 5px;
 box-sizing:inherit;
 white-space:nowrap;
 height:100%
}
.fliptimer .flip-wrapper:first-child {
 margin-left:0
}
.fliptimer .flip-wrapper:last-child {
 margin-right:0
}
.fliptimer .flips {
 box-sizing:inherit;
 white-space:nowrap
}
.fliptimer ul {
 position:relative;
 display:inline-block;
 list-style:none;
 margin:.05em;
 padding:0;
 min-width:1em;
 font-family:"Helvetica Neue",Helvetica,sans-serif;
 font-weight:700;
 font-size:60px;
 height:80px;
 text-align:center;
 line-height:1;
 border-radius:6px;
 -webkit-font-smoothing:antialiased;
 -moz-font-smoothing:antialiased
}
.fliptimer ul.flip-box-shadow {
 box-shadow:0 .125em .3125em rgba(0,0,0,.1),0 .02125em .06125em rgba(0,0,0,.1)
}
.fliptimer ul li {
 position:absolute;
 z-index:1;
 left:0;
 top:0;
 width:100%;
 height:100%;
 list-style:none;
 font-size:100%!important;
 line-height:1.3;
 text-decoration:none!important;
 margin:0!important;
 padding:0!important
}
.fliptimer ul li div.flip-updown {
 display:block;
 height:100%;
 margin:0!important;
 overflow:visible!important;
 cursor:default!important;
 -webkit-perspective:4em;
 -moz-perspective:4em;
 perspective:4em
}
.fliptimer ul li div.flip-updown div {
 z-index:1;
 position:absolute;
 left:0;
 width:100%;
 height:50%;
 overflow:hidden
}
.fliptimer ul li div.flip-updown div .flip-shadow {
 position:absolute;
 z-index:2;
 width:100%;
 height:100%
}
.fliptimer ul li div.flip-updown div.flip-up {
 top:0;
 -webkit-transform-origin:50% 100%;
 -moz-transform-origin:50% 100%;
 transform-origin:50% 100%
}
.fliptimer ul li div.flip-updown div.flip-divider {
 content:"";
 position:absolute;
 top:50%;
 left:0;
 z-index:5;
 width:100%;
 height:1px;
 background:#000;
 opacity:.4
}
.fliptimer ul li div.flip-updown div.flip-down {
 bottom:0;
 border-bottom-left-radius:6px;
 border-bottom-right-radius:6px;
 -webkit-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 transform-origin:50% 0
}
.fliptimer ul li div.flip-updown div div.flip-val {
 position:absolute;
 left:0;
 z-index:1;
 width:100%;
 height:200%;
 color:#fff;
 text-align:center;
 background:#333;
 border-radius:6px;
 -webkit-transition:all .1s;
 -moz-transition:all .1s;
 transition:all .1s
}
.fliptimer ul li div.flip-updown div.flip-up div.flip-val {
 top:0
}
.fliptimer ul li div.flip-updown div.flip-down div.flip-val {
 bottom:0
}
.fliptimer .text {
 clear:both;
 display:block;
 width:100%;
 padding-top:0;
 font-size:1em;
 color:#666;
 text-transform:uppercase
}
.fliptimer li.before {
 z-index:3
}
.fliptimer li.active {
 z-index:5;
 -webkit-animation:zIndex .5s .5s linear both;
 -moz-animation:zIndex .5s .5s linear both;
 animation:zIndex .5s .5s linear both
}
@keyframes zIndex {
 0% {
  z-index:2
 }
 20% {
  z-index:4
 }
 100% {
  z-index:4
 }
}
.fliptimer li.active .flip-down {
 z-index:2;
 -webkit-animation:turnDown .5s .5s linear both;
 -moz-animation:turnDown .5s .5s linear both;
 animation:turnDown .5s .5s linear both
}
@keyframes turnDown {
 0% {
  transform:rotateX(90deg)
 }
 100% {
  transform:rotateX(0)
 }
}
.fliptimer li.before .flip-up {
 z-index:2;
 -webkit-animation:turnUp .5s linear both;
 -moz-animation:turnUp .5s linear both;
 animation:turnUp .5s linear both
}
@keyframes turnUp {
 0% {
  transform:rotateX(0)
 }
 100% {
  transform:rotateX(-90deg)
 }
}
.fliptimer li.active {
 z-index:3
}
.fliptimer li.before .flip-up .flip-shadow {
 background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.1)),color-stop(100%,#000));
 background:linear,top,rgba(0,0,0,.1) 0,#000 100%;
 background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);
 background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);
 background:linear,to bottom,rgba(0,0,0,.1) 0,#000 100%;
 -webkit-animation:show .5s linear both;
 -moz-animation:show .5s linear both;
 animation:show .5s linear both
}
.fliptimer li.active .flip-up .flip-shadow {
 background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.1)),color-stop(100%,#000));
 background:linear,top,rgba(0,0,0,.1) 0,#000 100%;
 background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);
 background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);
 background:linear,to bottom,rgba(0,0,0,.1) 0,#000 100%;
 -webkit-animation:hide .5s .3s linear both;
 -moz-animation:hide .5s .3s linear both;
 animation:hide .5s .3s linear both;
 border-top-left-radius:6px;
 border-top-right-radius:6px
}
.fliptimer li.before .flip-down .flip-shadow {
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,rgba(0,0,0,.1)));
 background:-moz-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);
 background:linear,top,#000 0,rgba(0,0,0,.1) 100%;
 background:-o-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);
 background:-ms-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);
 background:linear,to bottom,#000 0,rgba(0,0,0,.1) 100%;
 -webkit-animation:show .5s linear both;
 -moz-animation:show .5s linear both;
 animation:show .5s linear both
}
.fliptimer li.active .flip-down .flip-shadow {
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,rgba(0,0,0,.1)));
 background:-moz-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);
 background:linear,top,#000 0,rgba(0,0,0,.1) 100%;
 background:-o-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);
 background:-ms-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);
 background:linear,to bottom,#000 0,rgba(0,0,0,.1) 100%;
 -webkit-animation:hide .5s .3s linear both;
 -moz-animation:hide .5s .3s linear both;
 animation:hide .5s .2s linear both
}
@keyframes show {
 0% {
  opacity:0
 }
 100% {
  opacity:1
 }
}
@keyframes hide {
 0% {
  opacity:1
 }
 100% {
  opacity:0
 }
}
@media (max-width:767px) {
 .fliptimer .text {
  font-size:.7em!important
 }
 .fliptimer .flip-message {
  font-size:20px;
  line-height:20px
 }
}