/*Aquí definimos las propiedades del contenedor del slider. Recordáis el div inicial? Si os fijáis, el nombre de la clase es el mismo. */

.slideshow-container{
 max-width: 1000px;
 position:relative;
 margin:auto;
}

/* A continuación escondemos las imágenes por defecto */
.mySlides{
 display:none;
}

/* Añadimos los estilos para los botones de avanzar y retroceder, una vez más usando las clases que hemos definido previamente en el HTML. */
.slide-prev, .slide-next{
 cursor:pointer;
 position:absolute;
 top:50%;
 width:auto;
 margin-top:-22px;
 padding:16px;
 color:white;
 font-weight:bold;
 font-size:18px;
 transition:0.6s ease;
 border-radius:0 3px 3px 0;
}

/*Colocamos los botones a la derecha e izquierda*/

.slide-next{
 right:0;
 border-radius:3px 0 0 3px;
}

/*Cuando pasemos el ratón por encima de ellos, les añadimos un efecto para que se oscurezca su fondo. Esto lo logramos con una propiedad CSS llamada “hover”, y definimos el color de fondo que deseamos. En este caso, usamos rgba, siglas de “red, green, blue, alpha”. Los tres primeros será el valor de cada color que, mezclados, darán el negro. Al ponerlos todos a 0 estamos indicando la ausencia de éste. El último valor es la transparencia, la cual será imperceptible porqué es muy pequeño.*/
.slide-prev:hover, .slide-next:hover{
 background-color:rgba(0,0,0,0.8);
}

/*Los estilos para el texto*/
.slide-text{
 color:#f2f2f2;
 font-size:15px;
 padding:8px 12px;
 position:absolute;
 bottom:8px;
 width:100%;
 text-align:center;
}

.slide-numbertext{
 color:#f2f2f2;
 font-size:12px;
 padding:8px 12px;
 position:absolute;
 top:0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


/*Y finalmente las animaciones*/
.fade{
 -webkit-animation-name:fade;
 -webkit-animation-duration:1.5s;
 animation-name:fade;
 animation-duration:1.5s;
}

@-webkit-keyframes fade{
 from{opacity:.4}
 to{opacity:1}
}

@keyframes fade{
 from{opacity:.4}
 to{opacity:1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .slide-prev, .slide-next,.slide-text {font-size: 11px}
}