/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: -webkit-transform 400ms;
    transition: -webkit-transform 400ms;
    -o-transition: transform 400ms;
    transition: transform 400ms;
    transition: transform 400ms, -webkit-transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hamRotate.active {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hamRotate180.active {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* ===================================== Dark Theme ===================================== */

@media (prefers-color-scheme: dark) {
    .line {
        fill: none;
        -webkit-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        -o-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke: #fff;
        stroke-width: 5.5;
        stroke-linecap: round;
    }
}

/* ===================================== Light Theme ===================================== */

@media (prefers-color-scheme: light) {
    .line {
        fill: none;
        -webkit-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        -o-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke: #000;
        stroke-width: 5.5;
        stroke-linecap: round;
    }
}



.ham6 .top {
    stroke-dasharray: 40 172;
}

.ham6 .middle {
    stroke-dasharray: 40 111;
}

.ham6 .bottom {
    stroke-dasharray: 40 172;
}

.ham6.active .top {
    stroke-dashoffset: -132px;
}

.ham6.active .middle {
    stroke-dashoffset: -71px;
}

.ham6.active .bottom {
    stroke-dashoffset: -132px;
}