:root {
  --light-colour: #f7f7f7;
  --dark-colour: #e8332c;
  --green-colour: #01bc78;
  --red-colour: #782424;
  --yellow-colour: #ffe74c;
  --white-colour: #fff;
  --black-colour: #330000;

  --chosen-font: 'Outfit', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--chosen-font) !important;
}

.boldFont {
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/*                                   LOADER                                   */
/* -------------------------------------------------------------------------- */

.loadCover {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--light-colour);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.loadCover.fade-out {
  opacity: 0;
}

.loadingMsg {
  display: flex;
  width: fit-content;
  align-items: center;
  flex-direction: column;
  color: var(--dark-colour);
  position: absolute;
  font-size: 1.6vmin;
  font-family: Verdana !important;
  text-transform: uppercase;
}

.loader {
  width: 10vmin;
  aspect-ratio: 1;
  position: relative;
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  margin: -8px 0 0 -8px;
  width: 16px;
  aspect-ratio: 1;
  background: var(--dark-colour);
  animation: l2-1 2s infinite, l2-2 1s infinite;
}
.loader:after {
  background: var(--dark-colour);
  animation-delay: -1s, 0s;
}
@keyframes l2-1 {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 100%;
    left: 0;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: 0;
    left: 100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes l2-2 {
  40%,
  50% {
    transform: rotate(0.25turn) scale(0.5);
  }
  100% {
    transform: rotate(0.5turn) scale(1);
  }
}

/* -------------------------------------------------------------------------- */
/*                          INITIAL INSTRUCTION TOAST                         */
/* -------------------------------------------------------------------------- */

.initialInstruction {
  position: absolute;
  top: 3%;
  right: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 1vmin 2vmin;
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0px 0.35vmin 0.75vmin -0.15vmin,
    rgba(0, 0, 0, 0.2) 0px -0.15vmin 0px inset;
  z-index: 9999;
  user-select: none;
  pointer-events: none;
  opacity: 0;
}

.initialInstruction svg {
  width: 1vmin;
  fill: var(--dark-colour);
}

.initialInstruction p {
  font-size: 1.5vmin;
  line-height: 1.4;
}

.initialInstruction p:first-of-type {
  font-weight: 700;
  text-transform: uppercase;
}

.fade-out-right-toast {
  -webkit-animation: fade-out-right-toast 0.75s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: fade-out-right-toast 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

@-webkit-keyframes fade-out-right-toast {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
    opacity: 0;
  }
}
@keyframes fade-out-right-toast {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
    opacity: 0;
  }
}

.fade-in-right-toast {
  -webkit-animation: fade-in-right-toast 0.75s
    cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-right-toast 0.75s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in-right-toast {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right-toast {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------- */
/*                                    MENU                                    */
/* -------------------------------------------------------------------------- */

.menu-fade-panel {
  display: block;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.42, 1.65, 0.32, 1);
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1198;
}

.menu-fade-panel.visible {
  opacity: 1;
  pointer-events: auto;
}

#settingsButton {
  position: absolute;
  left: 3.5vmin;
  bottom: 2.5vmin;
  z-index: 1199;
}

.settings-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: fit-content;
  height: 100%;
  background: transparent;
  z-index: 1200;
  transform: translateX(-100%);
  transition: transform 0.33s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.settings-panel.open {
  transform: translateX(0);
  pointer-events: auto;
}

.settings-panel-inner {
  width: min(90vw, 400px);
  height: 100%;
  background-color: var(--light-colour);
  /* box-shadow: 0 0 2vmin rgba(0, 0, 0, 0.35); */
  padding: 2.5vmin 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  row-gap: 2vmin;
}

.settings-panel-inner h2 {
  font-size: 2.5vmin !important;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark-colour);
}

.settings-panel-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 2vmin;
  background-color: var(--white-colour);
  width: 100%;
  height: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.side-menu-button {
  background-color: var(--dark-colour);
  width: 320px;
  height: 5vmin;
  min-height: 5vmin;
  border: none;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 20% 1% 79%;
  grid-template-rows: 1fr;
  box-shadow: rgba(0, 0, 0, 0.2) 0px -0.25vmin 0px inset;
  cursor: pointer;
  border-radius: 0.5vmin;
  user-select: none;
}

.side-menu-button p {
  font-weight: 200 !important;
}

.side-menu-div {
  width: 2px;
  height: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.side-menu-div-horiz {
  width: 100%;
  height: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-tip {
  display: none;
  width: 80%;
  height: fit-content;
  row-gap: 1vmin;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.menu-tip-text {
  width: 100%;
  text-align: center;
}

.menu-tip-text p {
  font-size: 1.5vmin;
  text-wrap: balance;
}

.side-menu-button p {
  color: var(--white-colour);
  font-size: 1.5vmin;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.side-menu-button svg {
  fill: var(--white-colour);
  width: 2vmin;
  height: 2vmin;
  aspect-ratio: 1;
}

.side-menu-button:hover {
  filter: brightness(1.2);
  box-shadow: rgba(0, 0, 0, 0.5) 0px -0.25vmin 0px inset;
}

/* .menu {
  position: absolute;
  bottom: 8.5vmin;
  left: 2.5vmin;
  display: flex;
  flex-direction: column-reverse;
  row-gap: 2vmin;
  z-index: 99999;
  padding: 2vmin 1vmin;
  border-radius: 1vmin;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
}

.hiddenButton {
  position: relative;
  pointer-events: none;
} /*

/* -------------------------------------------------------------------------- */
/*                                   DIALOG                                   */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                   DIALOG                                   */
/* -------------------------------------------------------------------------- */

/* .custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1999;
}

.custom-dialog {
  background-color: var(--light-colour);
  padding: 4vmin;
  border-radius: 1vmin;
  width: fit-content;
  max-width: 90vw;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.75vmin;
  color: var(--dark-colour);
  text-align: center;
  text-wrap: balance;
  transition: background-color 0.25s ease-in;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.2vmin 0.4vmin,
    rgba(0, 0, 0, 0.3) 0px 0.7vmin 1.3vmin -0.3vmin,
    rgba(0, 0, 0, 0.2) 0px -0.3vmin 0px inset;
}

.custom-dialog .circleButton {
  margin-top: 4vmin;
}

.custom-dialog p {
  font-weight: 200;
  font-size: 3vmin;
  color: var(--black-colour);
} */

/* -------------------------------------------------------------------------- */
/*                                   SLIDER                                   */
/* -------------------------------------------------------------------------- */

.slider-container {
  width: 100vw;
  height: 100vh;
  background-color: var(--light-colour);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  /* --------------------------- Position above menu -------------------------- */
  z-index: 100001;
}

.slider-container h1 {
  margin-bottom: 2vmin;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

.slider-container p {
  margin-top: 6vmin;
  text-transform: uppercase;
  text-align: center;
  height: 10vmin;
}

.slider-container .circleButton {
  margin-top: 6vmin;
}

.range {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 90vw;
  max-width: 600px;
  background-color: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  padding: 2vmin;
  border-radius: 2vmin;
}

.range__slider {
  width: 70%;
}

.range__value {
  width: 20%;
  text-align: center;
  background-color: var(--white-colour);
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.2vmin 0.4vmin,
    rgba(0, 0, 0, 0.3) 0px 0.7vmin 1.3vmin -0.3vmin,
    rgba(0, 0, 0, 0.2) 0px -0.3vmin 0px inset;
}

.slider-button-holder {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-group label {
  text-transform: uppercase;
  font-size: 2vmin;
  color: var(--black-colour);
}

.form-group span {
  font-size: 5vmin;
  font-weight: 600;
  color: var(--black-colour);
}

.range__slider [type='range'] {
  width: 100%;
  appearance: none;
  height: 2vmin;
  border-radius: 1vmin;
  background: var(--white-colour);
  outline: none;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* custom thumb */
.range__slider [type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  background: var(--dark-colour);
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.2vmin 0.4vmin,
    rgba(0, 0, 0, 0.3) 0px 0.7vmin 1.3vmin -0.3vmin,
    rgba(0, 0, 0, 0.2) 0px -0.3vmin 0px inset;
}

.range__slider [type='range']::-moz-range-thumb {
  width: 5vmin;
  height: 5vmin;
  border: 0;
  border-radius: 50%;
  background: var(--dark-colour);
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.2vmin 0.4vmin,
    rgba(0, 0, 0, 0.3) 0px 0.7vmin 1.3vmin -0.3vmin,
    rgba(0, 0, 0, 0.2) 0px -0.3vmin 0px inset;
}

/* remove border */
input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}

/* -------------------------------------------------------------------------- */
/*                                   BUTTONS                                  */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                CIRCLE BUTTON                               */
/* -------------------------------------------------------------------------- */

.circleButton {
  width: 5vmin;
  height: auto;
  aspect-ratio: 1;
  background-color: var(--light-colour);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.2vmin 0.4vmin,
    rgba(0, 0, 0, 0.3) 0px 0.7vmin 1.3vmin -0.3vmin,
    rgba(0, 0, 0, 0.2) 0px -0.3vmin 0px inset;
  cursor: pointer;
  border: none;
}

.circleButton:hover {
  background-color: var(--dark-colour);
}

.circleButton:hover svg {
  fill: var(--light-colour);
}

/* .circleButton:hover ~ p {
  visibility: visible;
} */

.circleButton svg {
  width: 2.75vmin;
  height: auto;
  aspect-ratio: 1;
  fill: var(--dark-colour);
}

.buttonAndLabel {
  display: flex;
  align-items: center;
  column-gap: 1vmin;
}

.buttonAndLabel p {
  text-transform: uppercase;
  font-size: 1.5vmin;
  color: var(--black-colour);
  font-weight: 200;
  pointer-events: none;
  user-select: none;
  /* background-color: var(--light-colour); */
  padding: 0.5vmin 0.75vmin;
  border-radius: 0.5vmin;
}

/* -------------------------------------------------------------------------- */
/*                              CHECKBOX / SWITCH                             */
/* -------------------------------------------------------------------------- */

.highlightOption p {
  font-size: 1.75vmin;
}

/* From Uiverse.io by vihstorck */
.switch {
  /* switch */
  --switch-width: 9.2vmin;
  --switch-height: 4.8vmin;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: var(--dark-colour);
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 3.6vmin;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 1.6vmin;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 1.6vmin;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all 0.2s ease-in-out;
}

.switch input {
  display: none;
}

.switch {
  display: inline-block;
}

.switch svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  height: auto;
}

.switch .checkmark {
  width: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.switch .cross {
  width: var(--icon-cross-size);
  color: var(--icon-cross-color);
}

.slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
}

.circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: inherit;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
}

.slider::before {
  content: '';
  position: absolute;
  width: var(--effect-width);
  height: var(--effect-height);
  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
  background: var(--effect-bg);
  border-radius: var(--effect-border-radius);
  -webkit-transition: var(--effect-transition);
  -o-transition: var(--effect-transition);
  transition: var(--effect-transition);
}

/* actions */

.switch input:checked + .slider {
  background: var(--switch-checked-bg);
}

.switch input:checked + .slider .checkmark {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.switch input:checked + .slider .cross {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.switch input:checked + .slider::before {
  left: calc(
    100% - var(--effect-width) - (var(--effect-width) / 2) -
      var(--switch-offset)
  );
}

.switch input:checked + .slider .circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
}

.highlight {
  background: var(--dark-colour);
  color: var(--light-colour);
  border-radius: 1vmin;
  padding: 0.5vmin 1vmin;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------------------------------- */
/*                                  ANIMATION                                 */
/* -------------------------------------------------------------------------- */

.bounce-top {
  animation: bounce-top 0.5s linear both;
}
@keyframes bounce-top {
  0% {
    transform: translateY(-45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.shake-vertical {
  animation: shake-vertical 0.8s linear both;
}
@keyframes shake-vertical {
  0%,
  100% {
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    transform: translateY(8px);
  }
  80% {
    transform: translateY(6.4px);
  }
  90% {
    transform: translateY(-6.4px);
  }
}

.jello-horizontal {
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}

@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.slide-in-btm {
  -webkit-animation: slide-in-btm 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-btm 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-btm {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-btm {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.bounce-in-top {
  -webkit-animation: bounce-in-top 0.5s both;
  animation: bounce-in-top 0.5s both;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}