#main-menu-mobile {
    .btn-nav-mobile {
        display: inline-block;
        height: 22px;
        width: 22px;
        cursor: pointer;
        position: relative;
        vertical-align: middle;
        @include transition(all 300ms linear 0ms);
        &:before, &:after, span {
            @include transition(all 300ms linear 0ms);
            content: "";
            background-color: var(--menu-regular);
            display: block;
            height: 3px;
            left: 0;
            right: 0;
            position: absolute;
            // ontop
            .header-ontop &{
    			background-color: var(--ontop-regular);
    		}
    		// sticky
            .header-sticky &{
    			background-color: var(--sticky-regular);
    		}
        }
        &:before {
            top: 0px;
        }

        span {
            top: 8px;
        }
        &:after{
        	top: 17px;
        }

        &.opened{
            &:before {
                top: 8px;
                @include transform(rotate(45deg));
            }
            &:after {
                @include transform(rotate(-45deg));
                top: 8px;
            }
            span{
                display: none;
            }
        }
    }

}
@media (min-width: $screen-mobile-menu-min){
	.cms-navigation-attrs:not(.has-atts),
	#main-menu-mobile{
		display: none;
	}
}
@media (max-width: $screen-mobile-menu-max){
	.cms-primary-menu,
	ul.sub-menu {
		> li {
			> a{
				color: var(--dropdown-regular);
				&:hover{
					color: var(--dropdown-hover);
				}
			}
			&.current-menu-ancestor,
			&.current-menu-item {
				> a{
					color: var(--dropdown-active);
				}
			}
		}
	}
	ul.sub-menu a{
		font-weight: 400!important;
	}
	.cms-header-right{
		position: unset;
	}
	.cms-navigation{
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 50px);
		visibility: hidden;
		background: var(--dropdown-bg); 
		height: calc(100vh - var(--header-height));
		overflow-y: scroll;
		padding-bottom: 100px;
		@include opacity(0);
		@include transition();
		&.navigation-open{
			top: 100%;
			visibility: visible;
			@include opacity(1);
		}
	}
	#cms-primary-menu.horizontal{
		margin: 0;
		padding: 10px 15px;
		li {
			flex: 0 0 100%;
			padding: 0;
			a{
				padding: 5px 0;
				display: block;
			}
		}
	}
	.cms-primary-menu{
		color: var(--dropdown-regular);
		padding: 5px 0!important;
		> li{
			padding: 5px 0;
		}
		.current-menu-item > a{
			color: var(--dropdown-active);
		}
		.sub-menu{
			display: none;
			font-size: var(--menu-font-size);
			border-bottom: 1px solid $border-color;
			&.submenu-open{
				padding-top: 5px;
			}
			.sub-menu li{
				padding-left: 15px;
				[dir="rtl"] &{
					padding-left: 0;
					padding-right: 15px;
				}
			}
		}
	}
	.main-menu-toggle {
        @include transition(all 300ms linear 0ms);
        cursor: pointer;
        background-color: var(--dropdown-item-bg-hover);
        &:before {
            @include font-cmsi($menu_arrows_down);
        }
		&.open:before{
	    	@include font-cmsi($menu_arrows_up);
	    }
    }
}