@import "fonts";

$max-width: 1300px;
$primary-color: #00aeef;
$secondary-color: #DDF0F9;
$tertiary-color: #C7E6F5;
$height: 70px;
$mam-top: round($height * .14);
$li-top: round($height * .15);
$li-bottom: round($height *.28);
$max-logo-width: round($height * 3);
$font-size: 14px;
$font-size-icon: round($font-size * 1.5);
$article-color: #000;
$text-color: #fff;

$gutter: 20px;

.mtm-main-header {

	background-color: $primary-color;
	border: none;
	margin: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;

	a {
		font-size: $font-size;
	}
	
	i {
		font-size: $font-size-icon;
	}
	
	a, i {
		color: $text-color;
	}
	
	.sub-menu {
		a {
			color: $primary-color;
		}
	}
	.mtm-clear {
		clear: both;
		margin: 0;
		padding: 0;
	}
	.mtm-container {
		margin-right: auto;
		margin-left: auto;
		padding: 0;
		max-width: $max-width;
	}

	.col-sm-12 {
		width: 100%;		
		float:left;
	}
	
	.navbar-header {
		position: relative;
	}
	
	.social-icons {
		
		float: right;
		display: none;
		list-style-type: none;
		margin:0;
		li {
			
			display: block;
			float:left;
			padding: 0 10px;
			height: $height;
			line-height: $height;
			vertical-align: middle;
			a {
				display: block;
				
			}

		}
	}
	
	.search {
		
		height: $height;
		padding: 0 8px;		
		line-height: $height;
		border-left: 1px solid #e6e7e8;
		border-right: 1px solid #e6e7e8;
		top: 0;
		right: 0;
		cursor: pointer;
		float: right;
		.search-box {
			background-color: $secondary-color;
			position: absolute;
			z-index: 1000;
			max-width: 460px;
			width: 90%;			
			right: -1px;
			line-height: 1;
			bottom: -64px;
			display: block;
			text-align: right;
			min-height: 40px;
			
			input {
				padding: 8px 4px;
				width: 74%;
			}
			
			.search-submit {
				display: inline-block;
				*display: inline;
				zoom: 1;
				width: 23%;
				padding: 11px 1%;
				background-color: $primary-color;
			}
		}
	}

	
	.social-icon {
		
		text-align: center;
	}
	
	.mtm-row:before, .mtm-row:after, .mtm-container:before, .mtm-container:after {
		clear: both;
		content: " ";
		display: table;
	}
	
	
	.navbar-header {
		float: left;
	}
	
	.list-unstyled {
		list-style: none
	}
	
	.navbar-brand {
		margin-left: 3%;
		max-height: $height;
		overflow: hidden;
		float: left;
		display: block;
		height: auto;
		line-height: $height - 2;
		padding: 0;
		
		img {
			width: 100%;
			max-width: $max-logo-width - 35;
			height: auto;
		}
	}
	
	.main-navigation {
		float: left;
	}
	
	.mtm-menu-container {
		padding-top: $mam-top;
	}
	
	li, .search {
		&:hover {
			background: $secondary-color;
			&>a, i {
				color: $primary-color;
			}
		}

	}
	.primary-nav {		
		padding: 0;
		margin: 0;
		list-style-type: none;

		&>li {
			float: left;
			height: $height - $mam-top;

			overflow: hidden;
			display: none;

			&>a {
				display: block;
			
						
				font-weight: 700;
				position: relative;
				top: 2px;
				padding: $li-top 17px $li-bottom 10px;
			}
		}
	}
	.depth-lvl-0 {
		padding: 15px 0;
	}
	.sub-menu {
		li {
			list-style-type: none;
		}
		.depth-lvl-1 {
			ul {
				margin-left: 10%;
			}
		}
	}
	
	.not-tax.depth-lvl-0 {
		
		.depth-1 {
			float: left;
			padding: 0 2%;
			border-right: 1px solid $tertiary-color;
			&>a {
				font-weight: bold;
		
			}
			&:last-child {
				border: none;
			}
		}
		&:after {
		content: "";
		  display: table;
		  clear: both;	
		}
		
		a {
			&:hover {
				text-decoration: underline;
			}
		}
	}

	.sub-navigation {
		float: left;
		width: 15%;
		margin: 0;
		background-color: $tertiary-color;
		min-height: 270px;
	
		ul {
			margin: 0;
			a {
				display: block;
				padding: 5px 25px 5px 0;
				text-align: right;
				font-weight: 700;
				&:hover {
					background-color: $secondary-color;
				}
			}
		}
		li {
			position: relative;
		}
		
		.menu-item-type-taxonomy:hover {
			position: relative;
			&:after {
				content: "\e600";
				font-family: "icomoon";
				display: block;
				color: $primary-color;
				position: absolute;
				top: 8px;
				right: 3px;
				font-size: $font-size;
			}
		}

	}
	
	.sub-menu {
		display: none;
		position: absolute;
		z-index: 9999;
		top: $height;
		left: 0;
		width: 100%;
		background-color: $secondary-color;
		ul {
			margin: 0;
		}

		.articles {
			width: 85%;
			float: left;
			padding: 20px 0;
			
			.menu-post {
				float: left;
				margin: 0;
				border: none;
				position: relative;
			}
			
			.menu-post-5 {
				width: 18%;				
				padding: 0 1%;
			}			
			
			.menu-post-4 {
				width: 23%;				
				padding: 0 1%;
			}			
			
			.menu-post-3 {
				width: 31%;				
				padding: 0 1%;
			}
			.menu-post-2 {
				width: 48%;				
				padding: 0 1%;
			}			
			.menu-post-1 {
				width: 98%;				
				padding: 0 1%;
			}
			
			.fixed-menu-post-5 {
				width: floor((($max-width - ($max-width * .16)) / 5) - $gutter);
				padding: 0 ($gutter/2);
			}			
			
			.fixed-menu-post-4 {
				width: floor((($max-width - ($max-width * .16)) / 4) - $gutter);
				padding: 0 ($gutter/2);
			}			
			
			.fixed-menu-post-3 {
				width: floor((($max-width - ($max-width * .16)) / 3) - $gutter);
				padding: 0 ($gutter/2);
			}			
			
			.fixed-menu-post-2 {
				width: floor((($max-width - ($max-width * .16)) / 2) - $gutter);
				padding: 0 ($gutter/2);
			}			
			
			.fixed-menu-post-1 {
				width: floor((($max-width - ($max-width * .16)) / 1) - $gutter);
				padding: 0 ($gutter/2);
			}
			.thumb {
				overflow: hidden;
			}
		}

	}
	.nav-post-thumbnail {
		text-align: center;
	}
	
	.sub-menu-inner {
		max-width: $max-width;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
	}
	.see-all {
		background: $primary-color;
		min-height: 4px;
		a {
			
			padding: 0 10px;
			margin: 5px 40px 5px 0;
			color: $primary-color;
			font-weight: bold;
			background-color: $secondary-color;
			
			float: right;
			&:hover {
				text-decoration: underline;
			}
		}
	}
	li:hover {
		.sub-menu-inner {
			.nav-posts {
				a {
					color: $article-color;
					&:hover {
						text-decoration: underline
					}
				}
			}
		}
	}
	.icon-spinner {
		display: none;
		text-align: center;
		position: absolute;
		top: 20%;
		left: 50%;
		z-index: 999;

	}

	
	.icon-arrow-down {
		position: absolute;
		right: 0;
		top: 30%;
		z-index: 30;
		font-size: $font-size;
	}
	.show-menu {
		display: block;
		
		height: $height;
		line-height: $height;
		vertical-align: middle;
		background-color: $secondary-color;		
		padding: 0 10px;
		vertical-align: middle;
		i {
			color: $primary-color;
			font-size: 30px;
		}
	}

	
	.clearfix:after, .clearfix:before {
		clear: both;
		content: " ";
		display: table;
	}

}

@import "mobile_menu";
@import "media_query";
@import "admin_menu";