/* MENÚS ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Menú principal */
.mostrar-menu {
	position:absolute;
  background-color:transparent;
  right:1em;
  top: -55px; 
  height:30px;
  width:30px;
  padding:20px 20px;
  -webkit-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
  -webkit-transition:-webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition:transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
  z-index:1002;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.mostrar-menu.is-active {
  background-color:none;
}
._layer {
  background: #ec5e49;
  margin-bottom: 4px;
  border-radius: 2px;
  width: 28px;
  height: 4px;
  opacity:1;
  -webkit-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
  -webkit-transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
}
.mostrar-menu:hover .-top {
  -webkit-transform:translateY(-100%);
  -ms-transform:translateY(-100%);
  transform:translateY(-100%);
}
.mostrar-menu:hover .-bottom {
  -webkit-transform:translateY(100%);
  -ms-transform:translateY(100%);
  transform:translateY(100%);
  }
.mostrar-menu.is-active .-top {
  -webkit-transform:translateY(200%) rotate(45deg) !important;
  -ms-transform:translateY(200%) rotate(45deg) !important;
  transform:translateY(200%) rotate(45deg) !important;
}
.mostrar-menu.is-active .-mid{
  opacity:0;
}
.mostrar-menu.is-active .-bottom {
  -webkit-transform:translateY(-200%) rotate(135deg) !important;
  -ms-transform:translateY(-200%) rotate(135deg) !important;
  transform:translateY(-200%) rotate(135deg) !important;
}

.menu-principal.is_active {
  transform: translate3d(0px, 0px, 0px);
}
nav.menu-principal {
	background-color: rgba(0,79,159, 0.95);
  bottom: 0;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  transform: translate3d(0px, -100%, 0px);
  transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
  width: 100%;
	z-index: 1001;
}

.menu-principal > ul {
	position: absolute;		
	display: block;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);				
	padding: 0;	
	margin: 0;
}	
.menu-principal ul li { 
  list-style: none;
  text-align: center;
}

.menu-principal li a {
	font-size: 22px;	
	text-transform: uppercase;		
	font-weight: bold;
	color: #FFF;
	display: block;
	padding: 16px 10px;
}

.menu-principal li ul  {
	position: relative;
	display: block;
}

.menu-principal li ul li {
	font-size: 20px;
}

.menu-principal li ul li ul li {
	font-size: 17px;
}

.menu-principal li a:hover,
.menu-principal li a:focus,
.menu-principal li a:active {
	color:rgb(154,205,50);
}
.menu-principal li a:active, .menu-principal .current-menu-item a {
	color: rgba(255,255,255,.4);
}

.menu-principal li ul li a {
	font-size: 80%;
	color: rgba(255,255,255,.8);
	position: relative;		
	padding: 8px 8px 4px 20px;
	text-transform: none;
	font-weight: normal;	
}

.menu-principal li > ul li a::after {
	content: "";
  display: block;
	position: absolute;
	z-index: 1;		
	bottom: auto;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
  width: 40px;
  height: 1px;
  background-color: rgba(255,255,255,.2);
}

.menu-principal li ul li:last-child a::after {
  display: none;
}

.menu-principal li ul li ul li a::after {
	background-color: rgba(255,255,255,.1);
}

.menu-principal li ul li ul li:last-child a::after {
  display: block;
}

.menu-principal li ul li ul li a {
	padding: 4px;
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ESCRITORIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 782px) {

/* Menú principal */
	.mostrar-menu {
    	display: none;
  }
  nav.menu-principal {
		background-color: transparent;	
		display: inline-block;	
		bottom: 0;
		height: auto;
		left: 0;
		overflow-y: visible;
		position: relative;
		top: 0;
		transform: none;
		width: auto;
	}

	.menu-principal ul {
		position:relative;
		top: auto;				
		width: 100%;
		height: auto;
		transform: none;					
	}	

	.menu-principal ul li {
		display: inline-block;
		text-align: center;
		position: relative;
		font-size: 18px;
	}				

	.menu-principal li a {
		font-size: 16px;
		color: #000;
		color: rgb(0,0,0);		
		padding: 5px;
		border-bottom: none;	
		padding: 28px 10px;					
	}

	.menu-principal li ul  {
		opacity: 0;
		visibility: hidden;
		position: absolute;	
		margin: 0;
		margin-top: 28px;		
		padding: 0;
	}

	.menu-principal li:hover ul {
		opacity: 1;
		visibility: visible;		
		display: block;
		margin-top: -1px;			
		z-index: 120;
	}

	.menu-principal li ul,
	.menu-principal li:hover ul,
	.menu-principal li > ul::before,
	.menu-principal li:hover > ul::before {
		-webkit-transition: all ease-in-out 0.4s;
		-moz-transition: all ease-in-out 0.4s;
		-ms-transition: all ease-in-out 0.4s;
		-o-transition: all ease-in-out 0.4s;
		transition: all ease-in-out 0.4s;
	}

	.menu-principal li:hover > ul::before {
		content:"";
		display: block;
		width: 0;
		height: 0;	
		position: absolute;	
		z-index: 1;	
		left: calc(50% - 6px);
		top: -7px;	
		border-right: 6px solid transparent;
		border-top: 2px solid transparent;			
		border-left: 6px solid transparent;
		border-bottom: 6px solid rgba(0,79,159,0.9);
	}	

	.menu-principal li ul li {
		background-color: rgba(0,79,159,0.9);					
		position: relative;
		display: block;
		text-align: left;			
	}

	.menu-principal li ul li:first-child {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;	
	}

	.menu-principal li ul li:last-child {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;	
	}

	.menu-principal li ul li ul li {
		background-color: transparent;				
	}	

	.menu-principal li ul li ul {
		position: relative;	
	}

	.menu-principal li ul li:hover > ul::before {
		display: none;		
	}

	.menu-principal ul > li:last-child a {
		padding-right: 0;	
	}
	
	.menu-principal > ul > li:first-child a {
		padding-left: 0;
	}		

	.sub-menu {
	  	width: calc(100% + 100px) !important;
			min-width: 220px !important;  
  		left: -68px;	
	}

	.menu-principal li ul li a {
	  text-align: center;			
		padding: 10px 5px;
	}

	.menu-principal li  > ul li a::after {
		bottom: -1px;
	}

	.menu-principal li a:hover,
	.menu-principal li a:focus,
	.menu-principal li a:active {
		color:rgb(0,177,235);
	}
	.menu-principal li a:active, .menu-principal .current-menu-item a {
		color:rgb(130,135,140);			
	}

	.menu-principal li ul li a {
		color: rgb(255,255,255);	
	}

	.menu-principal li ul li.current-menu-item a{
		color: rgb(255,255,255);	
	}

	.menu-principal li ul li ul li a {
		padding: 10px 4px;	
	}
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ESCRITORIO EXTRAGRANDE  -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {	
	.menu-principal li a {padding: 28px 20px;}	
}

/* FIN MENÚS ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */