header{
  height: 7vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: white;
}

#left{
  height: 100%;
}

#left img{
  height: 100%;
}

#middle{
  height: 100%;
  text-align: center;
  color: #e1003c;
  align-items: center;
  display: flex;
  font-size: 4vh;
  font-weight: bold;
}

#right{
  height: 100%;
}

#toggle {
  background-color: #ffffff;
  width: 7vh;
  height: 7vh;
  display: flex;
  align-self: flex-end;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
}

.line {
  background-color: #e1003c;
  width: 5vh;
  height: 1vh;
  display: block;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

#toggle.active .line:nth-child(2) {
  opacity: 0;
}

#toggle.active .line:nth-child(1) {
  transform: translateY(2vh) rotate(45deg);
}

#toggle.active .line:nth-child(3) {
  transform: translateY(-2vh) rotate(-45deg);
}

.in{
  animation: rotateIn 0.25s linear;
  animation-fill-mode: forwards;
}

.out{
  animation: rotateOut 0.25s linear;
  animation-fill-mode: forwards;
}

.resetOne{
  animation: resetOne 0.25s linear;
  animation-fill-mode: forwards;
}

.resetTwo{
  animation: resetTwo 0.25s linear;
  animation-fill-mode: forwards;
}

@keyframes resetOne {
  0% {
    rotate: -25deg;
  }
  100% {
    rotate: 25deg;
  }
}

@keyframes resetTwo {
  0% {
    rotate: 25deg;
  }
  100% {
    rotate: -25deg;
  }
}

@keyframes rotateIn {
  0% {
    rotate: 25deg;
  }
  100% {
    rotate: -25deg;
  }
}

@keyframes rotateOut {
  0% {
    rotate: -25deg;
  }
  100% {
    rotate: 25deg;
  }
}

/* @keyframes resetOne {
  0% {
    rotate: 25deg;
  }
  100% {
    rotate: 0deg;
  }
}

@keyframes resetTwo {
  0% {
    rotate: -25deg;
  }
  100% {
    rotate: 0deg;
  }
} */