/*	-------------
	SLIDEOUT MENU
	-------------	*/
.slideout-menu {
	background-color			:	DarkGreen;
	position					:	fixed;
	left						:	0;
	top							:	0;
	bottom						:	0;
	right						:	0;
	z-index						:	0;
	width						:	220px;
	overflow-y					:	auto;
	-webkit-overflow-scrolling	:	touch;
	display						:	none;
}
@media only screen and (max-device-width : 812px) {
	.slideout-menu {
		width	:	375px;
	}
}

.slideout-panel {
	background-color:	white;
	/*position		:	relative;*/
	position	:	absolute;
		right	:	0px;
		left	:	0px;
	/*z-index			:	1;*/
	will-change		:	transform;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
	overflow	:	hidden;
}

.slideout-open .slideout-menu {
	display		:	block;
}




/*	=========
	HAMBURGER
	=========	*/
.hamburger
{
	cursor				:	pointer;
	display				:	block;
	padding				:	10px;
	position			:	relative;
	z-index				:	1;
	-webkit-user-select	:	none;
	user-select			:	none;
}
.hamburger span
{
  display: block;
  width: 30px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

.hamburger span:first-child
{
  transform-origin: 0% 0%;
}

.hamburger span:nth-of-type(n+1)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
.slideout-open .hamburger span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: Blue /*#232323*/;
}

/*
 * But let's hide the middle one.
 */
.slideout-open .hamburger span:nth-of-type(2)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Oh yeah, and the last one should go the other direction
 */
.slideout-open .hamburger span:nth-of-type(3)
{
  transform: rotate(-45deg) translate(1px, 2px);
}







/*	=========
	MENU LIST
	=========	*/
.NavigationSide .Header pre {
	background-color:	#333;
	color			:	ForestGreen;
	font-size		:	10px;
	margin			:	0;
	padding			:	17px 0px;
	text-align		:	center;
}
.Linklist .Title {
	border-bottom	:	1px solid #999;
	border-top		:	1px solid #999;
	box-shadow		:	0px 2px 5px -2px #333;
	font-weight		:	bold;
	opacity			:	0.5;
	padding			:	10px;
}
.Linklist ul {
	margin			:	0px;
	padding-left	:	0px;
}
.Linklist .Link {
	display			:	block;
	letter-spacing	:	0.1px;
	padding			:	10px;
}
.Linklist .Link:hover {
	background-color	:	ForestGreen;
	color				:	white;
}

.Linklist .Link .field_title {
	color	:	SeaGreen;
}