@charset "UTF-8";

/*
Layout
======================================
*/
/* THIS DIV WRAPS ALL PAGE CONTENT SO THAT IT ALL SLIDES OVER WHEN OPENING OFFSCREEN MENU */
.pagewrap {
  position: relative;
	background: #f4f4f4;
	padding-bottom: 50px;
}

/*
Masthead
======================================
*/
.masthead {
  position: relative;
}

.menu-link {
  position: absolute;
  font-size: 1.5em;
}

.menu-link:link,
.menu-link:visited {
  color: #000;
  background: rgba(256, 256, 256, .6);
  border-radius: 4px;
  padding: .2em .4em;
}
a.menu-link {
	display: none;
	text-decoration: none;
	border: none;
	margin-top: 20px;
	margin-left: 0;
}
/* DETERMINE THE SCREEN WIDTH AT WHICH THE OFFSCREEN MENU ICON SHOULD SHOW */
@media screen and (max-width: 767px) { 
	a.menu-link {
		display: block;
	}
}

.menu-link:hover,
.menu-link:active {
  color: #fff;
  background: rgba(0, 0, 0, .6);
}

.subtitle {
  text-align: center;
  font-size: 1.125em;
  margin: .5em 0;
}

/*
Nav Panel
======================================
*/

.navpanel {
  background: #666;
  z-index: 9999;
  position: fixed;
  left: -15.625em; /*or width of your navigation panel*/
  width: 15.625em; /*should match the above value*/
	overflow-y: auto;
	overflow-x: hidden;
}


.navpanel ul {
  
}

.navpanel ul li a {
  display: block;
  border-bottom: 2px solid #444;
  padding: 1em;
	transition: 0.2s ease;
	background: #488ca7;
	text-decoration: none;
}

.navpanel li ul li a {
	display: block;
  border-bottom: 1px solid #444;
  padding: 1em;
	transition: 0.2s ease;
	background: #333;
	text-align: right;
}
.navpanel a:link,
.navpanel a:visited {
  color: #fff;
}

.navpanel a:hover,
.navpanel a:active {
  background: #29586e;
}

ul,
li {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}