:root {
  --slider-mini-color: hsl(0, 0%, 100%, 1);
  --slider-booster-mini-color: hsl(0, 100%, 42%);
}

/* -------------------------------------------------------------------------- */
/*                                MODE SWITCHER                               */
/* -------------------------------------------------------------------------- */

.mode-switcher-animation {
  animation: modeSwitcherReveal 300ms ease-in-out;
  -webkit-animation: modeSwitcherReveal 300ms ease-in-out;
}

.modeSwitcher:active {
  transform: scale(0.8);
  transition: scale 250ms ease-in-out;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition: scale 250ms ease-in-out;
  -moz-transition: scale 250ms ease-in-out;
  -ms-transition: scale 250ms ease-in-out;
  -o-transition: scale 250ms ease-in-out;
}

.settingsButton:active {
  transform: scale(0.8);
  transition: scale 250ms ease-in-out;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition: scale 250ms ease-in-out;
  -moz-transition: scale 250ms ease-in-out;
  -ms-transition: scale 250ms ease-in-out;
  -o-transition: scale 250ms ease-in-out;
}

/* -------------------------------------------------------------------------- */
/*                             ----Main Slider----                            */
/* -------------------------------------------------------------------------- */

.volume-slider__slider {
  -webkit-appearance: none;
  width: 338px;
  height: 64px;
  background: rgb(71, 71, 71, 0.4);
  outline: none;
  border-radius: 18.6px;
  overflow: hidden;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
    0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
}

.volume-slider__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0px;
  height: 64px;
  background: rgb(255, 255, 255);
  box-shadow: -100vw 0 0 100vw #fff;
}

/* -------------------------------------------------------------------------- */
/*                           ----Booster Slider----                           */
/* -------------------------------------------------------------------------- */

.volume-slider__booster {
  -webkit-appearance: none;
  width: 338px;
  height: 24px;
  background: rgb(71, 71, 71, 0.4);
  outline: none;
  border-radius: 8.6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
    0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
  -webkit-border-radius: 8.6px;
  -moz-border-radius: 8.6px;
  -ms-border-radius: 8.6px;
  -o-border-radius: 8.6px;
}

.volume-slider__booster::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0px;
  height: 0px;
  background: hsl(0, 100%, 42%);
  box-shadow: -100vw 0 0 100vw #d50000;
}

/* -------------------------------------------------------------------------- */
/*                                TAB CONTAINER                               */
/* -------------------------------------------------------------------------- */

move:hover .jump_above {
  position: relative;
  top: 0px;
  left: 0px;
  opacity: 1;
  height: 18px;
  width: 18px;
}

.jump_above {
  position: relative;
  top: -72px;
  left: 20px;
  opacity: 0.4;
  height: 14px;
  width: 14px;
}

.tab-button:active {
  animation: bounceBack 250ms ease-in-out;
  -webkit-animation: bounceBack 250ms ease-in-out;
}

.control-button {
  height: 40px;
  overflow: hidden;
}

.control-button > a {
  margin-top: 2px;
}

.control-button > img {
  margin-top: 20px;
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.control-button:hover > img {
  height: 18px;
  margin-top: 2px;
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* MINI with Rounded Thumb */
.volume-slider__slider-mini {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: rgb(71, 71, 71, 0.4);
  outline: none;
  border-radius: 99px;
  overflow: hidden;
  transition: all 0.02ms ease-in-out;
  -webkit-transition: all 0.02ms ease-in-out;
  -moz-transition: all 0.02ms ease-in-out;
  -ms-transition: all 0.02ms ease-in-out;
  -o-transition: all 0.02ms ease-in-out;
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}

.volume-slider__slider-mini::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background-color: var(--slider-mini-color);
  box-shadow: -101vw 0 0 100vw var(--slider-mini-color);
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}

.volume-slider__booster-mini {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(71, 71, 71, 0.4);
  outline: none;
  border-radius: 99px;
  overflow: hidden;
  transition: all 0.02ms ease-in-out;
  -webkit-transition: all 0.02ms ease-in-out;
  -moz-transition: all 0.02ms ease-in-out;
  -ms-transition: all 0.02ms ease-in-out;
  -o-transition: all 0.02ms ease-in-out;
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}

.volume-slider__booster-mini::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background-color: var(--slider-booster-mini-color);
  box-shadow: -101vw 0 0 100vw var(--slider-booster-mini-color);
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}

/* -------------------------------------------------------------------------- */
/*                           Cursor follow transform                          */
/* -------------------------------------------------------------------------- */

cursorFollow {
  display: inline-block;
  padding: 12px;
  top: -12px;
  left: -16px;
  position: relative;
  text-decoration: none;
  transform: translate(var(--translateX), var(--translateY)) scale(var(--scale));
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
  z-index: 1;
  --translateX: 0;
  --translateY: 0;
  -webkit-transform: translate(var(--translateX), var(--translateY))
    scale(var(--scale));
  -moz-transform: translate(var(--translateX), var(--translateY))
    scale(var(--scale));
  -ms-transform: translate(var(--translateX), var(--translateY))
    scale(var(--scale));
  -o-transform: translate(var(--translateX), var(--translateY))
    scale(var(--scale));
}
cursorFollow:not(:hover) {
  transition-property: transform;
}

cursorFollow:active {
  transform: translate(var(--translateX), var(--translateY)) scale(1.06);
  -webkit-transform: translate(var(--translateX), var(--translateY)) scale(1.06);
  -moz-transform: translate(var(--translateX), var(--translateY)) scale(1.06);
  -ms-transform: translate(var(--translateX), var(--translateY)) scale(1.06);
  -o-transform: translate(var(--translateX), var(--translateY)) scale(1.06);
}

.cur {
  position: absolute;
  height: var(--height);
  left: var(--left);
  pointer-events: none;
  top: var(--top);
  transform: translate(-50%, -50%) scale(var(--scale));
  transition-property: width, height;
  width: var(--width);

  --top: -1em;
  --left: -1em;
  --width: 1em;
  --height: 1em;
  --translateX: 0;
  --translateY: 0;
}
.cur.is-locked {
  transition-property: width, height, left, top;
}

/* -------------------------------------------------------------------------- */
/*                                 Animations                                 */
/* -------------------------------------------------------------------------- */

.scale-transformation {
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
.scale-transformation:hover {
  transform: scale(1.06);
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
}

.scale-transformation-low {
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}
.scale-transformation-low:hover {
  transform: scale(1.04);
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
}

@keyframes modeSwitcherReveal {
  from {
    transform: rotate(-90deg) scale(0.4);
    -webkit-transform: rotate(-90deg) scale(0.4);
    -moz-transform: rotate(-90deg) scale(0.4);
    -ms-transform: rotate(-90deg) scale(0.4);
    -o-transform: rotate(-90deg) scale(0.4);
  }
  to {
    transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -moz-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
  }
}

@keyframes bounceBack {
  from {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

@keyframes bounceOnReveal {
  from {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
  }
  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

.bounceOnReveal {
  animation: bounceOnReveal 250ms ease-in-out;
  -webkit-animation: bounceOnReveal 250ms ease-in-out;
}

@keyframes scrollEnd {
  from {
    margin: 0px 40px;
  }
  to {
    margin: 0px;
  }
}

.scroll-end {
  animation: scrollEnd 600ms ease-in-out;
  -webkit-animation: scrollEnd 600ms ease-in-out;
}

.cubic-jelly {
  transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shrink-up:hover {
  animation: shrinkUp 300ms ease-in-out;
  -webkit-animation: shrinkUp 300ms ease-in-out;
}

@keyframes shrinkUp {
  from {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  50% {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
  }
  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

.show-up {
  animation: show-up 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-animation: show-up 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: 25% 0%;
  opacity: 1;
}

@keyframes show-up {
  from {
    display: none;
    transform: scale(0.4) translateY(26px);
    -webkit-transform: scale(0.4) translateY(26px);
    -moz-transform: scale(0.4) translateY(26px);
    -ms-transform: scale(0.4) translateY(26px);
    -o-transform: scale(0.4) translateY(26px);
  }
  to {
    display: block;
    transform: scale(1) translateY(0px);
    -webkit-transform: scale(1) translateY(0px);
    -moz-transform: scale(1) translateY(0px);
    -ms-transform: scale(1) translateY(0px);
    -o-transform: scale(1) translateY(0px);
  }
}

/* -------------------------------------------------------------------------- */
/*                                ----TEST----                                */
/* -------------------------------------------------------------------------- */

.triangle:before,
.triangle:after {
  content: "";
  position: absolute;
  background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
  width: 12px;
  height: 12px;
  border-top-right-radius: 40%;
}
.triangle,
.triangle:before {
  border-top-right-radius: 40%;
}
.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}
.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707)
    translate(0, -50%);
}
.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}