html.vapetocart {
    --color1: rgba(187, 0, 0, 1);
    --color2: #006b00;
    --color3: #000000;
    --color4: #fff;
    --dmsans:"DM Sans";
    --fjalla:"Fjalla One";
    --accordion-btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.53 9.53a.75.75 0 0 0 0-1.06H5.47a.75.75 0 0 0 0 1.06l6 6a.75.75 0 0 0 1.06 0z'/%3E%3C/svg%3E");
    --accordion-btn-active-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12.53 8.47a.75.75 0 0 0-1.06 0l-6 6a.75.75 0 0 0 0 1.06h13.06a.75.75 0 0 0 0-1.06z'/%3E%3C/svg%3E");
}
h1,h2,h3,h4,h5,h6{
    font-family: var(--fjalla), sans-serif;
    font-weight: normal !important;
}
.ffj{font-family:var(--fjalla), sans-serif;font-weight: 400;}
h2.ptitle{
    font-family: var(--dmsans),sans-serif;
}

@media all and (min-width: 1200px) {
    .primary-menu .dropdown-large-menu {
        /*width: 630px;*/
        padding: 1rem;
        min-width: 250px;
        & .lcount2 {
            grid-template-columns: repeat(3, 1fr);
        }
        & .lcount2.dcount0 {
            grid-template-columns: repeat(1, 1fr);
        }
        & .lcount3 {
            grid-template-columns: repeat(3, 1fr);
        }
        & .lcount4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    .primary-menu .navbar-nav > li.nav-item {
        position: relative;
    }

    .primary-menu .navbar-nav li > a.nav-link {
        padding-right: 0.6rem;
        padding-left: 0.6rem;
        height: 42px;
        border-bottom: 0px solid #e1e1e1;
        font-family: "Fjalla One", sans-serif;
        font-weight: 400;
        &:hover:before
        {
            content: "";
            background-color: var(--color1);
            height: 3px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all 2s ease-out;
        }
    }

    .primary-menu .navbar-nav a.nav-link:hover,
    .primary-menu .navbar-nav a.nav-link:focus,
    .primary-menu .nav-link.active,
    .primary-menu .show>.nav-link {
        background-color: #f4f4f4;
        color: var(--color1);
    }

    .primary-menu {
        background-color: rgba(33, 37, 41, 0);
    }

    .primary-menu .navbar-nav .nav-item .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: -30%;
        transform: translate(-50%);
        box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
        -webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
        animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown
    }
    .primary-menu .navbar-nav .nav-item:hover>.dropdown-menu {
        display: block;
    }


    .primary-menu .navbar-nav .nav-item .dropdown-menu .submenu {
        display: none;
        position: absolute;
        top: 0%;
        left: 100%;
        box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
        -webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
        animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown
    }


    .primary-menu .navbar-nav .nav-item:hover>.submenu {
        display: block;
    }


}
.mcanvas {
    background-color: var(--color3);
    & .mobile-menu {
        background-color: var(--color3);
        & .nav.flex-column.accordion.accordion-flush  li, .accordion.accordion-flush > .accordion-item {
            background: var(--color3);
            border:0;
        }
        .accordion {
            .accordion-item > .nav-link, .accordion-header {
                margin: 4px 8px;
                border-radius: 4px;
                background-color: rgba(255,255,255,0.9);
                color: var(--color3);
                border: 0;
                font-family: var(--fjalla), sans-serif;
                height: 40px;
                align-items: center;
                display: flex;
                font-size: 16px;
            & .accordion-button {
                background-color:  rgba(255,255,255,0.05);
                border-radius: 8px;
                font-family: var(--fjalla), sans-serif;
                border: 0;
                & span{
                    color: var(--color3);
                    font-size: 15px;
                }
            }
            }
            .level2.isSimple .nav-link,.level1.isSimple .nav-link {
                background-color: rgba(255,255,255,0.3);
                margin: 4px 8px;
                border-radius: 4px;
                font-weight: 400;
                color: var(--color4);
                border: 0;
                font-family: var(--fjalla), sans-serif;
                height: 40px;
                display: flex;
                align-items: center;
            }
        }
    }
}
footer h2.h4 {
    position: relative;
    &:before {
        background: red;
        content: "";
        position: absolute;
        bottom: -3px;
        width: 75px;
        height: 2px;
        transition: linear 2s 2s;
    }
}