/**CSS du slider**/

/*Le grand conteneur faisant office de fenêtre*/
.container {
	overflow: hidden;
	width: 100%;
	height: 600px;
	position: relative;
}


/* Le conteneur des slides */
#slideshow .slider {
    animation: slider 32s infinite;
    width: 400%;
    height: 100%;
    position: relative;
	font-size:0;
	white-space: nowrap;
}


/*Slide unitaire*/
.slideunit {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 25%; /*Est égal à la taille de la div slider divisée par le nombre de slides*/
}

/*Bloc au dessus du bouton*/
/*.blocinfocc {
	background-color: rgba(88,88,88,0.8);
	position: absolute;
	top: 50%;
	right: 10%;
	padding: 10px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	min-width: 200px;
}*/

.blocinfocc {
    background-color: rgba(88,88,88,0.6);
    position: absolute;
    top: 50%;
    right: 20%;
    padding: 20px;
    text-align: center;
    color: #fff;
    font-size: 46px;
    transform: translateY(-50%);
}

/*Bouton pour consulter la fiche*/
.boutonficheslidecc {
    position: absolute;
    top: 90%;
    text-decoration: none;
    border: none;
    background-color: rgba(255,2,21,0.6);
    color: #fff;
    padding: 10px;
    cursor: pointer;
    width: 200px;
    transition: 0.5s;
    font-size: 26px;
	right:10px;
}

.boutonficheslidecc:hover {
	background-color: #ff0215;
	opacity: 1;
}

/*Image de l'affaire*/
.imgcc {
	width: 100%;
	position:relative;
	top:50%;
	transform: translateY(-50%);
	vertical-align: top;
}


/* Animation */

@keyframes slider {
0%, 20%, 100%	{ left: 0 }
25%, 45%		{ left: -100% }
50%, 70%		{ left: -200% }
75%, 95%		{ left: -300% }

}

/*Timeline*/
@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 100%;	}
}
	
	
#timeline {
    position: absolute;
    bottom: 5px;
    height: 5px;
    background: rgba(255,255,255,.5);
    width: 0;
    animation: timeliner 32s infinite;
}