a.menu-link {
  	    float: right;
		    display: block;
		    padding: 1em;
		}
		.menu, .menu > ul ul {
			clear: both;
			-webkit-transition: all 0.3s ease-out;  
			-moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
		.js .menu, .js .menu > ul ul {
			overflow: hidden;
			max-height: 0;
			background: rgba(0,0,0,0.1);
		}
		.menu.active, .js .menu > ul ul.active {
			max-height: 55em;
		}
		.menu > ul {
			border-top: 1px solid #808080;
		}
		.menu li a {
			color: #000;
			display: block;
			padding: 0.8em;
			border-bottom: 1px solid #808080;
			position: relative;
		}
		.menu li.has-subnav > a:after {
			content: '+';
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			font-size: 1.5em;
			padding: 0.25em 0.5em;
		}
		.menu li.has-subnav > a.active:after {
			content: "-";
		}
		
		
		@media screen and (min-width: 48.25em) {
			.pattern {
				overflow: visible;
			}
			a.menu-link {
			   display: none;
			}
			.js .menu, .js .menu > ul ul {
				max-height: none;
				overflow: visible;
				background: none;
			}
			.js .menu > ul ul {
				background: #808080;
				display: none;
			}
			.js .menu > ul li:hover > ul {
				display: block;
			}
			.menu ul {
				margin: 0 0 0 -0.25em;
				border: 0;
			}
			.menu li a {
				border: 0;
			}
			.menu li.has-subnav > a {
				padding-right: 2em;
			}
			.menu li.has-subnav > a:after {
				content: ">";
				font-size: 1em;
				padding: 0.8em 0.5em;
			}
			.menu .level-1 > li.has-subnav > a:after {
				content: "▼";
			}
			.menu > ul li {
				margin: 0 0.25em;
			}
			.menu > ul > li {
				display: inline-block;
				position: relative;
			}
			.menu > ul ul {
				position: absolute;
				top: 0;
				left: 12em;
				width: 12em;
			}
			.menu > ul ul li {
				position: relative;
			}
			.menu > ul ul.level-2 {
				top: 3em;
				left: 0;
			}
		}