.dot {
  border-radius: 50%;
  content: "";
  margin: 10px;
  width: 25px;
  height: 25px;
  text-align: center;
  position: relative;
  line-height: 25px;
}

.dot div {
  display: none;
  content: '';
  position: absolute;
  border: #fff solid 4px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}

.dot div.active {
  display: block;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

.column {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.board {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

.score-board {
  margin-top: 100px;
  display: flex;
  list-style: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.color-1 {
  background: #413c58;
  color: #fff;
}

.color-1.hvr-ripple-out:before {
  border: #413c58 6px solid;
}

.color-2 {
  background: #f0b67f;
  color: #fff;
}

.color-2.hvr-ripple-out:before {
  border: #f0b67f 6px solid;
}

.color-3 {
  background: #5979B2;
  color: #fff;
}

.color-3.hvr-ripple-out:before {
  border: #5979B2 6px solid;
}

.color-4 {
  background: #1ea896;
  color: #fff;
}

.color-4.hvr-ripple-out:before {
  border: #1ea896 6px solid;
}

/* Ripple Out */
@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-ripple-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 6px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -25px, 0);
    transform: translate3d(0, -25px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -25px, 0);
    transform: translate3d(0, -25px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounce-enter {
  animation: bounceInDown 1s;
}

.bounce-enter.bounce-enter-active {
  animation: bounceInDown 1s;
}

.bounce-appear {
  animation: bounceInDown 1s;
}

.bounce-appear.bounce-appear-active {
  animation: bounceInDown 1s;
}

.bounce-leave {
  display: none;
}

.brand-logo {
  cursor: default;
}