html{width:100%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{width:100%;height:100%;margin:0 auto;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.main,.my-app{height:100%}.clearfix:after,.clearfix:before{display:table;line-height:0;content:""}.clearfix:after{clear:both}.box .list li .option{font-weight:400}.box .list li.completion,.box .list li.date-and-time{line-height:24px;padding-bottom:10px}select.time{width:50px}select.timezone{width:273px}.feature{color:#373737;font-size:12px}.viewable-item{padding:5px 0}.viewable-item .option{width:150px;display:inline-block}.viewable-item span.option{width:120px;margin-left:30px}.timers .timer{width:210px;height:70px;border:1px solid #d0d0d0;border-radius:10px;padding:5px 5px;margin:0;text-align:center;box-shadow:0 0 2px #ccc;overflow:hidden}.timer{height:100%}.timer .wrapper{padding:5px 10px;margin:0;text-align:center;white-space:nowrap;user-select:none}.timer .days,.timer .hours,.timer .mins,.timer .secs,.timer .separator{display:inline-block;width:22%;vertical-align:top}.timer-style-2.timer .days,.timer-style-2.timer .hours,.timer-style-2.timer .mins,.timer-style-2.timer .secs{width:22%;height:100%}.timer .days.three{width:25%}.timer.no-days .hours,.timer.no-days .mins,.timer.no-days .secs{width:25%}.timer-style-1.timer .separator{width:8%}.timer-style-2.timer .separator{width:6%}.timer .separator .space,.timer .value{text-align:center}.timer .value{margin:0 auto;width:100%}.timer-style-1 .separator .space{visibility:hidden}.timer-style-2 .separator .space{font-weight:700}.timer-style-2 .wrapper{border-radius:10px}.timer .separator:first-child,.timer .separator:last-child{display:none}.timer .complete-text{display:none}.timer.complete .days,.timer.complete .hours,.timer.complete .mins,.timer.complete .secs,.timer.complete .separator{display:none}.timer.complete .complete-text{display:inline-block;overflow:hidden}ul.flip{list-style:none;padding:0;margin:0;position:relative}.timer ul.flip li{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;border-bottom:0}ul.flip li:first-child{z-index:2}ul.flip li .front-and-back{display:block;height:100%;margin-right:0}ul.flip li .front-and-back div{z-index:1;position:absolute;left:0;width:100%;height:50%;overflow:hidden}ul.flip li .front-and-back div .shadow{position:absolute;width:100%;height:100%;z-index:2}ul.flip li .front-and-back div.up{-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;top:0}ul.flip li .front-and-back div.up:after{content:"";position:absolute;top:96%;left:0;z-index:5;width:100%;height:4%}ul.flip li .front-and-back div.down{-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;top:50%}ul.flip li .front-and-back div div.inn{font-stretch:normal!important;position:absolute;left:0;z-index:1;width:100%;height:200%;text-align:center}ul.flip li .front-and-back div.up div.inn{top:0}ul.flip li .front-and-back div.down div.inn{bottom:0}body.play ul li.before{z-index:3}body.play .timer.timer-style-1 ul li.active{-webkit-animation:asd .5s .5s linear both;-moz-animation:asd .5s .5s linear both;-ms-animation:asd .5s .5s linear both;-o-animation:asd .5s .5s linear both;animation:asd .5s .5s linear both;z-index:2}@keyframes asd{0%{z-index:2}5%{z-index:4}100%{z-index:4}}@-moz-keyframes asd{0%{z-index:2}5%{z-index:4}100%{z-index:4}}@-webkit-keyframes asd{0%{z-index:2}5%{z-index:4}100%{z-index:4}}@-ms-keyframes asd{0%{z-index:2}5%{z-index:4}100%{z-index:4}}@-o-keyframes asd{0%{z-index:2}5%{z-index:4}100%{z-index:4}}body.play .timer.timer-style-1 ul li.active .down{z-index:2;-webkit-animation:turn .5s .5s linear both;-moz-animation:turn .5s .5s linear both;-ms-animation:turn .5s .5s linear both;-o-animation:turn .5s .5s linear both;animation:turn .5s .5s linear both}@keyframes turn{0%{-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);-o-transform:rotateX(90deg);-ms-transform:rotateX(90deg);transform:rotateX(90deg)}100%{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}}@-moz-keyframes turn{0%{-moz-transform:rotateX(90deg);transform:rotateX(90deg)}100%{-moz-transform:rotateX(0);transform:rotateX(0)}}@-webkit-keyframes turn{0%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}100%{-webkit-transform:rotateX(0);transform:rotateX(0)}}@-ms-keyframes turn{0%{-ms-transform:rotateX(90deg);transform:rotateX(90deg)}100%{-ms-transform:rotateX(0);transform:rotateX(0)}}@-o-keyframes turn{0%{-o-transform:rotateX(90deg);transform:rotateX(90deg)}100%{-o-transform:rotateX(0);transform:rotateX(0)}}body.play .timer.timer-style-1 ul li.before .up{z-index:2;-webkit-animation:turn2 .5s linear both;-moz-animation:turn2 .5s linear both;-ms-animation:turn2 .5s linear both;-o-animation:turn2 .5s linear both;animation:turn2 .5s linear both}@keyframes turn2{0%{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);-o-transform:rotateX(-90deg);-ms-transform:rotateX(-90deg);transform:rotateX(-90deg)}}@-moz-keyframes turn2{0%{-moz-transform:rotateX(0);transform:rotateX(0)}100%{-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}}@-webkit-keyframes turn2{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg)}}@-ms-keyframes turn2{0%{-ms-transform:rotateX(0);transform:rotateX(0)}100%{-ms-transform:rotateX(-90deg);transform:rotateX(-90deg)}}@-o-keyframes turn2{0%{-o-transform:rotateX(0);transform:rotateX(0)}100%{-o-transform:rotateX(-90deg);transform:rotateX(-90deg)}}body.play .timer.timer-style-1 ul li.before .up .shadow{background:-webkit-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);-webkit-animation:show .5s linear both;-moz-animation:show .5s linear both;-ms-animation:show .5s linear both;-o-animation:show .5s linear both;animation:show .5s linear both}body.play .timer.timer-style-1 ul li.active .up .shadow{background:-webkit-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);background:linear-gradient(top,rgba(0,0,0,.1) 0,rgba(0,0,0,.5) 100%);-webkit-animation:hide .5s .3s linear both;-moz-animation:hide .5s .3s linear both;-ms-animation:hide .5s .3s linear both;-o-animation:hide .5s .3s linear both;animation:hide .5s .3s linear both}body.play .timer.timer-style-1 ul li.before .down .shadow{background:-webkit-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%);background:-moz-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%);background:-o-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%);background:linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%);-webkit-animation:show .5s linear both;-moz-animation:show .5s linear both;-ms-animation:show .5s linear both;-o-animation:show .5s linear both;animation:show .5s linear both}body.play .timer.timer-style-1 ul li.active .down .shadow{background:-webkit-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,.1) 100%);background:-moz-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,.1) 100%);background:-o-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,.1) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,.1) 100%);background:linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,.1) 100%);-webkit-animation:hide .5s .3s linear both;-moz-animation:hide .5s .3s linear both;-ms-animation:hide .5s .3s linear both;-o-animation:hide .5s .3s linear both;animation:hide .5s .3s linear both}@keyframes show{0%{opacity:0}100%{opacity:1}}@-moz-keyframes show{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes show{0%{opacity:0}100%{opacity:1}}@-ms-keyframes show{0%{opacity:0}100%{opacity:1}}@-o-keyframes show{0%{opacity:0}100%{opacity:1}}@keyframes hide{0%{opacity:1}100%{opacity:0}}@-moz-keyframes hide{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes hide{0%{opacity:1}100%{opacity:0}}@-ms-keyframes hide{0%{opacity:1}100%{opacity:0}}@-o-keyframes hide{0%{opacity:1}100%{opacity:0}}body{margin:0;padding:0}.hidden{display:none}.timer .wrapper{margin:0 auto}.moremargin{padding:1px}.timer .text .content{overflow:hidden;text-overflow:ellipsis}.timer ul.flip li .front-and-back div.up:after{background-color:rgba(50,50,50,.5)}.timer-style-1.timer ul.flip li .front-and-back div div.inn{color:#fff;background-color:#000}.timer.timer-style-1 .value{background:#fff;color:#fff}.timer .text{background-color:#fff;color:#fff}.timer .complete-text{background-color:#fff;color:#fff}.timer.timer-style-2 .wrapper{position:relative;overflow:hidden}.timer.complete{padding:0}.timer.complete .complete-text>div{position:relative;display:inline-block;display:-ms-flexbox;display:-webkit-flex;display:flex;-moz-align-items:center;-ms-align-items:center;align-items:center;-moz-justify-content:center;-ms-justify-content:center;justify-content:center;width:100%;height:100%;max-width:100%;max-height:100%;vertical-align:middle;text-align:center;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;box-sizing:border-box;padding:10px}.timer.complete .complete-text>div div{display:inline-block;overflow:visible;max-width:100%;max-height:100%;box-sizing:border-box;vertical-align:middle;line-height:1.1em!important;text-underline-position:under}.timer.complete .complete-text div span{display:inline-block}.timer.timer-style-2 .complete-text{position:absolute;top:3%;left:3%;vertical-align:middle;text-align:center}.timer .wrapper{display:flex;flex-direction:row;justify-content:center}.timer.timer-style-1 .complete-text{position:absolute;top:0;left:0;vertical-align:middle;text-align:center;width:100%!important;height:100%!important}.timer .complete-text{box-sizing:border-box;border-radius:10px}.timer.timer-style-2 .front-and-back div.down{display:none}.timer.timer-style-2 .front-and-back div.up{height:100%}