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: #aaa24d; /* 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: 598px;
	margin: 0px;
}

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

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #fcf5d8;
}



.img100 {
    margin-top: 0px;
    margin-left: 0px;
    width: 1020px;
}


#spc {
    position: relative;
}
/* Plan cliquable*/


.interaction {
    position: relative;
    height: 618px;/*Mettre ici la hauteur de l'image de fond*/
}


.fond {
    position: absolute;
    z-index: 1;
}


#element1 {
    position: absolute;
    margin-left:95px;/*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:272px;/*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}
#element1:hover{
    opacity: 1;
}


#element2 {
    position: absolute;
    margin-left:258px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:75px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}
#element2:hover{
    opacity: 1;
}

#element3 {
    position: absolute;
    margin-left:365px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:343px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}
#element3:hover{
    opacity: 1;
}

#element4 {
    position: absolute;
    margin-left:434px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:51px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}
#element4:hover{
    opacity: 1;
}

#element5 {
    position: absolute;
    margin-left:753px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:159px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}
#element5:hover{
    opacity: 1;
}

#element6 {
    position: absolute;
    margin-left:581px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:255px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}
#element6:hover{
    opacity: 1;

}


#ecocentre {
    position: absolute;
    margin-left:860px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:15px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}
#ecocentre:hover{
    opacity: 1;

}


#lotissement {
    position: absolute;
    margin-left:350px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:251px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}

#lotissement:hover{
    opacity: 1;

}

#euroveloroute {
    position: absolute;
    margin-left:190px; /*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:15px; /*Mettre ici la distance entre l'element et le bord supérieur de l'image de fond*/
    z-index: 2;
    opacity: 0;
}

#euroveloroute:hover{
    opacity: 1;

}


.retour {
    margin-top: 6px
}
/*Fin  Plan cliquable*/

/* Onglet 1*/
ul.tab li {float: left;}


ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 1px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.tab li a:hover {background-color: none;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #aaa24d;}

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

.tabcontent {
    -webkit-animation: fadeEffect 0s;
    animation: fadeEffect 0s; /* Fading effect takes 1 second */
}

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

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

/* Fin Onglet1 */


/* Onglet 2*/

ul.tab li a:focus, .active {background-color: #aaa24d;}

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

.tabcontent2 {
    -webkit-animation: fadeEffect 0s;
    animation: fadeEffect 0s; /* Fading effect takes 1 second */
}

/* Fin Onglet 2 */

/* Onglet 3*/

ul.tab li a:focus, .active {background-color: #aaa24d;}

.tabcontent3 {
    display: none;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent3 {
    -webkit-animation: fadeEffect 0s;
    animation: fadeEffect 0s; /* Fading effect takes 1 second */
}

/* Fin Onglet 3 */

/* Onglet 4*/

ul.tab li a:focus, .active {background-color: #aaa24d;}

.tabcontent4 {
    display: none;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent4 {
    -webkit-animation: fadeEffect 0s;
    animation: fadeEffect 0s; /* Fading effect takes 1 second */
}

/* Fin Onglet 4 */


/* Onglet 5*/

ul.tab li a:focus, .active {background-color:#aaa24d;}

.tabcontent5 {
    display: none;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent5 {
    -webkit-animation: fadeEffect 0s;
    animation: fadeEffect 0s; /* Fading effect takes 1 second */
}

/* Fin Onglet 5 */

/* Onglet 6*/

ul.tab li a:focus, .active {background-color: #aaa24d;}

.tabcontent6 {
    display: none;
    border: 0px solid #ccc;
    border-top: none;
}

.tabcontent6 {
    -webkit-animation: fadeEffect 0s;
    animation: fadeEffect 0s; /* Fading effect takes 1 second */
}

/* Fin Onglet 6 */


a.info {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info span {
   display: none; /* On masque l'infobulle. */
}
a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;

   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   top: 30px; /* On positionne notre infobulle. */
   left: 10px;
}



a.info2 {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info2 span {
   display: none; /* On masque l'infobulle. */
}
a.info2:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info2:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;

   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   top: 20px; /* On positionne notre infobulle. */
   left: 10px;
}