* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
  font-family:"Muli";
  font-size: 16px;
  background-color: #000;
  color: #fff;

}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 50px;
  text-align: center;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}

/* If there is a fullscreen button the title bar must make space for it */
body.fullscreen-enabled #titleBar {
  right: 80px;
}

body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}

/* If there are multiple scenes the title bar must make space for the scene list toggle */
body.multiple-scenes #titleBar {
  left: 40px;
}

body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .sceneName {
  width: 100%;
  height: 100%;
  line-height: 40px;
  padding: 5px;
  background-color: #99C331;
/*  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8); */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
}

#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 10px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 50px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
  right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 50px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 10px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  left: -220px;
  padding-top: 40px;
  width: 220px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  -webkit-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 220px;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

.no-touch #sceneList .scene:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene.current {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* Link hotspot */

.link-hotspot {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.no-touch .link-hotspot:hover {
  opacity: 1;
}

.mobile .link-hotspot {
  width: 70px;
  height: 70px;
}

.link-hotspot-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.link-hotspot-tooltip {
  position: absolute;
  left: 100%;
  top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  color: #fff;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      opacity 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}

.mobile .link-hotspot {
  top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* Info hotspot */

.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
 }





.no-touch .info-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  z-index:99;

}

.info-hotspot.visible {
  opacity: 1;
  z-index:99;
  background-color:rgba(159,238,0,0.7); 
 /* #F29017 orange */
}

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
 /* background-color: rgb(103,115,131); /* couleur de la bande supérieure (header) des boutons d'informations  */
/*  background-color:rgb(159,238,0); */
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
}

.mobile .info-hotspot .info-hotspot-header {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.mobile .info-hotspot .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot .info-hotspot-icon { /* ANIMATION BLINK ICONE PLUS */
  width: 90%;
  height: 90%;
  margin: 5%;
   -webkit-transition: opacity 3s 3s;
  transition: opacity 3s 3s;
  -moz-animation: blink normal 3s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 3s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 3s infinite ease-in-out; /* IE */
    animation: blink normal 3s infinite ease-in-out; /* Opera and prob css3 final iteration */

/* chanagement couleur de l'icône */

/* orange display */
  filter: brightness(0%) saturate(100%) invert(74%) sepia(27%) saturate(6255%) hue-rotate(350deg) brightness(97%) contrast(95%);
/* vert display */
  filter: brightness(0%) saturate(100%) invert(67%) sepia(86%) saturate(389%) hue-rotate(31deg) brightness(95%) contrast(84%);
  /* noir */
filter: brightness(0) saturate(100%);
/* blanc */
filter: brightness(0%) saturate(100%) invert(85%) sepia(56%) saturate(2%) hue-rotate(196deg) brightness(108%) contrast(101%);

/* vert display
filter: brightness(0%) saturate(100%) invert(67%) sepia(86%) saturate(389%) hue-rotate(31deg) brightness(95%) contrast(84%); */

}
 
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
 
@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 



.info-hotspot .info-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
               /* background-color:rgb(100,115,130);  couleur arrière plan bandeau title */
               background-color:rgb(20,20,20);
}

.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info-hotspot .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;

}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(178,88,104); /* couleur de l'arrière plan de la croix pour quitter le bouton info */
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
}

.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info-hotspot .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot .info-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
/*  max-height: 200px; */ 
  top: 40px;
  left: 0;
  padding: 10px;
 /* background-color: rgba(58,68,84,0.8); /* couleur de l'arrière plan du texte dans le bouton info */
  background-color:rgba(20,20,20,0.7);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
}

/* Info hotspot modal */

.desktop .info-hotspot-modal {
  display: none;
}

.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot-modal .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info-hotspot-modal .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot-modal .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info-hotspot-modal .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot-modal .info-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/*---------------------------------- TEST INFO2 HOTSPOST -------------------------------------------------
/* --------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------- */
.info2-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
 }






.no-touch .info2-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  z-index:99;
}

.info2-hotspot.visible {
  opacity: 1;
  z-index:99;
  /*background-color:rgba(159,238,0,0.7); vert display */
 /* #F29017 orange */
}

.info2-hotspot .info2-hotspot-header {
  width: 40px;
  height: 80px;
  border-radius: 20px;
 /* background-color: rgb(103,115,131); /* couleur de la bande supérieure (header) des boutons d'informations  */
/*  background-color:rgb(159,238,0); */
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;

}

.mobile .info2-hotspot .info2-hotspot-header {
  width: 50px;
  height: 80px;
  border-radius: 25px;
  /* display:none; */
}

.desktop.no-touch .info2-hotspot .info2-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}

.desktop .info2-hotspot.visible .info2-hotspot-header,
.desktop.no-touch .info2-hotspot.visible .info2-hotspot-header:hover {
  width: 100%;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}


.info2-hotspot .info2-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
 
}

.mobile .info2-hotspot .info2-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
}

.info2-hotspot .info2-hotspot-icon { /* ANIMATION BLINK ICONE PLUS */
/*  width: 130%;
  height: 130%; */
  /* test 
  width:90%;
  height:90%;
   fin test */
   width: 120%;
   height: 120%;
  margin: 5%;
   -webkit-transition: opacity 3s 3s;
  transition: opacity 5s 5s;
  -moz-animation: blink2 normal 5s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink2 normal 5s infinite ease-in-out; /* Webkit */
    -ms-animation: blink2 normal 5s infinite ease-in-out; /* IE */
    animation: blink2 normal 5s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
 
@-moz-keyframes blink2 {
    0% {
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
} 
 
@-webkit-keyframes blink2 {
    0% {
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink2 {
    0% {
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink2 {
    0% {
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
} 


.info2-hotspot .info2-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
               /* background-color:rgb(100,115,130);  couleur arrière plan bandeau title */
               background-color:rgb(20,20,20);
  display:none;
}

.desktop .info2-hotspot.visible .info2-hotspot-title-wrapper,
.desktop.no-touch .info2-hotspot .info2-hotspot-header:hover .info2-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info2-hotspot .info2-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info2-hotspot .info2-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none;
}

.info2-hotspot .info2-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(178,88,104); /* couleur de l'arrière plan de la croix pour quitter le bouton info */
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
              display:none;
}

.desktop .info2-hotspot.visible .info2-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info2-hotspot .info2-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info2-hotspot .info2-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
/*  max-height: 200px; */ 
  top: 40px;
  left: 0;
  padding: 10px;
 /* background-color: rgba(58,68,84,0.8); /* couleur de l'arrière plan du texte dans le bouton info */
  background-color:rgba(20,20,20,0.7);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  overflow:hidden;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;

}

.desktop .info2-hotspot.visible .info2-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
  left:-130%;
  margin-top:50%;
}
.info2-hotspot.visible .info2-hotspot-icon {
  width:90%;
  height:90%;
}
/* Info hotspot modal */

.desktop .info2-hotspot-modal {
  display: none;
}

.info2-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info2-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info2-hotspot-modal .info2-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info2-hotspot-modal.visible .info2-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info2-hotspot-modal .info2-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info2-hotspot-modal .info2-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info2-hotspot-modal .info2-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info2-hotspot-modal .info2-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info2-hotspot-modal .info2-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info2-hotspot-modal .info2-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info2-hotspot-modal .info2-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info2-hotspot-modal .info2-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info2-hotspot-modal.visible .info2-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/*---------------------------------- TEST INFO3 HOTSPOST HYDROGESTE -------------------------------------------------
/* --------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------- */
.info3-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
 }



.info3-hotspot.visible .info3-hotspot-icon {
  width:90%;
  height:90%;
}

.no-touch .info3-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  z-index:99;
}

.info3-hotspot.visible {
  opacity: 1;
  z-index:99;
  background-color:rgba(159,238,0,0); 
 /* #F29017 orange */
}


.info3-hotspot .info3-hotspot-header {
  width: 40px;
  height: 80px;
  border-radius: 20px;
 /* background-color: rgb(103,115,131); /* couleur de la bande supérieure (header) des boutons d'informations  */
/*  background-color:rgb(159,238,0); */
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;

}

.mobile .info3-hotspot .info3-hotspot-header {
  width: 50px;
  height: 80px;
  border-radius: 25px;
  /* display:none; */
}

.desktop.no-touch .info3-hotspot .info3-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}

.desktop .info3-hotspot.visible .info3-hotspot-header,
.desktop.no-touch .info3-hotspot.visible .info3-hotspot-header:hover {
  width: 100%;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}

.info3-hotspot .info3-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
 
}

.mobile .info3-hotspot .info3-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
}

.info3-hotspot .info3-hotspot-icon { /* ANIMATION BLINK ICONE PLUS */
/*  width: 130%;
  height: 130%; */
  /* test */
  width:140%;
  height:140%;
  /* fin test */
  margin: 5%;
}
  /*
   -webkit-transition: opacity 3s 3s;
  transition: opacity 5s 5s;
  -moz-animation: blink normal 5s infinite ease-in-out; 
    -webkit-animation: blink normal 5s infinite ease-in-out; 
    -ms-animation: blink normal 5s infinite ease-in-out; 
    animation: blink normal 5s infinite ease-in-out; 
}
 
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
 
@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
}

@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 

@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
 */


.info3-hotspot .info3-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
               /* background-color:rgb(100,115,130);  couleur arrière plan bandeau title */
               background-color:rgb(20,20,20);
  display:none;
}

.desktop .info3-hotspot.visible .info3-hotspot-title-wrapper,
.desktop.no-touch .info3-hotspot .info3-hotspot-header:hover .info3-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info3-hotspot .info3-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info3-hotspot .info3-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none;
}

.info3-hotspot .info3-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(178,88,104); /* couleur de l'arrière plan de la croix pour quitter le bouton info */
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
              display:none;
}

.desktop .info3-hotspot.visible .info3-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info3-hotspot .info3-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info3-hotspot .info3-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
/*  max-height: 200px; */ 
  top: 40px;
  left: 0;
  padding: 10px;
 /* background-color: rgba(58,68,84,0.8); /* couleur de l'arrière plan du texte dans le bouton info */
  background-color:rgba(20,20,20,0.7);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  overflow:hidden;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;

}

.desktop .info3-hotspot.visible .info3-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
  left:-130%;
  margin-top:50%;
}

/* Info hotspot modal */

.desktop .info3-hotspot-modal {
  display: none;
}

.info3-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info3-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info3-hotspot-modal .info3-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info3-hotspot-modal.visible .info3-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info3-hotspot-modal .info3-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info3-hotspot-modal .info3-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info3-hotspot-modal .info3-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info3-hotspot-modal .info3-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info3-hotspot-modal .info3-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info3-hotspot-modal .info3-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info3-hotspot-modal .info3-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info3-hotspot-modal .info3-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info3-hotspot-modal.visible .info3-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/*---------------------------------- TEST info4 indoor -------------------------------------------------
/* --------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------- */
.info4-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
 }



.info4-hotspot.visible .info4-hotspot-icon {
  display:none; /* TEST */
}

.no-touch .info4-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  z-index:99;
}

.info4-hotspot.visible {
  opacity: 1;
  z-index:99;
  background-color:rgba(159,238,0,0); 
 /* #F29017 orange */
}


.info4-hotspot .info4-hotspot-header {
  width: 40px;
  height: 80px;
  border-radius: 20px;
 /* background-color: rgb(103,115,131); /* couleur de la bande supérieure (header) des boutons d'informations  */
/*  background-color:rgb(159,238,0); */
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
              pointer-events:none;

}

.mobile .info4-hotspot .info4-hotspot-header {
  width: 50px;
  height: 80px;
  border-radius: 25px;
  /* display:none; */
}

.desktop.no-touch .info4-hotspot .info4-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}

.desktop .info4-hotspot.visible .info4-hotspot-header,
.desktop.no-touch .info4-hotspot.visible .info4-hotspot-header:hover {
  width: 100%;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}

.info4-hotspot .info4-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
 
}

.mobile .info4-hotspot .info4-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
}

.info4-hotspot .info4-hotspot-icon { /* ANIMATION BLINK ICONE PLUS */
 width: 60%; 
/*  height: 130%; */
  /* test */
  /* fin test */
  margin: 5%;
}
  /*
   -webkit-transition: opacity 3s 3s;
  transition: opacity 5s 5s;
  -moz-animation: blink normal 5s infinite ease-in-out; 
    -webkit-animation: blink normal 5s infinite ease-in-out; 
    -ms-animation: blink normal 5s infinite ease-in-out; 
    animation: blink normal 5s infinite ease-in-out; 
}
 
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
 
@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
}

@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 

@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
 */


.info4-hotspot .info4-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
               /* background-color:rgb(100,115,130);  couleur arrière plan bandeau title */
               background-color:rgb(20,20,20);
  display:none;
}

.desktop .info4-hotspot.visible .info4-hotspot-title-wrapper,
.desktop.no-touch .info4-hotspot .info4-hotspot-header:hover .info4-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info4-hotspot .info4-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info4-hotspot .info4-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none;
}

.info4-hotspot .info4-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(178,88,104); /* couleur de l'arrière plan de la croix pour quitter le bouton info */
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
              display:none;
}

.desktop .info4-hotspot.visible .info4-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
display:none; /* TEST */              
}

.info4-hotspot .info4-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
  display:none; /* TEST */
}

.info4-hotspot .info4-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
/*  max-height: 200px; */ 
  top: 40px;
  left: 0;
  padding: 10px;
 /* background-color: rgba(58,68,84,0.8); /* couleur de l'arrière plan du texte dans le bouton info */
  background-color:rgba(20,20,20,0.7);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  overflow:hidden;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none; /* TEST */

}

.desktop .info4-hotspot.visible .info4-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
  left:-130%;
  margin-top:50%;
  display:none; /* TEST */
}

/* Info hotspot modal */

.desktop .info4-hotspot-modal {
  display: none;
}

.info4-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info4-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
 display:none; /* TEST */
}

.info4-hotspot-modal .info4-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info4-hotspot-modal.visible .info4-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info4-hotspot-modal .info4-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info4-hotspot-modal .info4-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info4-hotspot-modal .info4-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
  display:none; /* TEST */
}

.info4-hotspot-modal .info4-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  display:none; /* TEST */
}

.info4-hotspot-modal .info4-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none; /* TEST */
}

.info4-hotspot-modal .info4-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
  display:none; /* TEST */
}

.info4-hotspot-modal .info4-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
  display:none; /* TEST */
}

.info4-hotspot-modal .info4-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none; /* TEST */
}

.info4-hotspot-modal.visible .info4-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
  display:none; /* TEST */
}

/*---------------------------------- TEST info5 outdoor -------------------------------------------------
/* --------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------- */
.info5-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
 }



.info5-hotspot.visible .info5-hotspot-icon {
  display:none; /* TEST */
}

.no-touch .info5-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  z-index:99;
}

.info5-hotspot.visible {
  opacity: 1;
  z-index:99;
  background-color:rgba(159,238,0,0); 
 /* #F29017 orange */
}


.info5-hotspot .info5-hotspot-header {
  width: 40px;
  height: 80px;
  border-radius: 20px;
 /* background-color: rgb(103,115,131); /* couleur de la bande supérieure (header) des boutons d'informations  */
/*  background-color:rgb(159,238,0); */
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
  pointer-events:none;

}

.mobile .info5-hotspot .info5-hotspot-header {
  width: 50px;
  height: 80px;
  border-radius: 25px;
  /* display:none; */
}

.desktop.no-touch .info5-hotspot .info5-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}

.desktop .info5-hotspot.visible .info5-hotspot-header,
.desktop.no-touch .info5-hotspot.visible .info5-hotspot-header:hover {
  width: 100%;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
              
}

.info5-hotspot .info5-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
 
}

.mobile .info5-hotspot .info5-hotspot-icon-wrapper {
  width: 80px;
  height: 80px;
}

.info5-hotspot .info5-hotspot-icon { /* ANIMATION BLINK ICONE PLUS */
 width: 60%; 
/*  height: 130%; */
  /* test */
  /* fin test */
  margin: 5%;
}
  /*
   -webkit-transition: opacity 3s 3s;
  transition: opacity 5s 5s;
  -moz-animation: blink normal 5s infinite ease-in-out; 
    -webkit-animation: blink normal 5s infinite ease-in-out; 
    -ms-animation: blink normal 5s infinite ease-in-out; 
    animation: blink normal 5s infinite ease-in-out; 
}
 
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
 
@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
}

@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 

@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.2;
    }
    100% {
        opacity:1;
    }
} 
 */


.info5-hotspot .info5-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
               /* background-color:rgb(100,115,130);  couleur arrière plan bandeau title */
               background-color:rgb(20,20,20);
  display:none;
}

.desktop .info5-hotspot.visible .info5-hotspot-title-wrapper,
.desktop.no-touch .info4-hotspot .info5-hotspot-header:hover .info5-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info5-hotspot .info5-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info5-hotspot .info5-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none;
}

.info5-hotspot .info5-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(178,88,104); /* couleur de l'arrière plan de la croix pour quitter le bouton info */
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
              display:none;
}

.desktop .info5-hotspot.visible .info5-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
display:none; /* TEST */              
}

.info5-hotspot .info5-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
  display:none; /* TEST */
}

.info5-hotspot .info5-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
/*  max-height: 200px; */ 
  top: 40px;
  left: 0;
  padding: 10px;
 /* background-color: rgba(58,68,84,0.8); /* couleur de l'arrière plan du texte dans le bouton info */
  background-color:rgba(20,20,20,0.7);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  overflow:hidden;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none; /* TEST */

}

.desktop .info5-hotspot.visible .info5-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
  left:-130%;
  margin-top:50%;
  display:none; /* TEST */
}

/* Info hotspot modal */

.desktop .info5-hotspot-modal {
  display: none;
}

.info5-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info5-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
 display:none; /* TEST */
}

.info5-hotspot-modal .info5-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info5-hotspot-modal.visible .info5-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info5-hotspot-modal .info5-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info5-hotspot-modal .info5-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info5-hotspot-modal .info5-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
  display:none; /* TEST */
}

.info5-hotspot-modal .info5-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  display:none; /* TEST */
}

.info5-hotspot-modal .info5-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none; /* TEST */
}

.info5-hotspot-modal .info5-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
  display:none; /* TEST */
}

.info5-hotspot-modal .info5-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
  display:none; /* TEST */
}

.info5-hotspot-modal .info5-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display:none; /* TEST */
}

.info5-hotspot-modal.visible .info5-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
  display:none; /* TEST */
}

/* View control buttons */

.viewControlButton {
 /* display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8); */
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
 /* position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px; */
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  display: none;
  margin-left: -145px;
}
.viewControlButton-2 {
  display: none;
  margin-left: -95px;
}
.viewControlButton-3 {
  display: none;
  margin-left: -45px;
}
.viewControlButton-4 {
  display: none;
  margin-left: 5px;
}
.viewControlButton-5 {
/*  display: none;
  margin-left: 55px; */
}
.viewControlButton-6 {
  display: none;
  margin-left: 105px;
}

/* embedded hotspots */
#iframespot{
}

#iframeselect {
  position: absolute;
  width: 120px;
  margin-left: -140px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.95;
}


#iframeselect li{
  width: 100%;
  padding: 1em;
  font-size: 12px;
  text-align: center;
  background-color: #444;
  color: #ddd;
  transition: .3s background-color ease-in-out,
              .3s color ease-in-out;
}

#iframeselect li:hover{
  background-color: #666;
  color: #fff;
}

#iframespot {
  background-color: #444;
  position: relative;
  /*width: 960px;
  height: 540px;*/
  width: 930px;
  height: 500px;
}

#iframespot .message {
  text-align: center;
  padding-top: 70px;
  font-size: 70px;
  color: #ddd;
}

#adsense {
  background-color: #fff;
  color: #000;
}

.adsense-fallback {
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
}

/* Classes produits */
.imgproduit {
  width:auto;
  height:auto;
  max-height: 80%;
  max-width: 80%;
}
.titreproduit {
  color:white;
  font-weight:bold;
}
.titreproduit:hover {
  text-decoration:underline;
}
.videoproduit {
  width:auto;
  height:auto;
}
.ensavoirplus {
/*  color:lightgreen; */
  color:rgb(159,238,0);
  text-decoration:underline;
  text-align:center;
  font-size:110%;

}
.txtdesc {
  opacity:unset;
}
.ensavoirplus:hover {
  /* color:darkgreen; */
  color:darkgreen;
  transform:scale(1.05);
}
.imgzoom
{
  transition:transform .2s;
}
.imgzoom:hover {
  transform:scale(1.25);
}
.imgzoom2
{
  transition:transform .2s;
}
.imgzoom2:hover {
  transform:scale(1.05);
}
#lienyoutube {
  text-align: center;
  margin-top: 8%;
  margin-bottom: 8%;
}
.gamme {
  transition: transform.2s;
}
.gamme:hover
{
  transform: scale(1.02);

}
.gamme:hover {
  text-decoration: underline;
}

/* BOUTONS HEADER */


/* CSS */
.button-40 {
  font-size: 1rem;
  background-color: transparent;
  border: 1px solid white;
  border-bottom: none;
  border-top: none;
  /*border-radius: .75rem;*/
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: .75rem 1.2rem;
  text-align: center;
  text-decoration: none #6B7280 solid;
  text-decoration-thickness: auto;
  transition-duration: .2s;
  transition-property: background-color,border-color,color,fill,stroke;
  transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
  height: 100%;
}

.button-40:hover {
  background-color: #374151;
}

.button-40:focus {
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .button-40 {
    padding: .75rem 1.5rem;
  }
}
.
/*
#lienyoutube:hover {
 background-color:darkred;
 z-index:150;
}
#overlayyoutube {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: darkred;
}
#lienyoutube:hover #overlayyoutube {
  opacity:1;
}

*/



-------------------------------------------------------------------------------------------------------------------/* RESPONSIVE */ --------------------------------------------------------------------------------------------------------------
@media screen and (max-width :1780px) {
  #titleBar > p {
    right: 77% !important;
  }
  #btnled {
  width:17% !important;
  right:15.5% !important;
}
  
}
@media screen and (max-width :1620px) {
  #titleBar > p{
  right:76% !important;
}
/*  #imgcontact {
left: -15% !important;
} */
}
@media screen and (max-width :1565px) {
  #btnled {
  width:17% !important;
  right:15.5% !important;
} /*
  #imgcontact {
left: -15% !important;
} */
}
@media screen and (max-width :1200px) {
 /* #imgcontact { 
  left: -22% !important;
} */
#btnled {
padding:0px!important;
width:21% !important;
right: 18% !important;
}
#btnhydro {
width:18% !important;
}

#imgcontact p{
  width: 45% !important;
  left: 52% !important;
}
.sceneName {
  padding-right: 15% !important;
}
}


@media screen and (max-width: 1873px) {
  #btnled {
    width: 15% !important;
    right: 12% !important;
  }
}
@media screen and (max-width: 1825px) {
  #titleBar > p {
    width: 22.5%!important;
  }
}
@media screen and (max-width: 1750px) {
  #btnled {
    width: 17% !important;
    right: 13.8% !important;
  }
  #titleBar > p {
    right: 73%!important;
  }
  #imgcontact {
    width: 3%!important;
    left: 0.5% !important;
    top: 1% !important;
  }
}
@media sreen and (max-width: 1644px) {
  #btnled {
  width:17% !important;
  right:13.8% !important;
}
  #imgcontact {
    width: 3% !important;
  }
  #titleBar > p {
    width: 23%;
    right : 72%!important;
  }
}
@media screen and (max-width: 1549px) {
  #titleBar > p {
    width: 25%!important;
    right: 70%!important;

  }
  #imgcontact {
    width:3.5% !important ;
    left: 0.5% !important;
    top: 0% !important;
  }
  #btnled {
    right: 14.65% !important;
    width: 18% !important;
  }
}
@media screen and (max-width: 1465px) {
  #btnled {
  right:15.5% !important;
  width: 19% !important;
}
}
@media screen and (max-width: 1390px) {
  #titleBar > p {
    width: 27.5%!important;
   right: 68%!important;
  }
  #btnled {
  right:16.4% !important;
  width: 20% !important;
}
}
@media screen and (max-width: 1323px) {
  #btnled {
  right:17.25% !important;
  width: 20.3% !important;
}
}
@media screen and (max-width: 1304px) {
  #btnled {
  right: 17.5% !important;
  width: 22% !important;
}
  #imgcontact {
    width: 3.5% !important;
  }
  #titleBar > p {
    width: 28%!important;
    right :68% !important;
  }
.sceneName {
  padding-right: 7% !important;
}
}

  
@media screen and (max-width: 1245px) {
  #btnled {
    right: 18.7% !important;
    font-size: 0.9rem !important;
    padding: 0px !important;
  }
  #titleBar > p {
    top: 40.9%!important;
    right: 70%!important;
    font-size: 0.75rem !important;
  }
  .sceneName { 
    padding-right: 15% !important;
  }
}
@media screen and (max-width: 1201px) {
  #btnhydro {
    font-size: 0.9rem !important;
    width: 19%!important;
  }
  #imgcontact {
    width:4.2%!important;
  }
  #titleBar > p {
    right: 69%!important;
  }
}
@media screen and (max-width: 1120px) {
  #btnhydro {
    width: 19.8% !important;
    font-size: 0.8rem !important;
  }
  #btnled {
    right: 19.7% !important;
    font-size: 0.8rem !important;
  }
}

@media screen and (max-width: 1090px) {
  .popup {
    visibility: hidden;
    display: none !important;
  }
  .popup-mobile {
    visibility: visible!important;
  }
}

@media screen and (max-width: 1075px) {
  #btnhydro {
    width: 19.8% !important;
  }
  #btnled {
    right: 19.7% !important;
  }
  #titleBar > p {
    visibility: hidden;
  }
  #iframespot {

  }
  #iframeselect {

  }
}
  #iframetext {

  }


@media screen and (max-width: 1033px) {
  #imgcontact {
    width: 5%!important;
    top: 2% !important;
    left: 5% !important;
  }
  #btnled {
    right: 44% !important;
    width: 41% !important;
    font-size: 0.8rem !important;
    padding: 0px !important;
  }
  #btnhydro {
    right: 0% !important;
    font-size: 0.8rem !important;
    width: 44% !important;
    padding: 0px !important;
  }
  .sceneName {
    font-size: 0px;
  }
  #titleBar > p {
    visibility: hidden;
  } 
}
@media screen and (max-width: 875px) {
  #imgcontact {
   width: 5.5% !important;
   top: 3% !important;
  }
  
}
@media screen and (max-width: 762px) {
  #imgcontact {
    left: 4.5% !important;
    width: 6.5% !important;
  }
@media screen and (max-width: 745px) {
    .popup {
    visibility: hidden;
    display: none !important;
  }
  .popup-mobile {
    visibility: visible!important;
  }
}
}
}
@media screen and (max-width: 676px) {
  #imgcontact {
    left: 4% !important;
    width: 7.5% !important;
  }
}
@media screen and (max-width: 640px) {
  #imgcontact {
  width: 8% !important;
  left: 3.5% !important;
}
}
@media screen and (max-width: 600px) {
  #imgcontact {
   width: 8.5% !important;
  }
  .popup-mobile {
  margin-top:5rem!important;
  height:125vw!important;
  }
  .imgzoom2-mobile {
  width:80vw!important;
  }
  .cnt223-mobile {
  width:97%!important;
  }
  .cnt223-mobile p {
  font-size:3vw!important;
  }
  .gamme_mobile {
  font-size:2.5vw!important;
  }
  
} 
@media screen and (max-width: 570px) {
  #imgcontact {
   width: 9% !important;
   left: 3.3% !important;
  }
  
}
@media screen and (max-width: 530px) {
  #imgcontact {
   width: 10% !important;
   left: 2.8% !important;
  }
  
}

@media screen and (max-width: 500px) {
  #btncontact {
    left: -48.5% !important;
  }
}
@media screen and (max-width: 491px) {
  #imgcontact {
   top: 1% !important;
   left: 2.3% !important;
   width: 11%!important;
  }
  .popup-mobile {
  margin-top:8rem!important;

  
}
  .cnt223-mobile {
  height:93vh!important;
}
  .cnt223-mobile p {
  padding:10px;
}
  
}

@media screen and (max-width: 420px) {
  #imgcontact {
   left: 1.2% !important;
   top: 2%!important;
   width: 13%!important;
  }
  .popup-mobile {
  margin-top:11rem!important;

  
}
  .cnt223-mobile {
  height:83vh!important;
}

}
@media screen and (max-width: 370px) {
  #imgcontact {
   width: 14% !important;
   left: 0.5% !important;
   top: 5% !important;
  }
  .popup-mobile {
  margin-top:12rem!important;

  
}
  
}
@media screen and (max-width: 350px) {
  #imgcontact {
    width: 15% !important;
    top: 4% !important;
    left: 0 !important;
  }
  .popup-mobile {
  margin-top:13rem!important;

  
}
  .cnt223-mobile {
  height:70vh!important;
}
  
}
  

  




}
@media screen and (max-width: 315px) {
  #imgcontact {

    top: 9%!important;

  }
  #btnled {
    font-size: 0.8rem !important;
  }
  #btnhydro {
    font-size: 0.8rem !important;
  }
  .popup-mobile {
  margin-top:14rem!important;

  
}
  .cnt223-mobile {
  height:70vh!important;
}
}
@media screen and (max-width: 287px) {
  #btnled {
    font-size:0.7rem !important;
  }
  #btnhydro {
    font-size: 0.7rem !important;
  }
  .popup-mobile {
  margin-top:15rem!important;

  
}
  
}
@media screen and (max-width: 258px) {
  #btnled {
    font-size:0.6rem !important;
  }
  #btnhydro {
    font-size: 0.6rem !important;
  }
  .popup-mobile {
  margin-top:16rem!important;

  
}
  
}

#btncontact:hover #imgcontact {
  background-color: #374151;
  padding: 2%;

}

-----------------------------------------------------------------------------------------------------------------------------/* POPUP ONLOAD */---------------------------------------------------------------------------------------------------------------
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
  top: 15%;
  left: 36%;
width: auto;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
  text-align: center;
min-width: 600px;
width: 600px;
min-height: 135px;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 25px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
    color: #555555;
    /* text-align: justify; */
  /*  font-size: 20px; */
  font-size: 1.4vw;
    font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}


/*------------------------------------------------------------------------------------------------------------- POPUP RESPONSIVE --------------------------------------------------------------------------------------------*/

.cnt223-mobile a{
text-decoration: none;
}
.popup-mobile{
  margin-top: 6%;
width: auto;
display: flex;
z-index: 101;
visibility: hidden;
align-items: center;
}
.cnt223-mobile{
  text-align: center;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 25px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223-mobile p{
clear: both;
    color: #555555;
    /* text-align: justify; */
  /*  font-size: 20px; */
  font-size: 1.4vw;
    font-family: sans-serif;
}
.cnt223-mobile p a{
color: #d91900;
font-weight: bold;
}
.cnt223-mobile .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223-mobile .x:hover{
cursor: pointer;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*@media screen and (max-width: 1826px) {
  .popup {
   display: none;
  }
  .cnt223 {
    display: none;
  }
*/

/* -------------------------------------------------------------------------------------------------------------- TEST IFRAME --------------------------------------------------------------------- */
#youtube {
  position: absolute;
  margin-left: 1.6%;
  margin-top: 2%;
}

[data-source] {
  display: inline-block;
  cursor: pointer;
}

#iframespot{
  background-image: url(./img/ecrantv.png);
  background-size: 105%;
  background-position: center center;
}

#iframeselect {
  position: absolute;
  width: 120px;
  margin-left: -140px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.95;
}


#iframeselect li{
  width: 100%;
  padding: 1em;
  font-size: 12px;
  text-align: center;
  background-color: #444;
  color: #ddd;
  transition: .3s background-color ease-in-out,
              .3s color ease-in-out;
}

#iframeselect li:hover{
  background-color: #666;
  color: #fff;
}

#iframespot {
  background-color: #444;
  position: relative;
  /*width: 1280px;
  height: 480px; */
  width: 960px;
  height: 540px;
}



#adsense {
  background-color: #fff;
  color: #000;
}

.adsense-fallback {
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
}


/* ---------------------------------------------------------------------------------- FIN TEST IFRAME ----------------------------------------------------------------------------------*/

/* ------------------------------------------------------------------------------------------------ ANIMATION SOURIS IFRAMESELECT ZOOM ECRAN ---------------------------------------------------------------------*/

.mouse {
   position: absolute;
    width: 4.8%;
    height: 14%;
    top: 75%;
    left: 47.5%;
    /* margin-left: -14px; */
    border-radius: 15px;
    border: 4px solid #fff;
    -webkit-animation: intro 1s;
    /* animation: intro 1s; */
    z-index: 50;
    -webkit-transition: .5s;
    transition: .5s;
}

.mouse:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.mouse a {
  height: 100%;
  width: 100%;
  display: block;
  position: relative;
  top: -5px
}

.mouse .scroll {
  display: block;
    width: 13%;
    height: 20%;
    margin-top: 70%;
    margin: 80% auto;
    border-radius: 4px;
    background: #fff;
    -webkit-animation: finger 1.5s infinite;
    animation: finger 1.5s infinite;
}


@-webkit-keyframes intro {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes intro {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes finger {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
}

@keyframes finger {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(-25px)
  }
}

/*-------------------------------------------------------------------------------------------- delai apparition iframeselect iframespot -----------------------------------------------------------------------------*/

.delay {
  animation: fadein 3.5s;
  -moz-animation: fadein 3.5s; /* Firefox */
  -webkit-animation: fadein 3.5s; /* Safari et Chrome */
  -o-animation: fadein 3.5s; /* Opera */

}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/* ------------------------------------------------------------------------------------------ OLD ANIMATION SOURIS IFRAMESELECT POUR ZOOM ECRAN DMCITY DMCWARE -------------------------------------------*/

/*
.mouse {
  position: absolute;
  width: 22px;
  height: 42px;
  bottom: 5px;
  left: 50%;
  margin-left: -14px;
  border-radius: 15px;
  border: 2px solid #fff;
  -webkit-animation: intro 1s;
  animation: intro 1s; 
  z-index: 50;
  -webkit-transition: .5s;
  transition: .5s;
}

.mouse:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.mouse a {
  height: 100%;
  width: 100%;
  display: block;
  position: relative;
  top: -5px
}

.mouse .scroll {
  display: block;
  width: 3px;
  height: 6px;
  margin: 6px auto;
  border-radius: 4px;
  background: #fff;
  -webkit-animation: finger 1.5s infinite;
  animation: finger 1.5s infinite;
}


@-webkit-keyframes intro {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes intro {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes finger {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
}

@keyframes finger {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
}
*/

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////














/*
besoin d'un projet de transfo > Contactez-nous 
img headset > p width 25%;

ou 
besoin d'un projet de transfomartion digitale ?

img headset > p width 45% left 52%

a contact left:-21%;

sceneName > padding-right:15%;
bienvenu dans notre showroom virtuel

jusqua 1033 px pas de pb



en dessous de 1033 > on passe en icone only (396)

a contact : left-67%;

button led outdoor : right:44%
width:41%
font-size : 0.9rem;

padding:0px;

button hydro
right:0%; 
font-size:0.9rem;
width:44%;
padding:0px; 

p distribtueurs de gel HYDRO
*/