@font-face{
    font-family: TheBoldFont;
    src: url("../fonts/theboldfont.ttf") format("truetype");
}

.slideshow,
.slideshow-title li{
  list-style-type: none;
}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
		position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    z-index: 99;
    top:-16px;
}

.slideshow li span { 
		position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 25s linear infinite 0s; 
}


.slideshow li:nth-child(1) span { 
    background-image: url("https://live.staticflickr.com/65535/51266260117_388cbf825a_k.jpg"); 
}
.slideshow li:nth-child(2) span { 
    background-image: url("https://live.staticflickr.com/65535/51267609649_678febb6f6_k.jpg");
    animation-delay: 5s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("https://live.staticflickr.com/4810/45814962081_054917ef6f_k.jpg");
    animation-delay: 10s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("https://live.staticflickr.com/65535/51267610339_45ae2fa9d5_k.jpg");   
    animation-delay: 15s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("https://live.staticflickr.com/65535/51266138332_1aaf41c6e1_k.jpg");
    animation-delay: 20s; 
}


@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}


@keyframes titleAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}


.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}

/* SLIDESHOW TITLE */

.slideshow-title li span {
    position: absolute;
    top: calc(50vh - 120px);
    left: 25px;
		font-family: TheBoldFont;
    font-size: 75px;
    font-weight: 400;
    color: white;
    opacity: 0;
    animation: titleAnimation 25s linear infinite 0s;
    z-index: 150;
}

.slideshow-title li:nth-child(1) span { 
}
.slideshow-title li:nth-child(2) span { 
    animation-delay: 5s; 
}
.slideshow-title li:nth-child(3) span { 
    animation-delay: 10s; 
}
.slideshow-title li:nth-child(4) span {    
    animation-delay: 15s; 
}
.slideshow-title li:nth-child(5) span { 
    animation-delay: 20s; 
}

/* BOUTON SCROLL DOWN */

#div-arrow-down {
    position: relative;
    margin-top: -125px;
    z-index: 200;
}

#arrow-down {
    font-size: 64px;
    color: white;
    opacity: 0.25;
    transition: opacity 0.5s;
}

#arrow-down:hover {
    opacity: 1;
    transition-duration: 0.5s;
}