.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}.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{content:" ";display:table}.flip-clock-wrapper.clearfix:after{clear:both}.flip-clock-wrapper.clearfix{*zoom:1}.flip-clock-wrapper{font:normal 11px "Helvetica Neue",Helvetica,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;width:100%;margin: 20px 0 0 0;}.flip-clock-wrapper:before,.flip-clock-wrapper:after{content:" ";display:table}.flip-clock-wrapper:after{clear:both}.flip-clock-wrapper ul{display: inline-block; position:relative;/*float:left;*/margin:5px;width:60px;height:90px;font-size:80px;font-weight:bold;line-height:87px;border-radius:6px;background:#000}.flip-clock-wrapper ul li{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;line-height:87px;text-decoration:none !important;margin: 0;padding: 0;}.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}.flip-clock-wrapper ul li a div{z-index:1;position:absolute;left:0;width:100%;height:50%;font-size:80px;overflow:hidden;outline:1px solid transparent}.flip-clock-wrapper ul li a div .shadow{position:absolute;width:100%;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}.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}.flip-clock-wrapper ul 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;font-size:70px}.flip-clock-wrapper ul li a div.up div.inn{top:0}.flip-clock-wrapper ul li a div.down div.inn{bottom:0}.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,0.7)}.flip-clock-wrapper ul.play li.flip-clock-active{-webkit-animation:asd .5s .5s linear both;-moz-animation:asd .5s .5s linear both;animation:asd .5s .5s linear both;z-index:5}.flip-clock-divider{/*float:left;*/display:inline-block;position:relative;width:20px;height:100px}.flip-clock-divider:first-child{width:0}.flip-clock-dot{display:block;background:#323434;width:10px;height:10px;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:-86px;color:black;text-shadow:none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 13px; color: #777;} .clock-text{font-size: 16px; color: #777; padding-bottom: 5px;} .flip-clock-divider.minutes .flip-clock-label{right:-88px}.flip-clock-divider.seconds .flip-clock-label{right:-91px}.flip-clock-dot.top{top:30px}.flip-clock-dot.bottom{bottom:30px}@-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(0)}}@-moz-keyframes turn{0{-moz-transform:rotateX(90deg)}100%{-moz-transform:rotateX(0)}}@-o-keyframes turn{0{-o-transform:rotateX(90deg)}100%{-o-transform:rotateX(0)}}@keyframes turn{0{transform:rotateX(90deg)}100%{transform:rotateX(0)}}.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(0)}100%{-webkit-transform:rotateX(-90deg)}}@-moz-keyframes turn2{0{-moz-transform:rotateX(0)}100%{-moz-transform:rotateX(-90deg)}}@-o-keyframes turn2{0{-o-transform:rotateX(0)}100%{-o-transform:rotateX(-90deg)}}@keyframes turn2{0{transform:rotateX(0)}100%{transform:rotateX(-90deg)}}.flip-clock-wrapper ul li.flip-clock-active{z-index:3}.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 .5s linear both;-moz-animation:show .5s linear both;animation:show .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 .5s .3s linear both;-moz-animation:hide .5s .3s linear both;animation:hide .5s .3s linear both}.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 .5s linear both;-moz-animation:show .5s linear both;animation:show .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 .5s .3s linear both;-moz-animation:hide .5s .3s linear both;animation:hide .5s .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}}

@media (max-width: 480px){
	.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
	}

	.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 {
		content: " ";
		display: table
	}

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

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

	.flip-clock-wrapper {
		font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
		-webkit-user-select: none
	}

	.flip-clock-meridium {
		background: none !important;
		box-shadow: 0 0 0 !important;
		font-size: 16px !important
	}

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

	.flip-clock-wrapper {
		text-align: center;
		position: relative;
		width: 100%;
		margin: 20px 0 0 0;
	}

	.flip-clock-wrapper:before,
	.flip-clock-wrapper:after {
		content: " ";
		display: table
	}

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

	.flip-clock-wrapper ul {
		display: inline-block; 
		position: relative;
		/*float: left;*/
		margin: 3px;
		width: 28px;
		height: 40px;
		font-size: 20px;
		font-weight: bold;
		line-height: 20px;
		border-radius: 15%;
		background: #000;
	}



	.flip-clock-wrapper ul li {
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		line-height: 40px;
		text-decoration: none !important
	}

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

	.flip-clock-wrapper ul li a {
		display: block;
		height: 100%;
		-webkit-perspective: 80px;
		-moz-perspective: 80px;
		perspective: 80px;
		margin: 0 !important;
		overflow: visible !important;
		cursor: default !important
	}

	.flip-clock-wrapper ul li a div {
		z-index: 1;
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		font-size: 30px;
		overflow: hidden;
		outline: 1px solid transparent
	}

	.flip-clock-wrapper ul li a div .shadow {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
		box-shadow: none;
	}

	.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
	}

	.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
	}

	.flip-clock-wrapper ul li a div div.inn {
		position: absolute;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 200%;
		color: #ccc;
		text-shadow: 0 1px 1px #000;
		text-align: center;
		background-color: #333;
		border-radius: 15%;
		font-size: 26px;
	}

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

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

	.flip-clock-wrapper ul.play li.flip-clock-before {
		z-index: 3
	}

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

	.flip-clock-wrapper ul.play li.flip-clock-active {
		-webkit-animation: asd .5s .5s linear both;
		-moz-animation: asd .5s .5s linear both;
		animation: asd .5s .5s linear both;
		z-index: 5;
	}

	.flip-clock-divider {
		/*float: left;*/
		display: inline-block;
		position: relative;
		width: 16px;
		height: 40px;
	}

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

	.flip-clock-dot {
		display: block;
		background: #323434;
		width: 6px;
		height: 6px;
		position: absolute;
		border-radius: 50%;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
		left: 4px;
	}

	.flip-clock-divider .flip-clock-label {
		position: absolute;
		top: -23px;
		right: -52px;
		color: black;
		text-shadow: none;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 13px;
		color: #777;
	}

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

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

	.flip-clock-dot.top {
		top: 7px
	}

	.flip-clock-dot.bottom {
		bottom: 13px
	}

	@-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(0)
		}
	}

	@-moz-keyframes turn {
		0 {
			-moz-transform: rotateX(90deg)
		}
		100% {
			-moz-transform: rotateX(0)
		}
	}

	@-o-keyframes turn {
		0 {
			-o-transform: rotateX(90deg)
		}
		100% {
			-o-transform: rotateX(0)
		}
	}

	@keyframes turn {
		0 {
			transform: rotateX(90deg)
		}
		100% {
			transform: rotateX(0)
		}
	}

	.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(0)
		}
		100% {
			-webkit-transform: rotateX(-90deg)
		}
	}

	@-moz-keyframes turn2 {
		0 {
			-moz-transform: rotateX(0)
		}
		100% {
			-moz-transform: rotateX(-90deg)
		}
	}

	@-o-keyframes turn2 {
		0 {
			-o-transform: rotateX(0)
		}
		100% {
			-o-transform: rotateX(-90deg)
		}
	}

	@keyframes turn2 {
		0 {
			transform: rotateX(0)
		}
		100% {
			transform: rotateX(-90deg)
		}
	}

	.flip-clock-wrapper ul li.flip-clock-active {
		z-index: 3
	}

	.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 .5s linear both;
		-moz-animation: show .5s linear both;
		animation: show .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 .5s .3s linear both;
		-moz-animation: hide .5s .3s linear both;
		animation: hide .5s .3s linear both
	}

	.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 .5s linear both;
		-moz-animation: show .5s linear both;
		animation: show .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 .5s .3s linear both;
		-moz-animation: hide .5s .3s linear both;
		animation: hide .5s .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
		}
	}

}