.sf-menu, .sf-menu *{margin:0;padding:0;list-style:none;text-align:center;}
.sf-menu li{position:relative;display:inline-block;}
.sf-menu ul{position:absolute;display:none;top:100%;/*left:0;z-index:99;*/}
/* add below */
.sf-menu ul{ text-align:center; }
/*.sf-menu > li{float:left;} */
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:inline-block;}
.sf-menu a{display:block;position:relative;text-align:center;}
.sf-menu ul ul{top:0;/*left:100%;*/}
.sf-menu li.sfHover ul a:hover{color:#FFC;text-decoration:underline;}
/*.sf-menu{float:left;position:relative;left:50%;} */
.sf-menu{display:block;}
/*.sf-menu ul li{left:0%;} */
.sf-menu ul li{display:block;position:relative;}
/* .sf-menu li{left:-50%;} */
.sf-menu{margin-bottom:1em;}
.sf-menu ul{/*box-shadow:2px 2px 6px rgba(0,0,0,.2);*/min-width:12em;*width:12em;}
.sf-menu a{border-left:1px solid #fff;border-top:1px solid #dFeEFF;border-top:1px solid rgba(255,255,255,.5);padding:.4em .75em;text-decoration:none;zoom:1;}
.sf-menu a{color:white;font-weight:bold;}
.sf-menu li{background:#009;white-space:nowrap;*white-space:normal;-webkit-transition:background .2s;transition:background .2s;}
.sf-menu ul li{background:#009;}
.sf-menu ul ul li{background:#009;}
/* add line below */
.sf-menu.sf-arrows > li {margin-right: -4px;}
.sf-menu li:hover,.sf-menu li.sfHover{background:#06F;-webkit-transition:none;transition:none;}
.sf-arrows .sf-with-ul{padding-right:2.5em;*padding-right:1em;}
.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;right:1em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#dFeEFF;border-top-color:rgba(255,255,255,.5);}
.sf-arrows > li > .sf-with-ul:focus:after,.sf-arrows > li:hover > .sf-with-ul:after,.sf-arrows > .sfHover > .sf-with-ul:after{border-top-color:white;}
.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent;border-left-color:#dFeEFF;border-left-color:rgba(255,255,255,.5);}
.sf-arrows ul li > .sf-with-ul:focus:after,.sf-arrows ul li:hover > .sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-left-color:white;}
@media only screen and (max-width:1180px){
.sf-menu, .sf-menu *{text-align:left;}}	
/*@media only screen and (max-width:480px){ */
@media only screen and (max-width:1024px){
.sf-menu{width:12em;}
.sf-menu ul{left:100%;top:0;}
.sf-menu > li{float:none;}
.sf-menu li{width:100%;}
.sf-menu a{text-align:left;}
.sf-menu.sf-arrows > li > .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent;border-left-color:#dFeEFF;border-left-color:rgba(255,255,255,.5);}
.sf-menu.sf-arrows li > .sf-with-ul:focus:after,.sf-menu.sf-arrows li:hover > .sf-with-ul:after,.sf-menu.sf-arrows .sfHover > .sf-with-ul:after{border-left-color:white;}
.sf-menu{ left:10px;}
.sf-menu ul li{left:0;}
.sf-menu li{left:10px;}}
@media only screen and (max-width:480px){
.sf-menu{float:none;position:relative;left:0%;}
.sf-menu ul li{left:0%;}
.sf-menu li{left:0%;}}
@media only screen and (max-width: 450px ) {
.sf-menu a {
		padding: .4em .5em;
		font-size: 13px;
	}
}
@media only screen and (max-width: 390px ) {
	.sf-menu {
		margin-left: -15px;
	}
}