#slides {
	position: relative;	
	height: 340px;
}
#slides, #slides-items .slide-item, figure {
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}
#slides-items .slide-item {
	position: absolute;		
	border: 1px solid rgb(51, 51, 51);
    border-radius: 20px;
	width: calc(100% - 50px);
	height: 100%;
    margin: 0 auto;
    background: #EEE;
	overflow: hidden;

	figcaption {
		position: absolute;
		bottom: 0;
		width: $slides_width;
		max-width: calc(100% - 6.8rem);
		max-height: calc(100% - 3.4rem);
		overflow:auto;
		padding: 1.7rem 3.4rem;
		text-align: center;
		color: #fff;
		background-color: $slides_bg;	
				
		a {
			color: #fff;
			
			&:hover, &:focus, &:active {
				text-decoration: none;	
			}	
		}
	}
}

/* CSS Transition */
#slides-items .slideactive {
	opacity: 1;
	transition: opacity 3s;
	visibility: visible;
}
#slides-items .slide-item:not(.slideactive) {
	opacity: 0;
	transition: opacity 5s;
	visibility: hidden;
	height: 360px;
}

/* Control Buttons */
.slides-control button {
	background-color: $slides_bg;
	
	svg, g {
		fill: #f6f6f6;
	}
	&:hover, &:focus, &:active {
		background-color: rgba(255, 255, 255, 0.9);
		
		svg {
			fill: #474747;
		}	
	} 	
}
#slides {
	
	.slides-control button {
		position:absolute;
		z-index: 1;
	}
	.slides-prev, .slides-next {
		top: calc(50% - 3rem);
		padding: 0.6rem;
				
		svg {
			width: 1.7rem; height: 1.7rem;
		}
	}
	.slides-prev {
		left:0;	
		border-radius: 0px 7px 7px 0px;
	}
	.slides-next {
		right:0;
		border-radius: 7px 0px 0px 7px;
	}
	.slides-playpause {
		top:0; right:0;
		width: 0.7rem; height: 0.7rem;		
		padding:0.7rem;	
		background-color: $slides_bg;	
		
		svg {
			width: 0.7rem;
			height: 0.7rem;
		}
		.play,
		.playpause.paused .pause {
			display: none;	
		}
		.playpause.paused .play {
			display: block;	
		}
	}
}
/* Dots Buttons */
#slides .slides-dots {
	position: relative;
	bottom: 35px;
	z-index: 1;
	max-width: 100%;
	text-align: center;
}
.slides-dots { 
	svg {
		width: 1.7rem; height: 1.7rem;
		fill: $slides_bg;
	}
	button {
		
		&:hover, &:focus, &:active, &[aria-selected="true"] {
			svg {
				fill: $slides_blue;
			}
		}
	}
}
/* Mise en page particuliere */
#slides-items {	height: 100%; }

figure { height: 100%; }

figure .record { position: relative; top: -37px; display: grid; height: 100%; overflow: hidden; grid-template-columns: 340px auto; gap: 20px; background: url(./images/bg.jpg); }

figure .record h3 { font-family: 'Oswald'; margin-bottom: 10px; }

figure .record .description, .record-meta .record .description { margin-top: 10px; height: 130px; }

figure h4 { font-style: italic; font-size: 0.85em; text-align: center; }

figure .record .image {	align-content: center; }

figure .record .record-meta { position: relative; top: 10px; padding-right: 15px; }

figure .record section img { width: 400px; }

button[aria-selected="true"] circle{ fill: #9C4F34; }
button circle:hover{ fill: #4C9A2A; }

@media only screen and (max-width: 660px) {
	#slides-items { width: 100%; }
	#slides-items .slide-item { width: 100%; }  
	#home section img { max-width: 400px; width: 100%; }
	figure .record { display: flex; flex-direction: column; align-items: center; }
	figure .record .image { height: 400px; position:relative; top: 0, }
	figure .record h3 { position: relative; bottom: 150px; width: 100%; background-color: #ccc; } 
	figure .record-meta { text-align: center; position: relative; bottom: 50px; background: #ccc; }
	figure .record-meta .description, figure .record-meta .date, figure .record-meta .description, { display: none; }
}