#c-slider { /*CONTENEDOR DE FOTOS_EL QUE TIENE BORDE CELESTE*/
   margin: auto;
   width: 500px;  /* ancho del contenedor */
   /*max-width:900px;   como ancho m�ximo */
  
   overflow: hidden;   /*para que se ponga una imagen atras de otra  */
  
  box-shadow: 0 0 0 10px rgb(83, 82, 161);    /* poner un borde celeste al cuadro de las fotos */
  position: absolute;   /*Para que no se mueva culpa del menu*/
  top: 30%; /**/
  left: 10% ;
}

#slider {
  
 display:flex; 
 width: 500%;   /*  por que tengo cinco imagenes */
}

#slider section {
  width: 100%;
}

#slider img {
   display:block;
   /**/
   height: 300px; /* Alto de la Imagen */
   width:100%;
}

#btn-prev,#btn-next {  /*  para los botones <  > */
width: 40px;
height: 40px;
background:rgba(255, 255, 255, 0.5);  /* blanco claro para las flechitas */
/* color: #000000  negro para las flechas */ 
position: absolute;
top: 50%;   /* para que este siempre en el medio */
transform:translatey(-100%);  /*  siempre va a estar en el medio */
line-height: 40px;
font-size: 22px;
font-weight: bold;
text-align: center;
border-radius: 50%;  /* para que parezca circular la flechita */
font-family: monospace;
cursor: pointer;
}

#btn-prev:hover, #btn-next:hover {  /*Efecto*/
   background: rgba(255, 255, 255, 1);  /* cuando pase el mouse se ponga mas claro los redonditos de las flechas  */
}

#btn-prev{
  left: 10px;    /*  posiciona un boton a la izquierda */
}

#btn-next{
  right: 10px;        /*  posiciona el otro boton a la derecha */
}

@media(max-width: 800px){ /*Para hacer RESPONSIVE como yo ya sabia*/

  #c-slider { /*CONTENEDOR DE FOTOS_EL QUE TIENE BORDE CELESTE*/
    margin: 3px;
    height: auto;  
    width: 85%;  /* ancho del contenedor */
    /*max-width:900px;   como ancho m�ximo */
   
    overflow: hidden;   /*para que se ponga una imagen atras de otra  */
   
   box-shadow: 0 0 0 10px rgb(83, 82, 161);    /* poner un borde celeste al cuadro de las fotos */
   position: absolute;   /*Para que no se mueva culpa del menu*/
   top: 30%; /**/
   left: 4% ;
   
 }

 #slider img {
  padding: 3px; /*espacio arriba, abajo y de los lados*/
  display:block;
  /**/
  height: 100%; /* Alto de la Imagen */
  width:100%;

}

}/*FIN RESPONSIVE*/