/* - See more at: https://www.script-tutorials.com/css3-fade-slider/#sthash.ULKXvoi8.dpuf */
/* fade slider */
/* SLIDES IMAGES */
.slides-living-places{
	/* The container element needs to be
	relatively positioned and display:
	block so that the slides can be
	"stacked up" inside of it
   Percentages are employed to 
	allow for responciveness */

	margin: auto; /* centeres container in the middle */
	overflow: hidden;
	position: relative;
	width:360px; 
	height:480px; 
}

.slides-living-places figure {
	/* These are the individual slides
   each containing an img and caption.
   they are positioned absolute at the
   top of the slideshow container, so they
   will be stacked up like a deck of cards */
   margin: 0;
   opacity: 0;
   position: absolute;
   top:0;
    /* css3 animation */
       /* W3C */
    animation-name: slides-living-places;
    animation-duration: 96.0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: forwards;
    /* Konqueror */
    -khtml-animation-name: slides-living-places;
    -khtml-animation-duration: 96.0s;
    -khtml-animation-timing-function: linear;
    -khtml-animation-iteration-count: infinite;
    -khtml-animation-direction: normal;
    -khtml-animation-delay: 0;
    -khtml-animation-play-state: running;
    -khtml-animation-fill-mode: forwards;
    /* RIM */
    -rim-animation-name: slides-living-places;
    -rim-animation-duration: 96.0s;
    -rim-animation-timing-function: linear;
    -rim-animation-iteration-count: infinite;
    -rim-animation-direction: normal;
    -rim-animation-delay: 0;
    -rim-animation-play-state: running;
    -rim-animation-fill-mode: forwards;
    /* Microsoft */
    -ms-animation-name: slides-living-places;
    -ms-animation-duration: 96.0s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: normal;
    -ms-animation-delay: 0;
    -ms-animation-play-state: running;
    -ms-animation-fill-mode: forwards;  
    /* Opera */
    -o-animation-name: slides-living-places;
    -o-animation-duration: 96.0s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
    -o-animation-delay: 0;
    -o-animation-play-state: running;
    -o-animation-fill-mode: forwards;    
    /* Mozilla (e.g Firefox) */
    -moz-animation-name: slides-living-places;
    -moz-animation-duration: 96.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0s;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    /* Webkit (e.g. Safari and Chrome) */
    -webkit-animation-name: slides-living-places;
    -webkit-animation-duration: 96.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards; 
}
/* Keyframes for #slides-living-places */
/* W3C */
@keyframes slides-living-places {
    /* The animation-duration  equals 100% */
    0% {
        opacity: 0;
    }
    4% { /* This is 4 % of animation-duration */
        opacity:1.0;
    }
    6.25% { /* End of one slide is 'duration of one slide' * 100%/ 'aninmation-duration' = 6*100/96 = 6.25% */
        opacity:1.0;
    }
    10.25% { /* Fade out */ 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Konqueror */
@-khtml-keyframes slides-living-places {
    0% {
        opacity: 0;
    }
    4% {
        opacity:1.0;
    }
    6.25% {
        opacity:1.0;
    }
    10.25% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* RIM */
@-rim-keyframes slides-living-places {
    0% {
        opacity: 0;
    }
    4% {
        opacity:1.0;
    }
    6.25% {
        opacity:1.0;
    }
    10.25% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Microsoft */
@-ms-keyframes slides-living-places {
    0% {
        opacity: 0;
    }
    4% {
        opacity:1.0;
    }
     6.25% {
        opacity:1.0;
    }
    10.25% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Opera */
@-o-keyframes slides-living-places {
    0% {
        opacity: 0;
    }
    4% {
        opacity:1.0;
    }
    6.25% {
        opacity:1.0;
    }
    10.25% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Mozilla (e.g Firefox) */
@-moz-keyframes slides-living-places {
    0% {
        opacity: 0;
    }
    4% {
        opacity:1.0;
    }
    6.25% {
        opacity:1.0;
    }
    10.25% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Webkit (e.g. Safari and Chrome) */
@-webkit-keyframes slides-living-places {
    0% {
        opacity: 0;
    }
    4% {
        opacity:1.0;
    }
    6.25% {
        opacity:1.0;
    }
    10.25% { 
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* TITLE ANIMATION */
.slides-living-places figure figcaption {
	 position:absolute;
    margin:0 auto;
    padding:-15px;
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:1.0em;
    top:5%; /* align tect to to the top of the picture */
    width:80%;
    opacity: 0;
    /* css3 animation */
       /* W3C */
    animation-name: anim_titles;
    animation-duration: 96.0s; /* For each text slide */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0s;
    animation-play-state: running;
    animation-fill-mode: forwards;
    /* Konqueror */
    -khtml-animation-name: anim_titles;
    -khtml-animation-duration: 96.0s;
    -khtml-animation-timing-function: linear;
    -khtml-animation-iteration-count: infinite;
    -khtml-animation-direction: normal;
    -khtml-animation-delay: 0;
    -khtml-animation-play-state: running;
    -khtml-animation-fill-mode: forwards; 
    /* RIM */
    -rim-animation-name: anim_titles;
    -rim-animation-duration: 96.0s;
    -rim-animation-timing-function: linear;
    -rim-animation-iteration-count: infinite;
    -rim-animation-direction: normal;
    -rim-animation-delay: 0;
    -rim-animation-play-state: running;
    -rim-animation-fill-mode: forwards; 
    /* Microsoft */
    -ms-animation-name: anim_titles;
    -ms-animation-duration: 96.0s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: normal;
    -ms-animation-delay: 0;
    -ms-animation-play-state: running;
    -ms-animation-fill-mode: forwards; 
    /* Opera */
    -o-animation-name: anim_titles;
    -o-animation-duration: 96.0s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
    -o-animation-delay: 0;
    -o-animation-play-state: running;
    -o-animation-fill-mode: forwards; 
    /* Mozilla (e.g Firefox) */
    -moz-animation-name: anim_titles;
    -moz-animation-duration: 96.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0s;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    /* Webkit (e.g. Safari and Chrome) */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 96.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
 
}
/* keyframes #animation_titles */
/* W3C */
@keyframes anim_titles {
    0% {
        left:100%;
        opacity: 0;
    }
    4% {
        left:10%;
        opacity:1.0;
    }
    10.25% { /* At full opacity of a slide % */
        left:10%;
        opacity:1.0;
    }
    14.25% { /* Slide back but invisable */
        left:100%;
        opacity: 0;
    }
    100% {
        left:100%;
        opacity: 0;
    }
}
/* Konqueror */
@-khtml-keyframes anim_titles {
    0% {
        left:100%;
        opacity: 0;
    }
    4% {
        left:10%;
        opacity:1.0;
    }
    10.25% {
        left:10%;
        opacity:1.0;
    }
    14.25% { /
        left:100%;
        opacity: 0;
    }
    100% {
        left:100%;
        opacity: 0;
    }
} 
/* RIM */
@-rim-keyframes anim_titles {
    0% {
        left:100%;
        opacity: 0;
    }
    4% {
        left:10%;
        opacity:1.0;
    }
   10.25% {
        left:10%;
        opacity:1.0;
    }
    14.25% { /
        left:100%;
        opacity: 0;
    }
    100% {
        left:100%;
        opacity: 0;
    }
} 
/* Microsoft */
@-ms-keyframes anim_titles {
    0% {
        left:100%;
        opacity: 0;
    }
    4% {
        left:10%;
        opacity:1.0;
    }
   10.25% {
        left:10%;
        opacity:1.0;
    }
    14.25% { /
        left:100%;
        opacity: 0;
    }
    100% {
        left:100%;
        opacity: 0;
    }
} 
/* Opera */
@-o-keyframes anim_titles {
    0% {
        left:100%;
        opacity: 0;
    }
    4% {
        left:10%;
        opacity:1.0;
    }
   10.25% {
        left:10%;
        opacity:1.0;
    }
    14.25% { /
        left:100%;
        opacity: 0;
    }
    100% {
        left:100%;
        opacity: 0;
    }
} 
/* Mozilla (e.g Firefox) */
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity: 0;
    }
    4% {
        left:10%;
        opacity:1.0;
    }
   10.25% {
        left:10%;
        opacity:1.0;
    }
    14.25% { /
        left:100%;
        opacity: 0;
    }
    100% {
        left:100%;
        opacity: 0;
    }
}
/* Webkit (e.g. Safari and Chrome) */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity: 0;
    }
    4% {
        left:10%;
        opacity:1.0;
    }
    10.25% {
        left:10%;
        opacity:1.0;
    }
    14.25% { /
        left:100%;
        opacity: 0;
    }
    100% {
        left:100%;
        opacity: 0;
    }
}

.slides-living-places figure:nth-child(1) {
/* the very first slide is relatively
   positioned in order to give height
   to the container element */
   position: relative;

}
/* css3 delays */
.slides-living-places figure:nth-child(2), .slides-living-places figure:nth-child(2) figcaption {
    -khtml-animation-delay: 6.0s; /* Konqueror */
    -rim-animation-delay: 6.0s; /* RIM */
    -ms-animation-delay: 6.0s; /* Microsoft */
    -o-animation-delay: 6.0s; /* Opera */
    -moz-animation-delay: 6.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 6.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 6.0s; /* W3C */
}
.slides-living-places figure:nth-child(3), .slides-living-places figure:nth-child(3) figcaption {
    -khtml-animation-delay: 12.0s; /* Konqueror */
    -rim-animation-delay: 12.0s; /* RIM */
    -ms-animation-delay: 12.0s; /* Microsoft */
    -o-animation-delay: 12.0s; /* Opera */
    -moz-animation-delay: 12.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 12.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 12.0s; /* W3C */
}
.slides-living-places figure:nth-child(4), .slides-living-places figure:nth-child(4) figcaption {
    -khtml-animation-delay: 18.0s; /* Konqueror */
    -rim-animation-delay: 18.0s; /* RIM */
    -ms-animation-delay: 18.0s; /* Microsoft */
    -o-animation-delay: 18.0s; /* Opera */
    -moz-animation-delay: 18.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 18.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 18.0s; /* W3C */
}
.slides-living-places figure:nth-child(5), .slides-living-places figure:nth-child(5) figcaption {
    -khtml-animation-delay: 24.0s; /* Konqueror */
    -rim-animation-delay: 24.0s; /* RIM */
    -ms-animation-delay: 24.0s; /* Microsoft */
    -o-animation-delay: 24.0s; /* Opera */    
    -moz-animation-delay: 24.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 24.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 24.0s; /* W3C */
}
.slides-living-places figure:nth-child(6), .slides-living-places figure:nth-child(6) figcaption { 
    -khtml-animation-delay: 30.0s; /* Konqueror */
    -rim-animation-delay: 30.0s; /* RIM */
    -ms-animation-delay: 30.0s; /* Microsoft */
    -o-animation-delay: 30.0s; /* Opera */
    -moz-animation-delay: 30.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 30.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 30.0s; /* W3C */
}
.slides-living-places figure:nth-child(7), .slides-living-places figure:nth-child(7) figcaption {
    -khtml-animation-delay: 36.0s; /* Konqueror */
    -rim-animation-delay: 36.0s; /* RIM */
    -ms-animation-delay: 36.0s; /* Microsoft */
    -o-animation-delay: 36.0s; /* Opera */
    -moz-animation-delay: 36.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 36.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 36.0s; /* W3C */
}
.slides-living-places figure:nth-child(8), .slides-living-places figure:nth-child(8) figcaption {
    -khtml-animation-delay: 42.0s; /* Konqueror */
    -rim-animation-delay: 42.0s; /* RIM */
    -ms-animation-delay: 42.0s; /* Microsoft */
    -o-animation-delay: 42.0s; /* Opera */
    -moz-animation-delay: 42.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 42.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 42.0s; /* W3C */
}
.slides-living-places figure:nth-child(9), .slides-living-places figure:nth-child(9) figcaption {
    -khtml-animation-delay: 48.0s; /* Konqueror */
    -rim-animation-delay: 48.0s; /* RIM */
    -ms-animation-delay: 48.0s; /* Microsoft */
    -o-animation-delay: 48.0s; /* Opera */
    -moz-animation-delay: 48.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 48.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 48.0s; /* W3C */
}
.slides-living-places figure:nth-child(10), .slides-living-places figure:nth-child(10) figcaption {
    -khtml-animation-delay: 54.0s; /* Konqueror */
    -rim-animation-delay: 54.0s; /* RIM */
    -ms-animation-delay: 54.0s; /* Microsoft */
    -o-animation-delay: 54.0s; /* Opera */
    -moz-animation-delay: 54.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 54.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 54.0s; /* W3C */
}
.slides-living-places figure:nth-child(11), .slides-living-places figure:nth-child(11) figcaption {
    -khtml-animation-delay: 60.0s; /* Konqueror */
    -rim-animation-delay: 60.0s; /* RIM */
    -ms-animation-delay: 60.0s; /* Microsoft */
    -o-animation-delay: 60.0s; /* Opera */
    -moz-animation-delay: 60.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 60.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 60.0s; /* W3C */
}
.slides-living-places figure:nth-child(12), .slides-living-places figure:nth-child(12) figcaption {
    -khtml-animation-delay: 66.0s; /* Konqueror */
    -rim-animation-delay: 66.0s; /* RIM */
    -ms-animation-delay: 66.0s; /* Microsoft */
    -o-animation-delay: 66.0s; /* Opera */
    -moz-animation-delay: 66.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 66.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 66.0s; /* W3C */
}
.slides-living-places figure:nth-child(13), .slides-living-places figure:nth-child(13) figcaption {
    -khtml-animation-delay: 72.0s; /* Konqueror */
    -rim-animation-delay: 72.0s; /* RIM */
    -ms-animation-delay: 72.0s; /* Microsoft */
    -o-animation-delay: 72.0s; /* Opera */
    -moz-animation-delay: 72.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 72.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 72.0s; /* W3C */
}
.slides-living-places figure:nth-child(14), .slides-living-places figure:nth-child(14) figcaption {
    -khtml-animation-delay: 78.0s; /* Konqueror */
    -rim-animation-delay: 78.0s; /* RIM */
    -ms-animation-delay: 78.0s; /* Microsoft */
    -o-animation-delay: 78.0s; /* Opera */
    -moz-animation-delay: 78.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 78.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 78.0s; /* W3C */
}
.slides-living-places figure:nth-child(15), .slides-living-places figure:nth-child(15) figcaption {
    -khtml-animation-delay: 84.0s; /* Konqueror */
    -rim-animation-delay: 84.0s; /* RIM */
    -ms-animation-delay: 84.0s; /* Microsoft */
    -o-animation-delay: 84.0s; /* Opera */
    -moz-animation-delay: 84.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 84.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 84.0s; /* W3C */
}
.slides-living-places figure:nth-child(16), .slides-living-places figure:nth-child(16) figcaption {
    -khtml-animation-delay: 90.0s; /* Konqueror */
    -rim-animation-delay: 90.0s; /* RIM */
    -ms-animation-delay: 90.0s; /* Microsoft */
    -o-animation-delay: 90.0s; /* Opera */
    -moz-animation-delay: 90.0s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 90.0s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 90.0s; /* W3C */
}



/*------------------------MEDIA---------------------*/
@media screen and (max-width: 478px) {
	.slides-living-places, .slides-living-places 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%;
	}
}