#masthead {
	.main-small-navigation {
		ul {
			&.menu-scrollbar {
				overflow-y: scroll;
			}
		}

		li {
			&:hover,
			&.current-page-ancestor,
			&.current-menu-ancestor,
			&.current-page-item,
			&.current-menu-item {
				> a {
					color: $white;
					background-color: $primary;
				}
			}
		}
	}

	/*--------------------------------------------------------------
	Clean Layout
	--------------------------------------------------------------*/

	&.colormag-header-clean {
		.date-in-header {
			padding-right: 20px;
		}

		.news-bar {
			padding: 8px 0;
		}

		.breaking-news {
			float: left;

			.breaking-news-latest {
				background: $news-background;
				padding: 0 10px;
				display: inline-block;
				vertical-align: top;
				color:$white;
				font-weight: 400;
			}

			.newsticker {
				padding-left: 10px;
				text-align: left;
				position: relative;
				a {
					color: $color_gray_four;

					&:hover {
						color: $primary;
					}
				}
			}
		}

		.social-links {
			i.fa {
				color: $social-icon-color;
				transition: color 0.35s;
				font-size: 16px;
				padding: 0 6px;
			}

			li {
				&:hover {
					i.fa {
						color: $primary;
					}
				}
			}
		}

		#header-text-nav-wrap {
			padding: 30px 0;
		}

		.home-icon {

			.fa {
				font-size: 21px;
			}
		}

		#site-navigation {
			box-shadow: 0 0 0 rgba(0, 0, 0, 0 ) inset;
			position: relative;
			background-color:transparent;
			border-top: 0 solid transparent;
			z-index: 999;

			.inner-wrap {
				background-color: $news-background;
			}

			.fa.search-top {
				padding: 20px;
				line-height: 26px;
				position: relative;
				float: right;
				right: 0;
			}

			.random-post {
				position: relative;
				float: right;
			}

			.search-form-top {
				top: 100%;
			}

			.menu-toggle {
				line-height: 26px;

				&::before {
					padding: 20px;
				}
			}
		}

		.main-navigation {
			a {
				font-weight: 500;
				padding: 20px;
				line-height: 26px;
			}

			ul {
				li {
					ul {
						top: 100%;

						li {
							a {
								width: auto;
								padding: 10px 15px;
							}

							ul {
								top: 0;
							}
						}
					}

					&.focus > ul {
						display: block;
						visibility: visible;
						opacity: 1;
					}
				}
			}
		}

		.main-small-navigation {
			.menu-primary-container,
			.nav-menu,
			.menu {
				padding-top: 0;
				padding-top: 0;
				position: absolute;
				top: 100%;
				width: 100%;


			}

			.random-post {
				line-height: 26px;

				a {
					padding: 20px;
				}
			}
		}
	}

	/*--------------------------------------------------------------
	classic Layout
	--------------------------------------------------------------*/

	&.colormag-header-classic {
		.date-in-header {
			padding-right: 20px;
		}

		.news-bar {
			padding: 8px 0;
		}

		.breaking-news {
			float: left;

			.breaking-news-latest {
				background: $news-background;
				padding: 0 10px;
				color:$white;
				font-weight: 400;
				display: inline-block;
				vertical-align: top;
			}

			.newsticker {
				padding-left: 10px;
				position: relative;
				text-align: left;

				a {
					color: $color_gray_four;

					&:hover {
						color: $primary;
					}
				}
			}
		}

		.social-links {
			i.fa {
				color: $social-icon-color;
				transition: color 0.35s;
				font-size: 16px;
				padding: 0 6px;
			}

			li {
				&:hover {
					i.fa {
						color: $primary;
					}
				}
			}
		}

		#header-text-nav-wrap {
			padding: 30px 0 20px;

			#header-right-section {
				display: none;
			}

			#header-left-section {
				float: none;
				text-align: center;

				#header-logo-image,
				#header-text {
					float: none;
					padding-right: 0;
				}
			}
		}

		.home-icon {
			background: none;

			.fa {
				color: $primary;
			}
		}

		#site-navigation {
			box-shadow: 0 0 0 rgba(0, 0, 0, 0 ) inset;
			position: relative;
			background-color:transparent;
			border-top: 0 solid transparent;
			z-index: 999;

			.inner-wrap {
				background-color: transparent;
			}

			.fa.search-top {
				color: $menu-link-color;
				float: right;
				font-size: 16px;
				padding: 15px;

				&:hover {
					background: transparent;
					color: $primary;
				}
			}

			.menu-toggle {
				line-height: 26px;
				border: 1px solid $menu-link-color;

				&::before {
					padding: 20px;
					color: $menu-link-color;;
				}

				&:hover {
					border-color: $primary;

					&::before {
						color: $white;
					}
				}
			}
		}

		.main-navigation {
			a {
				font-weight: 700;
				padding: 10px 15px;
				line-height: 26px;
				color: $menu-link-color;

				&::after {
					color: inherit;
				}

				&:hover {
					background-color: transparent;
				}
			}

			ul {
				li a {
					background-color: transparent;
				}

				> li {
					float: none;
					display: inline-block;
					vertical-align: top;

					> a {
						border-bottom: 2px solid transparent;
						transition: border 0.5s ease;
					}

					&:hover,
					&.current-menu-item,
					&.current-menu-ancestor {
						> a {
							background-color: transparent;
							border-bottom: 2px solid $primary;
						}
					}
				}
				li.focus {
					>a {
						border-color: $primary;
					}
					> ul {
						opacity: 1;
						visibility: visible;
					}
				}

				ul.sub-menu {
					top: 100%;
					background-color: $color_gray_ten;
					transition: all 0.3s ease;
					display: block;
					opacity: 0;
					visibility: hidden;
					border: 1px solid  $color_gray_eight;

					li {
						border-bottom:1px solid  $color_gray_eight;
						display: block;

						a {
							width: auto;
							padding: 10px 15px;
							transition: all 0.5s ease;
							border-bottom: none transparent;
						}

						&:hover,
						&.current-menu-ancestor,
						&.current-menu-item,
						&.focus {
							border-color: $primary;
							background-color: transparent;

							> a {
								color: $white;
								background-color: $primary;
							}
						}


						&:last-child {
							border-bottom: none transparent;
						}

						ul {
							top: 0;
						}
					}
				}

				li.menu-item-has-children {
					&:hover {
						> ul.sub-menu {
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}

			.random-post {

				a {
					font-size: 14px;
					padding: 10px 15px;
					color: $menu-link-color;

					&:hover {
						background: transparent;

						.fa-random {
							color: $primary;
						}
					}

					.fa-random {
						color: $menu-link-color;
					}
				}
			}
		}

		.main-small-navigation {
			.menu-primary-container,
			.nav-menu {
				padding-top: 0;
				padding-top: 0;
				position: absolute;
				top: 100%;
				width: 100%;
				box-shadow: 0 1px 11px rgba(0, 0, 0, 0.2);
			}

			.random-post {
				bottom: 0;

				a {
					font-size: 14px;
					padding: 12px 15px;
					color: $menu-link-color;

					.fa-random {
						color: $menu-link-color;
					}

					&:hover {
						background: transparent;

						.fa-random {
							color: $primary;
						}
					}
				}
			}

			.menu-toggle {
				background-color: $primary;
				border-color: $primary;

				&::before {
					color: $white;
				}
			}
		}

		.is-sticky {
			#site-navigation {
				background-color: $white;
				box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.better-responsive-menu{
		.main-small-navigation .menu-primary-container {
			padding-bottom: 20px;
		}
	}

	#masthead {
		.main-small-navigation {
			li {
				&:hover,
				&.current-page-ancestor,
				&.current-menu-ancestor,
				&.current-page-item,
				&.current-menu-item {
					> .sub-toggle {
						background-color: $white;

						i {
							color: $primary;
						}
					}
				}
			}
		}

		&.colormag-header-clean {
			#menu-primary {
				background-color: #ffffff;
			}

			.date-in-header,
			.social-links {
				float: none;
				text-align: center;
			}
			.breaking-news {
				width: 100%;
				float: none;
				margin-bottom: 5px;
				text-align: center;
			}

			#header-text-nav-wrap {
				padding: 0 0 20px;
			}

			#header-left-section,
			#header-logo-image {
				margin-bottom: 0;

			}

			#site-navigation {
				.random-post {
					a {
						padding: 15px;
					}
				}

				.menu-toggle::before,
				.fa.search-top {
					padding: 15px;
				}
			}

			.main-small-navigation {
				.menu-toggle {
					background-color: $primary;
				}

				.random-post {
					a {
						padding: 15px;
					}
				}
			}
		}

		&.colormag-header-classic {
			#menu-primary {
				background-color: #ffffff;
			}

			.date-in-header,
			.breaking-news,
			.social-links {
				width: 100%;
				float: none;
				text-align: center;
			}

			#header-text-nav-wrap {
				padding: 0;
			}

			#header-left-section,
			#header-logo-image {
				margin-bottom: 0;

			}

			.main-small-navigation {
				.menu-toggle {
					background-color: $primary;
					border-color: $primary;
				}

				.random-post {
					a {
						padding: 15px;
					}
				}
			}

			#site-navigation {
				.random-post {
					a {
						padding: 15px;
					}
				}
				.menu-toggle::before,
				.fa.search-top {
					padding: 15px;
				}
			}
		}
	}

	.breaking-news {
		height: auto;
	}
}

@media screen and (max-width: 480px) {
	.better-responsive-menu {
		.main-small-navigation .menu-primary-container {
			padding-bottom: 15px;
		}
	}

	#masthead {
		&.colormag-header-classic,
		&.colormag-header-clean {

			.date-in-header {
				display: none;
			}

			.breaking-news {
				.breaking-news-latest {
					padding: 0 5px;
				}

				.newsticker {
					padding-left: 0;
				}
			}
		}
	}
}