/*** 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;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

/*** END ESSENTIAL STYLES ***/
/*

/*** EMPIEZO ESTILO ***/
nav.main-menu{
	background: rgb(41,69,115);
	background: linear-gradient(180deg, rgba(41,69,115,1) 0%, rgba(5,90,165,1) 100%);
}

.sf-menu > li a{
padding: 0px .3rem;
color: #FFF;
white-space: nowrap;
text-transform: uppercase;
}
.sf-menu a:hover{
text-decoration: none;
}
.sf-menu:not(.sf-vertical) > li{
border-right-width: 1px;
border-right-color: #FFF;
border-right-style: solid;
}
.sf-menu > li:last-child{
border-right-style: none;
}

.sf-menu:not(.sf-vertical) li ul li
{
background-color: #000;
white-space: nowrap;
display: block;
padding:0px 10px 0px 0px;
border-bottom:1px solid #FFF;
}
.sf-menu li ul li:last-child{
border-bottom: none;
}

.sf-menu:not(.sf-vertical) li:hover{
background-color:#666;
}

/* Flechas */
.sf-menu > li > a.sf-with-ul::after{
font-family: "Font Awesome 5 Free";
content: "\00a0\f107";
font-weight: 900;
}
.sf-menu ul li a.sf-with-ul::after{
	font-family: "Font Awesome 5 Free";
content: "\00a0\f105";
font-weight: 900;
}

.sf-vertical {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 1s;  
}
.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%;
}