/*TRES GRAND ECRAN*/
@media (min-width: 1440px) and (max-width: 1919px) {
.image-fond-accueil, .image-fond-muhlbach, .image-fond-arize, 
.image-fond-durbion{
    display: block;
    min-width: 90%;
    max-width: 1800px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

#a-propos-show, #ressource-show, #edition-show, #contact-show,
#atelier-couture-show, #aurichapelle_show, #basse_verriere_show,
#rond_sombre_show, #chateau_deau_show, #champigon_show,
#durbion_tire_droit_show, #etang_show, #rue_des_creuses_show,
#jardin_caucagne_show, #blind_test_show, #veillee_show, #brouillard_matin_show,
#coucou-show, #dou-vient-leau-show, #de_durban_a_carbonneshow, #deux_branches_show,
#chaussure_ashley_show, #le_soir_show, #nuage_show, #ou_va_leau_show, #rieux_show,
#rouge_gorge_show, #school_show, #un_chateau_show, #arize_veillee_show, #douze_juin_show, 
#treize_juin_show, #un_deux_trois_show, #bonjour_show, #frene_show, #muhlbach_show,
#veille_muhlbach_show, #canal_show, #ondine_show, #cincle_show, #ondine_source_show, 
#recit_canal_show, #veillee_canal_show, #avril_show, #captures_show, #autoroute_mer_show,
#enfants_poissons_show, #martin_show, #montage_show, #sonic_show, #sous_autoroute_show,
#marcher_show, #veille_ill_show, #vingt_huit_show, #vingt_neuf_show, #animal_crossing_show,
#bernaches_ouettes_show, #extrait_serre_show, #ile_weiler_show, #logos_tests_show,
#ping_pong_show, #rhin_tortue_show, #veillee_tortue_show, #fabriquer_une_affiche_show, 
#enfants_qui_chantent_show, #obliger_de_la_longer_show, #eau_qui_coule_show, #sur_chemin_show, 
#foret_lumiere_show, #en_face_show, #flotter_show, #lumiere_show, #club_show, 
#au_tout_debut_show, #verre_liquide_show, #jamais_seule_show, #club_nautique_show,
#pin_location_show, #canot_embarquer_show, #racler_fond_show, #chloro-show, #abris-murs-show,
#sombre-sous-terre-show, #ombre-pieds-show, #pentes-show, #plastique-eau-show,
#a-propos-show-muhlbach, #a-propos-show-arize, #a-propos-show-durbion, #a-propos-show-canal,
#a-propos-show-rhin, #a-propos-show-ill, #a-propos-canal{
  height: 750px !important;
}
}

/*SITE TAILLE STANDARD*/
@font-face {
	font-family: "prima";
	src:url("prima-sans-mono.woff") format("woff");
}

@font-face {
	font-family: "apple";
	src:url("Apple Chancery.woff2") format("woff2");
}

a{
  text-decoration: underline;
	color: blue;}

a:visited{
  text-decoration: underline;
  color: blue;}

a:hover{
  opacity: 0.5;
}

mark {
  background-color: rgba(255, 255, 255, 0.9); /* blanc à 90% */
  padding: 0.2px 2px;
  border-radius: 1px; /* arrondi léger pour effet doux */
  color: blue !important;
}

@supports (-moz-appearance: none) {
    #body_index {
      font-size: 60% !important;
      font-family:prima;
    }
}

/*INDEX INDEX INDEX INDEX INDEX INDEX INDEX*/
#body_index{
  font-family:prima;
  background-image: url(html_accueil/fond.jpg); 
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  font-size: 60%;
  overflow-x: hidden;
}

.image-fond-accueil, .image-fond-muhlbach, 
.image-fond-arize, .image-fond-durbion{
  display: block;
  width: 100%;
  max-width: 1300px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.image-fond-accueil-responsive, 
.image-fond-page-responsive-canal, 
.image-fond-page-responsive{
  display: none;
}

.nav-bar-bateau-radio{
  display: flex;
  top: 5%;
  left: 6%;
  width: 12%;
  position: absolute;
}

.menu-icons{
  top: 4%;
  margin-left: 17%;
  width: 20vw;
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 5%;
}

#menu_projet_titre_rhin_tortu{
  position: absolute;
  right: 28%;
  top: 4%;
  width: 20vw;
  display: flex;
}

#menu_projet_titre_canal{
  position: absolute;
  left: 89%;
  top: 23%;
  width: 20vw;
  display: flex;
}

#menu_projet_titre_arize{
  position: absolute;
  left: 7%;
  top: 34%;
  width: 20vw;
  display: flex
}

#menu_projet_titre_ill{
  position: absolute;
  left: 89%;
  top: 40%;
  width: 20vw;
  display: flex;
} 

#menu_projet_titre_durbion{
  position: absolute;
  left: 89%;
  top: 81%;
  width: 20vw;
  display: flex;
}

#menu_projet_titre_muhlbach{
  left: 45%;
  top: 81%;
  width: 20vw;
  position: absolute;
  display: flex;
} 

/*slidshow Edition acceuil Un canard ...*/
#un_canard_titre{
  position: fixed;
  margin-top:1%;
  color: black !important;
}

.slides_canard img {
  max-width: 100%;
  max-height: 80vh;
  margin: 10px 0;
  display: block;
  transition: transform 0.5s ease;
}

.slides_moshpit img {
  max-width: 100%;
  max-height: 100vh;
  margin: 10px 0;
  display: block;
  transition: transform 0.5s ease;
}

.icone_a_propos, .icone_ressource, 
.icone_edition, .icone_contact{
  width: 15%;
  left: 1%;
  padding: 2%;
}

#title_a_propos_page{
  position:absolute; 
  top: 6%; 
  color: blue; 
  text-decoration: underline;
}

.croix_title_image{
  position:absolute; 
  width: 5%;
  right: 0%;
  top: 0%;
  padding: 2%;
}

#icone_logo_title_image{
  position:absolute; 
  width: 26%;
  left: 60%;
  padding: 2%;
}

.bateau_radio_texte_interieur_pop_up_index{
  padding: 5%; 
  top: 0%;
}

#schema_bateau_radio{
  width: 100%;
}

#openSlideshow_moshpit{ 
  position:absolute; 
  left: 0%;
  padding: 2%;
}

#openSlideshow_canard{
  position:absolute; 
  left: 0%;
  padding: 2%;
  margin-top: 5%;
}

.icone_edition_petite{
  width: 60%;
  left: 1%;
}

.slideshow_moshpit, .slideshow_canard{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.close_moshpit, .close_canard{ 
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

#croix_Slideshow_moshpit{
  width:30%
}

.prev_moshpit, .prev_canard{
  background-color: transparent;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.next_moshpit, .next_canard{
  background-color: transparent;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);"
}

/*Commun à toutes les differentes pages*/
#premiere_icone{
  margin-top: 5%; 
  margin-left: 2%;
}


.menu-icons-page{
  left: 6%;
  top: 3%;
  width: 20vw;
  position: absolute;
  display: flex;
  gap: 5%;
}

#icone-fabriquer-affiche-2 a, #icone-enfant-4 a, 
#icone-bien-oblige-5 a, #icone-chaussure_ashley-4 a, 
#icone-eau-bizarrement-7 a, #icone-chevre-10 a, 
#icone-eau-qui-suinte-1 a, #icone-durban-7 a, 
#icone-dou-vient-eau-13 a, #menu_projet_titre_rhin_tortu a, 
#menu_projet_titre_canal a, #icone-recit-1 a, 
#icone-veillee-3 a, #menu-item-a-propos a, #icone-montage-rose-1 a,
#icone-veille-muhlbach-4 a, #icone-frene-commun-2 a, 
#icone-douze-juin-5 a, #icone-treize-juin-7 a, 
#icone-flotter-12 a,#icone-avril-1 a, 
#icone-bonjour-6 a, #icone-jardin-caucagne-1 a, 
#icone-rond-sombre-6 a, #icone-sur-chemin-8 a, 
#icone-basse-verriere-9 a, #icone-couture-terre-7 a, 
#icone-bernaches-ouettes-4 a, #icone-extrait-serre-5 a,
#icone-rue-creuses-4 a, #icone-foret-lumiere-11 a, 
#icone-champignont-12 a, #icone-durbion-tout-droit-2 a, 
#icone-brouillard-5 a, #icone-captures-2 a,
#icone-enfants-poissons-4 a, #icone-autoroute-mer-1 a, 
#icone-mains-martin-5 a, #icone-sous-lautoroute-8 a, 
#icone-ping-pong-8 a, #icone_canot_embarquer_14 a,
#icone-jamais-seule-11 a, #icone-club-nautique-12 a, 
#racler_le_fond_15 a, #icone-abris-murs-14 a, #icone-chloro-15 a, 
#icone-sombre-sous-la-terre-16 a, #ombres-pieds-17 a, 
#icone-plastique-eau-19 a, #icone_rouge_gorge_9 a,
#icone-soir-2 a, #icone-veillee-5 a, #icone-branches-8 a, 
#icone-veille-ill-10 a, #menu_projet_titre_arize a, 
#menu_projet_titre_ill a, #icone_acceuil a, 
#menu_projet_titre_durbion a, #menu_projet_titre_muhlbach a, 
#icone-veillee-rhin-10 a, #icone-veillee-durbion-3 a, 
#icone-aurichapelle-15 a, #icone-nuage-6 a,
#icone-coucou-11 a, #icone-school-12 a,
#icone-pentes-18 a
{
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;  
  color: blue; 
}

#icone-fabriquer-affiche-2 mark, #icone-enfant-4 mark, 
#icone-montage-rose-1 mark, #icone-flotter-12 marK,
#icone-bien-oblige-5 mark,#icone-eau-bizarrement-7 mark, 
#icone-chevre-10 mark, #icone-chaussure_ashley-4 mark, 
#icone-eau-qui-suinte-1 mark, #icone-durban-7 mark, 
#icone-dou-vient-eau-13 mark, #icone-bernaches-ouettes-4 mark,
#menu_projet_titre_rhin_tortu mark, #menu_projet_titre_canal mark, 
#icone-recit-1 mark, #icone-veillee-3 mark, #menu-item-a-propos mark, 
#icone-veille-muhlbach-4 mark, #icone-frene-commun-2 mark, 
#icone-douze-juin-5 mark, #icone-treize-juin-7 mark,
#icone-bonjour-6 mark, #icone-jardin-caucagne-1 mark, 
#icone-rond-sombre-6 mark, #icone-sur-chemin-8 mark, 
#icone-basse-verriere-9 mark, #icone-couture-terre-7 mark,
#icone-rue-creuses-4 mark, #icone-foret-lumiere-11 mark, 
#icone-champignont-12 mark,#icone-durbion-tout-droit-2 mark, 
#icone-brouillard-5 mark, #icone-avril-1 mark,
#icone-enfants-poissons-4 mark, #icone-autoroute-mer-1 mark,
#icone-captures-2 mark, #icone-mains-martin-5 mark, 
#icone-sous-lautoroute-8 mark, #icone-ping-pong-8 mark,
#icone-jamais-seule-11 mark, #icone-club-nautique-12 mark, 
#icone_canot_embarquer_14 mark,#racler_le_fond_15 mark, 
#icone-abris-murs-14 mark, #icone-chloro-15 mark, 
#icone-sombre-sous-la-terre-16 mark, #ombres-pieds-17 mark, 
#icone-plastique-eau-19 mark, #icone-soir-2 mark, 
#icone-veillee-5 mark, #icone-branches-8 mark, 
#icone_rouge_gorge_9 mark,#icone-veille-ill-10 mark, 
#menu_projet_titre_arize mark, #menu_projet_titre_ill mark, 
#menu_projet_titre_durbion mark, #menu_projet_titre_muhlbach mark, 
#icone_acceuil mark,#icone-veillee-rhin-10 mark, 
#icone-veillee-durbion-3 mark, #icone-extrait-serre-5 mark,
#icone-aurichapelle-15 mark, #icone-nuage-6 mark, 
#icone-coucou-11 mark, #icone-school-12 mark,
#icone-pentes-18 mark
{
  white-space: nowrap;
  color: blue;
}

.image-fond-canal{
  transition: transform 1s linear; 
}

.menu-icons{
  transition: transform 1s linear; 
}

.menu-item {
  text-decoration: underline;
  color: blue;
  text-align: center;
  width: 20%;
}

.menu-item img {
  width: 100%;
  margin-top: 32%;
  display: block;
}

.menu-item span {
  display: block;
  margin-top: 1px;
  color: blue;
}

.menu_projet {
  text-decoration: underline;
  color: inherit;
  text-align: center;
  width: 20%;
}

.menu_projet img {
  width: 100%;
  margin-top: 32%;
  display: block;
}

.menu_projet span {
  display: block;
  margin-top: 1px;
  color: blue;
}

#a-propos-show, #ressource-show, #edition-show, #contact-show,
#atelier-couture-show, #aurichapelle_show, #basse_verriere_show,
#rond_sombre_show, #chateau_deau_show, #champigon_show,
#durbion_tire_droit_show, #etang_show, #rue_des_creuses_show,
#jardin_caucagne_show, #blind_test_show, #veillee_show, #brouillard_matin_show,
#coucou-show, #dou-vient-leau-show, #de_durban_a_carbonneshow, #deux_branches_show,
#chaussure_ashley_show, #le_soir_show, #nuage_show, #ou_va_leau_show, #rieux_show,
#rouge_gorge_show, #school_show, #un_chateau_show, #arize_veillee_show, #douze_juin_show, 
#treize_juin_show, #un_deux_trois_show, #bonjour_show, #frene_show, #muhlbach_show,
#veille_muhlbach_show, #canal_show, #ondine_show, #cincle_show, #ondine_source_show, 
#recit_canal_show, #veillee_canal_show, #avril_show, #captures_show, #autoroute_mer_show,
#enfants_poissons_show, #martin_show, #montage_show, #sonic_show, #sous_autoroute_show,
#marcher_show, #veille_ill_show, #vingt_huit_show, #vingt_neuf_show, #animal_crossing_show,
#bernaches_ouettes_show, #extrait_serre_show, #ile_weiler_show, #logos_tests_show,
#ping_pong_show, #rhin_tortue_show, #veillee_tortue_show, #fabriquer_une_affiche_show, 
#enfants_qui_chantent_show, #obliger_de_la_longer_show, #eau_qui_coule_show, #sur_chemin_show, 
#foret_lumiere_show, #en_face_show, #flotter_show, #lumiere_show, #club_show, 
#au_tout_debut_show, #verre_liquide_show, #jamais_seule_show, #club_nautique_show,
#pin_location_show, #canot_embarquer_show, #racler_fond_show, #chloro-show, #abris-murs-show,
#sombre-sous-terre-show, #ombre-pieds-show, #pentes-show, #plastique-eau-show,
#a-propos-show-muhlbach, #a-propos-show-arize, #a-propos-show-durbion, #a-propos-show-canal,
#a-propos-show-rhin, #a-propos-show-ill, #a-propos-canal
{
  display: none;
}

#a-propos-show:target, #ressource-show:target, #edition-show:target, #contact-show:target,
#atelier-couture-show:target, #aurichapelle_show:target, #basse_verriere_show:target,
#rond_sombre_show:target, #chateau_deau_show:target, #champigon_show:target,
#durbion_tire_droit_show:target, #etang_show:target, #rue_des_creuses_show:target,
#jardin_caucagne_show:target, #blind_test_show:target, #veillee_show:target, 
#brouillard_matin_show:target, #coucou-show:target, #dou-vient-leau-show:target, 
#de_durban_a_carbonneshow:target, #deux_branches_show:target, #chaussure_ashley_show:target,
#le_soir_show:target, #nuage_show:target, #ou_va_leau_show:target, #rieux_show:target,
#rouge_gorge_show:target, #school_show:target, #un_chateau_show:target, 
#arize_veillee_show:target, #douze_juin_show:target, #treize_juin_show:target,
#un_deux_trois_show:target, #bonjour_show:target, #frene_show:target, #muhlbach_show:target,
#veille_muhlbach_show:target, #canal_show:target, #ondine_show:target, #cincle_show:target, 
#ondine_source_show:target, #recit_canal_show:target, #veillee_canal_show:target,
#avril_show:target, #captures_show:target, #autoroute_mer_show:target,
#enfants_poissons_show:target, #martin_show:target, #montage_show:target, #sonic_show:target,
#sous_autoroute_show:target, #marcher_show:target, #veille_ill_show:target,
#vingt_huit_show:target, #vingt_neuf_show:target, #animal_crossing_show:target,
#bernaches_ouettes_show:target, #extrait_serre_show:target, #ile_weiler_show:target,
#logos_tests_show:target, #ping_pong_show:target, #rhin_tortue_show:target, 
#fabriquer_une_affiche_show:target,#veillee_tortue_show:target, 
#enfants_qui_chantent_show:target, #obliger_de_la_longer_show:target, #eau_qui_coule_show:target,
#sur_chemin_show:target, #foret_lumiere_show:target, #en_face_show:target, #flotter_show:target,
#lumiere_show:target, #club_show:target, #au_tout_debut_show:target, #verre_liquide_show:target,
#jamais_seule_show:target, #club_nautique_show:target, #pin_location_show:target,
#canot_embarquer_show:target, #racler_fond_show:target, #chloro-show:target, 
#abris-murs-show:target, #sombre-sous-terre-show:target, #ombre-pieds-show:target, 
#pentes-show:target, #plastique-eau-show:target, #a-propos-show-muhlbach:target, 
#a-propos-show-arize:target, #a-propos-show-durbion:target, #a-propos-show-canal:target, 
#a-propos-show-rhin:target, #a-propos-show-ill:target, #a-propos-canal:target
{
  display: block;
}

.mignature1, .mignature2, .mignature3, .mignature4, .mignature5, .mignature6,
.mignature7, .mignature8, .mignature9, .mignature10, .mignature11, .mignature12,
.mignature13, .mignature14, .mignature15, .mignature16, .mignature17, .mignature18, .mignature19
{
  width: 6%;
  cursor: pointer;
}

.popup.texte .content{
  overflow-x: auto;
  max-height: 80vh;
  background: white;
  width: 89vh;
  padding: 3%;
  border: solid;
  border-width: 1px;
}

.popup {
  display: none;
  position: fixed;
  border-radius: 5px;
  padding:5px;
  cursor: move; 
  top: 50%;
  left: 34%;
  transform: translate(-50%, -50%); 
  z-index: 1000;
  max-width: 70vw;
  max-height: 80vh;
}

.popup .content {
  position: relative;
  display: flex;
  justify-content: flex-start; 
  align-items: flex-start;  
  text-align: left; 
}

/*
.popup .content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
}


.popup .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
*/

.popup .audio {
  width: 100%; 
  display: block;
  min-width: 100%;
}

.popup video {
  display: block;
  max-height: 67vh;
}


/*
.popup img {
  width : 82%;
  max-height:575px;
  display: block;
  z-index: 999;
}

.popup img {
  width: auto;
  max-width: 100%;
  height: auto;
}
*/

.popup img {
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  height: auto;
}

.popup .close {
  position: absolute;
  top: 3%;
  left: 3%;
  color: white;
  cursor: pointer;
  z-index: 1001;
}

.popup .close img {
  width: 35%; 
  object-fit: cover;
}

#a-propos-show, #ressource-show, #edition-show, #contact-show,
#atelier-couture-show, #aurichapelle_show, #basse_verriere_show,
#rond_sombre_show, #chateau_deau_show, #champigon_show,
#durbion_tire_droit_show, #etang_show, #rue_des_creuses_show,
#jardin_caucagne_show, #blind_test_show, #veillee_show, #brouillard_matin_show,
#coucou-show, #dou-vient-leau-show, #de_durban_a_carbonneshow, #deux_branches_show,
#chaussure_ashley_show, #le_soir_show, #nuage_show, #ou_va_leau_show, #rieux_show,
#rouge_gorge_show, #school_show, #un_chateau_show, #arize_veillee_show, #douze_juin_show, 
#treize_juin_show, #un_deux_trois_show, #bonjour_show, #frene_show, #muhlbach_show,
#veille_muhlbach_show, #canal_show, #ondine_show, #cincle_show, #ondine_source_show, 
#recit_canal_show, #veillee_canal_show, #avril_show, #captures_show, #autoroute_mer_show,
#enfants_poissons_show, #martin_show, #montage_show, #sonic_show, #sous_autoroute_show,
#marcher_show, #veille_ill_show, #vingt_huit_show, #vingt_neuf_show, #animal_crossing_show,
#bernaches_ouettes_show, #extrait_serre_show, #ile_weiler_show, #logos_tests_show,
#ping_pong_show, #rhin_tortue_show, #veillee_tortue_show, #fabriquer_une_affiche_show, 
#enfants_qui_chantent_show, #obliger_de_la_longer_show, #eau_qui_coule_show, #sur_chemin_show, 
#foret_lumiere_show, #en_face_show, #flotter_show, #lumiere_show, #club_show, 
#au_tout_debut_show, #verre_liquide_show, #jamais_seule_show, #club_nautique_show,
#pin_location_show, #canot_embarquer_show, #racler_fond_show, #chloro-show, #abris-murs-show,
#sombre-sous-terre-show, #ombre-pieds-show, #pentes-show, #plastique-eau-show,
#a-propos-show-muhlbach, #a-propos-show-arize, #a-propos-show-durbion, #a-propos-show-canal,
#a-propos-show-rhin, #a-propos-show-ill, #a-propos-canal{
  background-color: white;
  border: solid;
  height: 550px;
  width: 31%;
  overflow-y: scroll;
  position: fixed;
  z-index: 1;
  top: 7%;
  right: 3%;
  border-width: 1px;
}

/*FLECHE*/
.bateau_radio_fleche_img{
  width: 50%;
}

.bateau_radio_muhlbach_arize_fleche{
  position: absolute;
  left: 5%;
  top: 50%;
  display: flex;
}

.bateau_radio_muhlbach_rhin_tortu_fleche{
  position: absolute;
  right: 3%;
  top: 68%;
  display: flex;
}

.bateau_radio_canal_muhlbach_fleche{
  position: absolute;
  left: 52%;
  top: 4.5%;
  display: flex;
}

.bateau_radio_canal_durbion_fleche{
  position: absolute;
  right: 3%;
  top: 76%;
  display: flex;
}

.bateau_radio_durbion_ill_fleche{
  position: absolute;
  left: 6% ;
  top: 45%;
  display: flex;
}

.bateau_radio_arize_muhlbach_fleche{
  position: absolute;
  left: 40%;
  top: 4%;
  display: flex;
}

.menu_projet_carte_arize-dir-durbion{
  position: absolute;
  left: 6%;
  top: 28%;
  display: flex;
}

.bateau_radio_ill_canal_fleche{
  position: absolute;
  right: 10%;
  top: 6%;
  display: flex;
}

.bateau_radio_durbionbion_ill_fleche{
  position: absolute;
  left: 45%;
  top: 4.5%;
  display: flex;
}

.bateau_radio_rhin_arize_fleche{
  position: absolute;
  left: 46%;
  top: 88%;
  display: flex;
}

.bateau_radio_rhin_muhlbach_fleche{
  position: absolute;
  right: 4%;
  top: 8%;
  display: flex;
}

/*interieur pop up*/
#title_img_audio_video{
  position:absolute; 
  margin-top: 1.5%;
}

#title_pop_up_name_file{
  position:absolute; 
  top: 7%; 
  font-family: apple;
  text-decoration: underline;
  font-size: large;
  text-underline-offset: 4px;
  color: black !important;
}

/*ICONE....*/
#icone-muhlbach-1{
  left: 48%;
  top: 26%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-frene-commun-2{
  left: 65%;
  top: 23%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-un-deux-trois-3{
  left: 26%;
  top: 31%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-veille-muhlbach-4{
  left: 62%;
  top: 39%;
  width: 13vw;
  display: flex;
  position: absolute;
}

#icone-douze-juin-5{
  left: 45%;
  top: 47%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-bonjour-6{
  left: 64%;
  top: 58%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-treize-juin-7{
  left: 48%;
  top: 71%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-recit-1{
    left: 58%;
  top: 11%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-fabriquer-affiche-2{
  left:75%;
  top: 20%;
  width: 17vw;
  display: flex;
  position: absolute;
}

#icone-veillee-3{
  right: 44%;
  top: 20%;
  width: 12vw;
  display: flex;
  position: absolute;
}

#icone-enfant-4{
  right: 30%;
  top: 30%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-bien-oblige-5{
  right:33%;
  top: 49%;
  position: absolute;
  width: 23vw;
  display: flex;
}

#icone-ondines-cincle-plongeur-6{
  left: 19%;
  top: 60%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-eau-bizarrement-7{
  right: 9%;
  top: 58%;
  width: 16vw;
  display: flex; 
  position: absolute;
}

#icone-ondines-source-8{
  left: 25%;
  top: 65%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-ondines-9{
  left: 30%;
  top: 74%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-canal-10{
  left: 40%;
  top: 77%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-jardin-caucagne-1{
  left: 57%;
  top: 5%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-durbion-tout-droit-2{
  left: 40%;
  top: 11%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-veillee-durbion-3{
  left: 43%;
  top: 26%;
  width: 13vw;
  display: flex;
  position: absolute;
}

#icone-rue-creuses-4{
  left: 49%;
  top: 29%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-brouillard-5{
  left: 72%;
  top: 17%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-rond-sombre-6{
  right: 38%;
  top: 40%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-couture-terre-7{
  right: 26%;
  top: 40%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-sur-chemin-8{
  left: 34%;
  top: 53%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-basse-verriere-9{
  right: 25%;
  top: 60%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-etang-10{
  right: 16%;
  top: 60%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-foret-lumiere-11{
  left: 15%;
  top: 70%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-champignont-12{
  left: 25%;
  top: 73%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-blind-test-13{
  right: 0%;
  top: 51%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-chateau-deau-14{
  right: 10%;
  top: 70%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-aurichapelle-15{
  left: 46%;
  top: 83%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-soir-2{
  right:10%;
  top: 2%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-chaussure_ashley-4{
  left:50%;
  top: 12%;
  width: 16vw;
  display: flex;
  position: absolute;
}

#icone-veillee-5{
  right:32%;
  top: 20%;
  width: 12vw;
  display: flex;
  position: absolute;
}

#icone-nuage-6{
  left: 70%;
  top: 25%;
  width: 14vw;
  display: flex;
  position: absolute;
}

#icone-durban-7{
  right: 29%;
  top: 37%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-coucou-11{
  right: 0%;
  top: 63%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-school-12{
  right: 17%;
  top: 66%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-dou-vient-eau-13{
  right: 18%;
  top: 77%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-abris-murs-14{
  left: 20%;
  top: 17%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-chloro-15{
  left: 48%;
  top: 49%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-sombre-sous-la-terre-16{
  right: 7%;
  top: 79%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#ombres-pieds-17{
  left: 30%;
  top: 29%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-pentes-18{
  left: 18%;
  top: 55%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-plastique-eau-19{
  left: 40%;
  top: 77%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-avril-1{
  right: 19%;
  top: 67%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-captures-2{
  right:40%;
  top: 73%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-autoroute-mer-1{
  right: 8%;
  top: 18%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-enfants-poissons-4{
  left: 18%;
  top: 47%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-mains-martin-5{
  right: -3%;
  top: 71%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-montage-rose-1{
  left: 58%;
  top: 25%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-sonic-7{
  left: 63%;
  top: 10%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-sous-lautoroute-8{
  right: 1%;
  top: 35%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#marcher-9{
  left: 50%;
  top: 30%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-veille-ill-10{
  right: 1%;
  top: 16%;
  width: 13vw;
  display: flex;
  position: absolute;
}

#icone-en-face-11{
  right: 1%;
  top: 53%;
  width: 20vw;
  display: flex;
  position: absolute;
}

#icone-flotter-12{
  left: 36%;
  top: 47%;
  width: 21vw;
  display: flex;
  position: absolute;
}

#icone-lumiere-13{
  right: 30%;
  top: 77%;
  width: 19vw;
  display: flex;
  position: absolute;
}

#icone-un-club-14{
  right: 11%;
  top: 49%;
  width: 19vw;
  display: flex;
  position: absolute;
}

#icone-28-juin-1{
  right: 18%;
  top: 15%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-29-juin-2{
  left: 53%;
  top: 11%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-animal-crossing-3{
  left: 45%;
  top: 4%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-bernaches-ouettes-4{
  left: 23%;
  top: 42%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-extrait-serre-5{
  left: 33%;
  top: 35%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-au-tout-debut-6{
  right: 9%;
  top: 9%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-verre-liquide-7{
  left: 39%;
  top: 67%;
  width: 22vw;
  display: flex;
  position: absolute;
}

#icone-ping-pong-8{
  left: 42%;
  top: 49%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-rhin-tortu-9{
  left: 51%;
  top: 30%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-veillee-rhin-10{
  left: 39%;
  top: 14%;
  width: 14vw;
  display: flex;
  position: absolute;
}

#icone-jamais-seule-11{
  left: 26%;
  bottom: 7%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone-club-nautique-12{
  right: 0%;
  top: 40%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone_pin_location_13{
  right: 16%;
  top: 38%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#icone_canot_embarquer_14{
  right: 26%;
  top: 54%;
  width: 18vw;
  display: flex;
  position: absolute;
}

#racler_le_fond_15{
  left: 26%;
  top: 25%;
  width: 18vw;
  display: flex;
  position: absolute;
}


/*PETIT ECRAN RESPONISVE*/
@media all and (min-width: 1024px) and (max-width: 1280px){
.image-fond-accueil, .image-fond-muhlbach, .image-fond-arize, .image-fond-durbion{
  display: block;
  width: 81% !important;
  max-width: 1200px;
  height: auto;
  margin-right: auto;
  margin-top: 2% ;
}

.nav-bar-bateau-radio{
  display: flex;
  top: 6%;
  left: 11%;
}

.menu-icons{
  top: 4%;
  margin-left: 22%;
  width: 20vw;
}

#menu_projet_titre_arize{
  left: 11.5%;
  top: 34%;
  width: 20vw;
}

#menu_projet_titre_ill{
  left: 84.5%;
  top: 40%;
  width: 20vw;
} 

#menu_projet_titre_durbion{
  left: 84.5%;
  top: 81%;
  width: 20vw;
}

#menu_projet_titre_canal{
  left: 84.5%;
  top: 23%;
  width: 20vw;
}

.menu-icons-page{
  left: 11%;
  top: 3%;
  width: 20vw;
}

/*FLECHE*/
.bateau_radio_rhin_muhlbach_fleche{
  right: 8%;
  top: 9%;
  display: flex;
}

.bateau_radio_canal_durbion_fleche{
  right: 9%;
  top: 76%;
  display: flex;
}

.bateau_radio_durbion_ill_fleche{
  left: 11% ;
  top: 45%;
}

.bateau_radio_ill_canal_fleche{
  right: 13%;
  top: 6%;
}

.bateau_radio_muhlbach_arize_fleche{
  left: 11%;
  top: 53%;
}

.bateau_radio_muhlbach_rhin_tortu_fleche{
  right: 9%;
  top: 67%;
}

.menu_projet_carte_arize-dir-durbion{
  left: 11%;
  top: 28%;
}

}


/*PLUS PETIT ECRAN RESPONISVE*/
@media (max-width: 1000px){

  #body_index.body_accueil, #body_index.body_arrize,   
  #body_index.body_canal_du_rhone_au_rhin{
    height: 100vh;
}

  .image-fond-accueil-responsive{
    display: block;
    max-height: 110vh;
    margin-left: -5%;
    margin-right: auto;
    height: auto;
    margin-top: -5%;
    outline: 2px solid green;
}

  .image-fond-page-responsive{
    display: block;
    max-height: 200vh;
    margin-left: -20%;
    margin-right: auto;
    height: auto;
    margin-top: -5%;
}

  .image-fond-accueil, .image-fond-arize, 
  .image-fond-durbion, .image-fond-muhlbach{
    display: none ;
}

  .nav-bar-bateau-radio{
    min-width: 37%;
    left: 0%;
    top: 1%;
}

  .menu-icons{
    min-width: 62%;
    top: 1%;
    left: 17%;
    font-size: 70%;
}

  #menu_projet_titre_rhin_tortu{
    min-width: 48%;
    top: 13%;
    left: 50%;
}

  #menu_projet_titre_canal{
    min-width: 48%;
    left: 81%;
}

  #menu_projet_titre_ill{
    min-width: 48%;
    left: 87%;
}

  #menu_projet_titre_arize{
    min-width: 48%;
    left: 2%;
}

  #menu_projet_titre_durbion{
    min-width: 48%;
    left: 87% !important;
}

  #menu_projet_titre_muhlbach{
    top: 87%;
    min-width: 48%;
}

  .slides_canard img {
    max-width: 60%;
    max-height: 100vh;
    margin: 17% 5% !important;
    display: block;
    transition: transform 0.5s ease;
}

  .slides_moshpit img {
    max-width: 60%;
    max-height: 100vh;
    margin: 17% 8% !important;
    display: block;
    transition: transform 0.5s ease;
}

  .close_moshpit, .close_canard{ 
    top: 1%;
    left: 68%;
}

  #croix_Slideshow_moshpit{
    width:15%;
}

  .prev_moshpit, .prev_canard{
    left: 0% !important;
    top: 50%;
    transform: translateY(-50%);
}

  .next_moshpit, .next_canard{
    left: 45% !important;
    top: 50%;
    transform: translateY(-50%);
}

  .slideshow_moshpit, .slideshow_canard{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 101vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



/*
  #body_index.body_canal_du_rhone_au_rhin{
    background-image: url(html_canal_rhone_rhin/fond_canal_du_rhone_au_rhin_150.jpg);
    background-size: cover;
    background-position: center top; 
    background-repeat: no-repeat; 
    user-select: none;
    overflow: hidden;
    height: 100vh;
}

  #body_index.body_arrize{
    background-image: url(html_arize/fond_arize_150.jpg);
    background-size: cover;
    background-position: center top; 
    background-repeat: no-repeat; 
    user-select: none;
    overflow: hidden;
    height: 100vh;
}

  #body_index.body_durbion{
    background-image: url(html_durbion/fond_durbion_150.jpg);
    background-size: cover; 
    background-position: center top; 
    background-repeat: no-repeat; 
    user-select: none;
    overflow: hidden;
    height: 100vh;
}

  #body_index.body_ill{
    background-image: url(html_ill/fond_ill_150.jpg);
    background-size: cover;
    background-position: center top; 
    background-repeat: no-repeat; 
    user-select: none;
    overflow: hidden;
    height: 100vh;
}

  #body_index.body_muhlbach{
    background-image: url(html_muhlbach/fond_muhlbach_150.jpg);
    background-size: cover; 
    background-position: center top; 
    background-repeat: no-repeat; 
    user-select: none;
    overflow: hidden;
    height: 100vh;
}

 #body_index.body_rhin_tortu{
    background-image: url(html_rhin_tortue/fond_rhin_tortu_150.jpg);
    background-size: cover; 
    background-position: center top;
    background-repeat: no-repeat; 
    user-select: none;
    overflow: hidden;
    height: 100vh;
}
*/

  .menu-icons-page{
    width: 60%;
    top: 2%;
    gap: 10%;
}

  #a-propos-show, #edition-show, #contact-show, 
  #a-propos-show-muhlbach, #a-propos-show-durbion, 
  #a-propos-show-rhin, #a-propos-show-ill, 
  #a-propos-show-canal, #a-propos-show-arize {
    display: none;
    left: 1%;
    height: 500px;
    width: 81%;
    top: 10%;
}

  #ressource-show {
    display: none;
    left: 1%;
    height: 500px;
    width: 71%;
    top: 10%;
    overflow-y: scroll;
}

  .popup {
    display: none;
    position: fixed;
    z-index: 1000;  
    border-radius: 10px;
    padding: 10px;
    cursor: move; 
    top: 50%;
    left: -10%;
    transform: translate(0%, 45%) !important;
}

  .croix_title_image{
    position:absolute; 
    width: 5%;
    right: 1%;
    top: 1%;
    padding: 2%;
}

  .popup video {
    display: block;
    max-height: 25vh;
}

  .popup img{
    display: block;
    max-height: 200vh;
}

  .popup audio{
    display: block;
    max-width: 35vh;
}

  .popup.texte .content{
    overflow-x: auto;
    max-height: 60vh;
    background: blue;
    width: 35vh;
    margin-top: -70%;
    transform: translate(-10%,-50%) !important !important;
}

  #premiere_icone{
    margin-top: 20%;
}

  #un_canard_titre{
    margin-top:3%;
}

/*ICONE....responsive*/

/*pop up MUHLBACH RESPONSIVE*/
  #muhlbach_show, #frene_show,
  #un_deux_trois_show, #veille_muhlbach_show,
  #douze_juin_show, #bonjour_show,
  #treize_juin_show{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 70vh;
    font-size: larger;
}

  .bateau_radio_muhlbach_arize_fleche{
    left: 1%;
    top: 53%;
}

  .bateau_radio_muhlbach_rhin_tortu_fleche{
    right: -12%;
    top: 80%;
}

  #icone-muhlbach-1{
    left: 48%;
    top: 20%;
    width: 70%;
}

  #icone-frene-commun-2{
    left: 70%;
    top: 20%;
    width: 100%;
}

  #icone-un-deux-trois-3{
    left: 26%;
    top: 31%;
    width: 70%;
}

  #icone-veille-muhlbach-4{
    left: 62%;
    top: 41%;
    width: 50%;
}

  #icone-douze-juin-5{
    left: 45%;
    top: 47%;
    width: 70%;
}

  #icone-bonjour-6{
    left: 64%;
    top: 58%;
    width: 100%;
}

  #icone-treize-juin-7{
    left: 48%;
    top: 71%;
    width: 60%;
}

/*popup CANAL DU RHONE AU RHIN RESPONSIVE*/
  #fabriquer_une_affiche_show,#veillee_canal_show,
  #enfants_qui_chantent_show,#obliger_de_la_longer_show,
  #cincle_show,#recit_canal_show,
  #eau_qui_coule_show,#ondine_source_show,#ondine_show,
  #canal_show{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 70vh;
    font-size: larger;
}

  .bateau_radio_canal_muhlbach_fleche{
    left: 52%;
    top: 0%!important;
  }

  .bateau_radio_canal_durbion_fleche{
    right: -10%;
    top: 86%;
  }

  #icone-recit-1{
    left: 58%;
    top: 10%;
    width: 50%;
}

  #icone-fabriquer-affiche-2{
    left:75%;
    top: 20%;
    width: 70%
}

  #icone-veillee-3{
    left: 14%;
    top: 29%;
    width: 50%;
}

  #icone-enfant-4{
    right: 3%;
    top: 39%;
    width: 50%;
}

  #icone-bien-oblige-5{
    right:3%;
    top: 59%;
    width: 70%;
}

  #icone-eau-bizarrement-7{
    right: -50%;
    top: 59%;
    width: 70%;
}

  #icone-ondines-cincle-plongeur-6{
    left:7%;
    top: 70%;
    width: 70%;
}

  #icone-ondines-source-8{
    left: 25%;
    top: 89%;
    width: 70%;
}

  #icone-ondines-9{
    left: 68%;
    top: 94%;
    width: 70%;
}

  #icone-canal-10{
    left: 20%;
    top: 124%;
    width: 70%;
}

/*popup Durbion RESPONSIVE*/
  #jardin_caucagne_show,
  #durbion_tire_droit_show,
  #veillee_show,
  #rue_des_creuses_show,
  #brouillard_matin_show,
  #rond_sombre_show,
  #atelier-couture-show,
  #sur_chemin_show,
  #basse_verriere_show,
  #etang_show,
  #foret_lumiere_show,
  #champigon_show,
  #blind_test_show,
  #chateau_deau_show,
  #aurichapelle_show{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 70vh;
    font-size: larger;
}

  #icone-jardin-caucagne-1{
    left: 69%;
    top: 7%;
    width: 60%;
}

  #icone-durbion-tout-droit-2{
    left: 40%;
    top: 20%;
    width: 50%;
}

  #icone-veillee-durbion-3{
    left: 4%;
    top: 26%;
    width: 50%;
}

  #icone-rue-creuses-4{
    left: 60%;
    top: 43%;
    width: 50%;
}

  #icone-brouillard-5{
    left: 77%;
    top: 27%;
    width: 50%;
}

  #icone-rond-sombre-6{
    left: 70%;
    top: 67%;
    width: 50%;
}

  #icone-couture-terre-7{
    right: 26%;
    top: 38%;
    width: 50%;
}

  #icone-sur-chemin-8{
    left: 74%;
    top: 78%;
    width: 70%;
}

  #icone-basse-verriere-9{
    right: 20%;
    top:60%;
    width: 70%;
}

  #icone-etang-10{
    left: 5%;
    top: 88%;
    width: 70%;
}

  #icone-foret-lumiere-11{
    left: 15%;
    top: 100%;
    width: 70%;
}

  #icone-champignont-12{
    left: 80%;
    top: 96%;
    width: 60%;
}

  #icone-blind-test-13{
    left: 55%;
    top: 108%;
    width:70%;
}

  #icone-chateau-deau-14{
    left: 10%;
    top: 120%;
    width: 70%;
}

  #icone-aurichapelle-15{
    left: 26%;
    top: 136%;
    width: 70%;
}


/*popup ARIZE RESPONSIVE*/
  #le_soir_show, #chaussure_ashley_show, 
  #arize_veillee_show, #nuage_show, 
  #de_durban_a_carbonneshow, #coucou-show, 
  #school_show, #dou-vient-leau-show, 
  #abris-murs-show,
  #chloro-show, #sombre-sous-terre-show, 
  #ombre-pieds-show, #pentes-show, #plastique-eau-show{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 70vh;
    font-size: larger;
  }

  .bateau_radio_arize_muhlbach_fleche{
    left: 65%;
    top: 0%;
}

  .menu_projet_carte_arize-dir-durbion{
    left: 1%;
    top: 45%;
}

  #icone-soir-2{
    left:14%;
    top: 20%;
    width: 50%;
}

  #icone-chaussure_ashley-4{
    left:30%;
    top: 32%;
    width: 50%;
}

  #icone-veillee-5{
    left:70%;
    top: 40%;
    width: 40%;
}

  #icone-nuage-6{
    left: 43%;
    top: 60%;
    width: 40%;
}

  #icone-durban-7{
    left: 10%;
    top: 65%;
    width: 40%;
}

  #icone-coucou-11{
    left: 40%;
    top: 71%;
    width: 50%;
}

  #icone-school-12{
    left: 20%;
    top: 82%;
    width: 50%;
}

  #icone-dou-vient-eau-13{
    left: 15%;
    top: 93%;
    width: 50%;
}

  #icone-abris-murs-14{
    left: 50%;
    top: 105%;
    width: 70%;
}

  #icone-chloro-15{
    left: 19%;
    top: 115%;
    width: 50%;
}

  #icone-sombre-sous-la-terre-16{
    left: 70%;
    top: 120%;
    width: 70%;
}

  #ombres-pieds-17{
    left: 16%;
    top: 137%;
    width: 50%;
}

  #icone-pentes-18{
    left: 40%;
    top: 148%;
    width: 60%;
}

  #icone-plastique-eau-19{
    left: 27%;
    top: 165%;
    width: 60%;
}


/*popup ILL RESPONSIVE*/
  #avril_show,
  #captures_show, #autoroute_mer_show,
  #enfants_poissons_show, #martin_show,
  #montage_show, #sonic_show,
  #sous_autoroute_show, #marcher_show,
  #veille_ill_show, #en_face_show,
  #flotter_show, #lumiere_show,
  #club_show{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 70vh;
    font-size: larger;
  }

  #icone-avril-1{
    left: 13%;
    top: 17%;
    width: 70%;
}

  #icone-captures-2{
    left:40%;
    top: 13%;
    width: 50%;
}

  #icone-autoroute-mer-1{
    left: 8%;
    top: 32%;
    width: 50%;
}

  #icone-enfants-poissons-4{
    left: 38%;
    top: 47%;
    width:50%;
}

  #icone-mains-martin-5{
    left: 13%;
    top: 71%;
    width: 50%;
}

  #icone-montage-rose-1{
    left: 62%;
    top: 125%;
    width:60%;
}

  #icone-sonic-7{
    left: 83%;
    top: 18%;
    width:70%;
}

  #icone-sous-lautoroute-8{
    left: 81%;
    top: 60%;
    width: 50%;
}

  #marcher-9{
    left: 50%;
    top: 30%;
    width: 50%;
}

  #icone-veille-ill-10{
    left: 5%;
    top: 126%;
    width: 50%;
}

  #icone-en-face-11{
    left: 79%;
    top: 43%;
    width:70%;
}

  #icone-flotter-12{
    left: 40%;
    top: 97%;
    width: 50%;
}

  #icone-lumiere-13{
    left: 30%;
    top: 157%;
    width: 60%;
}

  #icone-un-club-14{
    left: 11%;
    top: 139%;
    width: 80%;
}


/*popup RHIN TORTU RESPONSIVE*/
  #vingt_huit_show, #vingt_neuf_show, 
  #animal_crossing_show, #racler_fond_show,
  #bernaches_ouettes_show, #extrait_serre_show,
  #au_tout_debut_show, #verre_liquide_show,
  #ping_pong_show, #rhin_tortue_show,
  #veillee_tortue_show, #jamais_seule_show,
  #club_nautique_show, #pin_location_show,
  #canot_embarquer_show {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 70vh;
    font-size: larger;
}

  .bateau_radio_rhin_muhlbach_fleche{
    right: 0%;
    top: 0%;
}

  .bateau_radio_rhin_arize_fleche{
    left: 30%;
    top: 170%;
  }

  #icone-28-juin-1{
    left: 25%;
    top: 17%;
    width: 50%;
}

  #icone-29-juin-2{
    left: 73%;
    top: 58%;
    width: 50%;
}

  #icone-animal-crossing-3{
    left: 75%;
    top: 31%;
    width: 70%;
}

  #icone-bernaches-ouettes-4{
    left: 6%;
    top: 22%;
    width: 50%;
}

  #icone-extrait-serre-5{
    left: 7%;
    top: 155%;
    width: 50%;
}

  #icone-au-tout-debut-6{
    left: 79%;
    top: 9%;
    width: 70%;
}

  #icone-verre-liquide-7{
    left: 39%;
    top: 140%;
    width: 70%;
}   

  #icone-ping-pong-8{
    left: 22%;
    top: 69%;
    width: 70%;
}

  #icone-rhin-tortu-9{
    left: 61%;
    top: 120%;
    width: 70%;
}

  #icone-veillee-rhin-10{
    left: 19%;
    top: 119%;
    width: 50%;
}

  #icone-jamais-seule-11{
    left: 16%;
    top: 90%;
    width: 70%;
}

  #icone-club-nautique-12{
    left: 70%;
    top: 80%;
    width: 70%;
}

  #icone_pin_location_13{
    right: 16%;
    top: 38%;
    width: 80%;
}

  #icone_canot_embarquer_14{
    left: 29%;
    top: 44%;
    width: 100%;
}

  #racler_le_fond_15{
    left: 66%;
    top: 155%;
    width: 100%;
}


}