/*body {
  font-family: sans-serif;
  background: #f0f0f0;
  text-align: center;
  margin: 0;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}
*/
.slider {
  position: relative;
  width: 80%;
  margin: auto;
  overflow: hidden;
  border: 2px solid #ccc;
  background: white;
}

.slide {
  width: 100%;
  display: none;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}


.slider-container { position: absolute; top:5px;right:15px; width: 50%; height:27%; overflow: hidden; }
.slide { display: none; position: relative; }
.slide.active { display: block; }
.slide img { width: 100%; cursor: zoom-in; }
.prev { position: absolute; top:5%;left:5%; z-index: 10; }
.next { position: absolute; right: 5%; top:5%; z-index: 10; }
.lightbox { display: none; position: fixed; background: rgba(0,0,0,0.8); width: 100%; height: 100%; }
.lightbox img { max-width: 90%; margin-top: 5%; }
.close { position: absolute; top: 20px; right: 30px; font-size: 2rem; color: white; cursor: pointer; }