.header-bar {
	padding-top:25px;
	padding-bottom:25px;
}

.header-bar .row {
	position: relative;
}

.header-bar .header-logo {
	width:200px;
	height:143px;
	float:left;
	margin-left:15px;
}

.header-bar .header-logo a {
	display:block;
}

.navigation {
	position:absolute;
    bottom:0;
    right:15px;
}

.navigation ul {
	list-style:none;
    margin:0;
    padding:0;
}

.navigation ul li {
	float:left;
    display:block;
    margin-left:15px;
}

.navigation ul li:first-child {
    margin-left:0;
}

.navigation ul li a {
	display:inline-block;
    text-transform:uppercase;
    color:#77787b;
    font-size:18px;
    padding:32px 20px;
    letter-spacing:0.2px;
    font-weight:300;
}

.navigation ul li a:hover,
.navigation ul li a.nav-selected {
    color:#231f20;
    text-decoration:underline;
}
    

.header-bar .social-media-icons {
	position:absolute;
    top:0;
    right:35px;
}

.mobile-menu {
	display:none;
	position:relative;
}

.mobile-menu .menu-button {
	display:block;
	text-transform:uppercase;
	background-color:#a7a9ac;
	padding:0 5px;
	margin-right:15px;
	margin-top:30px;
	width:75px;
	height:30px;
	line-height:30px;
	float:right;
	color:#FFF;
	position:relative;
	overflow:hidden;
	cursor:pointer;
}

.mobile-menu .menu-button:after {
	content:"";
    position:absolute;
    bottom:-22px;
    right:-58px;
    background-color:#FFF;
    height:30px;
    width:47px;
    display:block;
    
    /* See https://css-tricks.com/working-with-shapes-in-web-design/#shapes-transform-rotate */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    -webkit-transform-origin:0 100%;
	-moz-transform-origin:0 100%;
	-ms-transform-origin:0 100%;
	-o-transform-origin:0 100%;
	transform-origin:0 100%;
}

.mobile-menu .menu-button:before {
	content:"\002630";
	padding-right:5px;
}

.mobile-menu > .navigation {
	z-index:10000;
	background-color:#FFFFFF;
	left:0;
    right:0;
    bottom:inherit;
	display:none;
}

.mobile-menu > .navigation ul {
	display:block;
	background-color:rgba(255,255,255,0.5);
}

.mobile-menu > .navigation ul li {
	float:none;
}

.mobile-menu > .navigation ul li a {
	padding:5px 15px;
    text-align:right;
    display:block;
    white-space:nowrap;
    color:#231f20;
}

.mobile-menu.is-open > .navigation {
	display:block;
}


@media screen and (min-width: 992px) {
	.header-bar .header-logo {
	    margin-left:0;
	}
	.navigation {
	    right:0;
	}
	.header-bar .social-media-icons {
	    right:20px;
	}
}

@media screen and (max-width: 767px) {
	.navigation > ul,
	.header-bar .social-media-icons {
		display:none;
	}
	.mobile-menu {
		display:block;
	}
	
	.header-bar .header-logo {
		width:130px;
		height:97px;
	}
}