/* =Menu
-------------------------------------------------------------- */

#access {
    display: block;
    position: absolute;
    bottom: 0px;
	left: 0px;
    right: 0px;
	font-size: 0px;
}
#access ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	float: right;
}
#access li {
	display: inline-block;
	font-size: 16px;
}
#access a {
	display: block;
	line-height: 50px;
	padding: 0 30px;
	color: #2c2c2c;
	text-transform: uppercase;
	text-decoration: none;
}
#access ul ul {
	position: absolute;
	bottom: -50px;
	left: 100%;
	right: 0;
	z-index: 9000;
	background: #666666;	
	text-align: center;
	height: 50px;
	white-space: nowrap;
    overflow: hidden;
	-moz-transition: left 1s ease-in-out;
	-ms-transition: left 1s ease-in-out;
	-o-transition: left 1s ease-in-out;
	-webkit-transition: left 1s ease-in-out;
	transition: left 1s ease-in-out;
}
#access ul ul ul {
    left: 100%;
    right: 0px;
    bottom: -50px;
    background-color: #2c2c2c;
}
#access ul ul a {
	line-height: 50px;
	padding: 0 30px;
	height: 50px;
	color: #FFF;
}
#access ul ul ul a {
	padding: 0 20px;
	text-transform: none;
}
#access li:hover > a {
	background: #666666;
	color: #FFF;
}
#access ul ul :hover > a {
	background: #2c2c2c;
}
#access ul ul ul :hover > a {
	background: #666666;
	color: #FFF;
}
#access ul li:hover > ul {
	display: block;
	left: 0%;
    overflow: visible;
}
#menu-toggle {
	font-family: 'Stone City';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	display: none;
	position: absolute;
    top: 15px;
    right: 10px;
    font-size: 0px;
}
#menu-toggle:before {
	content: '\e920';
	font-size: 20px;
}
.page-template-page-about #menu-toggle,
.error404 #menu-toggle {
	color: #FFF;
}
@media only screen and (max-width : 1150px) {
	#access {
		padding-right: 10px;
	}
	#access li {
		font-size: 14px;
	}
	#access a {
		line-height: 40px;
		padding: 0 20px;
	}
	#access ul ul {
		bottom: -40px;
		height: 40px;
	}
	#access ul ul ul {
		bottom: -40px;
	}
	#access ul ul a {
		line-height: 40px;
		padding: 0 20px;
		height: 40px;
	}
	#access ul ul ul a {
		padding: 0 15px;
	}
}
@media only screen and (max-width : 1000px) {
	#access {
		padding-right: 15px;
	}
	#access li {
		font-size: 12px;
	}
	#access a {
		line-height: 30px;
		padding: 0 15px;
	}
	#access ul ul {
		bottom: -30px;
		height: 30px;
	}
	#access ul ul ul {
		bottom: -30px;
	}
	#access ul ul li {
		font-size: 10px;
	}
	#access ul ul a {
		line-height: 30px;
		padding: 0 10px;
		height: 30px;
	}
}
@media only screen and (min-width : 801px) {
	.page-template-page-about #access a,
	.error404 #access a {
		color: #FFF;
	}
	.page-template-page-about #access ul ul ul,
	.error404 #access ul ul ul {
		background-color: #FFF;
	}
	.page-template-page-about #access ul ul ul a,
	.error404 #access ul ul ul a {
		color: #2c2c2c;
	}
	.page-template-page-about #access ul ul :hover > a,
	.error404 #access ul ul :hover > a {
		background: #FFF;
		color: #2c2c2c;
	}
	.page-template-page-about #access ul ul ul :hover > a,
	.error404 #access ul ul ul :hover > a {
		background: #666666;
		color: #FFF;
	}
}
@media only screen and (max-width : 800px) {
	#menu-toggle {
		display: block;
	}
	#access {
		top: 100%;
		left: auto;
		right: 0%;
		bottom: auto;
		background: #FFF;
		text-align: center;
		padding: 0;
		width: 0;
		overflow: hidden;
		z-index: 9000;
		-moz-transition: width .2s ease-in-out;
		-ms-transition: width .2s ease-in-out;
		-o-transition: width .2s ease-in-out;
		-webkit-transition: width .2s ease-in-out;
		transition: width .2s ease-in-out;
	}
	#access > div > ul {
		border-top: solid 2px #2c2c2c;
		border-left: solid 2px #2c2c2c;
		border-bottom: solid 2px #2c2c2c;
	}
	#access.open {
		width: 50%;
	}
	#access ul {
		float: none;
	}
	#access li {
		font-size: 18px;
		letter-spacing: .15em;
		word-spacing: .15em;
		display: block;
		line-height: 50px;
	}
	#access a {
		padding: 0;
		line-height: 50px;
	}
	#access ul ul {
		bottom: auto;
		height: auto;
		position: static;
		left: auto;
		right: auto;
		background: #eee;
	}
	#access ul ul ul {
		background-color: #e0e0e0;
	}
	#access ul ul li {
		font-size: 16px;
		line-height: 50px;
	}
	#access ul ul a {
		line-height: 50px;
		padding: 0;
		height: 50px;
		color: #2c2c2c;
	}
	#access li:hover > a {
		background: #FFF;
		color: #2c2c2c;
	}
	#access ul ul :hover > a {
		background: #666666;
		color: #FFF;
	}
	#access ul ul ul :hover > a {
		background: #2c2c2c;
		color: #FFF;
	}
	#access ul li:hover > ul {
		display: block;
		left: 0%;
		overflow: visible;
	}
}
@media only screen and (max-width : 500px) {
	#access > div > ul {
		border-left: none;
	}
	#access.open {
		width: 100%;
	}
}