/* Get the bourbon mixin from http://bourbon.io */

/* Reset */

.flip-clock-wrapper * {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

/* background: #FFF; */
}



.flip-clock-wrapper a {

cursor: pointer;

text-decoration: none;

color: #ccc;

/* background: #000; */

}



.flip-clock-wrapper a:hover {

  color: #fff; }



.flip-clock-wrapper ul {

  list-style: none; }



.flip-clock-wrapper.clearfix:before,

.flip-clock-wrapper.clearfix:after {

  content: " ";

  display: table; }



.flip-clock-wrapper.clearfix:after {

  clear: both; }



.flip-clock-wrapper.clearfix {

  *zoom: 1; }



/* Main */

.flip-clock-wrapper {

/* font: normal 11px 'PT Sans', sans-serif; */

-webkit-user-select: none;

}



.flip-clock-meridium {

  background: none !important;

  box-shadow: 0 0 0 !important;

  font-size: 36px !important; }



.flip-clock-meridium a { color: #313333; }



.flip-clock-wrapper {text-align: center;position: relative;/* float: left; */margin-bottom: 18px;width: 198px;}



.flip-clock-wrapper:before,

.flip-clock-wrapper:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}

.flip-clock-wrapper:after {

    clear: both;

}



/* Skeleton */

.flip-clock-wrapper ul {

position: relative;

float: left;

margin: 2px;

width: 15px;

height: 13px;

font-family: 'PT Sans', sans-serif;

font-size: 42px;

font-weight: 400;

color: #ffffff;

line-height: 87px;

border-radius: 1px;

background: #000;

/* display: block; */
}



.flip-clock-wrapper ul li {

z-index: 1;

position: absolute;

left: 0;

top: 0;

width: 40px;

height: 26px;

line-height: 27px;

text-decoration: none !important;

/* background: #000000; */
}



.flip-clock-wrapper ul li:first-child {

  z-index: 2; }



.flip-clock-wrapper ul li a {

display: block;

height: 100%;

-webkit-perspective: 200px;

-moz-perspective: 200px;

perspective: 200px;

margin: 0 !important;

overflow: visible !important;

cursor: default !important;

/* background: #000; */

}



.flip-clock-wrapper ul li a div {

z-index: 1;

position: absolute;

left: 0;

width: 100%;

height: 50%;

font-size: 42px;

overflow: hidden;

outline: 1px solid transparent;

/* background: #FFF; */

/* background: #000; */ */

}



.flip-clock-wrapper ul li a div .shadow {

position: absolute;

width: 38%;

height: 100%;

z-index: 2;

}



.flip-clock-wrapper ul li a div.up {

-webkit-transform-origin: 50% 100%;

-moz-transform-origin: 50% 100%;

-ms-transform-origin: 50% 100%;

-o-transform-origin: 50% 100%;

transform-origin: 50% 100%;

top: 0;

/* background: #000; */

}



.flip-clock-wrapper ul li a div.up:after {

  content: "";

  position: absolute;

  top: 44px;

  left: 0;

  z-index: 5;

  width: 100%;

  height: 3px;

  background-color: #000;

  background-color: rgba(0, 0, 0, 0.4); }



.flip-clock-wrapper ul li a div.down {

-webkit-transform-origin: 50% 0;

-moz-transform-origin: 50% 0;

-ms-transform-origin: 50% 0;

-o-transform-origin: 50% 0;

transform-origin: 50% 0;

bottom: 0;

border-bottom-left-radius: 6px;

border-bottom-right-radius: 6px;

/* background: #000; */ */
}



.flip-clock-wrapper ul li a div div.inn {position: absolute;left: 0;z-index: 1;width: 37%;height: 200%;color: #ffffff;text-shadow: 0 1px 2px #000;text-align: center;background-color: #FFF;border-radius: 2px;padding-top: -1px;font-family: "PT Sans";font-size: 21px;}



.flip-clock-wrapper ul li a div.up div.inn {

top: 0;

background: #000;

/* border-radius: 13px; */

}



.flip-clock-wrapper ul li a div.down div.inn {

bottom: 0;

background: #080808;

}



/* PLAY */

.flip-clock-wrapper ul.play li.flip-clock-before {

z-index: 3;

/* background: #FFF; */

}



.flip-clock-wrapper .flip {/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); *//* background: #000; */}



.flip-clock-wrapper ul.play li.flip-clock-active {

  -webkit-animation: asd 0.5s 0.5s linear both;

  -moz-animation: asd 0.5s 0.5s linear both;

  animation: asd 0.5s 0.5s linear both;

  z-index: 5; }



.flip-clock-divider {

float: left;

display: inline-block;

position: relative;

width: 11px;

height: 29px;

}



.flip-clock-divider:first-child {

  width: 0; }



.flip-clock-dot {

display: block;

background: #000;

width: 4px;

height: 4px;

position: absolute;

border-radius: 50%;

/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); */

left: 5px;

}



.flip-clock-divider .flip-clock-label {

position: absolute;

top: -1.5em;

right: -34px;

color: #000;

text-shadow: none;

/* font-family: "PT Sans-Regular"; */

font-size: 10px;

text-transform: uppercase;

}



.flip-clock-divider.minutes .flip-clock-label {

right: -38px;

}



.flip-clock-divider.seconds .flip-clock-label {

right: -42px;

}



.flip-clock-dot.top {

  top: 20px; }



.flip-clock-dot.bottom {

top: 9px;

}



@-webkit-keyframes asd {

  0% {

    z-index: 2; }



  20% {

    z-index: 4; }



  100% {

    z-index: 4; } }



@-moz-keyframes asd {

  0% {

    z-index: 2; }



  20% {

    z-index: 4; }



  100% {

    z-index: 4; } }



@-o-keyframes asd {

  0% {

    z-index: 2; }



  20% {

    z-index: 4; }



  100% {

    z-index: 4; } }



@keyframes asd {

  0% {

    z-index: 2; }



  20% {

    z-index: 4; }



  100% {

    z-index: 4; } }



.flip-clock-wrapper ul.play li.flip-clock-active .down {

  z-index: 2;

  -webkit-animation: turn 0.5s 0.5s linear both;

  -moz-animation: turn 0.5s 0.5s linear both;

  animation: turn 0.5s 0.5s linear both; }



@-webkit-keyframes turn {

  0% {

    -webkit-transform: rotateX(90deg); }



  100% {

    -webkit-transform: rotateX(0deg); } }



@-moz-keyframes turn {

  0% {

    -moz-transform: rotateX(90deg); }



  100% {

    -moz-transform: rotateX(0deg); } }



@-o-keyframes turn {

  0% {

    -o-transform: rotateX(90deg); }



  100% {

    -o-transform: rotateX(0deg); } }



@keyframes turn {

  0% {

    transform: rotateX(90deg); }



  100% {

    transform: rotateX(0deg); } }



.flip-clock-wrapper ul.play li.flip-clock-before .up {

z-index: 2;

-webkit-animation: turn2 0.5s linear both;

-moz-animation: turn2 0.5s linear both;

animation: turn2 0.5s linear both;

/* background: #000; */

}



@-webkit-keyframes turn2 {

  0% {

    -webkit-transform: rotateX(0deg); }



  100% {

    -webkit-transform: rotateX(-90deg); } }



@-moz-keyframes turn2 {

  0% {

    -moz-transform: rotateX(0deg); }



  100% {

    -moz-transform: rotateX(-90deg); } }



@-o-keyframes turn2 {

  0% {

    -o-transform: rotateX(0deg); }



  100% {

    -o-transform: rotateX(-90deg); } }



@keyframes turn2 {

  0% {

    transform: rotateX(0deg); }



  100% {

    transform: rotateX(-90deg); } }



.flip-clock-wrapper ul li.flip-clock-active {

  z-index: 3; }



/* SHADOW */

.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {

  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));

  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;

  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);

  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);

  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;

  -webkit-animation: show 0.5s linear both;

  -moz-animation: show 0.5s linear both;

  animation: show 0.5s linear both; }



.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {

  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));

  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;

  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);

  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);

  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;

  -webkit-animation: hide 0.5s 0.3s linear both;

  -moz-animation: hide 0.5s 0.3s linear both;

  animation: hide 0.5s 0.3s linear both; }



/*DOWN*/

.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {

background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));

background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;

background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);

background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);

background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;

-webkit-animation: show 0.5s linear both;

-moz-animation: show 0.5s linear both;

animation: show 0.5s linear both;

}



.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {

  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));

  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;

  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);

  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);

  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;

  -webkit-animation: hide 0.5s 0.3s linear both;

  -moz-animation: hide 0.5s 0.3s linear both;

  animation: hide 0.5s 0.2s linear both; }



@-webkit-keyframes show {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@-moz-keyframes show {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@-o-keyframes show {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@keyframes show {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@-webkit-keyframes hide {

  0% {

    opacity: 1; }



  100% {

    opacity: 0; } }



@-moz-keyframes hide {

  0% {

    opacity: 1; }



  100% {

    opacity: 0; } }



@-o-keyframes hide {

  0% {

    opacity: 1; }



  100% {

    opacity: 0; } }



@keyframes hide {

  0% {

    opacity: 1; }



  100% {

    opacity: 0; } }