/* ---------- ANIMACIONES ---------- */
/* desplazamientos -derecha - izquierda - arriva - abajo */
  .a-la-derecha {
    transition: transform 0.3s; /* Agregar una transición suave */
  }
  .a-la-derecha:hover {
    transform: translateX(8px); /* Desplazar 10px a la derecha en hover */
  }

  .a-la-izquierda {
    transition: transform 0.3s; /* Agregar una transición suave */
  }
  .a-la-izquierda:hover {
    transform: translateX(-8px); /* Desplazar 10px a la derecha en hover */
  }

  .a-ariva {
    transition: transform 0.3s; /* Agregar una transición suave */
  }
  .a-ariva:hover {
    transform: translateY(-8px); /* Desplazar 10px a la derecha en hover */
  }

  .a-abajo {
    transition: transform 0.3s; /* Agregar una transición suave */
  }
  .a-abajo:hover {
    transform: translateY(8px); /* Desplazar 10px a la derecha en hover */
  }

/* Menu Baja Automatico */
.dropdown:hover .dropdown-menu {
	display: block;
	opacity: .8;
	transition: all 0.2s ease-in-out;
  }
  .dropdown-menu {
	display: none;
	opacity: 0;
	transition: all 0.2s ease-in-out;
	margin-top: 0;
  }
  .dropdown-menu > li > a {
	padding: 10px 20px;
  }
  
/* Sube over */
.sube{
	top: 0px;
	background-color: transparent ;
}
.sube:hover{
	transform: translate(0, -20px);
	transition-duration: 1s ;
	transition-timing-function: ease-in-out;
	/*background-color: #FFF ;*/
}

.visible{
	opacity: 0.1;
}
.visible:hover{
	opacity: 1;
	transition-duration: 0.5 ;
	transition-timing-function: ease-in-out;
}

/* SOMBRAS */
.sombra {
	box-shadow: 0px 5px 5px#0000007c;
	}	
.sombra-texto {
	text-shadow:0px 3px 8px#0000007c;
}	

/* TEXTOS*/
  @font-face {
	font-family: 'fuente';
	src: url("../fuente.TTF") format("opentype");
  }
  @font-face {
	font-family: 'fuente2';
	src: url("../fuente2.TTF") format("opentype");
  }
  /* Aplicar las fuentes a las clases */
  .tipo {
	font-family: 'Noto Sans Display', sans-serif;
	font-family: 'fuente', sans-serif; /* Usar la fuente definida con @font-face */
  }  
  .tipo2 {
	font-family: 'Noto Sans Display', sans-serif;
	font-family: 'fuente2', sans-serif; /* Usar la fuente definida con @font-face */
  }

  

.texto-borde {
	-webkit-text-stroke: 2px orange;
	color: transparent; 
	}
.mayusculas {
	text-transform: uppercase;
	}
/* ---------- GENERALES ---------- */
.grises{
	filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
	filter: Gray(); /* IE4-8 and 9 */
	} 
.logo-flotante {
	max-width: 400px;
	position: absolute;
	margin: auto;
	top: -5px;
	left: 0px;
	width: 100%;
	z-index: 1000;
	} 
    
.ocultar-movil {
  display: block;
}

.mostrar-movil {
  display: none;
}

@media (max-width: 768px) {
  .ocultar-movil {
    display: none;
  }

  .mostrar-movil {
    display: block;
    padding: 10px;
  }
}