/* -------------------------------------------------- BURGER MENU -------------------------------------------------- */
.bars {
    /* font-size: 2em; */
    position: relative;
    transform-origin: 50% 50%;
    transition: all var(--animation);
    width: 1em;
    height: 1em;
    cursor: pointer;
    transform: rotate(0.01deg);
}

.bars:before {
    position: absolute;
    content: "";
    display: block;
    border: 2px solid var(--main);
    border-width: 2px 0 2px 0;
    width: 100%;
    height: calc(100% - 4px);
    top: 0%;
    transition: all var(--animation);
}

.bars.active {
    transform: rotate(45deg);
}

.bars.active:before {
    border-width: 1px 0 1px 0;
    top: calc(50% - 1px);
    height: 0%;
    transform: rotate(90deg);
    transition: all var(--animation);
}

.bars:after {
    top: calc(50% - 1px);
    position: absolute;
    content: "";
    display: block;
    border: 2px solid var(--main);
    border-width: 2px 0 0px 0;
    width: 100%;
    height: 0px;
    transition: all var(--animation);
}

.bars.active:before,
.bars.active:after,
.bars:hover:before,
.bars:hover:after {
    border-color: var(--contrast);
}

.bars.close:before {
    border-color: var(--contrast);
    border-width: 1px 0 1px 0;
    top: calc(50% + 1px);
    height: 0%;
    transform: rotate(90deg);
}

.bars.close:after {
    border-color: var(--contrast);

}

/* -------------------------------------------------- PLUS -------------------------------------------------- */

.plus {
    /* font-size: 2em; */
    transform-origin: 50% 50%;
    transition: transform var(--animation);
    font-weight: 100;
    width: 1em;
    height: 1em;
    cursor: pointer;
    transform: rotate(0.01deg);
}

.plus:before {
    position: absolute;
    content: "";
    display: block;
    border: 2px solid var(--main);
    border-width: 2px 0 0 0;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0%;
    transition: all var(--animation);
}

.plus:after {
    transform: rotate(-90deg);
    left: 50%;
    top: 0%;
    position: absolute;
    content: "";
    display: block;
    border: 2px solid var(--main);
    border-width: 2px 0 0 0;
    width: 100%;
    height: 100%;
    transition: all var(--animation);
}

.plus.active {
    transform: rotate(45deg);
}

.plus.active:before,
.plus.active:after,
.plus:hover:before,
.plus:hover:after {
    border-color: var(--contrast);
}

.plus.active:before {
    width: 100%;
    height: 100%;
    left: 0%;
}

.plus.active:after {
    width: 100%;
    height: 100%;
    top: 0%;
}


.leftArrow {
    position: relative;
    transform-origin: 50% 50%;
    transition: all var(--animation);
    width: 0.8em;
    height: 0.8em;
    cursor: pointer;
    transform: rotate(0.01deg);
    /* left: var(--m); */
    /* top: 50dvh; */
}

.leftArrow:after {
    transform: rotate(-135deg);
    left: 50%;
    top: 0%;
    position: absolute;
    content: "";
    display: block;
    border: 2px solid var(--main);
    border-width: 2px 2px 0 0;
    border-color: var(--contrast);
    width: 100%;
    height: 100%;
    transition: all var(--animation);
}

.rightArrow {
    position: relative;
    transform-origin: 50% 50%;
    transition: all var(--animation);
    width: 0.8em;
    height: 0.8em;
    cursor: pointer;
    transform: rotate(0.01deg);
    /* right: var(--m); */
    /* top: 50dvh; */
}

.rightArrow:after {
    transform: rotate(45deg);
    left: -50%;
    top: 0%;
    position: absolute;
    content: "";
    display: block;
    border: 2px solid var(--main);
    border-color: var(--contrast);
    border-width: 2px 2px 0 0;
    width: 100%;
    height: 100%;
    transition: all var(--animation);
}

.symbol {
    width: 0.8em;
    height: 0.8em;
    stroke: var(--main);
    stroke-width: 2px;
    fill: none;
    margin-left: var(--m);
}