.burgerMenu {
    position: relative;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.burgerText {
    letter-spacing: -0.03em;
    font-weight: 500;
    line-height: 1;
    font-size: .85em;
    margin-top: 6px;
    margin-right: -10px;
    color: #a75a30;
}

@media (max-width: 991px) {
    .burgerMenu {
        right: -20px;
        top: -15px;
    }
}

.burgerMenu svg {
    height: 80px;
    position: absolute;
    width: 80px;
    right: 0
}

.plates {
    display: flex;
    flex-wrap: wrap;
    max-height: 160px;
    width: 640px
}

@media(max-width:640px) {
    .plates {
        width: 320px
    }
}

.plate {
    height: 80px;
    width: 80px;
    margin-top: 5px;
    cursor: pointer
}

.burger {
    filter: url(#gooeyness)
}

.x {
    transform: scale(0);
    transition: transform 400ms
}

.line {
    fill: none;
    stroke: #a75a30;
    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
}

.plate1 .line2 {
    stroke-dasharray: 40 200;
    stroke-dashoffset: 0
}

.plate1 .line3 {
    stroke-dasharray: 40 179;
    stroke-dashoffset: 0
}

.active .line {
    transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms
}

.active.plate1 .line1 {
    transform: scale(0, 1);
    transition: transform 500ms 100ms
}

.active.plate1 .line2 {
    stroke-dasharray: 5px 200;
    stroke-dashoffset: -164px
}

.active.plate1 .line3 {
    stroke-dasharray: 5px 179;
    stroke-dashoffset: -142px
}

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

.plate2 .line1 {
    stroke-dasharray: 21 185.62753295898438;
    transition-delay: 0
}

.plate2 .line2 {
    stroke-dasharray: 21 178.6514129638672;
    transition-delay: 30ms
}

.plate2 .line3 {
    stroke-dasharray: 21 197.92425537109375;
    transition-delay: 60ms
}

.plate2 .line4 {
    stroke-dasharray: 21 190.6597137451172;
    transition-delay: 90ms
}

.plate2 .line5 {
    stroke-dasharray: 21 208.52874755859375;
    transition-delay: 120ms
}

.plate2 .line6 {
    stroke-dasharray: 21 186.59703063964844;
    transition-delay: 150ms
}

.active.plate2 .line1 {
    stroke-dasharray: 5 185.62753295898438;
    stroke-dashoffset: -141px
}

.active.plate2 .line2 {
    stroke-dasharray: 5 178.6514129638672;
    stroke-dashoffset: -137px
}

.active.plate2 .line3 {
    stroke-dasharray: 5 197.92425537109375;
    stroke-dashoffset: -176px
}

.active.plate2 .line4 {
    stroke-dasharray: 5 190.6597137451172;
    stroke-dashoffset: -159px
}

.active.plate2 .line5 {
    stroke-dasharray: 5 208.52874755859375;
    stroke-dashoffset: -139px
}

.active.plate2 .line6 {
    stroke-dasharray: 5 186.59703063964844;
    stroke-dashoffset: -176px
}

.active.plate2 .x {
    transition: transform 400ms 250ms
}

.plate3 .line {
    transition: stroke-dasharray 300ms 200ms, stroke-dashoffset 300ms 200ms, transform 300ms 200ms
}

.plate3 .line1 {
    stroke-dasharray: 21 109
}

.plate3 .line2 {
    stroke-dasharray: 21 112
}

.plate3 .line3 {
    stroke-dasharray: 21 102
}

.plate3 .line4 {
    stroke-dasharray: 21 103
}

.plate3 .line5 {
    stroke-dasharray: 21 110
}

.plate3 .line6 {
    stroke-dasharray: 21 115
}

.plate3 .x {
    transition: transform 400ms 50ms
}

.active.plate3 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms
}

.active.plate3 .line1 {
    stroke-dasharray: 5 109;
    stroke-dashoffset: -95px
}

.active.plate3 .line2 {
    stroke-dasharray: 5 112;
    stroke-dashoffset: -96px
}

.active.plate3 .line3 {
    stroke-dasharray: 5 102;
    stroke-dashoffset: -79px
}

.active.plate3 .line4 {
    stroke-dasharray: 5 103;
    stroke-dashoffset: -78px
}

.active.plate3 .line5 {
    stroke-dasharray: 5 110;
    stroke-dashoffset: -63px
}

.active.plate3 .line6 {
    stroke-dasharray: 5 115;
    stroke-dashoffset: -64px
}

.active.plate3 .x {
    transition: transform 400ms 100ms
}

.plate4 .x {
    transition: transform 400ms
}

.plate4 .line {
    transform-origin: 50%;
    transition: transform 400ms 100ms
}

.active.plate4 .line {
    transition: transform 400ms
}

.active.plate4 .line1 {
    transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(.7)
}

.active.plate4 .line2 {
    transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(.7)
}

.active.plate4 .line3 {
    transform: translateY(0) rotate(45deg) scale(.7)
}

.active.plate4 .line4 {
    transform: translateY(0) rotate(-45deg) scale(.7)
}

.active.plate4 .line5 {
    transform: translateX(18px) translateY(3px) rotate(45deg) scale(.7)
}

.active.plate4 .line6 {
    transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(.7)
}

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

.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
}

.plate6 .line {
    transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms
}

.plate6 .line1 {
    stroke-dasharray: 21 127
}

.plate6 .line2 {
    stroke-dasharray: 21 106
}

.plate6 .line3 {
    stroke-dasharray: 21 106
}

.plate6 .line4 {
    stroke-dasharray: 21 126
}

.plate6 .x {
    transition: transform 400ms 50ms
}

.active.plate6 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms
}

.active.plate6 .line1 {
    stroke-dasharray: 2 127;
    stroke-dashoffset: -94px
}

.active.plate6 .line2 {
    stroke-dasharray: 2 106;
    stroke-dashoffset: -91px
}

.active.plate6 .line3 {
    stroke-dasharray: 2 106;
    stroke-dashoffset: -91px
}

.active.plate6 .line4 {
    stroke-dasharray: 2 127;
    stroke-dashoffset: -94px
}

.active.plate6 .x {
    transition: transform 400ms 50ms
}

.plate7 .line {
    transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms
}

.plate7 .line1 {
    stroke-dasharray: 21 102
}

.plate7 .line2 {
    stroke-dasharray: 21 92
}

.plate7 .line3 {
    stroke-dasharray: 21 97
}

.plate7 .line4 {
    stroke-dasharray: 21 97
}

.plate7 .line5 {
    stroke-dasharray: 21 92
}

.plate7 .line6 {
    stroke-dasharray: 21 102
}

.plate7 .x {
    transition: transform 400ms 50ms
}

.active.plate7 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms
}

.active.plate7 .line1 {
    stroke-dasharray: 2 102;
    stroke-dashoffset: -102px
}

.active.plate7 .line2 {
    stroke-dasharray: 2 92;
    stroke-dashoffset: -92px
}

.active.plate7 .line3 {
    stroke-dasharray: 2 97;
    stroke-dashoffset: -97px;
    transition-delay: 20ms
}

.active.plate7 .line4 {
    stroke-dasharray: 2 97;
    stroke-dashoffset: -97px;
    transition-delay: 20ms
}

.active.plate7 .line5 {
    stroke-dasharray: 2 92;
    stroke-dashoffset: -90px;
    transition-delay: 40ms
}

.active.plate7 .line6 {
    stroke-dasharray: 2 102;
    stroke-dashoffset: -100px;
    transition-delay: 40ms
}

.active.plate7 .x {
    transition: transform 400ms 50ms
}

.plate8 .line {
    transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms
}

.plate8 .line1 {
    stroke-dasharray: 21 201
}

.plate8 .line2 {
    stroke-dasharray: 21 201;
    transition-delay: 20ms
}

.plate8 .line3 {
    stroke-dasharray: 21 201;
    transition-delay: 40ms
}

.plate8 .line4 {
    stroke-dasharray: 21 201;
    transition-delay: 60ms
}

.plate8 .line5 {
    stroke-dasharray: 21 201;
    transition-delay: 80ms
}

.plate8 .line6 {
    stroke-dasharray: 21 201;
    transition-delay: 100ms
}

.plate8 .x {
    transition: transform 400ms 50ms
}

.active.plate8 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms
}

.active.plate8 .line1 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px
}

.active.plate8 .line2 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 20ms
}

.active.plate8 .line3 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 40ms
}

.active.plate8 .line4 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 60ms
}

.active.plate8 .line5 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 80ms
}

.active.plate8 .line6 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 100ms
}

.active.plate8 .x {
    transition: transform 400ms 50ms
}