.fliptimer {
	position:relative;
	cursor:default;
	text-align:center;
	font-size:1rem;
	line-height:1.5;
	box-sizing:border-box;
	white-space:nowrap;
	max-width:100%;
	height:100%;
	-webkit-user-select:none;
	   -moz-user-select:none;
			user-select:none;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-direction:row;
		flex-direction:row;
	-webkit-box-pack:center;
	   -ms-flex-pack:center;
	 justify-content:center;
}

.fliptimer > img {
	display:none;
	clear:both;
	width:100% !important;
	height:0;
}

.fliptimer .flip-container {
	display:none;
	clear:both;
}

.fliptimer .flip-container *,
.fliptimer .flip-container *:before,
.fliptimer .flip-container *:after {
  	box-sizing:border-box;
}

.fliptimer .flip-container.onfinish {
	opacity:0.2;
}

.fliptimer .flip-wrapper {
	display:inline-block;
	box-sizing:inherit;
	white-space:nowrap;
	height:100%;
}

.fliptimer .flip-message {
	position:absolute;
	max-width:100%;
	top:50%;
	left:50%;
	text-align:center;
	font-family:"Helvetica Neue", Helvetica, sans-serif;
	font-size:36px;
	line-height:36px;
	font-weight:bold;
	color:#f00;
	-webkit-transform:translate(-50%, -50%);
	   -moz-transform:translate(-50%, -50%);
			transform:translate(-50%, -50%);
}

/****************
    - Flip -
****************/
.fliptimer .flip-wrapper {
	display:inline-block;
	text-align:center;
	margin:0 1vw;
	box-sizing:inherit;
	white-space:nowrap;
	height:100%;
}

.fliptimer .flip-wrapper:first-child {
	margin-left:0;
}

.fliptimer .flip-wrapper:last-child {
	margin-right:0;
}

.fliptimer .flips {
	box-sizing:inherit;
	white-space:nowrap;
}

.fliptimer ul {
  	position:relative;
	display:inline-block;
	list-style:none;
  	margin:.05em;
	padding:0;
	min-width:1em;
	font-family:"Helvetica Neue", Helvetica, sans-serif;
	font-weight:bold;
  	font-size:60px;
	height:80px;
	text-align:center;
	line-height:1;
	border-radius:6px;
	-webkit-font-smoothing:antialiased;
	   -moz-font-smoothing:antialiased;
}

.fliptimer ul.flip-box-shadow {
	box-shadow:0 .125em .3125em rgba(0,0,0,.1), 0 .02125em .06125em rgba(0,0,0,.1);
}

.fliptimer ul li {
	position:absolute;
  	z-index:1;
  	left:0;
  	top:0;
  	width:100%;
  	height:100%;
	list-style:none;
    font-size:100% !important;
	line-height:1.3;
  	text-decoration:none !important;
    margin:0 !important;
    padding:0 !important;
}

.fliptimer ul li div.flip-updown {
  	display:block;
  	height:100%;
  	margin:0 !important;
  	overflow:visible !important;
  	cursor:default !important;
	-webkit-perspective:4em;
  	   -moz-perspective:4em;
  			perspective:4em;
}

.fliptimer ul li div.flip-updown div {
  	z-index:1;
  	position:absolute;
  	left:0;
 	width:100%;
  	height:50%;
  	overflow:hidden;
}

/* Shadow */
.fliptimer ul li div.flip-updown div .flip-shadow {
  	position:absolute;
	z-index:2;
  	width:100%;
  	height:100%;
}

/* Up */
.fliptimer ul li div.flip-updown div.flip-up {
	top:0;
  	-webkit-transform-origin:50% 100%;
  	   -moz-transform-origin:50% 100%;
  			transform-origin:50% 100%;
}

/* Divider */
.fliptimer ul li div.flip-updown div.flip-divider {
  	content:"";
  	position:absolute;
  	top:50%;
  	left:0;
  	z-index:5;
  	width:100%;
 	height:1px;
  	background:#000;
	opacity:0.4;
}

/* Down */
.fliptimer ul li div.flip-updown div.flip-down {
  	bottom:0;
  	border-bottom-left-radius:6px;
  	border-bottom-right-radius:6px;
  	-webkit-transform-origin:50% 0;
  	   -moz-transform-origin:50% 0;
  			transform-origin:50% 0;
}

/* Value */
.fliptimer ul li div.flip-updown div div.flip-val {
  	position:absolute;
  	left:0;
  	z-index:1;
  	width:100%;
  	height:200%;
	color:#fff;
  	text-align:center;
  	background:#333;
  	border-radius:6px;
	-webkit-transition:all .1s;
	   -moz-transition:all .1s;
			transition:all .1s;
}

.fliptimer ul li div.flip-updown div.flip-up div.flip-val {
  	top:0;
}

.fliptimer ul li div.flip-updown div.flip-down div.flip-val {
  	bottom:0;
}

/* Text */
.fliptimer .text {
	clear:both;
	display:block;
	width:100%;
	padding-top:0;
	font-size:1em;
	color:#666;
	text-transform:uppercase;
}

/* Animation */
.fliptimer li.before {
  	z-index:3;
}

/* Zindex animation */
.fliptimer li.active {
	z-index:5;
  	-webkit-animation:zIndex 0.5s 0.5s linear both;
  	   -moz-animation:zIndex 0.5s 0.5s linear both;
  			animation:zIndex 0.5s 0.5s linear both;
}

@keyframes zIndex {
  	0%   {z-index:2;}
  	20%  {z-index:4;}
  	100% {z-index:4;}
}

/* TurnDown animation */
.fliptimer li.active .flip-down {
  	z-index:2;
  	-webkit-animation:turnDown 0.5s 0.5s linear both;
  	   -moz-animation:turnDown 0.5s 0.5s linear both;
  			animation:turnDown 0.5s 0.5s linear both;
}

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

/* TurnUp animation */
.fliptimer li.before .flip-up {
  	z-index:2;
  	-webkit-animation:turnUp 0.5s linear both;
  	   -moz-animation:turnUp 0.5s linear both;
  			animation:turnUp 0.5s linear both;
}

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

.fliptimer li.active {
  	z-index:3;
}

/* Up shadow */
.fliptimer li.before .flip-up .flip-shadow {
  	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%;
  	-webkit-animation:show 0.5s linear both;
  	   -moz-animation:show 0.5s linear both;
  			animation:show 0.5s linear both;
}

.fliptimer li.active .flip-up .flip-shadow {
  	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%;
  	-webkit-animation:hide 0.5s 0.3s linear both;
       -moz-animation:hide 0.5s 0.3s linear both;
  			animation:hide 0.5s 0.3s linear both;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
}

/* Down shadow */
.fliptimer li.before .flip-down .flip-shadow {
  	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0,0,0,.1)));
  	background:-moz-linear-gradient(top, black 0%, rgba(0,0,0,.1) 100%);
  	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-animation:show 0.5s linear both;
  	   -moz-animation:show 0.5s linear both;
  			animation:show 0.5s linear both;
}

.fliptimer li.active .flip-down .flip-shadow {
  	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0,0,0,.1)));
    background:-moz-linear-gradient(top, black 0%, rgba(0,0,0,.1) 100%);
  	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-animation:hide 0.5s 0.3s linear both;
  	   -moz-animation:hide 0.5s 0.3s linear both;
  			animation:hide 0.5s 0.2s linear both;
}

/* Show animation */
@keyframes show {
  	0%   {opacity:0;}
  	100% {opacity:1;}
}

/* Hide animation */
@keyframes hide {
  	0%   {opacity:1;}
  	100% {opacity:0;}
}

/****************
    - Media -
****************/
@media (max-width:767px) {
	.fliptimer .text {
		font-size:.7em !important;
	}

	.fliptimer .flip-message {
		font-size:20px;
		line-height:20px;
	}
}