/*styling open close category-button*/
.category-button {
	display:inline;
	position:absolute;
	right:0;
	top:180px;
	z-index:999;
	overflow:hidden;
}
.category-button a {
	text-decoration:none;
	display:block; 
	width:55px;
	text-align:center;
	position:relative;
	background-color:rgba(204,22,48,0.8);
	height:auto; overflow:hidden;	
}
/*.category-button a span.span1{ display:block; width:55px; line-height:210px; height:auto; font-size:1.25em;
text-transform:uppercase;
font-size: 20px;
    word-wrap: break-word;
  }
  .category-button a span.span1 span{ display:block; }*/
/*-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);*/

/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
/*-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;*/

/* Should be unset in IE9+ I think. */
/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}*/


.category-button a span.span2{ position:absolute; bottom:0; left:0;display:block; width:55px; height:54px; text-align:center; line-height:54px; font-size:1.5em; border-top:1px solid #fff;}
/*.btn-open:after {
	color:#333;
	content:"\f0c9";
	font-family:"FontAwesome";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}*/
.btn-open:hover:after {
	color:#fff;
}
.btn-close:after {
	color:#fff;
	content:"\f00d";
	font-family:"FontAwesome";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
	font-size:3em;
	font-weight:lighter;
	/*margin-top:10px;*/ display:block;
	/*margin-right:20px;*/
	text-align:center;
	width:55px;
	height:55px;
	line-height:55px;
	
}
.btn-close:hover:after {
	color: #fff;
}
/*overlay*/
.overlay {
	display:none;
	position: absolute;
	left:0;
	top:180px;
	
	width:100%;
	/* background:#cc1630; */
	background:#565656;
	overflow:auto;
	z-index:998;
	padding:30px 0;
}
.wrap {
	color:#fff;
	text-align:center;
	max-width:90%;
	margin:0 auto;
}

dl.menu-list{ width:100%; height:auto; overflow:hidden; margin-top:3%;}
dl.menu-list dt,dl.menu-list dd{ float:left;}
dl.menu-list dt{ width:10%;}
dl.menu-list dd{ width:90%;}
dl.menu-list dt a{ display:block; width:100%; color:#fff;}
dl.menu-list dd a{ display:block; width:12%; height:auto; float:left; margin-left:2%; color:#fff;}
dl.menu-list a span{ display:block; width:100%;  word-wrap:break-word;}
dl.menu-list a span.span1{ width:70px; max-width:100%; margin:0 auto;}
dl.menu-list a span.span2{ display:table; font-size:12px; height:52px; text-align:center; line-height:normal;}
dl.menu-list a span.span3{ display:table; font-size:12px; height:40px; text-align:center; line-height:normal;}
dl.menu-list a span.span4{ display:table-cell; vertical-align:middle;}
.menu-title{ font-size:2em; text-align:left; padding:0 0 20px; color:#fff; text-transform:uppercase; font-weight:lighter;}

dl.menu-list dt a.a1 span.span2{ height:40px;}
dl.menu-list dt a.a1 span.span3{ height: auto;}


@media screen and (max-width:900px) {
dl.menu-list dt{ width:20%;}
dl.menu-list dd{ width:80%;}	
dl.menu-list dd a{  width:20%;  margin-left:2%; margin-bottom:10px;}
	
	
}

@media screen and (max-width:640px) {
.category-button a { width:50px; }
/*.category-button a span.span1{  width:50px; line-height:180px; font-size:1em;}
.category-button a span.span2{  width:50px; height:49px; text-align:center; line-height:49px; font-size:1.25em;}*/
.menu-title{ font-size:1.5em;}
.btn-close:after { font-size:2em;}
}
@media screen and (max-width:568px) {
dl.menu-list dt{ width:30%;}
dl.menu-list dd{ width:70%;}		
dl.menu-list dd a{  width:30%;  margin-left:2%; margin-bottom:10px;}
	
	
}