.sm {
	box-sizing: border-box;
	position: relative;
	z-index: 9999;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	display:block;
	list-style:none;
	margin:0;
	padding:0;
	line-height:normal;
	direction:ltr;
	text-align:left;
	&::after {
		content:"";
		display:block;
		height:0;
		font:0px/0 serif;
		clear:both;
		overflow:hidden;
	}
	> li.menu-item, ul.sub-menu > li.menu-item, ul.sub-menu {
		display:block;
		list-style:none;
		margin:0;
		padding:0;
		direction:ltr;
		text-align:left;
		&:not( .custom-sub-menu ) {
			line-height:normal;
		}
	}
	> li.menu-item {
		a.disabled {
			cursor:default;
		}

		> {
			h1, h2, h3, h4, h5, h6 {
				margin:0;
				padding:0;
			}
		}
	}

	li.menu-item, li.menu-item > a {
		position:relative;
	}

	ul.sub-menu {
		display:none;
	}

	li.menu-item > a {
		display:block;
	}
	*, *::before, *::after {
		box-sizing:inherit;
	}
}

.sm-rtl,
.sm-rtl ul.sub-menu,
.sm-rtl li.menu-item {
	direction:rtl;
	text-align:right;
}

@media only screen and (min-width: 768px) {
	.header-top {
		.bgtfw-menu-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
		}
	}
}

.header-top {
	.bgtfw-menu-wrap {
		@include align-control();
	}

	.sm {
		@include align-control();
	}
}

@media only screen and (min-width: 768px) {
	.header-left, .header-right {
		&.standard-menu-enabled {
			.bgtfw-menu-wrap {
				input:not(:checked):not(.hidden)~.sm-clean {
					flex-direction: column
				}
			}
		}
	}
}

@media only screen and (max-width: 768px) {
	#masthead {
		.container {
			width: 100%;
		}
	}
}


.standard-menu-enabled {
	.site-footer .sm-clean {
		z-index: 200;
	}
	.site-header .sm-clean {
		z-index: 201;
		&#secondary-menu {
			z-index: 202;
		}
	}
	&.header-fixed {
		&.header-left, &.header-right {
			.site-header {
				z-index: 200;
			}
		}
	}

	.sm-clean {
		background: transparent;
	}
	.sm-clean li.menu-item > a,
	.sm-clean li.menu-item > a:hover,
	.sm-clean li.menu-item > a:focus,
	.sm-clean li.menu-item > a:active,
	.sm-clean li.menu-item > a.highlighted {
		display: inline-block;
		padding: 13px 20px;
		text-decoration: none;
		width: 100%;
		&.btn {
			padding: 0px 20px;
			line-height: 40px !important;
			&.btn-border-thin {
				line-height: 38px !important;
			}
			&.btn-border {
				line-height: 36px !important;
			}
			&.btn-border-thick {
				line-height: 32px !important;
			}
		}
	}
	.sm-clean a.disabled {
		color: #bbbbbb;
	}
	.sm-clean li.menu-item > a > span.sub-arrow {
		position: relative;
		right: auto;
		width: 34px;
		height: 34px;
		overflow: hidden;
		display:inline-block;
		vertical-align: middle;
		margin-top: inherit;
		margin-left: 5px;
		font: bold 16px/34px monospace !important;
		text-align: center;
		text-shadow: none;
		background: rgba(255, 255, 255, 0.5);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
	}
	.sm-clean li.menu-item > a > .sub-arrow {
		position: absolute;
		top: 50%;
		margin-top: -17px;
		left: auto;
		right: 4px;
		width: 34px;
		height: 34px;
		overflow: hidden;
		font: bold 16px/34px monospace !important;
		text-align: center;
		text-shadow: none;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 5px;
	}
	.sm-clean li.menu-item > a >  .sub-arrow::before {
		content: '+';
	}
	.sm-clean li.menu-item > a.highlighted > .sub-arrow::before {
		content: '-';
	}
	.sm-clean li.menu-item > a.highlighted > span.sub-arrow:before {
		display: block;
		content: '-';
	}
	.mobile-menu-indent .sm-clean ul.sub-menu a,
	.mobile-menu-indent .sm-clean ul.sub-menu a:hover,
	.mobile-menu-indent .sm-clean ul.sub-menu a:focus,
	.mobile-menu-indent .sm-clean ul.sub-menu a:active {
		border-left: 8px solid transparent;
	}
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu a,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu a:hover,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu a:focus,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu a:active {
		border-left: 16px solid transparent;
	}
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu a,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu a:hover,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu a:focus,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu a:active {
		border-left: 24px solid transparent;
	}
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a:hover,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a:focus,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a:active {
		border-left: 32px solid transparent;
	}
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a:hover,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a:focus,
	.mobile-menu-indent .sm-clean ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu a:active {
		border-left: 40px solid transparent;
	}

	// Desktop view.
	.site-footer,
	&:not(.header-left):not(.header-right) .site-header,
	&.boldgrid-component-menu,
	&.crio-premium-site-header {
		@media (min-width: 768px) {
			.full-width {
				.sm {
					width: 100%;
				}
			}
			.sm-clean ul.sub-menu {
				position: absolute;
				width: 12em;
			}
			.sm-clean li.menu-item {
				float: left;
			}

			.sm-clean:not( .sm-vertical ) {
				li.menu-item.item-has-btn {
						margin-left: 20px;
						margin-right: 20px;
					&:last-of-type {
						margin-right: 0px;
					}
					&:first-of-type {
						margin-left: 0px;
					}
				}
			}

			// Left aligned menus need to line up with everything else.
			.sm-clean.w,
			.sm-clean.nw,
			.sm-clean.sw {
				&:not( .sm-vertical ) {
					> li.menu-item:first-of-type > a {
						padding-left: 0px;
					}
				}
			}

			// Right aligned menus need to line up with everything else.
			.sm-clean.e,
			.sm-clean.ne,
			.sm-clean.se {
				&:not( .sm-vertical ) {
					> li.menu-item:last-of-type > a {
						padding-right: 0px;
					}
				}
				&.sm-vertical {
					ul.sub-menu.sub-arrow {
						margin-right: -20px;
					}
				}
			}
			.sm-clean.sm-rtl li.menu-item {
				float: right;
			}
			.sm-clean ul.sub-menu li.menu-item,
			.sm-clean.sm-rtl ul.sub-menu li.menu-item,
			.sm-clean.sm-vertical li.menu-item {
				float: none;
			}
			.sm-clean a {
				white-space: nowrap;
			}
			.sm-clean ul.sub-menu li.menu-item > a,
			.sm-clean.sm-vertical li.menu-item > a {
				white-space: normal;
			}
			.sm-clean ul.sub-menu.sm-nowrap > li.menu-item > a,
			.sm-clean ul.sub-menu.sm-nowrap > li.menu-item >:not(ul) a {
				white-space: nowrap;
			}
			/* ...end */
			.sm-clean {
				padding: 0;
			}
			.sm-clean a.disabled {
				color: #bbbbbb;
			}
			.sm-clean a.has-submenu {
				padding-right: 24px;
			}
			.sm-clean li.menu-item > a > span.sub-arrow {
				top: 50%;
				margin-top: -2px;
				right: auto;
				width: 0;
				height: 0;
				border-width: 4px;
				border-style: solid dashed dashed dashed;
				border-color: currentColor transparent transparent transparent;
				background: transparent;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				-ms-border-radius: 0;
				-o-border-radius: 0;
				border-radius: 0;
			}
			.sm-clean li.menu-item > a.highlighted > span.sub-arrow:before {
				display: none;
			}
			.sm-clean li.menu-item:not(.btn-border) {
				border-top: 0;
			}
			.sm-clean > li.menu-item > ul.sub-menu:not(.custom-sub-menu):before,
			.sm-clean > li.menu-item > ul.sub-menu:not(.custom-sub-menu):after {
				content: '';
				position: absolute;
				top: -18px;
				left: 30px;
				width: 0;
				height: 0;
				overflow: hidden;
				border-width: 9px;
				border-style: dashed dashed solid dashed;
				border-color: transparent transparent #bbbbbb transparent;
			}
			.sm-clean > li.menu-item > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):before,
			.sm-clean > li.menu-item > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after {
				top: unset;
				bottom: -18px;
				border-style: solid dashed dashed dashed;
				border-color: #bbbbbb transparent transparent transparent;
			}
			.sm-clean > li.menu-item > ul.sub-menu:not(.custom-sub-menu):after {
				top: -16px;
				left: 31px;
				border-width: 8px;
				border-color: transparent transparent white transparent;
			}
			.sm-clean > li.menu-item > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after {
				top: unset;
				bottom: -16px;
				border-color: white transparent transparent transparent;
			}
			.sm-clean ul.sub-menu:not(.custom-sub-menu) {
				border: 1px solid #bbbbbb;
				padding: 5px 0;
				background: white;
				border-radius: 5px;
				box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);
			}
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a,
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a:hover,
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a:focus,
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a:active,
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a.highlighted {
				border: 0 !important;
				padding: 10px 20px;
			}
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a.disabled {
				background: white;
				color: #cccccc;
			}
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a.has-submenu {
				padding-right: 20px;
			}
			.sm-clean ul.sub-menu:not( .custom-sub-menu ) li.menu-item > a > span.sub-arrow {
				right: auto;
				top: 50%;
				margin-top: -5px;
				border-width: 5px;
				border-style: dashed dashed dashed solid;
				border-color: transparent transparent transparent currentColor;
			}
			.sm-clean span.scroll-up,
			.sm-clean span.scroll-down {
				position: absolute;
				display: none;
				visibility: hidden;
				overflow: hidden;
				background: white;
				height: 20px;
			}
			.sm-clean span.scroll-up:hover,
			.sm-clean span.scroll-down:hover {
				background: #eeeeee;
			}
			.sm-clean span.scroll-up:hover span.scroll-up-arrow,
			.sm-clean span.scroll-up:hover span.scroll-down-arrow {
				border-color: transparent transparent currentColor transparent;
			}
			.sm-clean span.scroll-down:hover span.scroll-down-arrow {
				border-color: currentColor transparent transparent transparent;
			}
			.sm-clean span.scroll-up-arrow,
			.sm-clean span.scroll-down-arrow {
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -6px;
				width: 0;
				height: 0;
				overflow: hidden;
				border-width: 6px;
				border-style: dashed dashed solid dashed;
				border-color: transparent transparent currentColor transparent;
			}
			.sm-clean span.scroll-down-arrow {
				top: 8px;
				border-style: solid dashed dashed dashed;
				border-color: currentColor transparent transparent transparent;
			}
			.sm-clean.sm-rtl a.has-submenu {
				padding-right: 12px;
				padding-left: 24px;
			}
			.sm-clean.sm-rtl li.menu-item > a >  span.sub-arrow {
				right: auto;
				left: 12px;
			}
			.sm-clean.sm-rtl.sm-vertical li.menu-item > a.has-submenu {
				padding: 10px 20px;
			}
			.sm-clean.sm-rtl.sm-vertical li.menu-item > a > span.sub-arrow {
				right: auto;
				left: 8px;
				border-style: dashed solid dashed dashed;
				border-color: transparent currentColor transparent transparent;
			}
			.sm-clean.sm-rtl > li.menu-item > ul.sub-menu:before {
				left: auto;
				right: 30px;
			}
			.sm-clean.sm-rtl > li.menu-item > ul.sub-menu:after {
				left: auto;
				right: 31px;
			}
			.sm-clean.sm-rtl ul.sub-menu li.menu-item > a.has-submenu {
				padding: 10px 20px !important;
			}
			.sm-clean.sm-rtl ul.sub-menu li.menu-item > a > span.sub-arrow {
				right: auto;
				left: 8px;
				border-style: dashed solid dashed dashed;
				border-color: transparent currentColor transparent transparent;
			}
			.sm-clean.sm-vertical {
				flex-direction: column;
				padding: 10px 0;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				-ms-border-radius: 5px;
				-o-border-radius: 5px;
				border-radius: 5px;
			}
			.sm-clean.sm-vertical li.menu-item > a:not( .btn ) {
				padding: 10px 20px;
			}
			.sm-clean.sm-vertical a.disabled {
				background: #eeeeee;
			}
			.sm-clean.sm-vertical li.menu-item > a > span.sub-arrow {
				top: 50%;
				margin-left: 10px;
				border-width: 5px;
				border-style: dashed dashed dashed solid;
				border-color: transparent transparent transparent currentColor;
			}
			.sm-clean.sm-vertical > li.menu-item > ul.sub-menu:before,
			.sm-clean.sm-vertical > li.menu-item > ul.sub-menu:after {
				display: none;
			}
			.sm-clean.sm-vertical ul.sub-menu li.menu-item > a:not( .btn ) {
				padding: 10px 20px;
			}
			.sm-clean.sm-vertical ul.sub-menu:not( .custom-sub-menu ) a:hover,
			.sm-clean.sm-vertical ul.sub-menu:not( .custom-sub-menu ) a:focus,
			.sm-clean.sm-vertical ul.sub-menu:not( .custom-sub-menu ) a:active,
			.sm-clean.sm-vertical ul.sub-menu:not( .custom-sub-menu ) a.highlighted {
				background: #eeeeee;
			}
			.sm-clean.sm-vertical ul a.disabled {
				background: white;
			}
		}
	}

	/* Menu Mobile */
	label[id$="-menu-btn"] {
		position: relative;
		left: 0;
		display: flex;
		align-self: flex-end;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		z-index: 2;
	}

	.bgtfw-menu-wrap {
		&.e,
		&.ne,
		&.se {
			justify-content: flex-end;
			> label {
				justify-content: flex-end;
			}
		}
		&.n,
		&.c,
		&.s {
			justify-content: center;
			> label {
				justify-content: center;
			}
		}
		&.w,
		&.nw,
		&.sw {
			justify-content: flex-start;
			> label {
				justify-content: flex-start;
			}
		}
		&.n,
		&.ne,
		&.nw {
			align-items: flex-start;
			> label {
				align-items: flex-start;
			}
		}
		&.e,
		&.c,
		&.w {
			align-items: center;
			> label {
				align-items: center;
			}
		}
		&.s,
		&.se,
		&.sw {
			align-items: flex-end;
			> label {
				align-items: flex-end;
			}
		}
	}

	input.hidden + label[id$="-menu-btn"] {
		display: none;
	}

	/* hide menu state checkbox (keep it visible to screen readers) */
	input[id$="-menu-state"] {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		border: 0;
		padding: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	@media only screen and (max-width: 767px) {
		.bgtfw-menu-wrap {
			// Hide the menu in mobile view.
			&.ham-phone {
				display: block;
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: none;
				}
				input:checked ~ .sm-clean {
					display: block;
					width: 100%;
					li {
						float: none;
					}
				}
			}
			&:not( .ham-phone ) {
				/* hide the button in mobile if not enabled */
				label[id$="-menu-btn"] {
					position: absolute;
					top: -99999px;
				}

				/* always show the menu if hamburger not enabled */
				input:checked ~ .sm-clean,
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: flex;
					width: 100%;
					&.sm-vertical {
						flex-direction: column;
					}
				}
			}
		}
	}

	@media only screen and (min-width: 768px) and (max-width: 991px ) {
		.bgtfw-menu-wrap {
			// Hide the menu in tablet view.
			&.ham-tablet {
				display: block;
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: none;
				}
				input:checked ~ .sm-clean {
					display: block;
					width: 100%;
					li.menu-item {
						float: none;
					}
				}
			}
			&:not( .ham-tablet ) {
				/* hide the button in tablet if not enabled */
				label[id$="-menu-btn"] {
					position: absolute;
					top: -99999px;
				}

				/* always show the menu if hamburger not enabled */
				input:checked ~ .sm-clean,
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: flex;
					width: 100%;
					&.sm-vertical {
						flex-direction: column;
					}
				}
			}
		}
	}
	@media only screen and (min-width: 992px) and (max-width: 1200px ) {
		.bgtfw-menu-wrap {
			// Hide the menu in tablet view.
			&.ham-desktop {
				display: block;
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: none;
				}
				input:checked ~ .sm-clean {
					display: block;
					width: 100%;
					li.menu-item {
						float: none;
					}
				}
			}
			&:not( .ham-desktop ) {
				/* hide the button in tablet if not enabled */
				label[id$="-menu-btn"] {
					position: absolute;
					top: -99999px;
				}

				/* always show the menu if hamburger not enabled */
				input:checked ~ .sm-clean,
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: flex;
					width: 100%;
					&.sm-vertical {
						flex-direction: column;
					}
				}
			}
		}
	}

	@media only screen and (min-width: 1200px) {
		.bgtfw-menu-wrap {
			// Hide the menu in tablet view.
			&.ham-large {
				display: block;
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: none;
				}
				input:checked ~ .sm-clean {
					display: block;
					width: 100%;
					li.menu-item {
						float: none;
					}
				}
			}
			&:not( .ham-large ) {
				/* hide the button in tablet if not enabled */
				label[id$="-menu-btn"] {
					position: absolute;
					top: -99999px;
				}

				/* always show the menu if hamburger not enabled */
				input:checked ~ .sm-clean,
				input:not(:checked):not(.hidden) ~ .sm-clean {
					display: flex;
					width: 100%;
					&.sm-vertical {
						flex-direction: column;
					}
				}
			}
		}
	}

	.sm-clean {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		-webkit-font-smoothing: subpixel-antialiased;
	}
	/* show animation */
	.sm-clean ul.sub-menu.show-animation {
		-webkit-animation: show-animation 0.2s;
		animation: show-animation 0.2s;
	}
	@-webkit-keyframes show-animation {
		0% {
			-webkit-transform: scale3d(0, 0, 1);
			opacity: 0;
		}
		60% {
			-webkit-transform: scale3d(1.05, 1.05, 1);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
			opacity: 1;
		}
	}
	@keyframes show-animation {
		0% {
			transform: scale3d(0, 0, 1);
			opacity: 0;
		}
		60% {
			transform: scale3d(1.05, 1.05, 1);
		}
		100% {
			transform: scale3d(1, 1, 1);
			opacity: 1;
		}
	}
	/* hide animation */
	.sm-clean ul.sub-menu.hide-animation {
		-webkit-animation: hide-animation 0.2s;
		animation: hide-animation 0.2s;
	}
	@-webkit-keyframes hide-animation {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			opacity: 1;
		}
		100% {
			-webkit-transform: scale3d(0, 0, 1);
			opacity: 0;
		}
	}
	@keyframes hide-animation {
		0% {
			transform: scale3d(1, 1, 1);
			opacity: 1;
		}
		100% {
			transform: scale3d(0, 0, 1);
			opacity: 0;
		}
	}
}

@media only screen and (min-width: 768px) {
	.sm.sm-clean {
		padding-left: 15px;
		padding-right: 15px;
	}
}

li.menu-item[class*="hvr-underline"] {
	> a:not( .button-primary):not( .button-secondary ) {
		&:before {
			z-index: 1;
		}
	}
	&:not(.hvr-underline-reveal) a:not( .button-primary):not(.button-secondary ) {
		transform: unset;
		overflow: unset;
		&:before {
			bottom: -2.5px;
		}
	}
}



