.flipper {
  color      : #fff;
  display    : block;
  font-size  : 50px;
  line-height: 100%;
  padding    : 0;
  margin     : 0;
  height     : 1.7em;

}

.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            : rgb(239, 127, 26);
  font-size        : 25%;
  top              : 100%;
  line-height      : 1em;
  left             : 50%;
  -webkit-transform: translate(-50%, 0);
  transform        : translate(-50%, 0);
  text-align       : center;
  padding-top      : .5em;
  font-family      : 'Open Sans', sans-serif;

}

.flipper-digit {
  white-space            : nowrap;
  position               : relative;
  padding                : 0;
  margin                 : 0;
  display                : inline-block;
  float                  : left;
  height                 : 1.2em;
  overflow-y             : hidden;
  /*   -webkit-box-shadow: 0px 5px 5px 0px rgba(239, 127, 26, 0.75);
  -moz-box-shadow        :    0px 5px 5px 0px rgba(239, 127, 26, 0.75);
  box-shadow             :         0px 5px 5px 0px rgba(239, 127, 26, 0.75); */
}

.flipper-digit span {
  font-size: 25%;
}

.flipper-delimiter {
  white-space   : nowrap;
  display       : block;
  float         : left;
  padding       : 0;
  margin        : 0;
  color         : #ef7f1a;
  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         : #ef7f1a;
  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                 : #ef7f1a;
  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       : #cccccc;
}

.digit-top2 {
  visibility                : hidden;
  position                  : absolute;
  height                    : 50%;
  left                      : 0;
  right                     : 0;
  background                : #cccccc;
  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       : #ef7f1a;
}

.digit-bottom {
  -webkit-backface-visibility: hidden;
  backface-visibility        : hidden;
  pointer-events             : none;
  position                   : absolute;
  overflow                   : hidden;
  background                 : #ef7f1a;
  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: #cccccc;
}

.flipper-digit:after {
  content   : "";
  position  : absolute;
  height    : 1px;
  background: rgba(255, 254, 254, 0.5);
  top       : 50%;
  display   : block;
  z-index   : 30;
  left      : 0;
  right     : 0;
}

.flipper-dark {
  color: #fff;
}

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