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

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


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

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

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


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


/* format des images */
img.slides {
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:#020202; /* couleur de base de la flèche, en hexadécimal */
  font-size:60px!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:#020202; /* couleur de base de la flèche, en hexadécimal */
  font-size:60px!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 #cccccc!important;
  background-color:transparent!important;
  background-color:#000000; /* 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:#000000!important; /*couleur du bouton "on", en hexadécimal */
  background-color:#ffffff!important
}


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 */
}


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

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