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: #e3bc34; /* 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: 
}

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

#element1 {
    position: relative;
    margin-left:0px;/*Mettre ici la distance entre l'element et le bord gauche de l'image de fond*/
    margin-top:-600px;/*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;
}


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
























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


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

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


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

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

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

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

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

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


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


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


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

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