@import "mixins";
/**
 * Flyout Menu styling
 */
 .ast-flyout-below-menu-enable{
 	&.ast-header-break-point {
 		&.ast-flyout-below-left-side {
 			.ast-below-header-navigation-wrap {
				left: 0;
				.ast-below-header-actual-nav {
					left: -100%;
				}
			}	
 		}
 		&.ast-flyout-below-right-side{
 			.ast-below-header-navigation-wrap {
				right: 0;
				.ast-below-header-actual-nav {
					right: -100%;
				}
			}	
 		}

 		.ast-below-header-menu {
 			margin: 0;
 		}

 		.ast-below-header-section-separated .ast-below-header-actual-nav {
			top: 0;
		    transform: none;
		}

		.ast-below-header-navigation-wrap {
			width: 100%;
			top: 0;
			position: fixed;
			height: 100%;
			background: rgba(0,0,0,.4);
			z-index: 100000;
			visibility: hidden;
			opacity: 0;
			transition: .25s ease-in-out;
			display: block !important;
			margin: 0;
			z-index: 5;
			.close {
				position: absolute;
				right: 8px;
				top: 6px;
				line-height: 1;
				cursor: pointer;
				z-index: 10;
				opacity: 0.8;

				&:hover {
					opacity: 1;
				}
				
				&:after {
					content: "\e5cd";
					display: inline-block;
					font-family: 'Astra';
					font-size: 28px;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					line-height: normal;
				}
			}

			.ast-below-header-actual-nav {
				position:  absolute;
				background: #fff;
				height: 100%;
				top: 0;
				box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
				overflow-y: auto;
				transition: .3s ease-in-out;
				padding: 40px 0;
				margin: 0;
				left: auto;
				@media (max-width: $mx-col-sm) {
					width: 70%;
				}
			}
			div.ast-masthead-custom-menu-items{
				text-align: initial;
			}
		}
		.ast-button-wrap {
			.menu-below-header-toggle.toggled {
				.menu-toggle-icon:before {
				  content: "\e5d2";
				}
			} 
		}

	}
}

.ast-flyout-below-menu-overlay {
	.ast-flyout-below-menu-enable {
		&.ast-header-break-point{
			.site-header{
	 			z-index: 100000;
	 		}
			#ast-fixed-header.ast-sticky-active {
				height: 100%;
	 			z-index: 100000;
	 		}
	 		.ast-below-header,
	 		.ast-stick-primary-below-wrapper{
	 			z-index: 99;
	 		}
			&.ast-flyout-below-left-side{
				.ast-below-header-navigation-wrap {
					.ast-below-header-actual-nav {
						left: 0;
					}	
				}
			}
			&.ast-flyout-below-right-side{
				.ast-below-header-navigation-wrap {
					.ast-below-header-actual-nav {
						right: 0;
					}	
				}
			}
			.ast-below-header-navigation-wrap {
				visibility: visible;
				opacity: 1;
				z-index: 5;

				div.ast-masthead-custom-menu-items {
					padding-left: 20px;
					padding-right: 20px;
				}
			}
		}
	}
}

// Sticky Header - Hide on scroll height transition animation remove.
.ast-header-stick-slide-active,
.ast-header-stick-scroll-active {
	.ast-flyout-below-menu-enable.ast-header-break-point {
		#masthead {
			.ast-below-header-actual-nav {
		  		display: none !important;
		  	}
		}
		#ast-fixed-header{
			.ast-below-header-actual-nav{
				transition: opacity .25s ease-in-out, visibility .3s ease-in-out;
			}
		}
	}
}
