.sm, .sm ul, .sm li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: normal;
	direction: ltr;
	text-align: left;
}
.sm ul {
	display: none;
}
.sm li, .sm a {
	position: relative;
}
.sm:after {
	content: '';
	display: block;
	height: 0;
	font: 0px/0 serif;
	clear: both;
	overflow: hidden;
}
.sm *, .sm *:before, .sm *:after {
	box-sizing: inherit;
}
.sm a {
	display: block;
	width: 100%;
	vertical-align: middle;
	padding: .75rem 1.125rem;
	text-transform: none;
	color: var(--primary-lighter-color);
    font-family: var(--secondary-font);
	font-size: 1rem;
    font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	transition: 0.15s all ease;
}
.sm {
	background-color: var(--primary-color);
}
.sm ul {
	background-color: var(--primary-color);
}
.sm a:hover, .sm a:focus, .sm a:active, .sm li > a.highlighted, .sm li.menu-active > a {
    color: var(--primary-lighter-color);
    background-color: rgba(0,0,0,.03);
}
.sm li.menu-active.last-menu-active > a {
    background-color: var(--primary-light-color);
}
.sm a.has-submenu {
	padding-right: 50px;
}
.sm a .sub-arrow {
	position: absolute;
	top: 50%;
	left: auto;
	right: 4px;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	overflow: hidden;
	font: bold 14px/34px monospace !important;
	text-align: center;
	text-shadow: none;
}
.sm a .sub-arrow:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f078';
}
.sm a.highlighted .sub-arrow:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f077';
}
.sm li {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.sm li:first-child {
	border-top: 0;
}
.sm > li > a {
    text-transform: uppercase;
}
.sm ul a  {
	font-weight: 400;
    border-left: 8px solid transparent;
}
.sm ul ul a  {
	border-left: 16px solid transparent;
}
.sm ul ul ul a {
	border-left: 24px solid transparent;
}
.sm ul ul ul ul a {
	border-left: 32px solid transparent;
}
.sm ul ul ul ul ul a {
	border-left: 40px solid transparent;
}

@media (min-width: 992px) {
	.sm.sm-navbar {
		position: relative;
        display: flex;
        align-items: stretch;
        flex-grow: 1;
        height: 100%;
		background-color: transparent;
	}
	.sm.sm-navbar ul {
		position: absolute;
        z-index: 10;
		width: 12em;
	}
	.sm.sm-navbar a {
		white-space: nowrap;
        border-left: none;
	}
	.sm.sm-navbar ul a {
		white-space: normal;
	}
	.sm.sm-navbar > li {
        display: flex;
        align-items: stretch;
        flex: 1 1 auto;
        border-top: none;
	}
    .sm.sm-navbar > li > a {
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--secondary-color);
	}
    .sm.sm-navbar > li.menu-active > a {
        color: var(--primary-light-color);
        background-color: transparent;
    }
    .sm.sm-navbar > li > a:hover, .sm.sm-navbar > li > a:focus, .sm.sm-navbar > li > a:active, .sm.sm-navbar > li > a.highlighted {
        color: var(--secondary-color);
        background-color: transparent;
    }
    .sm.sm-navbar > li > ul {
		top: 100%!important;
	}
	.sm.sm-navbar .sm-nowrap > li > a, .sm.sm-navbar .sm-nowrap > li > :not(ul) a {
		white-space: nowrap;
	}
	.sm.sm-navbar li > a.has-submenu, .sm.sm-navbar li.menu-item-has-children > a {
		padding-right: 32px;
	}
	.sm.sm-navbar li > a .sub-arrow {
		top: 50%;
		margin-top: -6px;
		right: 10px;
		width: 14px;
		height: 16px;
		font: 12px/14px monospace !important;
		background: transparent;
		opacity: 0.4;
	}
	.sm.sm-navbar > li ul {
		box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
	}
    #magic-line {
        position: absolute;
        z-index: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        transition: 0.5s;
    }
    #magic-line > span {
        display: block;
        height: 100%;
        background-color: var(--primary-light-color);
        opacity: .15;
    }
}