html, body { height:100%; overflow:hidden; }
body { margin:0; width:100%; background:#fff; }
p { margin:0; padding:0; }
#panocontent{ margin-top:80px; }

/* --- FONTS --- */



@font-face {
    font-family: 'brandon_grotesquebold';
    src: url('fonts/brandon_bld-webfont.eot');
    src: url('fonts/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_bld-webfont.woff2') format('woff2'),
         url('fonts/brandon_bld-webfont.woff') format('woff'),
         url('fonts/brandon_bld-webfont.ttf') format('truetype'),
         url('fonts/brandon_bld-webfont.svg#brandon_grotesquebold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'brandon_grotesquelight';
    src: url('fonts/brandon_light-webfont.eot');
    src: url('fonts/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_light-webfont.woff2') format('woff2'),
         url('fonts/brandon_light-webfont.woff') format('woff'),
         url('fonts/brandon_light-webfont.ttf') format('truetype'),
         url('fonts/brandon_light-webfont.svg#brandon_grotesquelight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'brandon_grotesquemedium';
    src: url('fonts/brandon_med-webfont.eot');
    src: url('fonts/brandon_med-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_med-webfont.woff2') format('woff2'),
         url('fonts/brandon_med-webfont.woff') format('woff'),
         url('fonts/brandon_med-webfont.ttf') format('truetype'),
         url('fonts/brandon_med-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'brandon_grotesque_regularRg';
    src: url('fonts/brandon_reg-webfont.eot');
    src: url('fonts/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon_reg-webfont.woff2') format('woff2'),
         url('fonts/brandon_reg-webfont.woff') format('woff'),
         url('fonts/brandon_reg-webfont.ttf') format('truetype'),
         url('fonts/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;

}



/* xxx FIN FONTS xxx */

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

#headerVV{ position:absolute; z-index:2004; width:100%; padding-bottom:10px; font-family:brandon_grotesque_regularRg, Arial; background:#fff; }

p.contentLogo{ float:left; margin:10px 1% 0px 15px; }

img.logoClient{ float:left; }

p.headTitle{ display:none; float:left; font-size: 33px; line-height:30px; color:#fff; text-transform:uppercase; font-family: Times, "Times New Roman", Georgia, serif; margin-right:10px; font-weight: 700; }

p.headSubTitle{ display:none; margin-top:22px; float:left; font-size: 14px; line-height:14px; color:#fff; font-family:brandon_grotesque_regularRg, Arial,Helvetica,sans-serif; margin-right:10px; font-weight: 700; text-transform: uppercase; }
img.star{ display:none;float:left; margin-right:2px; }
img.premium, img.insolite{ float:left;margin-top:2px; }

	/* |---> Menu */
	
	.menuMobile{ display:none; }
	
	.onglets{ float:right; margin:25px 10px 13px 0; padding:0; }
	
	.onglets li{ float:left; list-style:none; display:inline; cursor:pointer; font-family:brandon_grotesquebold, "Arial", sans-serif;letter-spacing: 3px;;
 }
	
	.onglets li.navMenu{ position:relative; margin-right:10px; font-size:15px; color:#424242; padding:2px 20px; line-height: 28px;
	}

	.onglets li.navMenu:hover, .onglets li.current{
		color:#fff;
		background:#424242;
	}
	
	.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:4px 0 0 0; padding:12px 0 0 0; line-height: 25px; background:#fff; display:block; float: left; width: 100%;min-width:325px;}
	/*.navMenu:hover .sousMenu{display: block;}*/
	.scrollMenu{ overflow-x:hidden; overflow-y:auto; padding:0; float: left; width: 100%; height: 0; -webkit-transition:height .5s ease;-moz-transition:height .5s ease;-ms-transition:height .5s ease;-o-transition:height .5s ease;transition:height .5s ease;}

	.navMenu:hover .scrollMenu{height: 184px;}

		/* |---> Sous Menu */
		.sousMenu li:first-child{ /*margin-top:22px;*/ }
		.sousMenu li{font-family:brandon_grotesque_regularRg, Arial,Helvetica,sans-serif; letter-spacing:normal; margin-bottom: -1px; padding:5px; width: calc(100% - 10px);}
		.sousMenu li:hover{background:#f5f5f5;}
		.sousMenu .itemSousMenu.current p.itemTitre{color:#fff; }
		.sousMenu .itemSousMenu.current p.itemSousTitre{ color:#efefef;}
		.sousMenu img.itemPict{ float:left; margin-right:10px; }
		.sousMenu .itemSousMenu.current{background: #424242;}
		.sousMenu p.itemTitre{margin-right:15px; font-size:13px;color:#00234c; letter-spacing:-1px; text-transform:uppercase; }
		.sousMenu p.itemSousTitre{ font-size:12px; color:#424242; margin-top: -5px;font-weight: normal;}
		.sousMenu p{ float:left; line-height:16px; }
		
/*XXxx Fin HEADER xxXX*/

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

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

#comboBox{ height:30px; }

#nomsPanos{
	margin:0;
	padding:5px 0 0 0px;
	font-family:brandon_grotesque_regularRg, Arial,Helvetica,sans-serif;
	overflow-y: auto;
	overflow-x: hidden;
}

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

#nomsPanos li:hover span{
	background:rgba(66, 66, 66, 0.8);
}

#nomsPanos li.actif{
	display:inline;
}

#nomsPanos li.open{
	display:inline;
}

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

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

#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 rgba(66, 66, 66, 0.8); }

#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 rgba(66, 66, 66, 0.8); }

#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{ float:left; width:23px; height:23px; margin-right:2px; cursor:pointer; }
	#bottomBar #controls #bUp{ background:url(../img/btUp.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bDown{ background:url(../img/btDown.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bLeft{ background:url(../img/btLeft.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bRight{ background:url(../img/btRight.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bPause{ background:url(../img/btPause.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bZoomIn{ background:url(../img/btIn.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bZoomOut{ background:url(../img/btOut.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bFullscreen{ background:url(../img/btPe.png) no-repeat; width:40px; height:40px; margin-left:0px; margin-top:-8px; }
	#bottomBar #controls #bInfo{ background:url(../img/btInfo.png) center no-repeat; background-size:contain; display:none; }
	
	#bottomBar #controls div:hover{ float:left; margin-right:2px; cursor:pointer; }
	#bottomBar #controls #bUp:hover{ background:url(../img/btUpOver.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bDown:hover{ background:url(../img/btDownOver.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bLeft:hover{ background:url(../img/btLeftOver.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bRight:hover{ background:url(../img/btRightOver.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bPause:hover{ background:url(../img/btPauseOver.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bZoomIn:hover{ background:url(../img/btInOver.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bZoomOut:hover{ background:url(../img/btOutOver.png) center no-repeat; background-size:contain; }
	#bottomBar #controls #bFullscreen:hover{ background:url(../img/btPeOver.png) no-repeat; width:40px; height:40px; margin-left:0px; }
	#bottomBar #controls #bInfo:hover{ background:url(../img/btInfoOver.png) center no-repeat; background-size:contain; display:none; }
	
	/* |---> 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 #efefef; cursor:pointer; width:70px; height:40px; }
	#contentThumbs .vignette{ opacity:.6; }
	#contentThumbs .pictBorder:hover{ border:2px solid #424242; }
	#contentThumbs .pictBorder.current{ border:2px solid #424242; }	
	#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: auto; top:50%; margin-top:-17px; left:-15px; width:20px; height:33px; background:url(../img/bScrollLeft.png) no-repeat; }
	#contentThumbs #prevThumbs:hover{ background:url(../img/bScrollLeftOver.png) no-repeat; cursor:pointer; }
	#contentThumbs #nextThumbs, #contentThumbs #nextThumbs.disable:hover{ position:absolute; top:50%; margin-top:-17px; right:-15px; cursor: auto; width:20px; height:33px; background:url(../img/bScrollRight.png) no-repeat; }	
	#contentThumbs #nextThumbs:hover{ background:url(../img/bScrollRightOver.png) no-repeat; cursor:pointer; }
	#visibleThumbs { overflow:hidden; position:relative; }
	#visibleThumbs #scroller { height:100%; float:left; padding:0; }

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

#miniMap{ position:absolute; top:-20px; right:60px; border:2px solid #bdbdbd; cursor:pointer; overflow:hidden; }
#miniMap:hover{ border:2px solid #424242; }
#mapContainer{ position:absolute; right:20px; border:4px solid #424242; overflow:hidden; z-index:2002; opacity:0; display:none; }
#mapContainer .bigMap{ float:left; width:100%; }
#mapContainer .picto{ position:absolute; width:17px; height:25px; background:url(../img/picto.png) no-repeat; cursor:pointer; background-size: contain; }
#mapContainer .picto:hover, #mapContainer .picto.current{ background:url(../img/pictoOver.gif) no-repeat; background-size: contain; }
#mapContainer #closeMap{ position:absolute; width:23px; height:23px; background:url(../img/btClose.png) no-repeat; background-size:contain; top:2px; right:2px; cursor:pointer; }
#mapContainer #closeMap:hover{ background:url(../img/btCloseOver.png) no-repeat; background-size:contain; }

/*XXxx Fin MAP xxXX*/

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

#infoText{position:absolute; left:20px; border:4px solid #424242; 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:#424242; }
#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:brandon_grotesquebold,Arial,Helvetica,sans-serif;margin:10px 10px 5px 10px; font-size:16px; color:#424242; text-transform: uppercase; }
#infoText .descro{float:left; width:100%; overflow:auto; }
#infoText .descro p{font-family:brandon_grotesque_regularRg, Arial,Helvetica,sans-serif;color:#424242; margin:5px 10px 10px 10px; font-size:15px; }

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

#infoBulle p{
	margin:0;
	padding:0;
	color:#fff;
	font-size:12px;
	float:left;
	text-transform:uppercase;
	font-family:brandon_grotesque_regularRg, Arial,Helvetica,sans-serif;

}

#infoBulle .tInfoBulle{
	background: #424242;
	padding:5px 10px;
	/*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:brandon_grotesque_regularRg, Arial,Helvetica,sans-serif; font-size:18px; 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*/