.pattern {}
a.menu-link, a.join-link, a.sign-in-link,  a.sign-out-link, a.my-sub-link, a.show-product-link {
    float: left;
	    display: block;
	    padding: .4em;
	}
	.level-1 {
		display:none;
	}
	.menu {
		width:100%;
	}
	.menu, .menu > ul ul {
		clear: both;
		-webkit-transition: all 0.0s ease-out;  
		-moz-transition: all 0.0s ease-out;
		-ms-transition: all 0.0s ease-out;
		-o-transition: all 0.0s ease-out;
		transition: all 0.0s ease-out;
	}
	.js .menu, .js .menu > ul ul {
		overflow: hidden;
		max-height: 0;
/*		background: rgba(0,0,0,0.1);*/
		margin:0em;
		list-style-type:none;
	}
	.menu.active, .js .menu > ul ul.active {
		max-height: 100%;
		background-color:#BB2F5E;
	}
	.menu > ul {
		border-top: 1px solid #808080;
			padding-left:1em;
			list-style-type:none;

	}
	.menu li a {
		font-size:15px;
		text-decoration:none;
		color: #fff;
		display: block;
		padding: 0.5em 0.6em 0.4em 0.3em; 
		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 {
			width:80%;
			overflow: visible;
			float:left;
			margin-top:18px;
		}
		a.menu-link, a.join-link, a.sign-in-link, a.my-sub-link, a.sign-out-link, a.show-product-link {
		   display: none;
		}
		.js .menu, .js .menu > ul ul {
			max-height: none;
			overflow: visible;
		}
		.js .menu > ul ul {
			background: #e9eef3;
			display: none;
		}
		.js .menu > ul li:hover > ul {
			display: block;
			z-index:100;
		}
		.menu ul {
			margin: -0.6em 0 0 -0.25em;
			border: 0;
		}
		.menu li a {
			font-size:13px;
			padding: 0.5em 0.6em 0.4em 0.3em; 
/*			padding: 0.0em 0.0em 0.0em 0.0em; */
			border: 0;

		}
		.menu li.has-subnav > a {
			padding-right: 0em;
			color:#fdff5e;
		}
		.menu li.has-subnav > a:after {
			content: ">";
			font-size: 1em;
			padding: 0.5em 0.5em;
		}
		.menu .level-1 > li.has-subnav > a:after {
			content: "";
			padding: 0.0em 0.0em;
		}
		.menu > ul li {
			margin: 0 0.1em;
		}
		.menu > ul > li {
			display: inline-block;
			position: relative;
		}
		.menu > ul ul {
			position: absolute;
			top: 0;
			left: 5em;
			width: 12em;
		}
		.menu > ul ul li {
			position: relative;
			border-bottom:dotted 1px #cccccc;
		}
		.menu > ul ul.level-2 {
			padding:0em;
			margin:0em;
			display:none;
			top: 1.7em;
			left: 0;
		}
	
		.menu > ul ul.level-2 a{
			color: #bb2f5e;
		}

		.level-1 {
			display:block;
		}

	}