html, body { height:100%; overflow:hidden; }
body { margin:0; width:100%; }
p { margin:0; padding:0; }
#panocontent{ width: 100%; height: 100%; }

/* --- FONTS --- */

@import url('https://fonts.googleapis.com/css?family=Lato');

/* xxx FIN FONTS xxx */

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

#headerVV{ position:absolute; z-index:2004; width:100%; height: 80px; padding:0; font-family:Verdana, Arial; line-height:38px; background:#fff; }

p.contentLogo{ position: absolute; top: 0; left: 0; background-color: #fff; height: 150px; width: 150px; }

img.logoClient{ height: 100%; }

p.headTitle{ float:left; font-size: 36px; line-height:30px; color:#3c3c3c; text-transform:uppercase; font-family: 'Lato', sans-serif; margin-right:10px; margin-left: 200px; }

p.headSubTitle{ margin-top:16px; float:left; font-size: 18px; line-height:18px; color:#76b38f; font-family: 'Lato', sans-serif; margin-left: 200px; }

img.star{ float:left; margin-right:2px; }

	/* |---> Menu */

	.menuMobile{ display:none; }

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

	.onglets li{ float:left; list-style:none; display:inline; cursor:pointer; font-family: 'Lato', sans-serif; }

	.onglets li.navMenu{ position:relative; margin-right:1px; font-size:15px; color:#fff; padding:2px 30px; border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px;
		-webkit-border-radius: 5px 5px 0px 0px;
		background:#b4b4b4;
		line-height: 30px;
	}

	.onglets li.navMenu:hover, .onglets li.current{
		background:#333c75;
		padding-top: 8px;
		margin-top: -6px;
	}

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

	/*.navMenu.current ul{ margin-top:20px; }*/

	.sousMenu{ /*height:0;*/ overflow:hidden; position:absolute; z-index:4000; right:0; /*top:40px;*/ margin:2px 0 0 0; padding:5px; line-height: 25px; background:#333c75; display:none; }
	.scrollMenu{ overflow-x:hidden; overflow-y:auto; padding:0; }

		/* |---> Sous Menu */
		.sousMenu li:first-child{ /*margin-top:22px;*/ }
		.sousMenu li{ padding:5px; background:#fff; }
		.sousMenu li:hover{ background: #dee7eb; }
		.sousMenu .itemSousMenu.current p.itemTitre{ color:#fff; }
		.sousMenu img.itemPict{ float:left; margin-right:10px; }
		.sousMenu .itemSousMenu.current{ background:#76b38f; }
		.sousMenu p.itemTitre{ margin-right:5px; font-size:14px; color:#76b38f; font-weight:bold; text-transform:uppercase; }
		.sousMenu p.itemSousTitre{ font-size:12px; color:#3c3c3c; margin-top: -5px; }
		.sousMenu p{ float:left; line-height:16px; }

	.navMenu:hover .sousMenu{display: block;}

/*XXxx Fin HEADER xxXX*/

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

#titrePano{ 
	position:absolute; 
	z-index:10; 
	top:20px; 
	left:20px; 
	color:#fff; 
	overflow-y:auto;
}

#comboBox{ height:30px; }

#nomsPanos{
	margin:0;
    padding: 10px 0 10px 5px;
    font-family: inherit;
    overflow-y: auto;
    overflow-x: hidden;
    background: #BBA98B;
	font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	border-radius: 5px;
    border: solid 2px #fff;	
}

#nomsPanos li{
	list-style:none;
	text-shadow: -2px 2px 2px rgba(0,0,0, 0.5);
	float:left;
	line-height:28px;
	font-size:20px;
	/*padding:0 20px 0 0;*/
	padding:0;
	cursor:pointer;
	overflow: hidden;
}


#nomsPanos li:hover span{
	opacity:0.8
}

#nomsPanos li.actif{
	display:inline;
}

#nomsPanos li.open{
	display:inline;
}

#nomsPanos li span{ padding:0px 5px 0 5px; position: relative; }

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

#nomsPanos li.actif span::after{ position: absolute; content: ''; border-bottom: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; top: calc(50% - 10px/2); right: 5px; }

#nomsPanos li.actif:hover span{ }

#nomsPanos li.open span::after{ position: absolute; content: ''; border-top: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #fff; top: calc(50% - 10px/2); right: 5px; }

#nomsPanos li.open:hover span{  }

#nomsPanos li.liVisible{ display:inline; }

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

#bottomBar{ position:absolute; left:0; bottom:0; width:100%; background:#FFF; z-index:2003; height:55px; }

	/* |---> Controllers */
	#bottomBar #controls{ float:left; margin:16px 0 0px 12px; }
	#bottomBar #controls div{ position: relative; float:left; width:23px; height:23px; margin-right:2px; cursor:pointer; background-color: #76B38F; border-radius: 3px; border: 1px solid #76B38F; }
	#bottomBar #controls div::before{ position: absolute; content: ''; }
	#bottomBar #controls div::after{ position: absolute; content: ''; }
	#bottomBar #controls #bUp::after{ border-top: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #fff; top: calc(50% - 10px/2); left: calc(50% - 7px); }
	#bottomBar #controls #bDown::after{ border-bottom: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff; top: calc(50% - 10px/2); left: calc(50% - 7px); }
	#bottomBar #controls #bLeft::after{ border-left: 0px solid transparent; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10px solid #fff; top: calc(50% - 7px); left: calc(50% - 10px/2); }
	#bottomBar #controls #bRight::after{ border-right: 0px solid transparent; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #fff; top: calc(50% - 7px); left: calc(50% - 10px/2); }
	#bottomBar #controls #bPause::before{ width: 2px; height: 10px; top: calc(50% - 10px/2); left: calc(50% - 2px - 1px); background-color: #fff; }
	#bottomBar #controls #bPause::after{ width: 2px; height: 10px; top: calc(50% - 10px/2); left: calc(50% + 2px - 1px); background-color: #fff; }
	#bottomBar #controls #bZoomIn::before{ width: 2px; height: 10px; top: calc(50% - 10px/2); left: calc(50% - 2px/2); background-color: #fff; }
	#bottomBar #controls #bZoomIn::after{ width: 10px; height: 2px; top: calc(50% - 2px/2); left: calc(50% - 10px/2); background-color: #fff; }
	#bottomBar #controls #bZoomOut::after{ width: 10px; height: 2px; top: calc(50% - 2px/2); left: calc(50% - 10px/2); background-color: #fff; }
	#bottomBar #controls #bInfo{ color: #fff; text-align: center; font-size: 20px; font-style: italic; font-weight: 600; }
	#bottomBar #controls #bFullscreen{ width:30px; height:30px; margin-left:10px; margin-top:-3px; }
	#bottomBar #controls #bFullscreen span{ position: absolute; width: 18px; height: 18px; top: 4px; left: 4px; border: 2px solid #fff; border-radius: 3px; }
	#bottomBar #controls #bFullscreen::before{ width: 10px; height: 30px; top: 0; left: calc(50% - 10px/2); background-color: #76B38F; z-index: 2; }
	#bottomBar #controls #bFullscreen::after{ width: 30px; height: 10px; top: calc(50% - 10px/2); left: 0; background-color: #76B38F; z-index: 2; }

	#bottomBar #controls div:hover{ float:left; margin-right:2px; cursor:pointer; background-color: #fff; }
	#bottomBar #controls #bUp:hover::after{ border-bottom-color: #76B38F; }
	#bottomBar #controls #bDown:hover::after{ border-top-color: #76B38F; }
	#bottomBar #controls #bLeft:hover::after{ border-right-color: #76B38F; }
	#bottomBar #controls #bRight:hover::after{ border-left-color: #76B38F; }
	#bottomBar #controls #bPause:hover::before{ background-color: #76B38F; }
	#bottomBar #controls #bPause:hover::after{ background-color: #76B38F; }
	#bottomBar #controls #bZoomIn:hover::before{ background-color: #76B38F; }
	#bottomBar #controls #bZoomIn:hover::after{ background-color: #76B38F; }
	#bottomBar #controls #bZoomOut:hover::after{ background-color: #76B38F; }
	#bottomBar #controls #bInfo:hover{ color: #76B38F; }
	#bottomBar #controls #bFullscreen:hover span{ border-color: #76B38F; }
	#bottomBar #controls #bFullscreen:hover::before{ background-color: #fff; }
	#bottomBar #controls #bFullscreen:hover::after{ background-color: #fff; }

	/* |---> Vignettes */
	#contentThumbs{ margin:0px auto; position:relative; padding: 5px;/* background: #dfdfdf; top:-26px; box-shadow: 1px 1px 10px #555;*/ }
	#contentThumbs .pictBorder{ float:left; margin:0 2px; border:2px solid #3c3c3c; cursor:pointer; width:70px; height:40px; }
	#contentThumbs .vignette{ opacity:.7; }
	#contentThumbs .pictBorder:hover{ border:2px solid #76b38f; }
	#contentThumbs .pictBorder.current{ border:2px solid #333c75; }
	#contentThumbs .pictBorder:hover .vignette, #contentThumbs .pictBorder.current .vignette{ opacity:1; }
	#contentThumbs .pictBorder.current .vignette{ width:66px; height:36px; margin:2px 0 0 2px; }
	#contentThumbs #prevThumbs, #contentThumbs #prevThumbs.disable:hover{ position:absolute; cursor: pointer; top:50%; margin-top:-17px; left:-15px; width:20px; height:33px; }
	#contentThumbs #prevThumbs::after, #contentThumbs #prevThumbs.disable:hover::after{
		position: absolute; content: ''; border-left: 0px solid transparent; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10px solid #757575; top: calc(50% - 10px/2); right: 5px;
	}
	#contentThumbs #prevThumbs:hover::after{ border-right-color: #76b38f; }
	#contentThumbs #nextThumbs, #contentThumbs #nextThumbs.disable:hover{ position:absolute; top:50%; margin-top:-17px; right:-15px; cursor: pointer; width:20px; height:33px; }
	#contentThumbs #nextThumbs::after, #contentThumbs #nextThumbs.disable:hover::after{
		position: absolute; content: ''; border-right: 0px solid transparent; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #757575; top: calc(50% - 10px/2); right: 5px;
	}
	#contentThumbs #nextThumbs:hover::after{ border-left-color: #76b38f; }
	#visibleThumbs { overflow:hidden; position:relative; }
	#visibleThumbs #scroller { height:100%; float:left; padding:0; }

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

#miniMap{ position:absolute; bottom:20px; right:60px; border:2px solid #76b38f; cursor:pointer; overflow:hidden; }
#miniMap:hover{ border:2px solid #333c75; }
#mapContainer{ position:absolute; right:20px; border:5px solid #333c75; overflow:hidden; z-index:2002; opacity:0; display:none; }
#mapContainer .bigMap{ float:left; width:100%; }
#mapContainer .picto{ position:absolute; width:10px; height:10px; border: 2px solid #333c75; background-color: #fff; border-radius: 100%; }
#mapContainer .picto:hover, #mapContainer .picto.current{ background-color: #333c75; }
#mapContainer .picto.current{ z-index: 1; }
#mapContainer #closeMap{ position:absolute; width:23px; height:23px; background-color: #76b38f; border: 1px solid #76b38f; border-radius: 3px; top:2px; right:2px; cursor:pointer; }
#mapContainer #closeMap::before{ position: absolute; content: ''; width: 2px; height: 14px; top: calc(50% - 14px/2); left: calc(50% - 2px/2); background-color: #fff; transform: rotate(45deg); }
#mapContainer #closeMap::after{ position: absolute; content: ''; width: 14px; height: 2px; top: calc(50% - 2px/2); left: calc(50% - 14px/2); background-color: #fff; transform: rotate(45deg); }
#mapContainer #closeMap:hover{ background-color: #fff; }
#mapContainer #closeMap:hover::before{ background-color: #76b38f; }
#mapContainer #closeMap:hover::after { background-color: #76b38f; }

/*XXxx Fin MAP xxXX*/

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

#infoText{ position:absolute; font-family: 'Lato', sans-serif; left:20px; border:5px solid #333c75; 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: 30px 10px; color:#3c3c3c; }
#infoText #closeBox{ position:absolute; width:23px; height:23px; background-color: #76b38f; border: 1px solid #76b38f; border-radius: 3px; top:2px; right:2px; cursor:pointer; }
#infoText #closeBox::before{ position: absolute; content: ''; width: 2px; height: 14px; top: calc(50% - 14px/2); left: calc(50% - 2px/2); background-color: #fff; transform: rotate(45deg); }
#infoText #closeBox::after{ position: absolute; content: ''; width: 14px; height: 2px; top: calc(50% - 2px/2); left: calc(50% - 14px/2); background-color: #fff; transform: rotate(45deg); }
#infoText #closeBox:hover{ background-color: #fff; }
#infoText #closeBox:hover::before{ background-color: #76b38f; }
#infoText #closeBox:hover::after { background-color: #76b38f; }
#infoText p.infoTitre{ margin:10px 10px 5px 10px; font-size:16px; color:#76b38f; }
#infoText .descro{ float:left; width:100%; overflow:auto; }
#infoText .descro p{ margin:5px 10px 10px 10px; font-size:14px; line-height:18px; }

/*XXxx Fin MAP xxXX*/

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

#interaview{ position:absolute; right:10px; top:50%; 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: 'Lato', sans-serif;
}

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

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

#infoBulle .flecheIB, #infoBulle.center .flecheIB{
	width:100%;
	height:15px;
	background:url(../img/flecheIB.png) no-repeat 50% 50%;
}

#infoBulle.right .flecheIB{
	background:url(../img/flecheIB.png) no-repeat 95% 50%;
}

/*XXxx Fin INFO BULLE xxXX*/

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

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

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

/*XXxx Fin HOTSPOT xxXX*/

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

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

/*XXxx Fin PLAYER VIDEO YOUTUBE xxXX*/