.slides {
	/* The container element needs to be
	relatively positioned. */
	position: relative;
}

.slides figure
{	/* These are the individual slides. */
   display: none;
}
 
/* Next & previous buttons */
.prev, .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;
  user-select: none;
}

/* Position the "next button" to the right */
.next
{
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-
through */
.prev:hover, .next:hover
{
  background-color: rgba(0,0,0,0.8);
}

.slides img
{
   margin-bottom: 0;
}

/* Format title aninmation */
.slides figure figcaption
{
  animation-name: figcaption-slides;
  animation-duration: 3s;
	position:absolute;
  left: 4%;
  margin: 0 auto;
  padding: 0.33em 1%;
  background-color:transparent;
  border-radius:10px 10px 10px 10px;
  box-shadow:0 0 5px #FFFFFF inset;
  color:#FFFFFF;
  font-size:1.0em;
  font-weight: 600;
  text-shadow: 0.06em 0.09em black;
  top:5%; /* align text to the top of the picture */
  width:90%;
  opacity: 1;
}

@keyframes figcaption-slides
{
    /* The animation-duration  equals 100% */
    0% {
        opacity: 0;
    }
    80% { /* End of one slide is 'duration of one slide' * 100%/ 'aninmation-duration' = 6*100/96 = 6.25% */
        opacity: 0;
    }
    90% { /* Fade out */ 
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

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

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

/* Fading animation */
.fade
{
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade
{
  from {opacity: .4}
  to {opacity: 1}
}
 
 /*------------------------MEDIA---------------------*/
@media screen and (max-width: 478px) {
	.slides-landscape, .slides-landscape img {
		width:216px;
		height:288px;
	}
	.slides-living-places figcaption {
		border-radius:5px 5px 5px 5px;
		box-shadow:0 0 3px #FFFFFF inset;
		font-size:0.9em;
 		margin:2% auto;
		padding:3px;
		position:absolute;
		top:5%;
		width:78%;
	}
}