@font-face
{
	font-family:ArialWeb;
	font-style:normal;
	font-weight:normal;
	src:url("../Fonts/ArialWeb/Regular.woff") format('woff'),
		url("../Fonts/ArialWeb/Regular.ttf") format('truetype');
}
.flipper
{
width:auto;
background-color:Transparent;
color:#ffffff;
display:block;
font-size:50px;
line-height:100%;
padding:0;
margin:0 auto;
height:1.6em;
font-family:ArialWeb;
}
.flipper.flipper-invisible
{
font-size:0px !important;
}
.flipper-group
{
position:relative;
white-space:nowrap;
display:block;
float:left;
padding:0;
margin:0;
}
.flipper-group label
{
position:absolute;
color:#000000;
font-size:20%;
top:100%;
line-height:1em;
left:50%;
-webkit-transform:translate(-50%, 0);
transform:translate(-50%, 0);
text-align:center;
padding-top:.5em;
}
.flipper-digit
{
white-space:nowrap;
position:relative;
padding:0;
margin:0;
display:inline-block;
float:left;
height:1.2em;
overflow-y:hidden;
}
.flipper-digit span
{
font-size:25%;
}
.flipper-delimiter
{
white-space:nowrap;
display:block;
float:left;
padding:0;
margin:0;
color:#000000;
min-width:.1em;
white-space:nowrap;
display:block;
padding-top:0.1em;
padding-bottom:0.1em;
line-height:1em;
}
.digit-face
{
display:block;
visibility:hidden;
position:relative;
border-radius:0.1em;
top:0;
left:0;
right:0;
bottom:0;
z-index:8;
padding-top:0.1em;
padding-bottom:0.1em;
padding-left:0.1em;
padding-right:0.1em;
box-sizing:border-box;
text-align:center;
}
.digit-next
{
display:block;
position:relative;
border-radius:0.1em;
top:0;
left:0;
right:0;
bottom:0;
z-index:8;
height:1.2em;
background:#000000;
padding-top:0.1em;
padding-bottom:0.1em;
padding-left:0.1em;
padding-right:0.1em;
box-sizing:border-box;
text-align:center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.digit-top
{
z-index:10;
top:0;
left:0;
right:0;
height:50%;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
overflow:hidden;
position:absolute;
background:#000000;
padding-top:0.1em;
padding-bottom:0;
padding-left:0.1em;
padding-right:0.1em;
border-top-left-radius:0.1em;
border-top-right-radius:0.1em;
box-sizing:border-box;
text-align:center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
transition:background 0s linear, -webkit-transform 0s linear;
transition:transform 0s linear, background 0s linear;
transition:transform 0s linear, background 0s linear, -webkit-transform 0s linear;
-webkit-transform-origin:0 0.6em 0 !important;
transform-origin:0 0.6em 0 !important;
-webkit-transform-style:preserve-3d !important;
transform-style:preserve-3d !important;
z-index:20;
}
.digit-top.r
{
transition:background 0.2s linear, -webkit-transform 0.2s linear;
transition:transform 0.2s linear, background 0.2s linear;
transition:transform 0.2s linear, background 0.2s linear, -webkit-transform 0.2s linear;
-webkit-transform:rotateX(90deg);
transform:rotateX(90deg);
background:#333333;
}
.digit-top2
{
visibility:hidden;
position:absolute;
height:50%;
left:0;
right:0;
background:#333333;
transition:-webkit-transform 0.2s linear;
transition:transform 0.2s linear;
transition:transform 0.2s linear, -webkit-transform 0.2s linear;
line-height:0em !important;
top:50% !important;
bottom:auto !important;
padding-top:0;
padding-bottom:0.1em;
padding-left:0.1em;
padding-right:0.1em;
border-bottom-left-radius:0.1em;
border-bottom-right-radius:0.1em;
overflow:hidden;
text-align:center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
transition:background 0s linear, -webkit-transform 0s linear;
transition:transform 0s linear, background 0s linear;
transition:transform 0s linear, background 0s linear, -webkit-transform 0s linear;
-webkit-transform:rotateX(-90deg);
transform:rotateX(-90deg);
-webkit-transform-style:preserve-3d !important;
transform-style:preserve-3d !important;
-webkit-transform-origin:0 0 0 !important;
transform-origin:0 0 0 !important;
z-index:20;
}
.digit-top2.r
{
visibility:visible;
transition:background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s;
transition:transform 0.2s linear 0.2s, background 0.2s linear 0.2s;
transition:transform 0.2s linear 0.2s, background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s;
-webkit-transform:rotateX(0deg);
transform:rotateX(0deg);
background:#000000;
}
.digit-bottom
{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
position:absolute;
overflow:hidden;
background:#000000;
height:50%;
left:0;
right:0;
bottom:0;
z-index:9;
line-height:0em;
padding-top:0;
padding-bottom:0.1em;
padding-left:0.1em;
padding-right:0.1em;
border-bottom-left-radius:0.1em;
border-bottom-right-radius:0.1em;
box-sizing:border-box;
text-align:center;
transition:none;
}
.digit-bottom.r
{
transition:background 0.2s linear;
background:#333333;
}
.flipper-digit:after
{
content:"";
position:absolute;
height:2px;
background:#333333;
top:50%;
display:block;
z-index:30;
left:0;
right:0;
}
.flipper-dark
{
color:#000000;
}
.flipper-dark .flipper-delimiter
{
color:#333;
}
.flipper-dark .digit-next
{
background:#333;
}
.flipper-dark .digit-top
{
background:#333;
}
.flipper-dark .digit-top.r
{
background:black;
}
.flipper-dark .digit-top2
{
background:black;
}
.flipper-dark .digit-top2.r
{
background:#333;
}
.flipper-dark .digit-bottom
{
background:#333;
}
.flipper-dark-labels .flipper-group label
{
color:#333;
}