#slider { /* Este es el div que maneja las dimensiones de carrusel de imagenes */
	width:650px; /*** Tamaño de largo del cuadrado**/
	height:350px; /*Altura del carrusel*/
	position: relative; /*Posicion Que no se mueve*/
	left: -550%;	/*Posicion centrada*/
	z-index: 1;	/*Posicion en Z*/
	top: -28em;/*Distancia sobre la parte superior*/
	margin:40px auto 0;
	background-color:#fff;
	border:10px solid #fff;
	-moz-transition:all 150ms ease-in;  /* Para que sea compatible en mozilla*/
	-webkit-transition:all 150ms ease-in; /* Para que sea compatible en chrome*/
	-o-transition:all 150ms ease-in;
}
#slider:hover { /*Transicion*/
	background-color:#fff;
	border:10px solid #fff;
}
#slider:hover #pause { /* detener la transicion */
	opacity:1;
}
#slider:hover #progress { /* el efecto para la transicion*/
	background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { /* Cuando se pasa el cursor sobre la lista desordenada <ul> dentro de #slider <div> , se realiza una pausa
*/
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
#mask { /* crea la mascara*/
	

	overflow:hidden;
}
#pause { /* Caracteristicas de pausa */
	width:650px;
	height:350px;
	position:relative;
	top:0;
	opacity:0;
	background-image:url(../images/paused.png);
	background-position:320px 10px;
	background-repeat:no-repeat;
	pointer-events:none; 
	-moz-transition:all 150ms ease-in; /* Pone pausa para en mozilla*/
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#progress { /* es la barra de progreso */
	width:10px;
	height:5px;
	position:relative;
	top:-1px;
	background-color:#080FFF;
	-moz-transition:all 150ms linear; /* Desvanece la barra de progreso cuando se pasa el cursor o esta en pause*/
	-webkit-transition:all 150ms linear;
	-o-transition:all 150ms linear;
	-moz-animation:progress 18s infinite; /* el progreso de la barra en tiempo*/
	-webkit-animation:progress 18s infinite;
}
#overlay { /* crea el efecto relajado del slider */
	width:600px;
	height:350px;
	position:absolute;
	top:0;
	/*background-image:url(../images/overlay.png);*/
	background-position:center;
	background-repeat:no-repeat;
	pointer-events:none;
	opacity:0.5;
	-moz-animation:overlay-fade 18s infinite; /* La animación se desvanecerá #overlay <div> cuando se termina el control deslizante*/
	-webkit-animation:overlay-fade 18s infinite;
}
#slider ul { /* Esta es la lista ordenada que contiene las fotos*/
	width:2600px; /* el calculo del tamaño de las 4 fotos (4 slides x 650px in width) */
	position:relative;
	left:0px;
	margin:0;
	padding:0;
	list-style:none;
	-moz-animation:slide-animation 18s infinite; /* Cambia la velocidad del slide*/
	-webkit-animation:slide-animation 18s infinite;
}
#slider li { /* muestra los elementos de la lista ordenada*/
	width:650px;
	height:350px;
	position:relative;
	display:inline; /* Esto alinea el <li> 's horizontalmente para que el <ul> puede desplazarse horizontalmente. De forma predeterminada, <li> 's align verticalmente*/
	float:left; /* Elimina la separacion de las fotos*/
	margin:0;
	padding:0;
	background-image:url(../images/loader.gif); /* Adds a loader GIF to each slide to show that content is loading */
	background-position:50% 50%;
	background-repeat:no-repeat;
}
#slider li span { /* la barra gris que aparece*/
	display:block;
	width:650px;
	position:absolute; 
	bottom:0; 
	left:0;
	padding:15px 20px;
	pointer-events:none; /* Permite que se haga clic en el pie de las fotos*/
	background-color:rgba(54,44,48,0.6);/*color de la barra */
	border-top:1px solid #362c30;
	text-shadow:1px 1px 1px #362c30;
}
#slider ul li span h2 { /* Estilo de captura*/
	font-size:20px;
	line-height:30px;
	font-weight:bold; /**normal*/
	color:#fff;
	text-shadow:1px 1px 1px #00ec30; /* color de la sombra de las letras*/
}
#slider ul li span p { /* Estilo de los parrafos */
	font-size:14px;
	line-height:20px;
	font-weight:normal;
	color:#fff;
	text-shadow:1px 1px 1px #362c30;
}
/**Esta es para modifcar el tamaño de las diapositivas*/
@-webkit-keyframes slide-animation { /* Crea los ciclos de animacion en chrome*/
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-650px; opacity:1;}
	45% {left:-650px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1300px; opacity:1;}
	70% {left:-1300px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1950px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1950px; opacity:1;} /* El deslizador se desvanece todo el camino antes de reiniciarse. Si no se desvanecen, vería todas las diapositivas a través del carrusel muy rápido allí camino de vuelta al principio.*/
	100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation { /* El carrusel para FireFox cambia el movimiento dependienndo del tamaño de las diapositivas*/
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-650px; opacity:1;}
	45% {left:-650px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1300px; opacity:1;}
	70% {left:-1300px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1950px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1950px; opacity:1;}
	100% {left:0px; opacity:0;}
}
/*esta parte es para modificar el tamño de la barra de progreso*/
@-webkit-keyframes progress { /* Animation for the progress bar in WebKit browsers */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:650px; opacity:1;}
	22.5% {width:650px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:650px; opacity:1;}
	47.5% {width:650px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:650px; opacity:1;}
	72.5% {width:650px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:650px; opacity:1;}
	98% {width:650px; opacity:0;}
	100% {width:0px; opacity:0;}
}
@-moz-keyframes progress { /* Animation for the progress bar in FireFox */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:650px; opacity:1;}
	22.5% {width:650px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:650px; opacity:1;}
	47.5% {width:650px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:650px; opacity:1;}
	72.5% {width:650px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:650px; opacity:1;}
	98% {width:650px; opacity:0;}
	100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade { /* Esta animación se desvanece #overlay <div> (el gradiente en la parte superior de la corredera) cuando la corredera llega a su fin en los navegadores WebKit*/
	0% {opacity:0;}
	2% {opacity:0.5;}
	95% {opacity:0.5;}
	98% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes overlay-fade { 
	0% {opacity:0;}
	2% {opacity:0.5;}
	95% {opacity:0.5;}
	98% {opacity:0;}
	100% {opacity:0;}
}