@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'Fakt';
	src: url('fonts/lato-light.woff2') format('woff2'),
         url('fonts/lato-light.woff') format('woff'),
	     url('fonts/Lato-Light.ttf') format('truetype');
	font-weight:normal;
	font-style: normal;
}
@font-face{ 
	font-family: 'Texte';
	src: url('fonts/freigtexprobook.woff2') format('woff2'),
         url('fonts/freigtexprobook.woff') format('woff'),
		 url('fonts/freigtexprobook.ttf') format('truetype');
	font-weight:normal;
	font-style: normal;
}
@font-face{ 
	font-family: 'Texte';
	src: url('fonts/freightbigprobold.woff2') format('woff2'),
         url('fonts/freightbigprobold.woff') format('woff'),
		 url('fonts/freightbigprobold.ttf') format('truetype');
	font-weight:800;
	font-style: normal;
}
@font-face{ 
	font-family: 'Texte';
	src: url('fonts/freightbigpromedium.woff2') format('woff2'),
         url('fonts/freightbigpromedium.woff') format('woff'),
		 url('fonts/freightbigpromedium.ttf') format('truetype');
	font-weight:400;
	font-style: normal;
}

#content_IMG {
	position: absolute;
	max-width: 100vh;
	z-index: 2;
}
@-webkit-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}
@keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}
@keyframes move { 
  0% { 
    transform-origin: 100% 100%; 
    transform: perspective(800px) rotateY(0deg); 
  }
  50% { 
    transform-origin: 100% 0; 
    transform: perspective(800px) rotateY(180deg); 
  }
   100% { 
    transform-origin: center; 
    transform: perspective(800px) rotateY(360deg); 
  }
}
@-webkit-keyframes move { 
  0% { 
    transform-origin: 100% 100%; 
    transform: perspective(800px) rotateY(0deg); 
  }
  50% { 
    transform-origin: 100% 0; 
    transform: perspective(800px) rotateY(180deg); 
  }
   100% { 
    transform-origin: center; 
    transform: perspective(800px) rotateY(360deg); 
  }
}
@keyframes chemin {
	0% {  transform-origin: center center; 
    transform: perspective(800px) rotateX(0deg); 
	}
	100% {  transform-origin: center center; 
    transform: perspective(800px) rotateX(360deg); }
}
@-webkit-keyframes chemin {
	0% {  transform-origin: center center; 
    transform: perspective(800px) rotateX(0deg); 
	}
	100% {  transform-origin: center center; 
    transform: perspective(800px) rotateX(360deg); }
}
@keyframes size {
 0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.25);
    }
}
@-webkit-keyframes size {
	 0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.25);
    }
}
.loading {
    -webkit-animation: fadein 6s ease; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 6s ease; /* Firefox < 16 */
     -ms-animation: fadein 6s ease; /* Internet Explorer */
      -o-animation: fadein 6s ease; /* Opera < 12.1 */
      animation: fadein 6s ease;
}

.incrustation45.on{
	animation: move 24s linear forwards;
	transform-origin: center; 
}

.incrustation43.on{
	animation: chemin 18s linear forwards;
	animation-delay: 3s;
}
.incrustation46.on {
	animation: size 8s linear forwards;
}
.incrustation66.on{
	/*animation: chemin 18s linear forwards;
	right: 25px;*/
}

/* Full Screen videos 
----------------------------------------------------*/
.video{    
    width: 100vw; 
    height: auto;
    object-fit: cover;
    left: 0px;
    top: 0px;
    z-index: 1;
}.video video {
	position: absolute;
	width: 100%;
	height: auto;
}
#video {
	max-height: 85vh;
}
/* Sticky footer styles
-------------------------------------------------- */
body {
  margin-bottom: 25px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35px; 
  z-index: 998;
 border-top: 1px solid #CCC;
/* Set the fixed height of the footer here */
}
/* Circle bar Progress
-------------------------------------------------- */
    .pie_progress {
	width: 80px;
	margin-top: 6px;
	margin-right: 15px;
	margin-left: auto;
	margin-bottom: 6px;
	float: left;
    }
	.play {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../svg/media-play.svg) no-repeat;
	background-size: 25% 25%;
	background-position: center center;
	cursor: pointer;
}
	.pause {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../svg/media-pause.svg) no-repeat;
	background-size: 25% 25%;
	background-position: center center;
	cursor: pointer;
}
    @media all and (max-width: 768px) {
      .pie_progress {
        /*width: 32%;*/
        max-width: 120px;
      }
    }
html {
  	overflow: hidden;
	width: 100%;
	height: 100%;
}
body {
	font-family: Texte, Georgia, serif;
	font-weight:normal;
	font-size:2.4vh;
	min-height: 100%;
	overflow: hidden;
	}
#right {
	position:absolute;
	width:25%;
	right:0;
	height:100%;
}
.footer {
	background-color:#FFF;
	font-family: Fakt, Arial, sans-serif;
}

#left {
	position:absolute;
	width:25%;
	left:0;
	height:100%;
}
.accordeon {
	opacity: 1.;
	width: 30vh; 
	height: calc(100% - 15px);
}
.accordeon:hover {

	/*width: 100vh;*/
}

figcaption {
	opacity: 0;
	position: relative;
	padding-top: 50%;
}
figcaption H4 {
	opacity: 1;
}
.accordeon:hover figcaption {
	background-color: rgba(0, 0, 0, 0.25); 
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: all 0.250s linear;
       -moz-transition: all 0.250s linear;
        -ms-transition: all 0.250s linear;
         -o-transition: all 0.250s linear;
            transition: all 0.250s linear;
}
figcaption .description {
	color: #FFF;
	word-wrap: break-word;
}
figcaption h2, figcaption h4 {
		    font-family: Fakt, Arial, sans-serif;
			color:#FFF;
}
.menu {
	font-family: Fakt, Arial, sans-serif;
	font-size: small;
    line-height: 35px;
    text-transform: uppercase;
    text-align: center;
    float: left;
	margin-left: 15px;
	color: #CCC;
}
.border1 {
	border-bottom: 1px solid #CCC;
	display: block;
}
#navHome, a.info {
	    font-family: Fakt, Arial, sans-serif;
		text-transform:uppercase;
		height: 25px;
		line-height: 25px;
		font-size:12px;
		color:#999;
		text-align:right;
		min-width: 120px;
}
.navig, .navigTitre {
	    font-family: Fakt, Arial, sans-serif;
		text-transform:uppercase;
		font-size:12px;
		color:#999 !important;
		text-align:center;
		white-space: nowrap;
}
.navig:hover {
		color:#000 !important;
}
.navbar-brand, .navbar {
	padding: 0;
}
.navbar-toggler {
	margin: 0.25em;
}
.navig_overlay {
	    font-family: Fakt, Arial, sans-serif;
		text-transform:uppercase;
		font-size:12px;
		color:#999;
		text-align:right;
}
.navigSON, .pie_progress__number {
	font-family: Fakt, Arial, sans-serif;
	text-transform: uppercase;
	margin-left: 85px;
	font-size: 11px;
	color: #FFF;
	left: 5px;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.25);
	color: #FFF;
	width: 30px;
	height: 30px;
	display: inline-block;
	line-height: 28px;
	text-align: center;
	border: 1px solid #CCC;

}
#progressTime1 {
	font-family: Fakt, Arial, sans-serif;
	text-transform: uppercase;
	position: absolute;
	left: 1100px;
	top: 32px;
	font-size: 11px;
	color: #FFF;
	border: 1px solid #CCC;	
	background-color: rgba(0,0,0,0.25);

	border-radius: 50%;
	height: 30px;
	width: 30px;
	line-height: 28px;
	text-align: center;
}
	
.progressNav {
	height: 100%;
	display: inline-block;
	border-right: 1px solid #CCC;
	float: left;
}
.progressNav.on {
 background-image: linear-gradient(to right,
                                      #f2e0bc,
                                      #f2e0bc 50%,
                                      transparent 50%,
                                      transparent);
    background-position: 100% 0;
    background-size: 200% 100%;
   /* transition: background 0.2s ease;*/
	 animation: backgroundPOS 3s;
	 animation: backgroundPOS 1.0s forwards;
	-webkit-animation: backgroundPOS 1.0s forwards; /* for less modern browsers */
	}
.progressNavu{
	background-color: #111;
}
.pie_progress__content {
	z-index: 99;
}
#playlist li {
	display: none;
}
#playlist li.active {
	display: block;
}
path {
  stroke-width: 2px;
}
.navig a, #navHome a.info {
	color:#999;
}
.navig a:hover, .navigTitre a, #navHome a.info:hover, a.info:hover {
	color:#000;
	text-decoration:none;
}
.navigTitre a:hover, .navigTitre:hover a, .navigTitre.on a, .navi a:hover{
	color:#FFF;
	text-decoration:none;
}
.navigTitre:hover, .navigTitre.on {
	background : rgba(0,0,0,0.8);
	color: #FFF !important;
}
.navig.on, .navi:hover, .navi:hover a {
	background-color: #f2e0bc;
	color: #FFF;
}
.navig.on a {
	color:#FFF;
}
.navi, .navigTitre, .navi .on {
	/*height: 35px;
	line-height: 35px;*/
	text-align: center;
	color: #000 !important;
	min-width: 15%;
}

.navintro a.info {
		color: #222;
		line-height: 25px;
}
.navfin a.info {
		color: #FFF;
		line-height: 25px;
}
.navintro {
	background: rgba(0,0,0,0.1);
	padding-left: 5px;
	padding-right: 5px;
	height: 25px;
}
.navfin {
	background: rgba(0,0,0,0.8);
	padding-left: 5px;
	padding-right: 5px;
	color: #FFF;
}
.text_select{	
	background-position: 0 0;
  }
  
.txt a {
	color:#333;
}
.txt a:hover, .txt a:focus {
	text-decoration:none;
}
.cercle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.lang {
	background-color: #000;
	color: #FFF;
	width: 25px;
	height: 25px;
	display: inline-block;
	/*float: left;*/
	margin-left: 2px;
	line-height: 25px;
	text-align: center;
	margin-bottom: 15px;
}
.lang a:hover, .lang a  {
	color:#FFF;	text-decoration:none;
}

.txt span{
	 background-image: linear-gradient(to right,
                                      #D8D2CD,
                                      #D8D2CD 50%,
                                      transparent 50%,
                                      transparent);
    background-position: 100% 0;
    background-size: 200% 100%;
   /* transition: background 0.2s ease;*/
	}
.txt span.on, .text_out{
	 background-image: linear-gradient(to right,
                                      #f2e0bc,
                                      #f2e0bc 50%,
                                      transparent 50%,
                                      transparent);
    background-position: 100% 0;
    background-size: 200% 100%;
   /* transition: background 0.2s ease;*/
	}
.txt span:hover, .text_over, .txt span.on {
	 animation: backgroundPOS 3s;
	 animation: backgroundPOS 1.0s forwards;
	-webkit-animation: backgroundPOS 1.0s forwards; /* for less modern browsers */
	/*background-color:f2e0bc;*/
}
#1.on, #2.on {
	background-image: none !important;
	font-size: 48px;
	
}
#gallery8 .citation {
	background-blend-mode: lighten !important;
}
.citation {
	color: #FFF;
	font-size: 3.5vh;
	margin-top: 20vh;
	
}
.citation small {
	    font-family: Fakt, Arial, sans-serif;
		text-transform:uppercase;
		font-size:11px;
		text-align:right;
}
.lang:hover, .cercle.on {
	background-color:#f2e0bc;
}

.content {
	background-position: 0px 0px;
	background-repeat:repeat-x;
	background-size:100% !important;
	overflow:hidden;
	height:88vh;
	background-repeat: no-repeat;
	background-position: center bottom!important;
	/*animation: animatedBackground 180s linear forwards;
	animation-delay: 4s;
	animation-direction: alternate;*/
	width: 100%;
}
}
.txt p {
	text-indent:50px;
}
@keyframes backgroundPOS {
    from {
        background-position :100% 0;
    }
    to {
        background-position :0 0;
    }
}
@keyframes fade {
    from {
        opacity : 0;
    }
    to {
        opacity : 1;
    }
}
@keyframes fadeout {
    from {
        opacity : 1;
    }
    to {
        opacity : 0;
    }
}
@-webkit-keyframes backgroundPOS {
    from {
        background-position :100% 0;
    }
    to {
        background-position :0 0;
    }
}
@-webkit-keyframes fade {
    from {
        opacity : 0;
    }
    to {
        opacity : 1;
    }
}
@-webkit-keyframes fadeout {
    from {
        opacity : 1;
    }
    to {
        opacity : 0;
    }
}
@-moz-keyframes backgroundPOS { /* Firefox */
    from {
        background-position :100% 0;
    }
    to {
        background-position :0 0;
    }
}
@-webkit-keyframes backgroundPOS { /* Safari and Chrome */
     from {
        background-position :100% 0;
    }
    to {
        background-position :0 0;
    }
}
@-o-keyframes backgroundPOS { /* Opera */
    from {
        background-position :100% 0;
    }
    to {
        background-position :0 0;
    }
}
@keyframes scale1 {
 From {
    transform: scale(1.8);
}
To {
    transform: scale(0.8);
}
}
@keyframes scale2 {
 From {
    transform: scale(1.5);
}
To {
    transform: scale(0.5);
}
}
@keyframes position {
 	0% { top: 0px;
	}
	100% { top: 50px;
}
	0% {
		 left:0px;
	}
	100% { 
		   left:50px;
}
}
@keyframes position3 {
 	0% { top: 5px;
	}
	100% { top: -100px;
}
	
}
@keyframes rightleft {
 	From { top: 50%;
	}
	to { top: 25%;
}
}
@keyframes animatedBackground {
	from { background-position: 0% 100%; }
	to { background-position: 0 50%; }
}
@keyframes animatedBackground1 {
	from { background-position: 0% 100%;
		  ;}
	to { background-position: 0 0%;
			}
}
@keyframes animatedZoom {
	0% { background-size: 200%;
		background-position: 5% 100%
	}
	100% { background-size: 100%;
		background-position: 0% 0%
	}
}
@keyframes animatedZoom1 {
	0% { background-size: 200%;
		background-position: 5% 100%
	}
	50% { background-size: 200%;
		background-position: 5% 100%
	}
	100% { background-size: 100%;
		background-position: 0% 0%
	}
}
@keyframes ZoomSimple {
	from { background-size: 200%;
	       background-position: center

	}
	to { background-size: 100%;
		 background-position: center
	}
}

@keyframes ZoomSimple1 {
	from { background-size: 200%;
	       background-position: 5% 25%

	}
	to { background-size: 100%;
	    background-position: 0% 100%
	}
}
@keyframes ZoomSimple2 {
	from { background-size: 100%;
	       background-position: center

	}
	to { background-size: 150%;
		 background-position: center
	}
}
//Chrome
@-webkit-keyframes scale1 {
 From {
    transform: scale(1.8);
}
To {
    transform: scale(0.8);
}
}
@-webkit-keyframes scale2 {
 From {
    transform: scale(1.5);
}
To {
    transform: scale(0.5);
}
}
@-webkit-keyframes position {
 	0% { top: 0px;
	}
	100% { top: 50px;
}
	0% {
		 left:0px;
	}
	100% { 
		   left:50px;
}
}
@-webkit-keyframes position3 {
 	0% { top: 5px;
	}
	100% { top: -100px;
}
	
}
@-webkit-keyframesrightleft {
 	From { top: 50%;
	}
	to { top: 25%;
}
}
@-webkit-keyframes animatedBackground {
	from { background-position: 0% 100%; }
	to { background-position: 0 50%; }
}
@-webkit-keyframes animatedBackground1 {
	from { background-position: 0% 100%;
		  ;}
	to { background-position: 0 0%;
			}
}
@-webkit-keyframes animatedZoom {
	0% { background-size: 200%;
		background-position: 5% 100%;
	}
	100% { background-size: 100%;
		background-position: center top;
	}

}
@-webkit-keyframes animatedZoom1 {
	0% { background-size: 200%;
		background-position: 5% 100%;
	}
	50% { background-size: 200%;
		background-position: 5% 100%;
	}
	100% { background-size: 100%;
		background-position: center top;
	}

}
@-webkit-keyframes ZoomSimple {
	from { background-size: 200%;
	       background-position: center

	}
	to { background-size: 100%;
		 background-position: center
	}
}
@-webkit-keyframes ZoomSimple1 {
	from { background-size: 200%;
	       background-position: 5% 25%

	}
	to { background-size: 100%;
	    background-position: 0% 100%
	}
}
@-webkit-keyframes ZoomSimple2 {
	from { background-size: 100%;
	       background-position: center

	}
	to { background-size: 150%;
		 background-position: center
	}
}
.frame {
	
	padding-left: 140px;
	padding-right: 15px;
	padding-top: 15px;
	overflow: hidden;
	/*	 max-width: 50vh;
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:luminosity;
 	height:80vh;
	opacity:0;*/
	/*animation: fade 24s;*/
   	/* -moz-animation: fadein 12s;*/ /* Firefox */
    /*-webkit-animation: fadein 12s;*/ /* Safari and Chrome */
   /* -o-animation: fadein 12s;*/ /* Opera */
	max-height: 35vh;
	position: absolute;
	bottom: 100px;
	z-index: 990;
	max-width: 1140px;

}
#gallery {
	background: url(../../images/circle-loading-gif.gif) 50% 50% no-repeat;
}
.cycle-slide-active#portrait, .cycle-slide-active #portrait {
    animation: animatedBackground1 18s linear forwards;
}

.cycle-slide-active#gal569, .cycle-slide-active #gal569 {
    animation: animatedBackground1 24s linear forwards;
	animation-delay: 12s;
}
.cycle-slide-active#gal29, .cycle-slide-active #gal29{
    animation: animatedBackground 24s linear forwards;
}
.cycle-slide-active#gal216, .cycle-slide-active #gal216  {
    animation: animatedZoom 52s linear forwards;
}
.citation1.cycle-slide-active, #gal29.citation1 {
	animation: fade 4s linear forwards;
	animation-direction: reverse;
}

.frameInfo {
	-moz-box-shadow:    inset  0  8px 8px -8px rgba(153, 153, 153, 0.3), 
                        inset  0 -8px 8px -8px rgba(153, 153, 153, 0.3);
    -webkit-box-shadow: inset  0  8px 8px -8px rgba(153, 153, 153, 0.3), 
                        inset  0 -8px 8px -8px rgba(153, 153, 153, 0.3);
     box-shadow:        inset  0  8px 8px -8px rgba(153, 153, 153, 0.3), 
                        inset  0 -8px 8px -8px rgba(153, 153, 153, 0.3);
	
	 background-color:#FFF;
	 min-height: 150px;
	 height:100vh;

}
.frameInfo p {
		 margin-bottom: 15px;
		line-height: 114%;
		font-size: 16px;
	
}
.frameIntro {
	 min-height: 150px;
	 height:100vh;
}

.frameIntro p{
	font-size: 24px;
	color: #FFF;
}
.frameIntro p.citation {
	font-size: 38px;
	color: #FFF;
	margin-top: 5vh;
	margin-bottom: 5vh;
}
.frameInfo p a {
		text-decoration: underline;
		font-size: 16px;
		line-height: 128%;
}
h2.menu-titre {
	font-size: 1.4rem;
	color: white;
	cursor: pointer;
}
#formulaire_recommander {
	font-family: Fakt, Arial, sans-serif;
}
.editer_recommander_message label {
	float: left;
	margin-top: 5px;
}
#recommander {
	float: right;
	min-width: 60px;
	padding: 5px;
	font-size: 15px;
}
#recommander input, #recommander textarea {
	margin: 5px;
}
#recommander label {
	min-width: 150px;
}
#recommander input.submit {
	clear: both;
	float: right;
}
.frameInfo H2 {
	text-align: center;
	padding: 15px;
}
.frameInfo H5 {
	font-size: 22px;
}
.frameInfo .txt span {
	background-image: none;
}
.grid {
	width: 100%;
	position: relative;
	margin-left: 15px;
	z-index: 600;
}
.grid-item {
  float: left;
  margin-bottom: 10px;
  position: relative;
  margin-top: 10px;
  /*opacity: 0.9;*/
}
.grid-item div .social {
	display: none;
}
.grid-item.on div .social {
	display: block;
}
.color7 {
	background: none;
	color: #FFF;
}
.txt .color7 span {
background-image: none;
}
#makeMeScrollable img.img-fluid {
    width: auto;
	height: calc(100vh - 15px) !important;
	max-height: 99vh;
}
.img-fluid {
	width: auto;
	max-height: 75vh;
}
#complementL{
    position: absolute;
    /*left: 0px;*/
}
#complementR{
    position: absolute;
}
#center {
	position:absolute;
}
#center .mvt3{
	     position:absolute;
		 animation: scale1 8s ease;
		 animation-fill-mode: forwards;
		 width:512;
		 height:560;
		 z-index:101;
		 opacity:0.9;
		 background-color:#FFF;
}
#complementL .mvt1{
	    position:absolute;
		 animation: position 12s ease,
		 			scale 12s ease;
		 animation-fill-mode: forwards;
		 width:512;
		 height:359;
		 z-index:99;
		opacity:0.8;
}
#complementR .mvt3{
	    position:absolute;
		 animation: position 8s ease,
		 			scale 8s ease;
		 animation-fill-mode: forwards;
		 width:512;
		 height:359;
		 z-index:98;
		opacity:0.9;
}
#complementL .statik1{
	    position:absolute;
		z-index:98;
		opacity:0.8;
}
#complementL .mvt2{
	    position:absolute;
		 animation: position 8s ease;
		 animation-fill-mode: forwards;
		 width:512;
		 height:359;
		z-index:99;
		opacity:0.9;
}

#complementR .mvt3{
	     position:absolute;
		 animation: scale2 6s ease;
		 animation-fill-mode: forwards;
		 width:512;
		 height:1080;
		 z-index:100;
		 opacity:0.9;
}
h1 {
	font-size:28px;
	font-weight:800;
	margin:5px 0px 0px 0px;
}
H1 a {
text-decoration: none;
color: inherit;	
}
H1 a:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
text-decoration: none;
color: #777777;
}
h3 {
	font-weight:400;
	margin:2px 0px 0px 0px;
    font-size: 1.15rem;
}
h5 {
	font-size:16px;
	font-weight:bold;
	margin:5px 0px 0px 0px;
}
.head { 
	padding-top: 5px;
	margin-bottom: 5px;
	min-height: 50px;
	position: relative;
	z-index: 99;
	background-color: #FFF;
	padding-bottom: 5px;
}
#title {
	text-align:center;
	margin-bottom:50px;
}
.legend {
background-color: rgba(255,255,255,0.6);
position: absolute;
margin: 15px;
left: 15px;
width: 25%;
padding: 10px;
font-size: 0.9em;
}
.fancybox-overlay-fixed {
	top:155px;
}
/*Srcoll*/
.scrollable {
  position: relative;
}

.scrollable:focus {
  outline: 0;
}

.scrollable .viewport {
  position: relative;
  overflow: hidden;
}

.scrollable .viewport .overview {
  position: absolute;
}

.scrollable .scroll-bar {
  display: none;
}

.scrollable .scroll-bar.vertical {
  position: absolute;
  right: 0;
  height: 100%;
}

.scrollable .scroll-bar.horizontal {
  position: relative;
  width: 100%;
}

.scrollable .scroll-bar .thumb {
  position: absolute;
}

.scrollable .scroll-bar.vertical .thumb {
  width: 100%;
  min-height: 10px;
}

.scrollable .scroll-bar.horizontal .thumb {
  height: 100%;
  min-width: 10px;
  left: 0;
}

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.scrollable.default-skin {
  padding-right: 10px;
  padding-bottom: 6px;
}

.scrollable.default-skin .scroll-bar.vertical {
  width: 5px;
  margin:1px;
}

.scrollable.default-skin .scroll-bar.horizontal {
  height: 6px;
}

.scrollable.default-skin .scroll-bar .thumb {
  background-color: #333;
  opacity: 0.3;
  border-radius: 3px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.scrollable.default-skin .scroll-bar:hover .thumb {
  opacity: 0.6;
}
/*COMPTEUR CERCLE*/
.rect-auto,
.c100.p12 .slice {
  clip: rect(auto, auto, auto, auto);
}
.pie,
.c100 .bar {
	position: absolute;
	border: 0.08em solid #999;
	width: 0.84em;
	height: 0.84em;
	clip: rect(0em, 0.5em, 1em, 0em);
	border-radius: 50%;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: transparent;
  float:right;
  margin:50px;
}
.c100 *,
.c100 *:before,
.c100 *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.c100.center {
  float: none;
  margin: 0 auto;
}
.c100.big {
  font-size: 240px;
}
.c100.small {
  font-size: 80px;
}
.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #FFF;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.c100:after {
	position: absolute;
	top: 0.08em;
	left: 0.08em;
	display: block;
	content: " ";
	border-radius: 50%;
	width: 0.84em;
	height: 0.84em;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-timing-function: ease-in;
	-o-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
	background-color: #000;
	padding: 2px;
}
.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.c100.p12 .bar {
  -webkit-transform: rotate(43.2deg);
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -o-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}

.c100:hover {
  cursor: default;
}
.c100:hover > span {
	width: 3.33em;
	line-height: 3.33em;
	font-size: 0.3em;
}
.c100:hover:after {
  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em;
}
.c100.dark {
  background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill {
  border-color: #c6ff00 !important;
}
#control1 {
	bottom: 75px;
	z-index: 995;
	position: fixed;
	margin-left: 80px;
	height: 60px;
}
#control {
	bottom: 40px;
	z-index: 995;
	position: fixed;
}
#nav {
	margin-top: -78px;
	padding-right: 0px;
	text-align: right;
	position: relative;
	z-index: 100;
	font-size: 12px;
}
#navHome {
	padding-top: 5px;
	}
.annee {
	margin-top: 15px;
	text-decoration: none;
	color: #000;
	font-family: Fakt, Arial, sans-serif;
	font-size: 12px;
	text-transform:uppercase;
	/*line-height: 75px;*/
	text-align: center;
	height: 50px;
	padding-right: 0;
	position: relative;
	z-index: 101;
}
a .annee, a.annee {
	text-decoration: none;
}
.titreHead {
  float: left;
  margin-top: 28px;
  text-align: center;
  margin-left: 45px;
}
/*PLAYER AUDIO*/
.controls {
	height: 20px;
}
.fa-play {
	height: 25px;
	background-image: url(../images/play-pause.png);
	background-repeat: no-repeat;
	background-position: right;
	background-color: #FFF;
}
.fa-pause{
	height: 25px;
	background-image: url(../images/play-pause.png);
	background-repeat: no-repeat;
	background-position: left;
	background-color: #FFF;
}
.button {
  width: 12px;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  border: none;
  outline: none;
  float:left;
  margin:-2px 5px 0px 3px;
}
.prevart {
	position: absolute;
	left: -105px;
	width: 15px;
	height: 15px;
	z-index: 999;
	bottom: -30px;
}
.suiv {
	position: absolute;
	left: 5px;
	width: 15px;
	height: 15px;
	z-index: 999;
	
}
#control .suiv {
	left: 85px;
	top: -2px;
}
#control .prevart {
	left: -25px;
	bottom: 5px;
}
#audio_player, #audioPlayer{
	  margin: 0 auto;
	  width: 100%;
	position: absolute;
	bottom: 30px;
	z-index: 995;
	background-color: rgba(0,0,0,0);
	border-radius: 0;
}

#progressBarControl {
	width: 950px;
	height: 15px;
	border: 1px solid #ccc;
	background: rgba(255,255,255,0.25);
	margin-bottom: 5px;
	margin-left: 35px;
	display: inline-block;
	cursor: pointer;
	margin-top: 40px;
	float: right;
}
#progressBarControl1 {
	width: 950px;
	height: 15px;
	border: 1px solid #ccc;
	background: rgba(255,255,255,0.25);
	margin-bottom: 5px;
	margin-left: 45px;
	display: inline-block;
	cursor: pointer;
	margin-top: 40px;
}
#progressBar {
	width: 0px;
	background: #111;
	height: 13px;
	text-align: right;
	line-height: 5px;
	font-size: 9px;
	white-space: nowrap;
	cursor: pointer;
	border-right: 30px solid #f2e0bc;
	display: inline-block;
}

#progressTime {
	font-family: Fakt, Arial, sans-serif;
	text-transform:uppercase;
	position: absolute;
	margin-left: 25px;
	font-size:11px;
	color:#999;
}
.oi-fullscreen-enter {
	position: absolute;
	left: 50%;
	top: 50%;
}
.progress {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color:#333;
}

.scrubber {
  position: absolute;
  width: 36px;
  height: 6px;
  background: #000;
  cursor: pointer;

}
input[type="range"] {
   background-color: white;
margin: 7px 0 0 5px;
height: 7px;
padding: 0px;
float: left;
border: 1px solid #CCC;
-webkit-appearance: none;
min-width: 50px;
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: #000;
	border: none;
	width: 12px;
	height: 7px;
	cursor: pointer;
	border-radius: 0px;
}
input[type=range]::-moz-range-track {
    border-radius: 0px;
    height: 7px;
    background-color: #FFF;
	border: 1px solid #CCC;

}
input[type=range]::-moz-range-thumb {
    background: #000;
    border: none;
    width: 12px;
    height: 7px;
    border-radius: 0px;
    cursor: pointer;
}
input[type=range]:focus {
    outline: none;
}


#message {
	position:absolute;
	top:30px;
	left:50%;
	z-index:8099;
}

.track {
	position: relative;
	height: 7px;
	display: inline-block;
	vertical-align: top;

}
.border-track {
	 background-color: #FFF;
    border: 1px solid #CCC;
    display: inline-block;
    float: left;
    height: 7px;
    margin: 7px 7px 0 5px;
    padding-right: 36px;
 }
@media (max-width: 480px) {
  .track {
    width: 180px;
  }
  input[type="range"] {
    width : 58px;
}
}
@media (min-width: 480px) {
  .track {
    width: 250px;
  }
}
@media (min-width: 768px) {
  .track {
    width: 480px;
  }
}
@media (min-width: 992px) {
  .track {
    width: 640px;
  }
}
@media (min-width: 1200px) {
  .track {
   width: 906px;
  }
}
.volume {
	 background-image: url("../images/volume.png");
    background-repeat: no-repeat;
    padding-left: 25px;
    width: 25px;
    display: block;
    height: 25px;
    float: left;
}
.barre {
	min-width: 150px;
	position: relative;
	height: 10px;
	padding-left:0.4em;
	padding-right:0.4em;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	margin:0 0 10px;
}

.barre + .barre {
    margin-top: 10px;
}

.barre:after {
    content: "";
    position: absolute;
    background: #FFF;
    left: 0;
    top: 0;
    bottom: 0;
}
#tele {
	position: relative;
	z-index: 994;
}

.cycle-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background: rgba(255,255,255,0.6);
  font-family: Fakt, Arial, sans-serif;
  text-transform:uppercase;
  font-size:12px;
  color:#333;
  padding: 15px;
}
#gallery8 .cycle-overlay {
	position: fixed;
	bottom: 105px;
	top: inherit;
	font-family: Fakt, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	color: #FFF;
	height: 40px !important;
	z-index: 601;
	opacity: 1;
	background: none;
	left: 25vw;
	padding-left: 100px;
	width: 50vw;
	line-height: 1.5;
	padding: 15px;
	top: auto;
}
#gallery8 .cycle-overlay div {
	height: 15px;
}
#pager1 {
	padding: 0px;
}
#pager1 img {
	margin-right: 15px;
}
.cycle-overlay a {
	color:#666;
	text-decoration: none;
}
.cycle-overlay a.fancy {
	display: block;
	height: 100%;
}
.cycle-overlay a:hover {
	color:#000;
	text-decoration: none;
}
.cycle-overlay small {
	clear: both;
	display: block;
}
.cycle-overlay h1 {
	float: right;
	padding: 5px;
}
.cycle-overlay h6 {
	float: left;
}
.grid-item:hover .cycle-overlay {
  opacity: 1;
}
.float-lefton, .float-righton{
	display: none;
}
div#mp3_player{ 
background:white;
padding-top:5px; margin:auto;position:absolute;bottom:0px; width:100%;z-index:299;
}
#gallery div , #gallery8 div { width: 100%; height: 100vh;   background-size: 100% 100%;  background-attachment: fixed;
    background-repeat: no-repeat;
 }

#gallery img { width: 100%; height: 100%;   background-size: cover; 
 }
#gallery img.incrustation, #gallery2 .incrustation {
	background-blend-mode:screen;
	height: 100%;
	width: auto;
}
#gallery8 {
	height: 88vh;
	width: auto;
}
#gallery8 img {
	height: calc(100% - 50px);
	width: auto;
	max-width: 100%;
}
.intro-social-buttons{
	position: absolute;
	z-index: 995;
	bottom: 15%;
}
.btn:focus {
	border: none;
}
.btn {
		font-family: Fakt, Arial, sans-serif;
		text-transform:uppercase;
		font-size:10px;
		color:#999;
		border-radius: 0px;
		display: block;
		float: left;
		background: none;
		border: none;
}

.btn-group-lg > .btn, .btn-lg {
	padding-right: 15px;
	padding-right: 15px;
}
.btn-secondary {
  color: #fff;
	border-radius: 0px;
	text-transform: uppercase;
}

.btn-secondary:hover, .cycle-overlay .btn-secondary:hover  {
  color: #fff;
  background-color: #727b84;
  border-color: none;
	text-decoration: none;
}

.btn-secondary:focus, .btn-secondary.focus {
  box-shadow: none;
}

.btn-secondary.disabled, .btn-secondary:disabled {

  border-color: none;
}
.social {
	position: absolute;
	bottom: 55px;
	height: 25px;
	line-height: 25px;
	z-index: 601;
}
.social1 {
	position: fixed;
	bottom: 105px;
	z-index: 996;
	right: 11%;
}
.social h3 {
	float: left;
	padding-right: 5px;
}
.list-inline-item {
	display: block;
}

@media (max-width: 992px) {
#nav {
	margin-top: -72px;
}
#navHome {
	margin-top: -75px;
}
}
@media (min-width: 576px) {

#tele {
	padding-right: 0px;
	text-align: right;
	margin-top: -30px;
	margin-right: -15px;
}
}
@media (min-width: 768px) {

#tele {
	margin-right: 0;
	text-align: right;
	margin-top: -30px;
}
}
@media (max-width : 768px) {
	#control, #control1 {
		width: 240px;
	}
.info.route, .info.documents {
		display: none;
	}
}
@media (min-width: 577px) and (max-width : 768px) {
	#control, #control1 {
		width: 320px;
	}
}
@media (min-width: 769px) and (max-width : 991px) {
	#control, #control1 {
		width: 720px;
	}
}
@media (min-width: 992px) and (max-width: 1279.98px) {
#gallery8 .cycle-overlay {
		left:240px;
		width: 50%;
	}
	#control, #control1 {
		width: 930px;
	}
	#progressBarControl1, #progressBarControl {
	width: 800px;
	}
	#progressTime1{
		left: 940px;
	}
}
@media (min-width: 2000px) {
	#gallery8 .cycle-overlay {
		left:840px;
	}
}
@media (min-width: 1440px) and (max-width : 1520px) {
	#gallery8 .cycle-overlay {
		left:280px;
	}
}
@media (min-width: 1280px) and (max-width : 1439px) {
	#gallery8 .cycle-overlay {
		left:300px;
	}
	#progressBarControl1, #progressBarControl {
	width: 930px;
	}
	#control, #control1 {
		width: 1080px;
	}
}
@media (min-width: 1440px) {

	#progressBarControl1 {
	width: 940px;
	}
	#control, #control1 {
		width: 1080px;
	}
}
@media (min-width: 992px) {
.annee, #progressBarControl1, #progressBarControl {
		display: block;
	}
#tele {
	margin-right: 35px;
	text-align: right;
	margin-top: -30px;
}
}
@media (max-width: 1024px) {

#gallery8 .cycle-overlay {
		display: none !important;
	}
.info.route, .info.documents {
		display: none;
	}
}
@media (max-width: 992px) {
.annee, #progressBarControl1, #progressTime1, #progressBarControl, #gallery8 .cycle-overlay {
		display: none;
	}
#control, .suiv {
		bottom: 80px;
	}
.prevart {
		bottom: 0px;
	}
}