/* (A) SLIDE DIMENSIONS */
.slides, .slides * { box-sizing: border-box; }
.slides, .slide {
  width: 100%;
  max-width: 600px; /* optional */
  height: 400px;
}

/* (B) SLIDES LAYERING */
.slides { position: relative; }
.slide {
  position: absolute;
  top: 0; left: 0;
}



/* (D) SHOW/HIDE SLIDE */
.slide {
  z-index: 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s;
    border: solid 8px #616161;
  border-radius:8px ; 
}
.slides input[type=radio]:checked + .slide {
  z-index: 2;
  opacity: 1; visibility: visible;
}

/* (E) NAVIGATION ARROWS */
/* (E1) HIDE RADIO BUTTONS */
.slides input[type=radio] { display: none; }

/* (E2) LAST/nexta ARROWS */
.last, .nexta {
  /* (E2-1) POSITION */
  position: absolute; z-index: 3;
  top: 50%; transform: translateY(-50%);

  /* (E2-2) FONT */
  font-size: 40px; font-weight: 700;

  /* (E3-3) COLORS */
  color: #fff; background: rgba(0, 0, 0, 0.5);

  /* (E3-4) ETC */
  padding: 10px; cursor: pointer;

  /* (E3-5) HIDDEN BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s;
}
.last { left: 0; }
.nexta { right: 0; }

/* (E4) SHOW ARROWS ON HOVER */
.slides:hover .last, .slides:hover .nexta {
  opacity: 1; visibility: visible;
}

/* (F) CAPTION */
.caption {
  /* (F1) DIMENSIONS */
  width: 100%;
  padding: 10px;

  /* (F2) POSITION */
  position: absolute;
  z-index: 3; bottom: 0; left: 0;

  /* (F3) COLORS */
  color: #fff; background: rgba(0, 0, 0, 0.5);


  /* (F4) HIDDEN BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s;
}

/* (F5) SHOW CAPTION ON HOVER */
.slides:hover .caption {
  opacity: 1; visibility: visible;
}