/* supprime les marges par défaut du corps de la page*/
html, body, ul, p, #nature_urbaine{
margin: 0px;
padding: 0px;
}

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

#planning{
  width: 1000px;
  padding-left:100px;
  padding-right:100px;
}

#navbar{
  background-color: #e3bc34;
}



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

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

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

.subdiv3{
	width: 1200px;
	display: flex;
  justify-content: space-around;
	/*position: relative;
	vertical-align: top;
	overflow: hidden;*/
	margin: 0px;
  border: 0px solid red;
}

}
.detail{
  width: 400px;
  display: flex;
  justify-content: space-around;
  margin: 10px;
  border: 0px solid green;
}







/* format général du diaporama */
.diaporama {
max-width:1200px; /* largeur maximale du diaporama */
margin:auto;
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:#dabf21; /* couleur de base de la flèche, en hexadécimal */
  font-size:25px!important; /* taille de la flèche */
  float:left!important;
  padding-left:25px!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:#dabf21; /* couleur de base de la flèche, en hexadécimal */
  font-size:25px!important; /* taille de la flèche */
  float:right!important;
  padding-right:25px!important; /* place de la flèche par rapport à la bordure de droite */
  cursor:pointer
}

.right:hover {
  color:#b4aa50!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 */
.button {
  height:25px; /* hauteur des boutons */
  width:25px; /* largeur des boutons */
  border:1px solid #dabf21!important;
  background-color:transparent!important;
  background-color:#dabf21; /* couleur du bouton "on", en hexadécimal */
  display:inline-block;
  padding-left:8px;
  padding-right:8px;
  text-align:center;
  padding:0;
  border-radius:50%;
  cursor:pointer
}

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









/* Partie à copier dans votre *.css pour vos onglets */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #fcf3ce;  /* Ici, mettre la couleur des onglets (la couleur de votre groupe très éclaircie) */
}

ul.tab li {float: left;}

ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
/* Ici, mettre la couleur de l'onglet quand la souris passe dessus (la couleur de votre groupe légerement éclaircie) */
ul.tab li a:hover {background-color: #ebd483;}

/* Ici, mettre la couleur de l'onglet actif (la couleur de votre groupe) */
ul.tab li a:focus, .active {background-color: #e3bc34;}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 0s; /* Ici, le temps d'affichage du contenu de l'onglet */
}

/* Si vous avez une deuxième série d'onglets, il faut copier cette partie, en prenant bien soin de remplacer 'tabcontent'
par le nom auquel vous faites référence dans le fichier html (je vous recommande 'tabcontent2') */

.tabcontent2 {
    display: none;
    padding: 6px 12px;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent2 {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 0s; /* Ici, le temps d'affichage du contenu de l'onglet */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}




#cadrescroll{
  position: relative;
  height: 600px;
  width: 80%;
  margin: 0;
  overflow: hidden;
  margin-left: 15px;
  /*visibility: hidden;*/
}


#paralax{
  position: relative;
  display: inline-block;
  width: 1305px;
  height: 600px;
  margin: 0;
}

#pano1{
  margin-left: 0px;
}






.texte {
  width: 333px;
  display: flex;
  justify-content: space-around;
  margin: 10px;
  border:2px solid red;

}

.columns{
    -webkit-columns:auto;
    -moz-columns:auto;
    columns:auto;
    -webkit-columns:auto;
    -moz-columns:auto;
    -webkit-columns:auto;
    -moz-columns:auto;
    columns:auto;
    -webkit-column-width: 333px;
    -moz-column-width: 333px;
    column-width: 333px;
    column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    -webkit-padding: 10px;
    -moz-padding: 10px;
    padding: 10px;
    -webkit-position: relative;
    -moz-position: relative;
    position: relative;
    -webkit-column-gap: auto;
    -moz-column-gap: auto;
    column-gap: auto;
    -webkit-column-rule-style: dotted;
    -moz-column-rule-style: dotted;
    column-rule-style: dotted;
    -webkit-column-rule-width: 0px;
    -moz-column-rule-width: 0px;
    column-rule-width: 0px;

    border: 0px solid red;
}