header .header-logo .logo-name {
    font-size: var(--st-font-size-l);
    color: var(--st-text-primary);
    font-weight: 500;
    text-decoration: none;
}

header .header-service-name {
    font-size: var(--st-font-size-s);
    color: var(--st-text-secondary);
}

.offcanvas-control { position: absolute; top: 0; left: 0; clip: rect(0, 0, 0, 0); }
.offcanvas-control + label { transition: left 0.2s; }
.offcanvas-control:checked + label { margin-left: 265px; }
.offcanvas-control:checked ~ .navigation ul li { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }

.navigation {
    display: none;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    list-style: none;
    background: var(--st-main-bg);
    transform: translateX(-1em);
}

.navigation ul li { position: relative; width: 320px; list-style: none; opacity: 0; height: 64px; -webkit-transform: translateX(-70%); -moz-transform: translateX(-70%); -ms-transform: translateX(-70%); -o-transform: translateX(-70%); transform: translateX(-70%); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }

.navigation ul li a { display: block; padding: 22px; margin: 0 !important;
    color: var(--st-text-primary);
    font-size: 17px; text-decoration: none; transition: color 0.2s, background 0.5s; font-weight: 400; }

.navigation ul li p { display: block; padding: 22px; margin: 0 !important;
    color: var(--st-text-primary);
    font-size: 17px; text-decoration: none; transition: color 0.2s, background 0.5s; font-weight: 500; }

.navigation ul li a:hover {
    background: var(--st-body-bg);
}

.offcanvas { color: #ffffff; margin: 0; padding: 0; height: 100%; box-sizing: border-box; overflow-x: hidden; }

.offcanvas *:before, *:after { box-sizing: inherit; }

.offcanvas .offcanvas-btn {
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 2;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    background-size: contain;
}

.toggle-button { display: block; width: 20px; position: relative;
    .wolverine { display: inline-block; padding: 15px 0; cursor: pointer; -webkit-user-select: none; opacity: .97; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
        .claws {
            position: relative;
            width: 20px;
            height: 4px;
            background: var(--st-text-primary);

            &:before, &:after {
                display: block;
                content: "";
                height: 4px;
                width: 20px;
                background: var(--st-text-primary);
                position: absolute;
                z-index: -1;
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                -webkit-transition: top .1s .2s,
                -webkit-transform .2s ease;
                -webkit-transition-delay: ease,0s;
                -moz-transition: top .1s .2s ease, -moz-transform .2s ease;
                -o-transition: top .1s .2s ease,-o-transform .2s ease;
                transition: top .1s .2s ease,transform .2s ease;
            }
            &:before { top: 8px; }
            &:after { top: -8px; }
        }
    }
}
.offcanvas-control:checked ~ .toggle-button {
    .wolverine {
        .claws { -webkit-transition: background .1s 0s; -webkit-transition-delay: ease; -moz-transition: background .1s 0s ease; -o-transition: background .1s 0s ease; transition: background .1s 0s ease; background: transparent!important;
            &:before, &:after {
                background: var(--st-text-primary);
                -webkit-transition: top .1s ease, -webkit-transform .1s .2s;
                -webkit-transition-delay: 0s, ease;
                -moz-transition: top .1s ease, -moz-transform .1s .2s ease;
                -o-transition: top .1s ease, -o-transform .1s .2s ease;
                transition: top .1s ease, transform .1s .2s ease;
                top: 0;
                width: 20px;
            }
            &:before { -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); }
            &:after { -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); }
        }
    }
}

.offcanvas .navigation.open {
    display: block !important;
    width: 320px !important;
}

.offcanvas .offcanvas-btn.open {
    display: block;
    height: auto;
    position: absolute;
    transform: translateX(270px) translateY(50%);
    padding: 0 !important;
    margin: 0 !important;
}

.offcanvas-btn.open .claws, .offcanvas-btn.open .claws:after, offcanvas-btn.open .claws:before {
    background: var(--st-main-bg);
}