/*--------------------------------------------------------------
## Header Above
--------------------------------------------------------------*/
.hatterassailing-header-above {
	width: 100%;
}

.hatterassailing-header-above ul{
	margin: 0;
}
.hatterassailing-header-above li {
	list-style: none;
	display: inline;
	padding: .5em;
	max-width: 30px
  }

  .hatterassailing-header-above {
	text-align: right;
	z-index: 999;
	padding: 2px 10px;
  }

  .hatterassailing-header-above a{
	  color: #333;
  }
  .hatterassailing-header-above a:hover, .hatterassailing-header-above a:focus, .hatterassailing-header-above a:active {
	color: #eeeeee;
  }


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header-wrap {
	-webkit-box-shadow: 0 2px 2px -2px #ccc;
	        box-shadow: 0 2px 2px -2px #ccc;
}

.site-header {
	padding-bottom: 0em;
	background: none;
}

@media screen and (min-width: 769px) {
	.site-header {
		display: block;

	}
	.hatterassailing-wrap-branding {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}

}

@media screen and (max-width: 768px) {
	.site-header {
		display: block;

	}
	.hatterassailing-wrap-branding {
		margin: 0 1.2rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}

}

.header-image {
	margin: 0 auto;
}

.header-image img {
	display: block;
	margin: 0 auto;
}

.custom-logo-link {
	display: inline-block;
	margin: 0 auto;
}

.site-branding {
	text-align: center;
	padding: 1em 0 ;
}

@media screen and (min-width: 769px) {
	.site-branding {
		text-align: center;
		padding: 15px;
	}
}

.site-title {
	margin: 0 1em;
	font-family: 'Lora', serif;
	font-size: 38px;
	font-weight: bold;
	line-height: 1.2;
	color: #333332;
}

.site-title a {
	text-decoration: none;
	color: inherit;
}

.site-description {
	margin: .4375em 0 0;
	font-family: 'Lora', serif;
	font-size: 17px;
	font-weight: inherit;
	line-height: 1.4;
	word-wrap: break-word;
	color: #757575;
}


/*--------------------------------------------------------------
## Main navigation menu
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	font-family: 'Source Sans Pro', sans-serif;
	text-transform: uppercase;
}
@media screen and (min-width: 769px) {
	.main-navigation {
		-ms-flex-preferred-size: 80%;
		    flex-basis: 80%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.primary-menu-container {
		width: 100% !important;
		padding: 15px 0;
	}
}
@media screen and (max-width: 37.5em) {
	.main-navigation {
		padding-bottom: 0;
		margin-bottom: 0;
		max-width: 58rem;
	}
	.main-navigation a {
		text-align: right;
	}
	.main-navigation ul {
		margin-top: 20px;
	}
}

.main-navigation .sub-menu {
	font-size: 0.8rem;
}

.menu-toggle {
	display: block;
	margin: 1.2em auto;
	padding: .6em 1.2em .5em;
	font-family: 'Lora', serif;
	font-size: 80%;
	text-transform: uppercase;
	border: 2px solid black;
	border-radius: 0;
	background: transparent;
}
@media screen and (max-width: 37.5em) {
	.main-navigation{
		padding-bottom: 1rem;
	}
	.menu-toggle {
		margin-bottom: 0;
	}
}

.main-navigation a {
	display: block;
	width: 100%;
	padding: .5em 1em .5em 0;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:focus {
	text-decoration: none;
}

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

.main-navigation li {
	position: relative;
}

.main-navigation ul ul li {
	padding-left: 1em;
}

.main-navigation .dropdown,
.main-navigation button.dropdown-toggle {
	display: none;
}

.main-navigation .menu {
	display: none;
}

@media screen and (max-width: 37.5em) {
	.main-navigation.toggled-on .menu {
		display: block;
		margin-top: 20px;
	}
}

@media screen and (min-width: 769px) {
	.menu-toggle {
		display: none;
	}

	.main-navigation ul li a {
		padding: .4em 0.5em;
	}

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

	.main-navigation ul ul {
		display: none;
		position: absolute;
		top: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		background: white;
		margin-left: 0;
		-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
		        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	.main-navigation ul ul a {
		width: 200px;
	}

	.main-navigation ul ul li {
		padding-left: 0;
		margin-left: 0;
	}

	.main-navigation ul ul li a {
		width: 218px;
		background: none;
	}

	.main-navigation ul ul ul {
		top: 0;
		left: 100%;
		min-height: 100%;
	}

	.main-navigation .menu {
		display: -webkit-box;
		display: -ms-flexbox;
		width: 100%;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
	}

	.main-navigation .menu-item-has-children,
	.main-navigation .page_item_has_children {
		padding-right: 0.7em;
	}

	.main-navigation .dropdown,
	.main-navigation button.dropdown-toggle {
		display: block;
		background: transparent;
		position: absolute;
		right: 0;
		top: 50%;
		width: 0.7em;
		height: 0.7em;
		font-size: inherit;
		line-height: inherit;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
		overflow: visible;
	}

	.main-navigation .dropdown-symbol {
		display: block;
		background: transparent;
		position: absolute;
		right: 20%;
		top: 35%;
		width: 60%;
		height: 60%;
		border: solid black;
		border-width: 0 2px 2px 0;
		-webkit-transform: translateY(-50%) rotate(45deg);
		        transform: translateY(-50%) rotate(45deg);
	}

	.main-navigation ul ul .dropdown,
	.main-navigation ul ul button.dropdown-toggle {
		top: 40%;
		right: 0.2em;
	}

	.main-navigation ul ul .dropdown-symbol {
		-webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}

	/*
	 * If the dropdown toggle is active with JS, then
	 * we'll take care of showing the submenu with JS.
	 *
	 * "focus-within" is an alternative to focus class for
	 * supporting browsers (all but IE/Edge) for no-JS context
	 * (e.g. AMP) See https://caniuse.com/#feat=css-focus-within
	 */
	.main-navigation li:hover > ul,
	.main-navigation li.toggled-on > ul,
	.main-navigation:not(.has-dropdown-toggle) li:focus > ul,
	.main-navigation:not(.has-dropdown-toggle) li:focus-within > ul {
		display: block;
	}
}

/**
* for the offset menu and logo for desktop and larger screens
*/
@media screen and (min-width: 60em) {

	.has-offset-menu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}

	.has-offset-menu .site-branding {
		padding: 5px 2em;
	}

	.has-offset-menu .main-navigation {
		-ms-flex-item-align: center;
		    align-self: center;
		margin: 0;
		max-width: 60%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
	}

}/*end media query has-offset-menu*/