

#navigation_bar{
	position:absolute;
	height:40px;
	width:70%; min-width:800px; max-width:1100px;
	
	bottom:20px;
	left:0;
	right:0;
	margin:auto;
	
	background-color: rgba(17, 39, 58,0.75);
	z-index:3002;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	
	-webkit-transition: bottom 1s ease, visibility 1s;
	-moz-transition: bottom 1s ease, visibility 1s;
	-o-transition: bottom 1s ease, visibility 1s;
	transition: bottom 1s ease, visibility 1s;
	overflow: hidden;
}

#Tooltipsinterface{
	position:absolute;
	height:100%;
	width:100%;

	z-index:5000;
	pointer-events: none;
}

#tool_cont{
	position:absolute;
	bottom:60px;
	max-height:calc(98% - 60px); max-height:-webkit-calc(98% - 60px);
	height:calc(98% - 60px); height:-webkit-calc(98% - 60px);
	width:70%; min-width:800px; max-width:1100px;
	left:0; right:0;
	margin:auto;
	z-index:4001;
	overflow:hidden;
	pointer-events: none;
	visibility:hidden;
	-webkit-transition: bottom 1s ease, visibility 1s;
	-moz-transition: bottom 1s ease, visibility 1s;
	-o-transition: bottom 1s ease, visibility 1s;
	transition: bottom 1s ease, visibility 1s;
	overflow: hidden;
}

.tool {
	position:absolute;
	background-color: rgba(17, 39, 58,0.75);

	top:100%;
	max-height:100%;
	visibility: hidden;
	pointer-events: auto;
	-webkit-transition: top 1s ease, visibility 1s;
	-moz-transition: top 1s ease, visibility 1s;
	-o-transition: top 1s ease, visibility 1s;
	transition: top 1s ease, visibility 1s;
	overflow: hidden;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


.Titre_station {
	position:absolute; z-index: 5000;
	width: auto; max-width: 300px;
	top: 10px;  right: 0;
    padding: 10px 20px 15px 15px;
    background-color: rgba(0,0,0,0.2);
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font-size:1.2em; text-align:right;
}

/********* Diapositive ***************/	
.nav-tabs {
	padding-left: 2px;
	padding-top: 5px;
}
.nav-tabs>li>a{
	border:1px solid white;
	padding:5px;
	font-size:0.8em; color: #fff;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus{
	color: #fff;
	cursor: default;
	background-color: transparent;
	/* border: 1px solid #ddd; */
	border-left: 1px solid #ddd; 
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom-color: rgba(17, 39, 58,0.75);
}
.nav-tabs>li>a:hover{
	color: #000;
	cursor: default;
	background-color: #fff;
}
#titre_slider{
	position:relative; text-align: center;
}	
#slider_SysSylExp {
	width:100%; 
}
#slider_PatScar {
	width:100%;
}

#carousel_SysSylExp {
	position:absolute;
	width:100%;
	visibility:hidden !important;
}
#carousel_PatScar {
	position:absolute; visibility:hidden !important;
	width:100%;
}
/* Formatage général du slider des diapos */
#sliderContainer{
	position:absolute;
	height:calc(100% - 37px) !important;
	height:-webkit-calc(100% - 37px) !important;
	top:37px !important;
	width:100%;
}

#sliderContainer .slides, #sliderContainer li {
	height:100%;
}

#sliderContainer img{
	height:auto;
	width:auto;
	max-width:90%;
	max-height:100%;
	margin:auto;
}

#sliderContainer a{
	height:55px;
	text-align: center;
}

#sliderContainer a::before{
	color:rgba(255, 255, 255, 0.8);
	text-shadow:1px 1px 0 rgba(0, 0, 0, 0.3);
}

#slider_SysSylExp{
	position:absolute;
}
#slider_PatScar{
	position:absolute;
}


/* Formatage général du caroussel des diapos */
#carousTabsContainer{
	position:absolute;
	width:100%;
	top:0px  !important;
	height:34px  !important;
}

#carousselContainer {
	position:absolute;
	height:120px;
	width:100%;
}

#carousselContainer li {
	width:"auto;" !important;
}

#carousselContainer img{
	height:100px;
	width:auto;
	margin:auto;
	cursor:pointer;
}

#carousselContainer a{
	height:55px;
}

#carousselContainer a::before{
	color:rgba(255, 255, 255, 0.8);
	text-shadow:1px 1px 0 rgba(0, 0, 0, 0.3);
}

#SysSylExp_tab {
	cursor:pointer
}

#PatScar_tab {
	cursor:pointer
}

.flexslider{
	height: calc(100% - 22px);
	padding:10px;
	background-color:rgba(0,0,0,0);
	border:none;
}
.flex-viewport{
	height:100%; 
	margin:auto; left:0; right:0;
}

.flexslider .flex-direction-nav a,.flexslider .flex-direction-nav a {
	display: block; 
	background-color: rgba(0,0,0,0.5);
}
.flex-direction-nav .flex-next { 
	right: 0 !important; z-index:10000; opacity: 1; 
}
.flex-direction-nav .flex-prev { 
	left: 0 !important; opacity: 1;  z-index:10000; 
}
#diapo_tool audio {
	width: 80%;
}
#audio_tab {
	height: calc( 100% - 22px);
    text-align: center;
    transform: translateY(50%);
}
#div_thumbs a{
	height:55px;
}

#div_thumbs a::before{
	color:rgba(255, 255, 255, 0.8);
	text-shadow:1px 1px 0 rgba(0, 0, 0, 0.3);
}
#div_thumbs .slides li{
	margin-right:10px;
}






.btn_krpano{
	background-image: url("lib/krpano-1.19/skin/vtourskin.png");
	width:64px;
	height:64px;
	transform: scale(0.5,0.5) translate(0%,25%);
	-webkit-transform: scale(0.5,0.5) translate(0%,25%);
	text-decoration:none;
}
.btn_left_side{
	transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
}
.btn_right_side{
	transform-origin: 100% 50%;
	-webkit-transform-origin: 100% 50%;
}
.btn_align_center{
	transform-origin: center center;
	-webkit-transform-origin: center center;
}
#divBouttonsCentre{
	position: absolute;
	margin: 0 auto;
	height:100%;
	left: 0;
	right: 0;
}
.btn_back{
	background-position: 0px 576px;
}
.btn_thumbs{
	background-position: 0px 512px;
}
.btn_carte{
	background-position: 64px 512px;
}
.btn_diapo{
	background-image: url("image/glyphicons-479-blackboard.png");
	width: 20px;
	height:22px;
	transform: translate(0%,100%);
	-webkit-transform: translate(0%,100%);
}
.btn_autoPlay{
	background-image: url("image/automatisation_play.png");
	width: 26px;
	height:26px;
	transform: translate(0%,100%);
	-webkit-transform: translate(0%,100%)
	
}
.btn_autoPause{
	background-image: url("image/automatisation_pause.png");
	width: 26px;
	height:26px;
	transform: translate(0%,100%);
	-webkit-transform: translate(0%,100%)
	
}
.btn_gyro{
	background-position: 0px 256px;
}
.btn_left{
	background-position: 0px 448px;
}
.btn_right{
	background-position: 64px 448px;
}
.btn_up{
	background-position: 0px 384px;
}
.btn_down{
	background-position: 64px 384px;
}
.btn_zoomIn{
	background-position: 0px 320px;
}
.btn_zoomOut{
	background-position: 64px 320px;
}
.btn_aide{
	background-image: url("image/glyphicons-195-circle-question-mark.png");
	width: 26px;
	height:26px;
	transform: translate(0%,100%);
	-webkit-transform: translate(0%,100%);
}
.btn_info{
	background-image: url("image/glyphicons-196-circle-info.png");
	width: 26px;
	height:26px;
	transform: translate(0%,100%);
	-webkit-transform: translate(0%,100%);
}
.btn_fs{
	background-position: 0px 64px;
}
.btn_fs_2{
	background-position: 64px 64px;
}
.btn_hide{
	background-position: 0px 192px;
}
.btn_next{
	background-position: 64px 576px;
}
.btn_Show{
	background-position: 64px 192px;
}
.btn_ShowPos {
	position:absolute;
	bottom:0.5em;
	left:0;
	right:0;
	margin:auto;
}
#btn_back{
	position:absolute;
	left:5px;
	top:-50%;
	cursor:pointer;
}
#btn_thumbs{
	position:absolute;
	left:50px;
	top:-50%;
	cursor:pointer;
}
#btn_carte{
	position:absolute;
	left:90px;
	top:-50%;
	cursor:pointer;
}
#btn_diapo{
	position:absolute;
	left:135px;
	top:-12px;
	cursor:pointer;
}
#btn_auto{
	position:absolute;
	left:170px;
	top:-50%;
	cursor:pointer;
}
#btn_gyro{
	position:absolute;
	left:170px;
	top:-50%;
	visibility:hidden;
	cursor:pointer;
}
#btn_left{
	position:absolute;
	right:calc(50% + 74px);
	right:-webkit-calc(50% + 74px);
	top:-50%;
	cursor:pointer;
}
#btn_right{
	position:absolute;
	right:calc(50% + 32px);
	right:-webkit-calc(50% + 32px);
	top:-50%;
	cursor:pointer;
}
#btn_up{
	position:absolute;
	right:calc(50% - 10px);
	right:-webkit-calc(50% - 10px);
	top:-50%;
	cursor:pointer;
}
#btn_down{
	position:absolute;
	left:calc(50% - 10px);
	left:-webkit-calc(50% - 10px);
	top:-50%;
	cursor:pointer;
}
#btn_zoomIn{
	position:absolute;
	left:calc(50% + 32px);
	left:-webkit-calc(50% + 32px);
	top:-50%;
	cursor:pointer;
}
#btn_zoomOut{
	position:absolute;
	left:calc(50% + 74px);
	left:-webkit-calc(50% + 74px);
	top:-50%;
	cursor:pointer;
}
#btn_aide{
	position:absolute;
	right:175px;
	top:-50%;
	cursor:pointer;
}
#btn_info{
	position:absolute;
	right:135px;
	top:-50%;
	cursor:pointer;
}
#btn_fs{
	position:absolute;
	right:90px;
	top:-50%;
	cursor:pointer;
}
#btn_hide{
	position:absolute;
	right:50px;
	top:-50%;
	cursor:pointer;
}
#btn_next{
	position:absolute;
	right:5px;
	top:-50%;
	cursor:pointer;
}
/* Navigation images */
#div_thumbs .slides, .slides > li, #div_thumbs .flex-control-nav{
    position: relative;
}  
#div_thumbs .flex-control-nav, #div_thumbs .flex-direction-nav {
    position: relative; 
}  
#div_thumbs .flex-nav-next {
    float:right;
}  
.currentScene{
	border-style:solid;
	border-width:3px;
	border-color:white;
}
.currentScene .ThumbTextImg {
    position: absolute;
    width: calc(100% - 5px);
    bottom: 2px;
    font-size: 12px;
    text-align: center;
    color: white;  background-color: rgba(0,0,0,0.5);
}
.ThumbTextImg{
	position: absolute;
	width:100%;
	bottom:0px;
	font-size:12px;	text-align:center;
	color:white; background-color: rgba(0,0,0,0.5);
}



  
#NavSceneNext{
	position:absolute;
	right:0em;
	top:45%;
}

#NavSceneBack{
	position:absolute;
	left:0em;
	top:45%;
}
.NavScene{
	opacity:0.5;
	cursor:pointer;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
.NavScene:hover{
	opacity:1;
}
.NavSceneDisabled{
	opacity:0.5;
	cursor:default;
}
.tooltip_1 {
	font-size:1.5em;
}
/* Aide */
#DivAide{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
	max-width:90%;
	max-height:90%;
	z-index:4003;
}

#aide_1{
	position:absolute;
	
	background-image:url("image/Aide_v1.jpg");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center; 
	width:100%;
	height:100%;

}
#aide_2{
	position:absolute;
	
	background-image:url("image/Aide_v2_Liste.jpg");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center; 
	width:100%;
	height:100%;

}
#aide_3{
	position:absolute;
	background-image:url("image/Aide_v2_Carte.jpg");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center; 
	width:100%;
	height:100%;
}
.HelpNext {
	position:absolute;
	right:-2%;
	top:50%;
	opacity:0.5;
}

.HelpBack {
	position:absolute;
	left:-2%;
	top:50%;
	opacity:0.5;
}

.HelpDisabled {
	opacity:0.15;
}
#closeAide{
	position: absolute;
	top:0px;
	right:0px;
	transform: translate(50%,-50%);
	-webkit-transform: translate(50%,-50%);
	z-index:4004;
	color:black;
	cursor:pointer;
}


@media (min-width: 768px) and (max-width: 991px) {
	.Titre_station {
		font-size:1em;
	}
}

@media(max-width: 750px) {
	.btn_align_center{
		visibility:hidden;
	}
	
	#btn_back{
		visibility:hidden;
	}
	#btn_next{
		visibility:hidden;
	}
	
	#btn_thumbs{
		left:5px;
	}
	#btn_gyro{
		left:45px;
		visibility:visible;
	}
	#btn_auto{
		visibility:hidden;
	}
	
	
	#btn_aide{
		right:130px;
	}
	#btn_info{
		right:90px;
	}
	#btn_fs{
		right:45px;
	}
	#btn_hide{
		right:5px;
	}
	
}
@media (max-width: 767px) {
	.Titre_station {
		font-size:1em;
	}
	#navigation_bar {
		width: 98%;
		min-width: 200px;
	}
	#tool_cont {
		width: 98%;
		min-width: 200px;
	}
}
@media(max-height: 550px) {
	#navigation_bar{
		bottom:5px;
	}   
	#tool_cont{
		bottom:45px;
		max-height:calc(98% - 45px);
		max-height:-webkit-calc(98% - 45px);
		height:calc(98% - 45px);
		height:-webkit-calc(98% - 45px);
	}
	
	#carousTabsContainer{
		top:0px  !important;
		height:34px  !important;
	}
	
	#carousel_SysSylExp{
		visibility:hidden !important;
	}
	
	#carousel_PatScar{
		visibility:hidden !important;
	}
	#sliderContainer{
		height:calc(100% - 44px) !important;
		height:-webkit-calc(100% - 44px) !important;
		top:44px !important;
	}
	#video-controls {
		bottom:45px;

	}
}
  