#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 {
			display: none;
		}
		
		#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;
								}
							}
						}
					}
				}
			}
			
			&.main-small-navigation {
				
				.menu-primary-container, 
				.nav-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 {
			display: none;
		}
		
		#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 0;
					line-height: 26px;
					color: $menu-link-color;
					
					&::after {
						color: inherit;
					}
					
					&:hover {
						background-color: transparent;
					}
				}
				
				ul {
					&#menu-primary {
						> li {
							padding-left: 15px;
							padding-right: 15px;
							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;
								}
								
							}
						}
						
						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;
								
								a {
									width: auto;
									padding: 10px 15px;
									transition: all 0.5s ease;
								}
								
								&:hover,
								&.current-menu-ancestor,
								&.current-menu-item {
									border-color: $primary;
									
									> a {
										background-color: $primary;
										color: $white;
									}
								}
								
								&: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) {
	#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) {
	#masthead {
		&.colormag-header-classic,
		&.colormag-header-clean {
			
			.date-in-header {
				display: none;
			}
			
			.breaking-news {
				.breaking-news-latest {
					padding: 0 5px;
				}
				
				.newsticker {
					padding-left: 0;
				}
			}
		}
	}
}