@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; width:100%; }
body { height:100%; width:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }

#pano {width:100%;height:100%; z-index:1;}
#menu { position:absolute; height:100%; width:20%;  font-family:Arial, Helvetica, sans-serif; font-size:16px; z-index:10; right:0; background-color:rgba(0,0,0,0.7); }
button { position:absolute; width:50px; left:-50px;}

/****************** INTRODUCTION DOMTAR ***************************************/
	#intro {
		position:absolute; z-index:10001;
		width:50%; min-width:200px; max-width: 600px;
		height:70%;  max-height: 480px;
		top:15%; left:0; right:0; margin:auto;
		background-color:rgba(255, 255, 255, 1);
	}	
	
	#intro_splash{
		position:absolute; z-index: 10000; 
		height:100%; width:100%;
		background-color: rgba(0,0,0,0.85);
	}
	#intro_title { 
		height:25px;
		top: 5px;
	}
	.title_text { 
		float: right; top: 5px;
		cursor:pointer;	color: #000;
		/* font-size: 18px; font-weight: 500; */
	}
	#content {
		position:relative;
		width: 100%; height:calc(100% - 25px);
		bottom: 0px; overflow:auto;
		color:#000; 
	}	
	#intro_nextpage { 
		position: absolute;
		right: 20%; top: 50%;
		cursor: pointer;
	}
	#intro_backpage { 
		position: absolute;
		left: 20%; top: 50%;
		cursor: not-allowed;
		color:rgba(255,255,255,0.3);  
	}
	
	/* Page 1 */
		#intro #page1{
			height: 100%;
			text-align:center;
		}
		#page1 .content_head {
			display: table;
			height:105px;
		}
		.content_title {
			padding-top: 10px;
			font-size:36px; font-weight: 700;
			display: table-cell; vertical-align: middle;
		}	
		#page1 .content_image {
			position: relative;
			height: calc(100% - 105px - 25px);
			width:100%;
		}
		#image_domtar { 
			position: absolute;
			width:70%; height:auto;
			top: 0; bottom: 0; left: 0; right: 0; margin:auto;
		}
	
	/* Page 2 */
		#intro #page2{
			display:none; z-index:10003;
			height: 100%;
			font-size:16px;
			text-align:justify;
			padding-top: 15px; padding-right: 45px; padding-left: 45px;
		}
	
	/* Page 3 */
		#intro #page3{
			display:none; z-index:10003;
			height: 100%;
			text-align:center;
		}
		#page3 .content_image {
			display:table;
		}
		.content_image img {
			display:table-cell;
			vertical-align:middle;
			text-align:center;
		}
		.translate50{
			 transform: translateY(50%);
		}  
		.translate25{
			 transform: translateY(25%);
		}   
		.texte_realisation{
			padding-bottom: 10px; padding-top: 10px;
			margin-bottom: 15px; margin-top: 15px;
			background-color: gainsboro;
			box-shadow: 5px 5px 10px 0px rgba(50, 50, 50, 0.75); -webkit-box-shadow: 5px 5px 10px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 5px 5px 10px 0px rgba(50, 50, 50, 0.75); 
		}
		.logo_realisation{
			width:50%; height:auto;
		}
		.logo_collabo{
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
	
	

/********************* Video Integrés ******************************/
	#video-controls {
		position:absolute; display:none; z-index:2003;
		height:30px; width:325px; 
		left:0; right:0; bottom:60px;
		margin:0 auto; padding-bottom:5px; padding-top:5px; padding-right: 5px!important; padding-left: 5px!important;
		-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-o-transition: opacity .3s;-ms-transition: opacity .3s; transition: opacity .3s;
		background-color: rgba(17, 39, 58, 0.75);
	}
	#play-stop {
		position: relative;	display: block;
		width: 50px; height: 100%;
		padding-left: 15px; padding-right: 5px;
		float: left!important;
	}
	#play-pause.fa {
		font-size: 1.5em;
		cursor: pointer;
	}
	.logo_video_play {
		display: block;
		height: 100%; width: auto;
		float: left!important; cursor: pointer;
	}
	.logo_video_stop {
		display: block;
		height: 100%; width: auto;
		margin-left: 10px;
		float: left!important; cursor: pointer;
	}
	#time-bar {
		height: 100%; width: calc(100% - 50px);
		padding-left: 5px; padding-right: 5px;
		float: left!important;
	}
	#video-seek-bar {
		position: relative;
		width:80%;
		margin-right:0; padding-right:10px;
		float: left!important; cursor:pointer;
	}
	#time_sec{
		position: relative;
		width:20%; 
		padding-left:5px; padding-right:10px; 
		font-size:15px; font-weight: 500; color:white; text-align: center;
		float: right!important;
	}
	
	input[type=range]::-ms-track {
		width: 100%;
		height: 4px;
		
		/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
		background: transparent;
		
		/*leave room for the larger thumb to overflow with a transparent border */
		border-color: transparent;
		border-width: 5px 0;
		/*remove default tick marks*/
		color: transparent;
	}
	input[type=range]::-ms-fill-lower {
		background: #777;
		border-radius: 10px;
	}
	input[type=range]::-ms-fill-upper {
		background: #ddd;
		border-radius: 10px;
	}
	input[type=range]::-ms-thumb {
		border: none;
		height: 10px; width: 10px;
		border-radius: 50%;
		background: goldenrod;
	}
	input[type=range]:focus::-ms-fill-lower {
		background: #888;
	}
	input[type=range]:focus::-ms-fill-upper {
		background: #ccc;
	}

/******************** Video ********************************************/
	#my-video{
		position:absolute; z-index: 10001;
		height:80%;
		margin:auto;
		top:5%; left:0px; right:0px;
	}
	#video_splash{
		position:absolute; z-index: 10000; 
		height:100%; width:100%;
		background-color: rgba(0,0,0,0.88);
	}
	.popup-closer {
		position: absolute;	z-index: 10001;
		right:30px; top: 20px;
		color:#fff; text-decoration:none; cursor:pointer; font-weight: bold;
	}
	

	
/* General et autres */	
	/* Fade-In Effect */
	.fade-in {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -webkit-transition: opacity 0.5s;
}
	/* Fade-Out Effect */
	.fade-out {
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s 0.5s, opacity 0.5s;
        -moz-transition: visibility 0s 0.5s, opacity 0.5s;
        -ms-transition: visibility 0s 0.5s, opacity 0.5s;
        -o-transition: visibility 0s 0.5s, opacity 0.5s;
        -webkit-transition: visibility 0s 0.5s, opacity 0.5s;
	}
	.hidden {
		visibility: hidden;
		opacity:0;
	}
	.notransition {
		-webkit-transition: none !important;
		-moz-transition: none !important;
		-o-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}
	.vcenter {
		display: inline-block;
		vertical-align: middle;
		float: none;
	}

/********************* Vignettes **********************************************************/
#vignette{
    position:absolute;
    top:45%;
    left:50%;
    transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
    background-color:white; 
    color:black; 
    z-index:4005;
    line-height:1.5em;
    -webkit-box-shadow: 0px 0px 55px 26px rgba(0,0,0,0.84);
    -moz-box-shadow: 0px 0px 55px 26px rgba(0,0,0,0.84);
    box-shadow: 0px 0px 55px 26px rgba(0,0,0,0.84);
    padding:1em;
}
.fermer{
    position:relative; 
    top:0.2em; 
    right:0.6em; 
    color:black; 
    z-index:3005;
    padding-bottom:1em;
	text-align: right;
}
#fermer{
	cursor:pointer;
}
.text_div {
    overflow-y: auto;
}
.descript {
    line-height:0.5em;
}
.no-padding {
    padding-right:0 !important;
    padding-left:0 !important;
}

.titre_div {
    position:relative;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    padding-top: 0.1em;
    padding-bottom: 0.5em;
}

.titre_vignette {
    font-size: 1.5em;
    font-weight: bold;
    padding-top: 0.1em;
    padding-bottom: 0.5em;
}
.AnneePhoto {
	text-align:right;
	font-size:0.9em;
	font-style:italic;
	position:absolute;
	right:0.3em;
	bottom:0px;
	color:white;
}

body:before {
  content: "";
  display: none;
}

/*------------------- Vignette Texte ------------------------*/	
#text_cont.texte{
	padding:1em;
}
#fermer_div.texte{
	padding-bottom:1em;
}
/*------------------- Vignettes Vertcales ----------------------*/
#text_cont.verticale{
	text-align:center;
	overflow-y: auto;
}
#image_cont.verticale{
	padding-top: 1em;
	background-color:rgba(255,255,255,0.6);
}
#image_cont.verticale img{
	width:100%;
}
.VigNum_V{
	position:absolute;
	top:1.2em;
	left:1.2em;
}

/*------------------- Vignettes Horizontales -----------------*/
#image_cont.horizontale{
	position:relative;
	float: left;
	height:100%;
}
#image_vig.horizontale{
	height:100%;
	float: left;
}
#image_vig.horizontale.smallImg{
	position:relative;
	top:2em;
	height:50%;
	padding-rigth:2em;
	float: left;
}
#text_cont.horizontale{
	display:block;
	padding-left:2em;
	padding-right:0em;
	padding-top:2em;
	text-align:center;
	overflow-y: auto;
}
#text_cont.horizontale #text_div{
	display:block;
	padding-right: 1em;
}

.VigNum_H{
	position:absolute;
	top:0.3em;
	transform:translate(100%,0);
	-webkit-transform:translate(100%,0);
}