body{background-color:#f6fffe;font-family:"Lato"}.wrap{width:1000px;margin:auto}@media only screen and (max-width: 1000px){.wrap{width:95%}}h3{font-size:2rem;line-height:1.3;letter-spacing:-.1rem;margin-top:2rem;margin-bottom:2rem;font-weight:300;text-align:center}.top-menu ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.top-menu li{float:left}.top-menu li a{display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none}.top-menu li a:hover{background-color:#111}*{margin:0;padding:0;box-sizing:border-box}a{cursor:pointer;text-decoration:none;color:#ccc}a:hover{color:#fff}ul{list-style:none}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}ul.flip{position:relative;float:left;margin:5px;width:60px;height:90px;font-size:80px;font-weight:bold;line-height:87px;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,0.7)}ul.flip li{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%}ul.flip li:first-child{z-index:2}ul.flip li a{display:block;height:100%;perspective:200px}ul.flip li a div{z-index:1;position:absolute;left:0;width:100%;height:50%;overflow:hidden}ul.flip li a div .shadow{position:absolute;width:100%;height:100%;z-index:2}ul.flip li a div.up{transform-origin:50% 100%;top:0}ul.flip li a div.up:after{content:"";position:absolute;top:44px;left:0;z-index:5;width:100%;height:3px;background-color:rgba(0,0,0,0.4)}ul.flip li a div.down{transform-origin:50% 0%;bottom:0}ul.flip li a div div.inn{position:absolute;left:0;z-index:1;width:100%;height:200%;color:#ccc;text-shadow:0 1px 2px #000;text-align:center;background-color:#333;border-radius:6px}ul.flip li a div.up div.inn{top:0}ul.flip li a div.down div.inn{bottom:0}.countdown.play ul li.before{z-index:3}.countdown.play ul li.active{animation:asd .5s .5s linear both;z-index:2}@keyframes asd{0%{z-index:2}5%{z-index:4}100%{z-index:4}}.countdown.play ul li.active .down{z-index:2;animation:turn .5s .5s linear both}@keyframes turn{0%{transform:rotateX(90deg)}100%{transform:rotateX(0deg)}}.countdown.play ul li.before .up{z-index:2;animation:turn2 .5s linear both}@keyframes turn2{0%{transform:rotateX(0deg)}100%{transform:rotateX(-90deg)}}.countdown.play ul li.before .up .shadow{background:-moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, #000));background:linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:-o-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:-ms-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, #000 100%);animation:show .5s linear both}.countdown.play ul li.active .up .shadow{background:-moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, #000));background:linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:-o-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:-ms-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);background:linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, #000 100%);animation:hide .5s .3s linear both}.countdown.play ul li.before .down .shadow{background:-moz-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, rgba(0,0,0,0.1)));background:linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:-o-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:-ms-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.1) 100%);animation:show .5s linear both}.countdown.play ul li.active .down .shadow{background:-moz-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, rgba(0,0,0,0.1)));background:linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:-o-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:-ms-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);background:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.1) 100%);animation:hide .5s .3s linear both}@keyframes show{0%{opacity:0}100%{opacity:1}}@keyframes hide{0%{opacity:1}100%{opacity:0}}