.dark-tooltip {
  display: none;
  position: absolute;
  z-index: 99;
  text-decoration: none;
  font-weight: normal;
  top: 0;
  left: 0;
  margin-top: 10px;
}

.dark-tooltip.medium {
  padding: 0;
}

/* themes */
.dark-tooltip.dark {
  background-color: #FFF;
  border: solid #C2C1CA;
  border-width: 4px;
}

/* Animations */
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -ms-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
}
@-webkit-keyframes flipInUp {
 0% {
-webkit-transform: perspective(400px) rotateX(-90deg);
opacity: 0;
}
 40% {
-webkit-transform: perspective(400px) rotateX(5deg);
}
 70% {
-webkit-transform: perspective(400px) rotateX(-5deg);
}
 100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInUp {
 0% {
transform: perspective(400px) rotateX(-90deg);
opacity: 0;
}
 40% {
transform: perspective(400px) rotateX(5deg);
}
 70% {
transform: perspective(400px) rotateX(-5deg);
}
 100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInUp {
 0% {
-o-transform: perspective(400px) rotateX(-90deg);
opacity: 0;
}
 40% {
-o-transform: perspective(400px) rotateX(5deg);
}
 70% {
-o-transform: perspective(400px) rotateX(-5deg);
}
 100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInUp {
 0% {
transform: perspective(400px) rotateX(-90deg);
opacity: 0;
}
 40% {
transform: perspective(400px) rotateX(5deg);
}
 70% {
transform: perspective(400px) rotateX(-5deg);
}
 100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-webkit-keyframes flipInRight {
 0% {
-webkit-transform: perspective(400px) rotateY(-90deg);
opacity: 0;
}
 40% {
-webkit-transform: perspective(400px) rotateY(5deg);
}
 70% {
-webkit-transform: perspective(400px) rotateY(-5deg);
}
 100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInRight {
 0% {
transform: perspective(400px) rotateY(-90deg);
opacity: 0;
}
 40% {
transform: perspective(400px) rotateY(5deg);
}
 70% {
transform: perspective(400px) rotateY(-5deg);
}
 100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-o-keyframes flipInRight {
 0% {
-o-transform: perspective(400px) rotateY(-90deg);
opacity: 0;
}
 40% {
-o-transform: perspective(400px) rotateY(5deg);
}
 70% {
-o-transform: perspective(400px) rotateY(-5deg);
}
 100% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInRight {
 0% {
transform: perspective(400px) rotateY(-90deg);
opacity: 0;
}
 40% {
transform: perspective(400px) rotateY(5deg);
}
 70% {
transform: perspective(400px) rotateY(-5deg);
}
 100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}

.flipIn {
  -webkit-backface-visibility: visible !important;
  -moz-backface-visibility: visible !important;
  -o-backface-visibility: visible !important;
  backface-visibility: visible !important
}

.flipIn.south, .flipIn.north {
  -webkit-animation-name: flipInUp;
  -moz-animation-name: flipInUp;
  -o-animation-name: flipInUp;
  animation-name: flipInUp;
}

.flipIn.west, .flipIn.east {
  -webkit-animation-name: flipInRight;
  -moz-animation-name: flipInRight;
  -o-animation-name: flipInRight;
  animation-name: flipInRight;
}
 @-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}