img{
  margin-bottom: 5px;
  margin-top: 15px;
}

@font-face {
  font-family: "AkkuratPro-Regular";
  src: url("../0_POLICE/Akkurat-Regular/AkkRg_Pro_1.otf");
}

@font-face {
  font-family: "AkkuratPro-Light";
  src: url("../0_POLICE/Akkurat-Light/Akkurat-Light.ttf");
}

@font-face {
  font-family: "AkkuratPro-Bold";
  src: url("../0_POLICE/Akkurat-Bold/Akkurat-Bold.otf");
}

#navbar{
  background-color: #f7c9c9; /* couleur du bandeau sur le coté, valeur en hexadécimal */
}


#temporalite{
	width: 1000px;
	height: 770px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border: 0px solid red ;
	padding-left: 10px;
}

#subdiv1{
	width: 300px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border: 0px ;
}

#subdiv2{
	width: 500px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border: 0px ;
	padding-left: 80px;
}

.columns{
    -webkit-columns:auto;
    -moz-columns:auto;
    columns:auto;
    column-width: 560px;
    column-count: auto;
    padding: 5px;
    position: relative;
    column-gap: auto;
    column-rule-style: solid;
    column-rule-width: 0px;

    border: 0px solid red;
}




/* format général du diaporama */
.diaporama {
max-width:900px; /* largeur maximale du diaporama */
margin:auto;
position:relative
}

	/* format des images */
	img.slides {
	margin-left:auto;
	margin-right:auto;
	width:100%;
	display:none
	}
	/* flèche gauche pour aller à l'image précédente */
	.left {
	  color:#020202; /* couleur de base de la flèche, en hexadécimal */
  	font-size:15px!important; /* taille de la flèche */
	float:left!important;
	padding-left:10px!important; /* place de la flèche par rapport à la bordure de gauche */
  	cursor:pointer
	}

	.left:hover {
  	color:#964f4d!important; /* couleur de la flèche lorsque l'on clique et passe la souris dessus, en hexadécimal */
	}



	/* flèche droite pour passer à l'image suivante */
	.right {
  	color:#020202; /* couleur de base de la flèche, en hexadécimal */
  	font-size:15px!important; /* taille de la flèche */
  	float:right!important;
  	padding-right:10px!important; /* place de la flèche par rapport à la bordure de droite */
  	cursor:pointer
	}

	.right:hover {
  	color:#964f4d!important; /* couleur de la flèche lorsque l'on clique et passe la souris dessus, en hexadécimal */
	}



	/* boutons de navigation en bas du diaporama */
	

	.marker {
  	color:#000000!important; /*couleur du bouton "on", en hexadécimal */
  	background-color:#b3b2af!important
	}