.line {
  transition: all 0.3s;
}

.active .top {
  top: 20px;
  transform: rotate(45deg);
}


.active .middle {
  opacity: 0;
}

.active .bottom {
  top: 20px;
  transform: rotate(-45deg);
}

div {
  overflow-x: hidden
}

.menu {
  transform: scaleY(0);
  transform-origin: top;
}

.menu.oppen {
  opacity: 1;
  transform: scaleY(1);
}

.quantico-regular {
  font-family: "Quantico", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.quantico-bold {
  font-family: "Quantico", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.quantico-regular-italic {
  font-family: "Quantico", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.quantico-bold-italic {
  font-family: "Quantico", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.rgbcolorhover:hover {
  animation: colorShift 1s infinite alternate;
}

.slide-in {
  animation: slidein 0.75s infinite alternate;
}


@keyframes colorShift {
  0% {
    background-color: rgb(111, 255, 111);
  }

  100% {
    background-color: rgb(45, 242, 42)
  }
}

@keyframes slidein {
  from {
    transform: translateY(-20%);
  }

  to {
    transform: translateY(20%);
  }
}