@charset "utf-8";
/* CSS Document */

body, .slider {
	margin: 0;
	padding: 0;
	
}

/* slider es el div, slideshow es la ul, contenedor-textoslide son los divs dentro de los li*/

.parrafo {
	display: none;
}

/*A la caja grande (contenedor padre) u a la ul les doy un ancho y un alto*/
.slider, ul {
	height: 250px;
	width: 580px;
}

/*Margen automatico por ambos lados, la gracia de esto es que queda centrado*/
.slider {
	margin: auto;
	top: 30px;
	/*Contenedor, igual que el contenido*/
	overflow: hidden;
	/*padding igual para todos los lados*/
	padding: 20px;
	/*vamos a darle un borde redondeado al contenedor, el ultimo valor hace referencia a la opacidad*/
	border: 1px solid rgba(0,0,0,0.15);
	/*Le damos un radio redondeado a las esquinas*/
	border-radius: 10px;
	/*sombreado del contenedor*/
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);
	/*posicion del contenedor*/
	position: relative;
	/*color de fondo del contenedor*/
	background-color: #DAEEFF;
}

/*Propiedades de los list items*/
.slider li {
	/*uno al lado del otro*/
	float: left;
	/*posicion de los li también va a ser relativa*/
	position: relative;
	/*ancho de los li*/
	width: 600px;
	/*disposición de los li en bloques de linea*/
	display: inline-block;
	/*definimos la altura*/
}

.slider ul {
	/*quitamos el punto que tiene por defecto*/
	list-style: none;
	/*posicion de la lista dentro del contenedor es absoluta y arriba a la izquierda*/
	position: absolute;
	left: 0px;
	top: 0;
	/*ancho de la ul, 600px de un li x 6 lis 3600px*/
	width: 3600px;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	/*color del texto*/
	color: #666;
	
	margin-left: -25px;
}

.contenedor-textoslide {
	margin: 0 auto;
	padding:0;
	width: 550px;
	/*mínimo de ancho*/
	min-height:180px;
	border-bottom: 1px solid #ccc;
	text-align: justify;
}

h4 {
	margin: 0;
	padding: 0;
}

@keyframes animaciontexto{
	0% {
		left:0px; 
		opacity:0;
	}
	2% {
		left:0px;
		opacity:1;
	}
	10%{
		left: 0px;
		opacity:1;
	}
	16.66%{ /*transición texto 1 a texto2*/ 
		left:-600px;
		opacity:1;
	}
	18.33%{
		left:-600px;
		opacity: 1;
	}
	/*transición del texto 2 al texto 3*/
	33.33%{
		left:-1200px;
		opacity: 1;
	}
	45%{
		left:-1200px;
		opacity: 1;
	}
	/*transición del texto 3 al 4*/
	50%{
		left: -1800px;
		opacity: 1;
	}
	61.66%{
		left: -1800px;
		opacity: 1;
	}
	/*transición del texto 4 al 5*/
	66.66%{
		left: -2400px;
		opacity: 1;
	}
	78.33%{
		left: -2400px;
		opacity: 1;
	}
	/*transición del texto 5 al 6*/
	83.33%{
		left: -3000px;
		opacity: 1;
	}
	95%{
		left: -3000px;
		opacity: 1;
	}
	/*Transición para ocultar el texto, opacidad 0*/
	98%{
		left: -1800px;
		opacity: 0;
	}
	/*Vuelvo a empezar la transición desde 0*/
	100% {
		left:0px;
		opacity: 0;
	}
}

/*Animación en la lista de texto 25s de duración y repite infinitamente*/
.slider ul{
	animation: animaciontexto 25s infinite;
}
/*Cuando el cursor se situa encima del texto, la animación queda en pausa hasta que el cursor se situe fuera del texto*/
.slider ul:hover{
	animation-play-state: paused;
}
/*.slideshow {
	width: 600%;
	display: inline-block;
	list-style-type: none;
	padding: 0;
	
}

.contenedor-textoslide {
	float: left;
	width: 16.66%;
	
	
}*/