/* CSS Document */
/* Definimos un ancho fluido y una altura fija para nuestro menu*/


/*El logo sera flotado a la izquierda*/


/*Fijamos nuestro nav en 100% ancho*/
#menu_emb {
  -webkit-position: absolute;
  -moz-position: absolute;
  -ms-position: absolute;
 -o- position: absolute;
  position: absolute;

  top: 60px;
  width: 100%;

  /*Quitamos estilos por defecto de el tag UL*/
  ul {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
  }

  /*Convertimos nuestra lista de enlaces en un menú horizontal*/
  li {
    -webkit-background: #0075C9;
	-moz-background: #0075C9;	 
	-ms-background: #0075C9;	  
	-o-background: #0075C9;	  
	background: #0075C9;	  	  
    -webkit-text-align: center;
	  -moz-text-align: center;
	  -ms-text-align: center;
	  -o-text-align: center;
	  text-align: center;
	  

    /* Damos estilo a nuestros enlaces*/
    a {
    font-size: clamp(1rem, 0.5rem + 0.7vw, 1rem);
      color: #fff;
      text-decoration: none;
      line-height: 40px;
      padding: 0 26px;

      &:active,
      &:focus   {
        color: #003961;
		font-weight: 600;
      }
    }
  }
	
.menu2 {
	-webkit-display: none;
	-moz-display: none;
	-ms-display: none;
	-o-display: none;
	display: none;
	 }
 
.menumedia {
	-webkit-display: none;
	-moz-display: none;
	-ms-display: none;
	-o-display: none;
	display: none;
	align-content: center;
	 }
	.menumedia2 {
	 -webkit-display: none;
	 -moz-display: none;
	 -ms-display: none;
	 -o-display: none;
	 display: none;
	}
	.menumedia3 {
	 -webkit-display: none;
	 -moz-display: none;
	 -ms-display: none;
	 -o-display: none;
	 display: none;
	}

  /*Agregamos una animación al despliegue del menú*/
  .open-menu_emb {
    -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,.5);
	  -moz-box-shadow: 0px 5px 20px rgba(0,0,0,.5);
	  -ms-box-shadow: 0px 5px 20px rgba(0,0,0,.5);
	  -o-box-shadow: 0px 5px 20px rgba(0,0,0,.5);
	  box-shadow: 0px 5px 20px rgba(0,0,0,.5);
    max-height: 600px;
	min-width: 100%;
	font-weight: 1000;
    -webkit-transition: max-height .4s ease;
    -moz-transition: max-height .4s ease;
    -ms-transition: max-height .4s ease;
    -o-transition: max-height .4s ease;
    transition: max-height .4s ease;

	  a { font-size: 1.5rem;
	  }
	  .menu2 { 
		  -webkit-display: inherit;
		  -moz-display: inherit; 
		  -ms-display: inherit; 
		  -o-display: inherit; 
		  display: inherit; 
	   		-webkit-background: #003961;
 	   		-moz-background: #003961;
	   		-ms-background: #003961;
	   		-o-background: #003961;
	   		background: #003961;

				  a {
					font-size: clamp(1.2rem, 0.5rem + 0.7vw, 1rem);
					color: #0075C9;
					text-decoration: none;
					line-height: 40px;
					padding: 0 26px;

			  &:active,
			  &:focus   {
				color: #3b8ede;
				font-weight: 600;
			  }
			}
	  }
	  .menumedia { 
		  	-webkit-display: inherit; 
		  	-moz-display: inherit;
		  	-ms-display: inherit; 
		   	-o-display: inherit; 
		   	display: inherit; 
		 	-webkit-background: #003961;
  		 	-moz-background: #003961;
		 	-ms-background: #003961;
		 	-o-background: #003961;
		 	background: #003961;

		   a {
					color: #0075C9;
			   &:active,
			  &:focus   {
				color: #0075C9;
				font-weight: 600;
			  }
			}
		    float: left;

				  
	  }
  }
}

/*Botón mostrar menú*/
#nav-mobile_emb {

	background: #0075C9;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  float: right;
  width: 40px;
  height: 40px;
  position: relative;
  right: 0;
  top: -40px;
  opacity: 1;

  /*Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado*/
  &.nav-open_emb {
	-webkit-opacity: 0.5;
	  -moz-opacity: 0.5;
	  -ms-opacity: 0.5;
	  -o-opacity: 0.5;
	  opacity: 0.5;
  }

  span {
    -webkit-display: block;
    -moz-display: block;
    -ms-display: block;
    -o-display: block;
    display: block;

    width: 60%;
    margin: 4px auto;
    height: 4px;
    background: #fff
  }
}

@media only screen and (min-width: 1200px) {
  /*ocultamos botón #nav-mobile*/
  #nav-mobile_emb{ 
	  -webkit-display: none; 
	  -moz-display: none; 
      -ms-display: none; 
	  -o-display: none; 
	  display: none; 
	}

  /*Nuestro nav con id #menu lo flotaremos a la derecha*/
  #menu_emb {
    width: auto;
    float: right;
    top: 0;
    position: relative;

    .open-menu_emb {

		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
    }

    /*Hacemos reset de max-height*/
    ul {
      max-height: inherit;
    }

    /*Alineamos los items de forma horizontal*/
    li {
      float: left;
      border: 0;
      background: transparent;

      a {
        display: block;
        color: #0075C9;
        padding: 0 26px;

        &:hover {
          color: #666;
        }
      }
    }
  }
}

/* a partir de aqui el CSS de las animaciones */

@keyframes anim-fade-in { 
	from { 
		-webkit-opacity: 0;
		-moz-opacity: 0; 
		-ms-opacity: 0; 
		-o-opacity: 0;
		opacity: 0;
	} to { 
		-webkit-opacity: 1;
		-moz-opacity: 1;
		-ms-opacity: 1;
		-o-opacity: 1;
		opacity: 1;
	} 
}

@keyframes anim-up { 
	from { 
		-webkit-opacity: 0;
		-moz-opacity: 0; 
		-ms-opacity: 0; 
		-o-opacity: 0;
		opacity: 0;
		-webkit-transform: translateY(50px);
		-moz-transform: translateY(50px); 
		-ms-transform: translateY(50px); 
		-o-transform: translateY(50px);
		transform: translateY(50px);
		
	} 
	to { 
		-webkit-opacity: 1; 
		-moz-opacity: 1; 
		-ms-opacity: 1; 
		-o-opacity: 1;
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px); 		
		-ms-transform: translateY(0px); 
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}  
}		

@keyframes anim-down { 
	from { 
		-webkit-opacity: 0; 
		-moz-opacity: 0; 
		-ms-opacity: 0; 
		-o-opacity: 0;
		opacity: 0;
		-webkit-transform: translateY(-50px);
		-moz-transform: translateY(-50px); 
		-ms-transform: translateY(-50px); 
		-o-transform: translateY(-50px);
		transform: translateY(-50px);
	} 
	to { 
		-webkit-opacity: 1;
		-moz-opacity: 1; 
		-ms-opacity: 1; 
		-o-opacity: 1;
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}  
}		

@keyframes anim-left { 
	from { 
		-webkit-opacity: 0;
		-moz-opacity: 0; 
		-ms-opacity: 0; 
		-o-opacity: 0;
		opacity: 0;
		-webkit-transform: translateX(100px); 
		-moz-transform: translateX(100px); 
		-ms-transform: translateX(100px); 
		-o-transform: translateX(100px);
		transform: translateX(100px); 
	} 
	to { 
		-webkit-opacity: 1;
		-moz-opacity: 1; 
		-ms-opacity: 1; 
		-o-opacity: 1;
		opacity: 1;
		-webkit-transform: translateX(0px);
		-moz-transform: translateX(0px); 
		-ms-transform: translateX(0px); 
		-o-transform: translateX(0px);
		transform: translateX(0px);
	}  
}		

@keyframes anim-right { 
	from { 
		-webkit-opacity: 0;
		-moz-opacity: 0; 
		-ms-opacity: 0; 
		-o-opacity: 0;
		opacity: 0;
		-webkit-transform: translateX(-100px);
		-moz-transform: translateX(-100px); 
		-ms-transform: translateX(-100px); 
		-o-transform: translateX(-100px);
		transform: translateX(-100px);
	} 
	to { 
		-webkit-opacity: 1;
		-moz-opacity: 1; 
		-ms-opacity: 1; 
		-o-opacity: 1; 
		opacity: 1; 				
		-webkit-transform: translateX(0px);
		-moz-transform: translateX(0px); 
		-ms-transform: translateX(0px); 
		-o-transform: translateX(0px);
		transform: translateX(0px);
	}  
}		

.anim-up, .anim-down, .anim-left, .anim-right, .anim-fade-in {
	-webkit-animation-duration: 1s; /* la animacion dura X segundos */
	-moz-animation-duration: 1s; /* la animacion dura X segundos */
	-ms-animation-duration: 1s; /* la animacion dura X segundos */
	-o-animation-duration: 1s; /* la animacion dura X segundos */
	animation-duration: 1s; /* la animacion dura X segundos */	
	-webkit-animation-delay: 0.2s; /* esperamos X segundos antes de hacer la animacion */			
	-moz-animation-delay: 0.2s; /* esperamos X segundos antes de hacer la animacion */			
	-ms-animation-delay: 0.2s; /* esperamos X segundos antes de hacer la animacion */			
	-o-animation-delay: 0.2s; /* esperamos X segundos antes de hacer la animacion */			
	animation-delay: 0.2s; /* esperamos X segundos antes de hacer la animacion */			
	-webkit-animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
	-moz-animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
	-ms-animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
	-o-animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
	animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */

}

.anim-up { 
	-webkit-animation-name: anim-up; 
	-moz-animation-name: anim-up; 
	-ms-animation-name: anim-up; 
	-o-animation-name: anim-up; 
	animation-name: anim-up; 
}
.anim-down { 
	-webkit-animation-name: anim-down; 
	-moz-animation-name: anim-down; 
	-ms-animation-name: anim-down; 
	-o-animation-name: anim-down; 
	animation-name: anim-down; 
}
.anim-left { 
	-webkit-animation-name: anim-left;
	-moz-animation-name: anim-left; 
	-ms-animation-name: anim-left; 
	-o-animation-name: anim-left; 
	animation-name: anim-left; 
}
.anim-right { 
	-webkit-animation-name: anim-right;
	-moz-animation-name: anim-right; 
	-ms-animation-name: anim-right; 
	-o-animation-name: anim-right; 
	animation-name: anim-right; 	
}
.anim-fade-in { 
	-webkit-animation-name: anim-fade-in; 
	-moz-animation-name: anim-fade-in; 
	-ms-animation-name: anim-fade-in; 
	-o-animation-name: anim-fade-in; 
	animation-name: anim-fade-in; 
}

.anim-pause-2 { 
	-webkit-animation-delay: 2s; 
	-moz-animation-delay: 2s; 
	-ms-animation-delay: 2s; 
	-o-animation-delay: 2s; 
	animation-delay: 2s; 
} /* la animacion empieza en 2 seg. */		
.anim-pause-3 { 
	-webkit-animation-delay: 3s; 
	-moz-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	-o-animation-delay: 3s; 
	animation-delay: 3s; 
} /* la animacion empieza en 3 seg. */
.anim-pause-4 { 
	-webkit-animation-delay: 4s; 
	-moz-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	-o-animation-delay: 4s; 
	animation-delay: 4s; 
} /* la animacion empieza en 4 seg. */
.anim-pause-5 { 
	-webkit-animation-delay: 5s; 
	-moz-animation-delay: 5s; 
	-ms-animation-delay: 5s; 
	-o-animation-delay: 5s; 
	animation-delay: 5s; 
} /* la animacion empieza en 5 seg. */

/* todas las animaciones pausadas */
.paused { 
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-ms-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}