/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
    background-color: #3F3F3F;
}
.sf-menu > li {
	float: left;
    white-space: nowrap;
    border-right: 1px solid #FFF;
}
.sf-menu > li:last-child{border-right: none;}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}
.sf-menu a:hover{background-color: #1E5799;}
.sf-menu a {
	display: block;
	position: relative;
    color: #FFF !important;
    text-decoration: none !important;
    padding: 0.2rem 0.5rem;
    transition: all 300ms;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 1s;
  background-color: #3F3F3F;
  /* If you want the width of the closed menu to expand to its
  widest top-level menu item (like its "Supersubs" submenus do),
  replace the width rule above with the following two rules. */

  /*
  min-width: 12em;
  *width: 12em;
  */
}
.sf-vertical.is-active{
    opacity: 1;
    height: auto;
}
.sf-vertical ul, .sf-vertical ul ul{
	position: static;
    /*left:	0%;
	top: 0;*/
    margin-left: 1rem;
}
.sf-vertical > li {
  float: none;
}
.sf-vertical li {
  width: 100%;
}

/* mi hack */
a.sf-with-ul::after{
font-family: "Ionicons";
transition: all 500ms;
display: inline-block;
padding: 0;
margin: 0;
overflow: hidden;
height: 1rem;
}

.sf-menu > li > a.sf-with-ul::after, .sf-menu.sf-vertical a.sf-with-ul::after{
content: '\00a0\f3d0';
}

.sf-menu ul a.sf-with-ul::after{
content: '\00a0\f3d3';
}

.sf-menu > li.sfHover > a.sf-with-ul::after{
content: '\00a0\f3d8';
}

nav#menu-wrapper{margin-top: -0.5rem; color: #FFF;}