#hamburgerinput {
  display: none;
}

#hamburgerlabel {
  display: block;
  cursor: pointer;
  position: absolute;
  width: 18vw;
  height: 50vw;
  max-width: 113px;
  max-height: 150px;
}

.menu--1 label,
.menu--2 label {
  bottom: 0;
}

.menu--3 label,
.menu--4 label {
  top: 0;
}

.menu--1 label,
.menu--3 label {
  right: 0;
}

.menu--2 label,
.menu--4 label {
  left: 0;
}

.line--1 {
  fill: none;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.line--2{
  fill: none;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.line--3{
  fill: none;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

circle {
  fill: #fff3;
  opacity: 0;
}

label:hover circle {
  opacity: 1;
}



.cross input:checked+svg .line--1,
  .cross input:checked+svg .line--3 {
    --length: 22.627416998;
  }

.cross input:checked+svg .line--2 {
    --length: 0;
  }

.back input:checked+svg .line--1,
  .back input:checked+svg .line--3 {
    --length: 8.602325267;
  }

.menu--1 {
  background-color: #3f77e9;
}

.menu--1 .line--1,
  .menu--1 .line--3 {
    --total-length: 126.64183044433594;
  }

.menu--1 .line--2 {
    --total-length: 70;
  }

.menu--1 input:checked+svg .line--1,
    .menu--1 input:checked+svg .line--3 {
      --offset: -94.1149185097;
    }

.menu--1 input:checked+svg .line--2 {
      --offset: -50;
    }