/* - See more at: https://www.script-tutorials.com/css3-fade-slider/#sthash.ULKXvoi8.dpuf */
/* fade slider */
.slides-portrait{
	/* 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; 
}
.container-slides{
	/* 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 */
   position: absolute;
   display: block;
}
.container-slides figure{
	margin: 0;
}
/* Keyframes for #anim_slides */
/* Konqueror */
@-khtml-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
/* RIM */
@-rim-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
/* Microsoft */
@-ms-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
/* Opera */
@-o-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
/* Mozilla (e.g Firefox) */
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
/* Webkit (e.g. Safari and Chrome) */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
/* W3C */
@keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
.slides-portrait div figure {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    /* Konqueror */
    -khtml-animation-name: anim_slides;
    -khtml-animation-duration: 55s;
    -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_slides;
    -rim-animation-duration: 55s;
    -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_slides;
    -ms-animation-duration: 55s;
    -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_slides;
    -o-animation-duration: 55s;
    -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_slides;
    -moz-animation-duration: 55s;
    -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_slides;
    -webkit-animation-duration: 55s;
    -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;
    /* W3C */
    animation-name: anim_slides;
    animation-duration: 55s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: forwards;
}

.slides-portrait 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-portrait figure:nth-child(2), .slides-portrait figure:nth-child(2) figcaption {
    -khtml-animation-delay: 5s; /* Konqueror */
    -rim-animation-delay: 5s; /* RIM */
    -ms-animation-delay: 5s; /* Microsoft */
    -o-animation-delay: 5s; /* Opera */
    -moz-animation-delay: 5s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 5s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 5s; /* W3C */
}
.slides-portrait figure:nth-child(3), .slides-portrait figure:nth-child(3) figcaption {
    -khtml-animation-delay: 10s; /* Konqueror */
    -rim-animation-delay: 10s; /* RIM */
    -ms-animation-delay: 10s; /* Microsoft */
    -o-animation-delay: 10s; /* Opera */
    -moz-animation-delay: 10s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 10s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 10s; /* W3C */
}
.slides-portrait figure:nth-child(4), .slides-portrait figure:nth-child(4) figcaption {
    -khtml-animation-delay: 15s; /* Konqueror */
    -rim-animation-delay: 15s; /* RIM */
    -ms-animation-delay: 15s; /* Microsoft */
    -o-animation-delay: 15s; /* Opera */
    -moz-animation-delay: 15s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 15s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 15s; /* W3C */
}
.slides-portrait figure:nth-child(5), .slides-portrait figure:nth-child(5) figcaption {
    -khtml-animation-delay: 20s; /* Konqueror */
    -rim-animation-delay: 20s; /* RIM */
    -ms-animation-delay: 20s; /* Microsoft */
    -o-animation-delay: 20s; /* Opera */    
    -moz-animation-delay: 20s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 20s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 20s; /* W3C */
}
.slides-portrait figure:nth-child(6), .slides-portrait figure:nth-child(6) figcaption { 
    -khtml-animation-delay: 25s; /* Konqueror */
    -rim-animation-delay: 25s; /* RIM */
    -ms-animation-delay: 25s; /* Microsoft */
    -o-animation-delay: 25s; /* Opera */
    -moz-animation-delay: 25s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 25s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 25s; /* W3C */
}
.slides-portrait figure:nth-child(7), .slides-portrait figure:nth-child(7) figcaption {
    -khtml-animation-delay: 30s; /* Konqueror */
    -rim-animation-delay: 30s; /* RIM */
    -ms-animation-delay: 30s; /* Microsoft */
    -o-animation-delay: 30s; /* Opera */
    -moz-animation-delay: 30s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 30s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 30s; /* W3C */
}
.slides-portrait figure:nth-child(8), .slides-portrait figure:nth-child(8) figcaption {
    -khtml-animation-delay: 35s; /* Konqueror */
    -rim-animation-delay: 35s; /* RIM */
    -ms-animation-delay: 35s; /* Microsoft */
    -o-animation-delay: 35s; /* Opera */
    -moz-animation-delay: 35s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 35s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 35s; /* W3C */
}
.slides-portrait figure:nth-child(9), .slides-portrait figure:nth-child(9) figcaption {
    -khtml-animation-delay: 40s; /* Konqueror */
    -rim-animation-delay: 40s; /* RIM */
    -ms-animation-delay: 40s; /* Microsoft */
    -o-animation-delay: 40s; /* Opera */
    -moz-animation-delay: 40s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 40s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 40s; /* W3C */
}
.slides-portrait figure:nth-child(10), .slides-portrait figure:nth-child(10) figcaption {
    -khtml-animation-delay: 45s; /* Konqueror */
    -rim-animation-delay: 45s; /* RIM */
    -ms-animation-delay: 45s; /* Microsoft */
    -o-animation-delay: 45s; /* Opera */
    -moz-animation-delay: 45s; /* Mozilla (e.g Firefox) */
    -webkit-animation-delay: 45s; /* Webkit (e.g. Safari and Chrome) */
    animation-delay: 45s; /* W3C */
}

.slides-portrait figure img{
	display:block;
}
/* keyframes #animation_titles */
/* Konqueror */
@-khtml-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
} 
/* RIM */
@-rim-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
} 
/* Microsoft */
@-ms-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
} 
/* Opera */
@-o-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
} 
/* Mozilla (e.g Firefox) */
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    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;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
/* W3C */
@keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides-portrait figcaption {
	 position:absolute;
    /* left: 0;  -10%; 10%; */
    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:1em;
    bottom:5%;
    width:80%;
    /* css3 animation */
    /* Konqueror */
    -khtml-animation-name: anim_titles;
    -khtml-animation-duration: 55s;
    -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: 55s;
    -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: 55s;
    -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: 55s;
    -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: 55s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    /* Webkit (e.g. Safari and Chrome) */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 55s;
    -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;
    /* W3C */
    animation-name: anim_titles;
    animation-duration: 55s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: forwards;
}

/*------------------------MEDIA---------------------*/
@media screen and (max-width: 478px) {
	.slides-portrait, .container-slides img {
		width:216px;
		height:288px;
	}
	.slides-portrait 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:70%;
		width:78%;
	}
}