/* ------------------------------
pictures carrousel gallery
------------------------------ */
.mySlides {
	display: none
}

/* container carrousel */
.picture-container {
	width: 95%;
	position: relative;
	margin: auto;
}

/* pictures container gallery */
.picture-container img, .gallery-item img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 10px 10px 16px 4px var(--grayverydark);
}

.picture-container img. {
	vertical-align: middle;
}

.gallery-item img {
    display: block;
}

/* buttons carrousel */
.gauche, .droit {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.droit {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* numbering carrousel */
.numbers {
	color: var(--white);
	font-size: 15px;
	padding: 5px 5px;
	position: absolute;
	top: 0;
}

/* bullets carrousel */
.rond {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: var(--graylight);
	border-radius: 50%;
	display: inline-block;
}

.rond.active, .rond:hover {
	background-color: transparent;
	background-image: url('/_img/drawing3partial.png');
	background-size: cover;
	background-position: center;
	border-radius: 0;
}

/* fading carrousel */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade {
	from {opacity: .4} to {opacity: 1}
}

/* gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 95%;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
}

.gallery-item.full {
    grid-column: 1 / 3;
}

/* mobilde devices */
@media only screen and (max-width: 700px) {
	.gauche, .droit { font-size: 10px }
	.rond { height: 10px; width: 10px;}
	.gallery {
		grid-template-columns: repeat(1, 1fr);
		gap: 0;
		row-gap: 20px;
	}
	.gallery-item.full { grid-column: 1 / 1; }
}