*, *::before, *::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html { 
	min-height: 100%;
	background-color: #7F1525;
}

body {
	height: 100%;
}



/* ------------------------------------------------- */
/* --- Mise en forme de la page Index (accueil) --- */
/* ----------------------------------------------- */

/* diaporama */
.diaporama {
	list-style: none;
	z-index: 1;
}

.diaporama li span {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation: animationImage 24s linear infinite 0s;
	-moz-animation: animationImage 24s linear infinite 0s;
	animation: animationImage 24s linear infinite 0s;
}

.diaporama li:nth-child(1) span {
	background-image: url(../images/index-baiser-a-la-russe.jpg);
}

.diaporama li:nth-child(2) span {
	background-image: url(../images/index-stalingrad2.jpg);
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	animation-delay: 6s;
}

.diaporama li:nth-child(3) span {
	background-image: url(../images/index-dark-brador.jpg);
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	animation-delay: 12s;
}

.diaporama li:nth-child(4) span {
	background-image: url(../images/index-cantine.jpg);
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	animation-delay: 18s;
}

@-webkit-keyframes 
animationImage {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in;
	}
	12.5% {
		opacity: 1;
		-webkit-animation-timing-function: ease-out;
	}
	25% {
		opacity: 1;
	}
	37.5% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes 
animationImage {
	0% {
		opacity: 0;
		-moz-animation-timing-function: ease-in;
	}
	12.5% {
		opacity: 1;
		-moz-animation-timing-function: ease-out;
	}
	25% {
		opacity: 1;
	}
	37.5% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes 
animationImage {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in;
		-moz-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	12.5% {
		opacity: 1;
		-webkit-animation-timing-function: ease-out;
		-moz-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	25% {
		opacity: 1;
	}
	37.5% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Crédits du diaporama */
#credits {
position: relative;
height: 100vh;
width:100vw;
}

#credits span {
position: absolute;
bottom: 15px;
right: 15px;
	color: #F5DDD2;
	font-family: "Audiowide", sans-serif;
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
}

#credits-border span {
position: absolute;
bottom: 15px;
right: 15px;
	color: #F5DDD2;
	font-family: "Audiowide", sans-serif;
	-webkit-text-stroke: 1px #7F1525;
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
}

/* Flèche pour inciter à scroller */
.scroll-down {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.scroll-down img {
    width: 40px;
    height: 40px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}