/* === BURGER BARS === */

:root {
    --burger-trigger-width: 40px;
    --burger-trigger-thickness: 4px;
    --burger-trigger-color: var(--brand-color-main);;
}

.burger-container {
    display: inline-block;
    position: relative;
    width: var(--burger-trigger-width);
    height:20px
}

.burger-bars {
    width: var(--burger-trigger-width);
    height: var(--burger-trigger-thickness);
    background-color: var(--burger-trigger-color);
    transition:all 300ms ease-in-out 20ms;
    border-radius: var(--radius-medium);
}

.burger-bars > span {
    font-size: 10px;
    line-height: 0.5;
    position: absolute;
    width: 100%;
    text-align: center;
}

.burger-first {
    position: absolute;
    top:0px;
}

.burger-first.active {
    position: absolute;
    top: 10px;
     transform:rotateZ(225deg);
}

.burger-second {
    position: absolute;
    top:10px;
    background-color: transparent !important;
}

.burger-second.active {
    position: relative;
    top: 10px;
    transform:scale( 0, 1 );
}

.burger-third {
    position: absolute;
    top:20px;
}

.burger-third.active {
    position: absolute;
    top: 10px;
    transform:rotateZ(-45deg);
}

.burger-trigger {
    display: inline-block;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    cursor:pointer
}

/* === OFFCANVAS MENU === */

.offcanvas-menu {
    position: fixed;
    z-index: 1001;
    display: flex;
    overflow-y: scroll;
    flex-flow: column;
    overflow-y: scroll;
    gap: var(--gap-outter);
    top: 0px;
    right: 0px;
    width: 100vw;
    height: 100vh;
    max-width: 550px;
    max-height: 100vh;
    min-height: 100dvh;
    padding: 140px var(--grid__small) var(--grid__small) var(--grid__small);
    background-color: var(--brand-color-main);
    transition: all 400ms ease-in-out 20ms;
    transform: translate3d(0px,-100%,0px);
}

.offcanvas-menu.open {
    display: flex;
    flex-flow: column;
    gap: var(--gap-outter);
    width: 100vw;
    height: 100dvh;
    max-width: 550px;
    max-height: 100dvh;
    min-height: 100vh;
    background-color: var(--brand-color-main);
    transition: all 400ms ease-in-out 20ms;
    transform: translate3d(0px,0%,0px);
}