@charset "UTF-8";

/* Common Css must add */
svg {
  height: 40px;
  position: absolute;
  width: 40px;
  cursor: pointer;
  /*   border: 1px solid black; */
  background-color: #fff;
}

.plate {
  height: 41px;
  width: 41px;
}
.burger {
  filter: url(#gooeyness);
}
.x {
  transform: scale(0);
  transition: transform 400ms;
}
.line {
  fill: none;
  stroke: #122943;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms,
    transform 500ms 200ms;
}
.x .line {
  stroke-width: 5.5px;
}

.active .x {
  transform: scale(1);
  transition: transform 400ms 350ms;
}

.plate5 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms,
    transform 400ms 100ms;
}
.plate5 .line1 {
  stroke-dasharray: 40 40;
}
.plate5 .line2 {
  stroke-dasharray: 21 39;
}
.plate5 .line3 {
  stroke-dasharray: 21 39;
}
.plate5 .line4 {
  stroke-dasharray: 40 40;
}
.plate5 .x {
  transition: transform 400ms 50ms;
}

.active.plate5 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate5 .line1 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}
.active.plate5 .line2 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}
.active.plate5 .line3 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}
.active.plate5 .line4 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}
.active.plate5 .x {
  transition: transform 400ms 50ms;
}

@media all and (max-width: 767px) {
    svg {
        height: 35px;
        width: 35px;
    }

    .plate {
        height: 36px;
        width: 36px;
    }
}