html, body { height:100%; }
body { margin:0; width:100%; background:#fff; }
p { margin:0; padding:0; }
#panocontent{
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1110px;
  max-height: 615px;
  margin: 0 auto;
}

/* --- FONTS --- */

/* xxx FIN FONTS xxx */

/*------------------ HEADER ----------------- */

#headerVV{ position:absolute; z-index:30; width:100%;  padding:0; font-family:Verdana, Arial; line-height:38px;
  background: -moz-linear-gradient(top,rgba(0,0,0,.5) 0%,transparent 100%);
    background: -webkit-linear-gradient(top,rgba(0,0,0,.5) 0%,transparent 100%);
    /* background: linear-gradient(to bottom,rgba(0,0,0,.5) 0%,transparent 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99000000',endColorstr='#00000000',GradientType=0);
}

  .head{
    position: relative;
    top: 4vh;
    height: 150px;
  }

  .head::before{
    content: "";
    position: absolute;
    /*width: calc(50% - 360px/2 - 20px);*/
    max-width: calc(50% - 360px/2 - 20px);
    width: calc(40vw - 20px);
    height: 2px;
    background: #fff;
    left: 0;
    top: 40%;
  }
  .head::after{
    content: "";
    position: absolute;
    /*width: calc(50% - 360px/2 - 20px);*/
    max-width: calc(50% - 360px/2 - 20px);
    width: calc(40vw - 20px);
    height: 2px;
    background: #fff;
    right: 0;
    top: 40%;
  }

p.contentLogo{
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -ms-align-items: center;
}

img.logoClient{
  float:left;
  max-width: 360px;
  width: 40vw;
}

	/* |---> Menu */

	.menuMobile{ display:none; }

	.onglets{ float:right; margin:0px 10px 15px 0; padding:0; }

	.onglets li{ float:left; list-style:none; cursor:pointer; font-family: Verdana, Arial; text-transform: uppercase; }

	.onglets li.navMenu{ position:relative; margin-right:10px; font-size:18px; color: #c21874; background: #fff; border:  1px solid #c21874; padding:2px 20px;
	}

	.onglets li.navMenu:hover, .onglets li.current{

	}

	.onglets li.current ul li{ margin-top: 0px; padding-top: 5px; }

	.sousMenu{ position:absolute; width: 130%; min-width: 250px; z-index:4000; right:-1px; margin:0; line-height: 25px; background:#fff; max-height: 50vh; border: 1px solid #c21874; overflow-y: auto; display:none; }
  .onglets li.current:hover .sousMenu{
    display: block;
  }
	.scrollMenu{
    overflow-x:hidden;
    overflow-y:auto;
    padding:0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    -ms-justify-content: center;
    align-items: flex-start;
    -ms-align-items: flex-start;
    flex-direction: column;
    -ms-flex-direction: column;
  }

		/* |---> Sous Menu */
		.sousMenu li:first-child{ /*margin-top:22px;*/ }
		.sousMenu li{ padding:5px;background: rgba(255,255,255,1);}
    .itemSousMenu{
      width: 100%;
      overflow-x:hidden;
      overflow-y:auto;
      padding:0;
      display: flex;
      cursor: pointer;
      justify-content: flex-start;
      -ms-justify-content: flex-start;
      align-items: center;
      -ms-align-items: center;
    }
		.sousMenu .itemSousMenu.current p.itemTitre, .sousMenu .itemSousMenu:hover p.itemTitre{ color:#fff; }
		.sousMenu .itemSousMenu.current p.itemSousTitre, .sousMenu .itemSousMenu:hover p.itemSousTitre{ color:#fff; }
		.sousMenu img.itemPict{ float:left; margin-right:10px; }
		.sousMenu .itemSousMenu.current, .sousMenu .itemSousMenu:hover{ background: #c21874;}
		.sousMenu p.itemTitre{ margin-right:15px; font-size:13px; color:#c21874; font-weight:bold;letter-spacing:-1px; text-transform:uppercase;font-family:Arial,Helvetica Neue,Helvetica,sans-serif; }
		.sousMenu p.itemSousTitre{ font-size:12px; color:#000; margin-top: -5px;}
		.sousMenu p{ float:left; line-height:16px; }

/*XXxx Fin HEADER xxXX*/

/*------------------ MENU DEROULANT NOMS PANOS ----------------- */

#titrePano{ position:absolute; z-index:30; top:150px; left:15px; overflow-y:auto;}

#comboBox{ height:30px; }

#nomsPanos{
	margin:0;
	padding:5px 0 0 0px;
	font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
	overflow-y: auto;
	overflow-x: hidden;
  display: flex;
  justify-content: center;
  -ms-justify-content: center;
  align-items: flex-start;
  -ms-align-items: flex-start;
  flex-direction: column;
}

#nomsPanos li{
  display: none;
	list-style:none;
	float:left;
	line-height:24px;
	font-size:20px;
	max-width: 40vw;
  margin: 5px 0;
	padding:0;
	cursor:pointer;
	overflow: hidden;
}

#nomsPanos li:hover span{
  color: #c21874;
  text-shadow: none;
}

#nomsPanos li.actif{
	display:inline;
}

#nomsPanos li.open{
	display:inline;
}

#nomsPanos li span{ color:#fff;     text-shadow: -2px 2px 2px rgba(0,0,0, 0.5); }

#nomsPanos li.actif span{ padding:0 25px 0 0px; }

#nomsPanos li.actif span{ background:url(../img/downCombo.png) no-repeat right; }

#nomsPanos li.actif:hover span{ background:url(../img/downCombo.png) no-repeat right; color: #c21874; }

#nomsPanos li.open span{ background:url(../img/upCombo.png) no-repeat right; }

#nomsPanos li.open:hover span{ background:url(../img/upCombo.png) no-repeat right;   }

#nomsPanos li.liVisible{ display:inline; }

/*------------------------------------ BOTTOM BAR --------------------------------------*/

#bottomBar{ position:absolute; left:0; bottom:5vh; width:100%; z-index:2003;
    display: flex;
    justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -ms-align-items: center; }

	/* |---> Controllers */
  .nav_container{
    max-width: 40vw;
    height: 60px;
    display: flex;
    position: relative;
    cursor: pointer;
    justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    flex-wrap:  wrap;
  }
	.btnav{
    background: #fff;
    color: #c21874;
    border: 1px solid #c21874;
    height: 50px;
    height: 3vw;
    min-height: 35px;
    max-height: 50px;
    width: 3vw;
    min-width: 35px;
    max-width: 50px;
    margin: 2px;
    display: flex;
    position: relative;
    cursor: pointer;
    justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    flex-direction: column;
    -ms-flex-direction: column;
  }
  .btnav:hover{
    background: #c21874;
    color: #fff;
  }
  .btnav::before, .btnav::after{
    content: "";
    position: absolute;
    background: #c21874;
  }
  .btnav:hover::before, .btnav:hover::after{
    background: #fff;
  }
  .gauche::before{
    width: 12px;
    height: 2px;
    top: calc(50% - 2px/2 - 4px);
    left: calc(50% - 12px/2 - 2px);
    transform: rotate(-45deg);

  }
  .gauche::after{
    width: 12px;
    height: 2px;
    background: #c21874;
    top: calc(50% - 2px/2 + 4px);
    left: calc(50% - 12px/2 - 2px);
    transform: rotate(45deg);
  }
  .droite::before{
    width: 12px;
    height: 2px;
    top: calc(50% - 2px/2 - 4px);
    left: calc(50% - 12px/2 + 2px);
    transform: rotate(45deg);

  }
  .droite::after{
    width: 12px;
    height: 2px;
    background: #c21874;
    top: calc(50% - 2px/2 + 4px);
    left: calc(50% - 12px/2 + 2px);
    transform: rotate(-45deg);
  }
  .haut::before{
    width: 2px;
    height: 12px;
    left: calc(50% - 2px/2 - 4px);
    top: calc(50% - 12px/2);
    transform: rotate(45deg);

  }
  .haut::after{
    width: 2px;
    height: 12px;
    background: #c21874;
    left: calc(50% - 2px/2 + 4px);
    top: calc(50% - 12px/2);
    transform: rotate(-45deg);
  }
  .bas::before{
    width: 2px;
    height: 12px;
    left: calc(50% - 2px/2 - 4px);
    top: calc(50% - 12px/2);
    transform: rotate(-45deg);

  }
  .bas::after{
    width: 2px;
    height: 12px;
    background: #c21874;
    left: calc(50% - 2px/2 + 4px);
    top: calc(50% - 12px/2);
    transform: rotate(45deg);
  }
  .pause::before{
    width: 2px;
    height: 16px;
    left: calc(50% - 2px/2 - 3px);
    top: calc(50% - 16px/2);
  }
  .pause::after{
    width: 2px;
    height: 16px;
    left: calc(50% - 2px/2 + 3px);
    top: calc(50% - 16px/2);
  }
  .plus::before, .moins::before{
    width: 16px;
    height: 2px;
    left: calc(50% - 16px/2);
    top: calc(50% - 2px/2);
  }
  .plus::after{
    width: 2px;
    height: 16px;
    background: #c21874;
    left: calc(50% - 2px/2);
    top: calc(50% - 16px/2);
  }

  #bFullscreen{overflow: hidden;}
  .fsBt{width: 80%; height: 80%; position: relative; transform: rotate(45deg) scale(1); transition: all .2s;}
  .fsBt:hover{transform: rotate(45deg) scale(1.2)}
  .fsCorner{width: 10px; height: 10px; }
  .fsCorner::before{content: ""; position: absolute; width: 0; height: 0; border-style: solid;}
  .fsCorner::after{content: ""; position: absolute; background: #c21874;}
  .enhaut{position: absolute; top: 2px; left: calc(50% - 10px/2);}
    .enhaut::before{ left: 0; top: 0; border-width: 0px 5px 5px 5px; border-color: transparent transparent #c21874 transparent;}
    .enhaut::after{width: 2px; height: 5px; left: calc(50% - 2px/2); top: 5px;}
  .enbas{position: absolute; bottom: 2px; left: calc(50% - 10px/2);}
    .enbas::before{ left: 0; bottom: 0; border-width: 5px 5px 0px 5px; border-color: #c21874 transparent transparent transparent;}
    .enbas::after{width: 2px; height: 5px; left: calc(50% - 2px/2); bottom: 5px;}
  .agauche{position: absolute; top: calc(50% - 10px/2); left: 2px;}
    .agauche::before{ left: 0; bottom: 0; border-width: 5px 5px 5px 0px; border-color: transparent #c21874 transparent transparent;}
    .agauche::after{width: 5px; height: 2px; top: calc(50% - 2px/2); left: 5px;}
  .adroite{position: absolute; top: calc(50% - 10px/2); right: 2px;}
    .adroite::before{ right: 0; bottom: 0; border-width: 5px 0px 5px 5px; border-color: transparent transparent transparent #c21874;}
    .adroite::after{width: 5px; height: 2px; top: calc(50% - 2px/2); right: 5px;}
  .btnav:hover .fsCorner::after{
    background: #fff;

  }
  .btnav:hover .enhaut::before{border-color: transparent transparent #fff transparent;}
  .btnav:hover .enbas::before{border-color: #fff transparent transparent transparent;}
  .btnav:hover .agauche::before{border-color: transparent #fff transparent transparent;}
  .btnav:hover .adroite::before{border-color: transparent transparent transparent #fff;}

	/* |---> Vignettes */
	#contentThumbs{ margin:0px 50px; position:relative; padding: 5px; display: flex;
    position: relative;
    cursor: pointer;
    justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -ms-align-items: center; }
	#contentThumbs .pictBorder{ float:left; margin:0 2px; border:2px solid #fff; cursor:pointer; width:104px; height: 64px; position: relative; }
	/*#contentThumbs .vignette{ opacity:.7; }*/
	#contentThumbs .pictBorder:hover{ border:2px solid #fff; }
  #contentThumbs .pictBorder:hover::before{
    content: "";
    position: absolute;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    border:2px solid #fff;
  }
	#contentThumbs .pictBorder.current{ border:2px solid #c21874;  }
	#contentThumbs .pictBorder.current::before{
    content: "";
    position: absolute;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    border:2px solid #c21874;
  }

	#contentThumbs #prevThumbs, #contentThumbs #prevThumbs.disable:hover{ position:absolute; cursor: auto; top:calc(50% - 15px/2); left:-15px; cursor:pointer; width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 12px 7.5px 0;
border-color: transparent #c21874 transparent transparent; }
	#contentThumbs #prevThumbs:hover{ border-color: transparent #fff transparent transparent; }
	#contentThumbs #nextThumbs, #contentThumbs #nextThumbs.disable:hover{ position:absolute; top:calc(50% - 15px/2); right:-15px; cursor: auto; width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 0 7.5px 12px;
border-color: transparent transparent transparent #c21874; }
	#contentThumbs #nextThumbs:hover{ cursor:pointer; border-color: transparent transparent transparent #fff; }
	#visibleThumbs { overflow:hidden; position:relative; }
	#visibleThumbs #scroller { height:100%; float:left; padding:0; }

/*------------------------------------ MAP --------------------------------------*/

#miniMap{ border:2px solid #eee; cursor:pointer; overflow:hidden; display: flex;
    cursor: pointer;
    justify-content: center;
    -ms-justify-content: center;
    align-items: center; }
#miniMap:hover{ border:2px solid #c21874; }
#mapContainer{ position:absolute; max-width: 60vw; right:20px; border:4px solid #c21874; overflow:hidden; z-index:20; opacity:0; display:none; }
#mapContainer .bigMap{ float:left; width:100%; }
#mapContainer .picto{ position:absolute; }


.pin {
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  border:  1px solid #c21874;
  position: absolute;
  z-index: 2;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  -ms-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
}
.pin:after {
  content: '';
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: #fff;
  position: absolute;
  border-radius: 50%;
}
.pin:before {
  content: '';
  width: 16px;
  height: 16px;
  margin: 7px 0 0 7px;
  background: #c21874;
  position: absolute;
  border-radius: 50%;
}
.pin:hover, .picto.current .pin{
  background: #c21874;
}
.pulse {
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  -webkit-transform: rotateX(55deg);
  -moz-transform: rotateX(55deg);
  -o-transform: rotateX(55deg);
  -ms-transform: rotateX(55deg);
  transform: rotateX(55deg);
  z-index: 1;
}
.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  -webkit-animation: pulsate 1s ease-out;
  -moz-animation: pulsate 1s ease-out;
  -o-animation: pulsate 1s ease-out;
  -ms-animation: pulsate 1s ease-out;
  animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-box-shadow: 0 0 1px 2px #89849b;
  box-shadow: 0 0 1px 2px #89849b;
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  -ms-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

@keyframes pulsate{
  0%{
      transform: scale(0.1, 0.1);
      opacity: 0.0;}
  50%{
      opacity: 1.0;}
  100%{
      transform: scale(1.2, 1.2);
      opacity: 0;
  }
}

@keyframes bounce{
  0%{
      opacity: 0;
      transform: translateY(-2000px) rotate(-45deg);}
  60%{
      opacity: 1;
      transform: translateY(30px) rotate(-45deg);}
  80%{
      transform: translateY(-10px) rotate(-45deg);}
  100%{
      transform: translateY(0) rotate(-45deg);}
}



#mapContainer #closeMap{ position:absolute; width:30px; height:30px; top:5px; right:5px; cursor:pointer; background: #fff; border: 2px solid #c21874; }
#mapContainer #closeMap:hover{ background: #c21874; }
#mapContainer #closeMap::before{
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  background: #c21874;
  top: calc(50% - 2px/2);
  left: calc(50% - 15px/2);
  transform: rotate(45deg);
}
#mapContainer #closeMap::after{
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  background: #c21874;
  top: calc(50% - 2px/2);
  left: calc(50% - 15px/2);
  transform: rotate(-45deg);
}
#mapContainer #closeMap:hover::before, #mapContainer #closeMap:hover::after{
  background: #fff;
}

/*XXxx Fin MAP xxXX*/

/*------------------------------------ BLOC INFO TEXTE --------------------------------------*/

#infoText{ position:absolute; left:20px; border:4px solid #00879f; overflow:hidden; z-index:1; opacity:0; display:none; background:rgba(255, 255, 255, 0.8); min-width:30%; max-width:34%; min-height:30%; max-height:65%; padding-bottom:10px; color:#3c3c3c; }
#infoText #closeBox{ position:absolute; width:23px; height:23px; background:url(../img/btClose.png) no-repeat; background-size:contain; top:2px; right:2px; cursor:pointer; }
#infoText #closeBox:hover{ background:url(../img/btCloseOver.png) no-repeat; background-size:contain; }
#infoText p.infoTitre{ font-family: Impact, "Arial Black";margin:10px 10px 5px 10px; font-size:16px; color:#00879f; text-transform: uppercase; }
#infoText .descro{float:left; width:100%; overflow:auto; }
#infoText .descro p{font-family:Verdana, Arial;color:#104856; margin:5px 10px 10px 10px; font-size:12px; line-height:18px; }

/*XXxx Fin MAP xxXX*/

/*------------------------------------ LIEN VERS SITE INTERAVIEW --------------------------------------*/

#interaview{ position:absolute; right:10px; bottom:10px; margin-top:-12px; }

/*XXxx Fin LIEN VERS SITE INTERAVIEW xxXX*/

/*XXxx Fin BOTTOM BAR xxXX*/

/*------------------------------------ INFO BULLE --------------------------------------*/

#infoBulle{
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	opacity:0;
	z-index:2004;
	font-family: Verdana, Arial;
}

#infoBulle::before{
  content: "";
  position: absolute;
  left: calc(50% - 16px/2);
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #c21874 transparent transparent transparent;
}

#infoBulle.right::before{
  left: auto;
  right: 15px;
}

#infoBulle p{
	margin:0;
	padding:0;
	color:#fff;
	font-size:14px;
	float:left;
}

#infoBulle .tInfoBulle{
	background: #c21874;
	padding:5px 15px;
	/*border: 1px solid 9cc224;*/
	margin-bottom: -1px;
}

/*XXxx Fin INFO BULLE xxXX*/

/*------------------------------------ HOTSPOT --------------------------------------*/

#textHotspot{ position:absolute; top:0; left:0; font-family: Verdana, Arial; font-size:16px; color:#fff; display:none; z-index:1;padding: :5px;

}
#textHotspot p{ padding: 4px; text-shadow: 0px 0px 4px #000; }

#coolHS::before{
  content: "";
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #fff;
  animation: arrow-move 1s infinite;
  animation-delay: .2s;
  animation-timing-function: ease-out;
}

#coolHS::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #c21874;
  animation: arrow-move 1s infinite;
  animation-delay: 0s;
  animation-timing-function: ease-out;
}

@keyframes arrow-move {
  0% {
    transform: scale(0);
    opacity: .6;
  }
  /*50% {
    transform: scale(1);
    opacity: .4;
  }*/
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/*XXxx Fin HOTSPOT xxXX*/

/*------------------------------------ PLAYER VIDEO YOUTUBE --------------------------------------*/

#frame_youtube{ position:absolute; top:50%; left:0; }

/*XXxx Fin PLAYER VIDEO YOUTUBE xxXX*/