@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");
}

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

#navbar h1,#navbar h2,#navbar h3,#navbar h4,#navbar p,#navbar h3 a{
  color: white;
}

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


.subdiv{
	width: 598px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	overflow: hidden;
	margin: 0px;
}

.subdiv img{
	width: 500px;
	margin: 0px;
}

.subdiv p{
	margin-top: 0px;
	padding: 0px;
}



img.superpose {
  position: absolute;
  top: 0px;
  left: 0px;
}



#carte1{
  height: 605px;
	position: relative;
}

.lien_cadre{
	position: absolute;
}

.lien_cadre:hover{
	border:3px solid red;
}



#carte0_projet1{
	top: 367px;
	left: 482px;
}

#carte0_projet2{
	top: 352px;
	left: 411px;
}

#carte0_projet3{
	top: 68px;
	left: 741px;
}

#carte0_projet4{
	top: 381px;
	left: 187px;
}

.subdiv{
	width: 500px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	overflow: hidden;
	margin: 0px;
}

.subdiv p{
  padding-left: 10px;
}

#roseliere{
	height: 338px;
	position: relative;
}

#observatoire{
	height: 307px;
	position: relative;
}

#axo_avant{
	position: relative;
	height: 271px;
}

#axo_apres{
	position: relative;
	height: 271px;
}

#carte4{
	position: relative;
	height: 480px;
}

#coupe_projet4{
	position: relative;
	height: 287px;
}

.multiple_switch{
	display: flex;
	flex-wrap: wrap;
}


#bouton_haut_page{
  text-decoration: none;
  color: black;
  position: fixed;
  top: 5%;
  right: 10%;
  z-index: 3;
}

#bouton_haut_page:hover{
background-color: white;
}



/* bouton switch pour afficher les calques */
.switch {
  position: relative;
  margin-left: 20px;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1b346c; /* couleur des boutons en hexadécimal */
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #ccc;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ccc;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* format général du diaporama */
.diaporama {
width: 1000px; /* largeur maximale du diaporama */
position:relative
}

/* format des images */
img.slides {
margin-left:auto;
margin-right:auto;
width:100%;
display:none
}

/* format des outils de navigation */
.navigation {
  text-align:center!important;
  margin-top:16px!important;
  margin-bottom:16px!important;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,0%);
  -ms-transform:translate(-50%,0%);
}

/* flèche gauche pour aller à l'image précédente */
.left {
  color:#ffffff; /* couleur de base de la flèche, en hexadécimal */
  font-size:18px!important; /* taille de la flèche */
  float:left!important;
  padding-left:16px!important; /* place de la flèche par rapport à la bordure de gauche */
  cursor:pointer
}

.left:hover {
  color:#b4aa50!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:#ffffff; /* couleur de base de la flèche, en hexadécimal */
  font-size:18px!important; /* taille de la flèche */
  float:right!important;
  padding-right:16px!important; /* place de la flèche par rapport à la bordure de droite */
  cursor:pointer
}

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

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

/* boutons de navigation en bas du diaporama */
.button {
  height:13px; /* hauteur des boutons */
  width:13px; /* largeur des boutons */
  border:1px solid #cccccc!important;
 
  display:inline-block;
  padding-left:8px;
  padding-right:8px;
  text-align:center;
  padding:0;
  border-radius:50%;
  cursor:pointer
}