/*
* Legacy Flip Countdown — visual only.
* (We keep it background-free; layout sizing handled in layout.css)
*/

.countDownClockul, .countDownClock li { margin:0; padding:0; border:0; font:inherit; vertical-align:baseline }
.countDownClock ol, .countDownClock ul { list-style:none }

ul.flip:before{
  content:''; display:block; position:absolute; z-index:200; top:0; width:100%; height:50%;
  background: linear-gradient(top, transparent 80%, rgba(0,0,0,.2));
  border-bottom: 1px solid rgba(0,0,0,.5); pointer-events:none;
}

ul.flip li { z-index:1; position:absolute; left:0; top:0; width:100%; height:100% }
ul.flip li a { display:block; height:100%; perspective:150px; cursor:text }
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.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:#202021; border-radius:6px;
}
ul.flip li a div.up div.inn{ top:0 } 
ul.flip li a div.down div.inn{ bottom:0 }

.countDownClock .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,.3);
}

.countDownClock .day-container{ float:left; position:relative }
.countDownClock .day-container ul{ float:right }
.countDownClock .sepr{ margin-right:30px }

/* unit labels */
.countDownClock .hourPlay:after,
.countDownClock .minutePlay:after,
.countDownClock .secondPlay:after{
  display:block; position:absolute; top:89%; width:200%; margin-left:-5px; left:-100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:bold; font-size:18px; letter-spacing:-1px; text-align:center;
  content:'hours';
}
.countDownClock .minutePlay:after{ content:'minutes' }
.countDownClock .secondPlay:after{ content:'seconds' }
.countDownClock .day-container:after{
  content:'days'; display:block; position:absolute; top:115%; width:100%; margin-left:5%;
  left:0; text-align:center; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:bold; font-size:18px; letter-spacing:-1px;
}

/* animations */
body.play ul li.before .up .shadow,
body.play ul li.active .up .shadow{
  background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,1) 100%);
}
body.play ul li.before .down .shadow,
body.play ul li.active .down .shadow{
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.1) 100%);
}

body ul li.pre-before{ z-index:2 }
body ul li.pre-active{ z-index:3 }
body.play ul li.before{ z-index:3 }
body.play ul li.active{ animation:asd .5s .5s linear both; z-index:2 }
@keyframes asd{ 0%{z-index:2} 5%{z-index:80} 100%{z-index:4} }
body.play ul li.active .down{ z-index:2; animation:turn .5s .5s linear both }
@keyframes turn{ 0%{ transform:rotateX(90deg) } 100%{ transform:rotateX(0deg) } }
body.play ul li.before .up{ z-index:2; animation:turn2 .5s linear both }
@keyframes turn2{ 0%{ transform:rotateX(0deg) } 100%{ transform:rotateX(-90deg) } }