// HEADER

#siteHeader{
	position: relative;
	z-index: 1021;
	background-color: #fff;
	.navbar{
		margin-bottom: 0;
	}
	.navbar-header{
		background-color: #fff;
	}
	.navbar-brand {
		display: block;
    margin: 0;
    padding: 0 0 0 12px;
    height: 50px;
    @media (min-width: $screen-md-min){
    	padding: 0 0 0;
    }
    a{
    	display: block;
    	margin: 7px 0;
    	width: 100px;
    	height: 36px; 	
    	width: 117px;
    	text-indent: -9999px;
    	background-color: #eee;
    	background-size: auto 36px;
			background-repeat: no-repeat;
			@media (min-width: $screen-md-min){
				margin: 12px 0;
				height: 48px;
				width: 155px;
				background-size: 155px 48px;
			}
			@media (min-width: $screen-lg-min){
				margin: 18px 0;
			}
			&:hover{
				opacity: .9;
			}
    }
	}
	&.pos-abs{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.container{
		@media (max-width: $screen-sm-max){
			width: 100%;
			max-width: none;
		}
	}
	.navbar-toggle{
    margin: 0 0 0 0;
    padding: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    color: $color-primary-text;
    border: 0;
    border-radius: 0;
    i{
    	display: inline-block;
    	vertical-align: top;
    	line-height: 50px;
    }
    &:active{
    	background-color: material-color('grey','100');
    }
  	i{
    	font-size: 18px;
  		&:before{
				content: "\f00d";
  		}
  	}
    &.collapsed{
    	i{
    		font-size: 24px;
    		&:before{
					content: "\f0c9";
    		}
    	}
    }
	}
	.navbar-collapse {
    overflow-x: visible;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    box-shadow: inset 0 0 0 transparent;
	}
	.navbar-right {
    @media (min-width: $screen-md-min){
    	margin-right: 0;
    }
	}
	.isg-main-navbar{
		ul{
			display: block;
			margin: 0;
			padding: 0;
			list-style: none;
			li{
				a{
					display: block;
				}
			}
		}
		@media (max-width: $screen-sm-max){
			// position: absolute;
			// top: 100%; left: -12px; right: -12px;
			// margin-top: -1px;
			z-index: 1020;
			border-top: $border;
			ul.main-menu{
				padding: 0 12px;
				li{
					a{
						color: $color-primary-text;
						&:active{
							color: $color-primary-light;
						}
					}
				}
				& > li{
					border-bottom: $border;
					& > a{
						padding: 8px 16px;
						line-height: 20px;
						font-size: 16px;
					}
					&:last-child{
						border-bottom: 0;
					}
				}
				ul{
					border-top: $border;
					padding: 0 0 0 16px;
					li{
						border-top: 1px solid #eee;
						&:first-child{
							border-top: 0;
						}
						a{
							position: relative;
							padding: 6px 16px 6px 24px;
							line-height: 18px;
							font-size: 14px;
							&:before{
						    content: "\f105";
						    display: block;
						    position: absolute;
						    top: 8px; left: 10px;
						    line-height: 16px;
						    font-family: FontAwesome;
						    font-size: inherit;
						    font-weight: normal;
						    font-style: normal;
						    font-variant: normal;
						    text-rendering: auto;
						    -webkit-font-smoothing: antialiased;
						    -moz-osx-font-smoothing: grayscale;
						    color: $color-hint-text;
							}
						}
					}
				}
			}
			ul.user-menu{
				margin: 0 12px;
				padding: 12px 12px;
				border-top: $border;
			}
		}
		@media (min-width: $screen-md-min){
			float: right;
			ul.main-menu{
				float: left;
				margin: 12px 0 12px;
				background-color: transparent;
				font-size: 0;
				li{
					position: relative;
					a{
						white-space: nowrap;
					}
				}
				& > li{
					display: inline-block;
					vertical-align: top;
					& > a{
						padding: 14px 16px;
						line-height: 20px;
						font-size: 16px;
						font-weight: 400;
						color: $color-primary-text;
						border-radius: 2px;
					}
					&:hover{
						& > a{
							color: $color-primary-text;
							background-color: material-color('grey','50');
						}
					}
				}
				ul{
					display: none;
					position: absolute;
					top: 100%; left: 0;
					background-color: #fff;
					@include box-shadow(0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.16));
					&.ht-pull-right{
						left: auto;
						right: 0;
					}
					li{
						a{
							padding: 8px 28px 8px 16px;
							line-height: 18px;
							font-size: 14px;
							color: #333;
							border-bottom: 1px solid #eee;
							&:hover{
								background-color: material-color('grey','100');
							}
						}
						&:last-child{
							a{
								border-bottom: 0;
							}
						}
					}
					ul{
						left: 100%;
						&:after{
							display: none;
						}
					}
				}
				li:hover{
					& > ul{
						display: block;
					}
				}
			}
			ul.user-menu{
				float: left;
				margin: 17px 0 17px 12px;
				padding: 0 0 0 16px;
				border-left: $border;
			}
		}
		@media (min-width: $screen-lg-min){
			ul.main-menu{
				margin: 16px 0;
				& > li{
					& > a{
						padding: 16px 20px;
					}
				}
			}
			ul.user-menu{
				float: left;
				margin: 21px 0 21px 16px;
				padding: 0 0 0 24px;
			}
		}
	}

	&.homepage-header{
		background-color: transparent;
		$hp-header_border_color: rgba(#fff,.12);
		.navbar{
			background-color: transparent;
		}
		.navbar-header{
			background-color: transparent;
		}
		.navbar-toggle{
			color: #fff;
			&:active{
	    	background-color: rgba(#fff,.1);
	    }
		}
		.isg-main-navbar{
			@media (max-width: $screen-sm-max){
				background-color: material-color('grey','900');
				border-top-color: $hp-header_border_color;
				border-bottom-color: $hp-header_border_color;
				ul.main-menu{
					padding: 0 12px;
					li{
						a{
							color: #fff;
							&:active{
								background-color: material-color('grey','800');
							}
						}
					}
					& > li{
						border-bottom-color: $hp-header_border_color;
						ul{
							border-top-color: $hp-header_border_color;
							li{
								border-top-color: $hp-header_border_color;
							}
						}
					}
				}
				ul.user-menu{
					border-top-color: rgba(#fff,.24);
				}
			}
			@media (min-width: $screen-md-min){
				background-color: transparent;
				ul.main-menu{
					& > li{
						& > a{
							color: #fff;
						}
						&:hover{
							& > a{
								background-color: material-color('grey','800');
							}
						}
						& > a{
							&:active{
								background-color: material-color('grey','900');
							}
						}
					}
				}
			}
		}
	}
}