/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper *
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}

.flip-clock-wrapper a
{
    cursor: pointer;
    text-decoration: none;

    color: #ccc;
}

.flip-clock-wrapper a:hover
{
    color: #fff;
}

.flip-clock-wrapper ul
{
    list-style: none;
}

.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after
{
    display: table; 

    content: ' ';
}

.flip-clock-wrapper.clearfix:after
{
    clear: both;
}

.flip-clock-wrapper.clearfix
{
    *zoom: 1;
}

/* Main */
.flip-clock-wrapper
{
    font: normal 11px 'Helvetica Neue', Helvetica, sans-serif;

    -webkit-user-select: none;
}

.flip-clock-meridium
{
    font-size: 36px !important; 

    background: none !important;
    box-shadow: 0 0 0 !important;
}

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

.flip-clock-wrapper
{
    position: relative;

    width: 100%;
    margin: 1em;

    text-align: center;
}

.flip-clock-wrapper:before,
.flip-clock-wrapper:after
{
    display: table; /* 2 */

    content: ' '; /* 1 */
}
.flip-clock-wrapper:after
{
    clear: both;
}

/* Skeleton */
.flip-clock-wrapper ul
{
    font-size: 80px;
    font-weight: bold;
    line-height: 60px;

    position: relative;

    float: left;

    width: 40px;
    height: 60px;
    margin: 5px;

    border-radius: 6px;
    background: #000;
}

.flip-clock-wrapper ul li
{
    line-height: 60px;

    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    text-decoration: none !important;
}

.flip-clock-wrapper ul li:first-child
{
    z-index: 2;
}

.flip-clock-wrapper ul li a
{
    display: block;
    overflow: visible !important;

    height: 100%;
    margin: 0 !important;

    cursor: default !important; 

    -webkit-perspective: 200px;
       -moz-perspective: 200px;
            perspective: 200px;
}

.flip-clock-wrapper ul li a div
{
    font-size: 46px;

    position: absolute;
    z-index: 1;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 50%;

    outline: 1px solid transparent;
}

.flip-clock-wrapper ul li a div .shadow
{
    position: absolute;
    z-index: 2; 

    width: 100%;
    height: 100%;
}

.flip-clock-wrapper ul li a div.up
{
    top: 0; 

    -webkit-transform-origin: 50% 100%;
       -moz-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
         -o-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
}

.flip-clock-wrapper ul li a div.up:after
{
    position: absolute;
    z-index: 5;
    top: 44px;
    left: 0;

    width: 100%;
    height: 3px;

    content: '';

    background-color: #000;
    background-color: rgba(0, 0, 0, .4);
}

.flip-clock-wrapper ul li a div.down
{
    bottom: 0;

    -webkit-transform-origin: 50% 0;
       -moz-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
         -o-transform-origin: 50% 0;
            transform-origin: 50% 0;

    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.flip-clock-wrapper ul li a div div.inn
{
    font-size: 46px; 

    position: absolute;
    z-index: 1;
    left: 0;

    width: 100%;
    height: 200%;

    text-align: center;

    color: #fff;
    border-radius: 6px;
    background-color: #333;
    text-shadow: 0 1px 2px #000;
}

.flip-clock-wrapper ul li a div.up div.inn
{
    top: 0;
}

.flip-clock-wrapper ul li a div.down div.inn
{
    bottom: 0;
}

/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before
{
    z-index: 3;
}

.flip-clock-wrapper .flip
{
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}

.flip-clock-wrapper ul.play li.flip-clock-active
{
    z-index: 5; 

    -webkit-animation: asd .5s .5s linear both;
       -moz-animation: asd .5s .5s linear both;
            animation: asd .5s .5s linear both;
}

.flip-clock-divider
{
    position: relative;

    display: inline-block;
    float: left;

    width: 20px;
    height: 100px;
}

.flip-clock-divider:first-child
{
    width: 0;
}

.flip-clock-dot
{
    position: absolute;
    left: 5px; 

    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.flip-clock-divider .flip-clock-label
{
    position: absolute;
    top: -1.5em;
    right: -86px;

    display: none; 

    color: black;
    text-shadow: none;
}

.flip-clock-divider.minutes .flip-clock-label
{
    right: -88px;
}

.flip-clock-divider.seconds .flip-clock-label
{
    right: -91px;
}

.flip-clock-dot.top
{
    top: 23px;
}

.flip-clock-dot.bottom
{
    bottom: 51px;
}

@-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 .5s .5s linear both;
       -moz-animation: turn .5s .5s linear both;
            animation: turn .5s .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 .5s linear both;
       -moz-animation: turn2 .5s linear both;
            animation: turn2 .5s linear both;
}

@-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
{
    -webkit-animation: show .5s linear both;
       -moz-animation: show .5s linear both;
            animation: show .5s linear both; 

    background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, black 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, black));
    background: linear, top, rgba(0, 0, 0, .1) 0, black 100%;
    background:   -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, black 100%);
    background:  -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, black 100%);
    background: linear, to bottom, rgba(0, 0, 0, .1) 0, black 100%;
}

.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow
{
    -webkit-animation: hide .5s .3s linear both;
       -moz-animation: hide .5s .3s linear both;
            animation: hide .5s .3s linear both; 

    background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, black 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, black));
    background: linear, top, rgba(0, 0, 0, .1) 0, black 100%;
    background:   -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, black 100%);
    background:  -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, black 100%);
    background: linear, to bottom, rgba(0, 0, 0, .1) 0, black 100%;
}

/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow
{
    -webkit-animation: show .5s linear both;
       -moz-animation: show .5s linear both;
            animation: show .5s linear both; 

    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, .1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear, top, black 0, rgba(0, 0, 0, .1) 100%;
    background:   -o-linear-gradient(top, black 0%, rgba(0, 0, 0, .1) 100%);
    background:  -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, .1) 100%);
    background: linear, to bottom, black 0, rgba(0, 0, 0, .1) 100%;
}

.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow
{
    -webkit-animation: hide .5s .3s linear both;
       -moz-animation: hide .5s .3s linear both;
            animation: hide .5s .2s linear both; 

    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, .1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear, top, black 0, rgba(0, 0, 0, .1) 100%;
    background:   -o-linear-gradient(top, black 0%, rgba(0, 0, 0, .1) 100%);
    background:  -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, .1) 100%);
    background: linear, to bottom, black 0, rgba(0, 0, 0, .1) 100%;
}

@-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;
    }
}

@media only screen and (min-width: 100px) and (max-width: 640px), only screen and (min-width: 320x) and (max-device-width: 640px)
{
    .flip-clock-wrapper ul li a div div.inn
    {
        font-size: 30px; 
    }
    .flip-clock-wrapper ul
    {
        width: 19px;
        height: 40px;
    }
    .flip-clock-wrapper ul li
    {
        line-height: 40px;
            }
             .flip-clock-divider{
        height: 90px;
    }
}