.navigation {
    position: relative;
}
.navbar {
    padding: 10px 0;
    background: white !important;
    @media screen and(max-width:768px) {
        margin: 0 20px;
    }
    .navbar-collapse {
        transition: all 0.35s ease-out;
        transform-origin: center left;
    }
    .navbar-nav {
        margin-left: auto;
        @media screen and(max-width:992px) {
            background: #00000078;
        }
        .nav-item {
            padding: 0 5px;
            text-align: center;
        }
        .nav-link {
            color: $color-white;
            font-weight: 500;
            &:hover {
                color: $color-brand !important;
            }
        }
    }
}
.bg-light {
    background-color: transparent !important;
}
.navbar-light {
    .navbar-brand {
        max-width: 150px;
        img {
            width: 100%;
        }
        @media screen and(max-width:768px) {
        }
    }
    .brand-shop {
        color: $color-black !important;


    }
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
    color: rgb(0, 0, 0);
    border: 3px solid;
    border-color: transparent black;
    border-color: transparent;
    border-bottom-color: black !important;
    padding-bottom: 5px;
}
.navbar-toggler span {
    display: block;
    background-color: #3c7cc5;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}
/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}
/**
     * Animate collapse into X.
     */
/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
}
/**
     * Animate collapse open into hamburger menu
     */
/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
}
