@include breakpoint(md){

	// Mega Menu
	.mega-menu .mega-menu-block{
		left: 0;
		width: 100%;
		padding: 30px;

		a{
			width: auto;
		}
		
		// Mega menu Navigation
		ul.slider-arrow-nav{
			box-shadow: none;
			display: none;
			clear: both;
		}

		.megamenu-pagination{
			width: 30px;
			height: 30px;
			line-height: 30px; 
			font-size: 20px;
			border-width: 1px;
		}
	}

	.mega-menu-post{
		display: block;
		float: left;
	}

	// Mega Links (Columns)
	.sub-menu-columns{
		margin: 0 -15px;
		display: flex;
		flex-direction: row;
    flex-wrap: wrap;
	}

	.mega-links .mega-menu-block{
		padding-bottom: 15px;
	}

	.main-menu .mega-links-head{
		width: 100%;
		font-weight: 600;
		background: transparent!important;
		border-bottom: 2px solid var(--main-nav-secondry-border-color);
		border-top: 0;
		line-height: 40px;
		font-size: 14px;
		margin-bottom: 10px;

		&:before{
			display: none;
		}

		&:after{
			display: block;
			content: "";
			width: 50px;
			height: 2px;
			background: var(--main-nav-primary-color);
			position: absolute;
			bottom: -2px;
			left: 0;
			transition: width 0.2s;
		}
	}

	li.mega-link-column{
		margin-bottom: 10px;
		padding: 0 15px;
    flex-basis: 50%;

		li{
			width: 100%;

			a{
				padding: 8px 0;
			}
		}

		&:hover {
			.mega-links-head:after{
				width: 65px;
			}
		}

		.menu-sub-content{
			width: 100%;
			max-width: 200px;
		}
	}

	.hide-mega-headings{
		margin-top: 20px;
		margin-bottom: 0;

		> a{
			display: none !important;
		}
	}

	.mega-links-3col .mega-link-column{
    flex-basis: calc( 100%/3);
	}

	.mega-links-4col .mega-link-column{
    flex-basis: calc( 100%/4);
	}

	.mega-links-5col .mega-link-column{
    flex-basis: calc( 100%/5);
	}

	// Mega Categories

	// post title and thumbs
	.mega-menu{
		.post-box-title{
			line-height: 1.4;
		}

		a.mega-menu-link{
			@include font-size(14px);
			font-weight: 500;
			border: 0;
			display: block;

			&:hover{
				color: var(--main-nav-primary-color);
				background: transparent!important;
			}
		}

		.post-thumb{
			margin-bottom: 10px;
		}

		.post-meta{
			margin: 5px 0 0;
			line-height: 20px;

			a{
				padding: 0;
				background-color: transparent;
			}

			&,
			a:not(:hover){
				color: var(--main-nav-secondry-text-color);
			}
		}
	}

	.main-menu {
		.is-loading{
			.mega-recent-post,
			.mega-menu-post{
				opacity: 0.5 !important;
				transition: opacity 0.3s;
			}
		}

		.mega-cat-wrapper{
			overflow: hidden;
	    height: auto;
	    clear: both;
		}

		.mega-ajax-content{
			min-height: 200px;
			position: relative; // to center the loader overlay
		}

		.mega-recent-featured{
			.mega-ajax-content{
				min-height: 325px;
			}
		}

		.mega-cat {
			.mega-menu-content{
				clear: both;
			}

			.mega-menu-block{
				padding: 0;
			}
		}

		.mega-cat-content{
			padding: 30px;
		}

		.mega-cat-sub-exists{
			width: 80%;
			float: left;
		}

		.horizontal-posts{
			width: 100%;
		}

		.mega-cat-posts-container .megamenu-loaded-ajax{
			margin-left: -10px;
			margin-right: -10px;
		}

		.mega-cat .mega-menu-post{
			width: 20%;
			opacity: 0;
			padding: 0 10px;

			&:nth-child(5n + 1){
				clear: both;
			}
		}


		.vertical-posts .mega-menu-post{
			width: 25%;
		}

		// if it has a sub-menu
		.menu-item-has-children{
			.cats-vertical,
			.cats-vertical	+ .mega-cat-content{
				padding-top: 30px;
			}
		}

		// Mega Cat More Links
		// above the categories filters
		ul.mega-cat-more-links{
			opacity: 1 !important;
			box-shadow: none !important;
			overflow: hidden;
		}

		.mega-cat-more-links{
			padding: 20px 10px;

			> li{
				float: left;
				width: 25%;
				padding: 0 10px;

				ul{
					left: calc(100% - 10px);
				}

				li{
					width: 100%;
				}
			}
		}

		// Categories Filters
		ul.mega-cat-sub-categories{
			overflow: hidden;
			box-shadow: none;
		}

		// Horizontal Categories Filter
		.cats-horizontal{
			margin: 30px 30px -10px;

			li{
				line-height: 20px;
				margin-right: 7px;
				float: left;

				a{
					border: 1px solid var(--main-nav-secondry-border-color);
					background: var(--main-nav-secondry-background);
					border-radius: $base-border-radius;
					padding: 1px 10px;
					width: auto;
				}
			}
		}

		@at-root .main-nav .mega-menu.mega-cat .cats-horizontal li {
			a.is-active,
			a:hover{
				color: var(--main-nav-contrast-primary-color);
				background: var(--main-nav-primary-color);
				border-color: var(--main-nav-primary-color);
			}
		}

		// Vertical Categories Filter
		.cats-vertical{
			background: var(--main-nav-secondry-background);
			width: 20%;
			float: left;
			padding: 30px 0 0 20px;
			padding-bottom: 1500px;
			margin-bottom: -1500px;

			li{
				width: 100%;

				&:last-child{
					margin-bottom: 50px;
				}

				a{
					display: block;
					border-top: 0;
					width: 100%;
					padding: 8px 10px;

					&.is-active,
					&:hover{
						background: var(--main-nav-background);
					}
				}

			}
		}
	}


	//  Mega Recent - Featured Posts
	.main-menu{
		// Posts List
		.mega-recent-post{
			float: left;
			width: 37%;
			padding-right: 30px;

			.post-box-title a{
				@include font-size(22px);
				margin-top: 7px;
				line-height: 30px;
			}
		}

		.mega-check-also{
			float: left;
			width: 63%;
			overflow: hidden;
			margin: 0 -15px -20px;

			.mega-menu-post{
				width: 50%;
				padding: 0 15px 20px;
				overflow: hidden;

				&:nth-child(2n + 1){
					clear: left;
				}
			}

			.post-thumbnail{
				margin-right: 20px;
				float: left;
			}

			.post-thumb{
				overflow: hidden;
				margin-bottom: 0;

				img{
					width: 110px;
				}
			}

			.post-details{
				padding-left: 130px;
			}
		}

		.mega-recent-featured{
			> .menu-sub-content{
				overflow: hidden;
			}

			.mega-menu-content {
				float: right;
				position: relative;
				min-height: 30px;
				width: 100%;
			}

			// If it has a sub menu
			&.menu-item-has-children{
				.mega-menu-content {
					width: 75%;
				}

				.mega-recent-post {
					width: 52%;
					padding-left: 30px;
				}

				.mega-check-also {
					width: 48%;

					.mega-menu-post {
						width: 100%;
					}
				}
			}
		}

		// If it has a sub menu
		ul.mega-recent-featured-list{
			width: 25%;
			padding-right: 30px;
			float: left;
			position: relative;
			box-shadow: none;
		}

		.mega-recent-featured-list{
			li{
				width: 100%;
				z-index: 2;
			}

			a{
				display: block;
				padding: 10px 0;
			}

			&:after{
				content: "";
				width: 1500px;
				height: 1500px;
				background: rgba(0,0,0,0.03);
				position: absolute;
				z-index: 1;
				right: 0;
				top: -100px;
			}
		}
	}

	.ajax-no-more-posts{
		text-align: center;
		position: absolute;
		width: calc(100% - 40px);
	}
}


// Demo purpose :: submenu in two columns.
@include breakpoint(md){
	.two-columns-submenu{
		> ul{
			width: 320px !important;

			> li{
				width: 50% !important;
				float: left;

				a{
					width: 100% !important
				}
			}
		}

		&.odd{
			> ul > li:last-child{
				width: 100% !important;
			}
		}
	}
}


// -fix the resize issue when resize to > 991
// -when reload the page on window < 992 and then resize to large the stikcy classes still existing.
// -this snippet will be removed when the tiesticky plugin stop firing when resizing to large.
@include breakpoint(md){
	.theme-header .logo-row > div{
		height: auto !important;
	}

	.logo-container.fixed-nav.fixed-nav{
		position: static !important;
		line-height: initial !important;
		box-shadow: none !important;
		background-color: transparent !important;
	}

	.header-layout-3 .logo-container.fixed-nav.fixed-nav{
		width: auto;
	}

	.header-layout-3 .stream-item-top-wrapper{
		float: right;
	}
}



/**
 * Featured Posts Menu
 */

 
#menu-featured-posts {
  position: static;
}

.menu-featured-posts-title {
	height: auto;
	width: auto !important;
	line-height: inherit;
	cursor: pointer;
	position: relative;
	color: var(--main-nav-contrast-primary-color) !important;
	background-color: var(--main-nav-primary-color);
	display: flex !important;
	padding: 0 10px;
	flex-flow: row;
	justify-content: center;
	margin-left: 10px;
	
	.main-nav-boxed &{
		margin-right: -15px;
	}

	&:before{
		bottom: 2% !important;
		top: auto !important;
		right: 50% !important;
		margin-right: -4px;
	}

	strong{
		font-size: 34px;
		font-weight: 900;
	}

	span{
		font-size: 14px;
		clear: both;
		display: block;
		line-height: 1;
	}
}

.menu-featured-posts-words{
	justify-content: center;
	display: flex;
	flex-flow: column;
	text-transform: uppercase;
}


#menu-featured-posts{

	.comp-sub-menu{
		border-top: 2px solid var(--main-nav-primary-color);
		width: 100%;
		box-sizing: border-box;
		padding: 30px 30px 20px;


		&.has-posts-counter{
			counter-reset:featured-menu-posts-counter;
			
			li{
				min-height: 70px;

				&:before {
					display: block;
					content: counter(featured-menu-posts-counter, decimal);
					counter-increment: featured-menu-posts-counter;
					position: absolute;
					z-index: 1;
					top: 0;
					left: -15px;
					text-align: center;
					font-size: 70px;
					font-weight: 600;
					color: var(--bright-color);
					font-style: italic;
					opacity: 0.5;
					height: 70px;
					line-height: 70px;
				}
			}
		}

		li {
			float: left;
			border: none;
			padding: 0 10px;
		}
	}
}