.image_fond{
/*	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width:100vw;
	height:100vh;
	background-position: center;
	background-image: url("../images/fond_image.jpg");
	opacity: 0.3;
	background-repeat: no-repeat;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-ms-background-size: auto;
	-o-background-size: auto;
	display: block;
	content: '';	*/
	position: absolute;
	display: block;
	margin:0;
	padding:0;
	width:100vw;
	height:100vh;
	background: url("../images/fond_image.jpg") no-repeat center fixed;
	-webkit-background-size: cover; 
	  background-size: cover;	
} 
.logo{
	background:no-repeat url(../images/monde_d_oria.webp);
	width:15vw;
	height:12vw;
	display:inline-block; 
	margin-left:-2px;
	-webkit-background-size: 15vw;
	-moz-background-size: 15vw;
	-ms-background-size: 15vw;
	-o-background-size: 15vw;
	background-size: 15vw;
	
}
.fond h1{
	font:38px 'District Thin', helvetica, arial;
	font-weight:lighter;
	margin:20px 0;
	color:#333;

	-webkit-text-fill-color: #333;
	-webkit-text-stroke-color: white;
	-webkit-text-stroke-width: 0.005em;

	text-shadow: 0px 2px 2px #777;
}
.filtre{
	width:100vw;
	height:100vh;
	overflow:hidden;
	position: absolute;
	display: block;
	margin:0;
	padding:0;
	background:url(../images/fond.jpg) top left repeat;
	opacity: 0.92;
	
}
.fond{
/*	width:100vw;
	height:100vh;
	overflow:hidden;
	position:relative;
	background:url(../images/fond.jpg) top left repeat;
	opacity: 0.90;
	*/
	width:100vw;
	height:100vh;
	overflow:hidden;
	-webkit-transition:height 1s;
	-moz-transition:height 1s;
	-ms-transition:height 1s;
	-o-transition:height 1s;
	transition:height 1s;
}
.fond h1,.fond li,.fond p{
	margin-left:5vw;
}

.fond .centrer{
	width: 50vw;
	position:relative;
	z-index: 0;	
}
.fond .texte{
	float:left;
	margin-top:10px;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	
}
.texte li{
	font:40px 'District Thin', helvetica, arial;
	list-style:none;
	font-weight:lighter;
	line-height:30px;
	color:#333;

	-webkit-text-fill-color: #333;
	-webkit-text-stroke-color: white;
	-webkit-text-stroke-width: 0.0005em;

}
.bibliotheque{
	float:right;
	margin-top:25vh;
	margin-right:20vw;
	
}


.bibliotheque .echantillon1{
	
	background:no-repeat  url(../images/livre.jpg);	
	display:inline-block; 
	height:25vw;
	width:20vw;
	-webkit-background-size: 20vw;
	-moz-background-size: 20vw;
	-ms-background-size: 20vw;
	-o-background-size: 20vw;
	background-size: 20vw;
	box-shadow: 12px 12px 14px rgb(37, 31, 31);

	-webkit-filter: grayscale(0) blur(0px);
	filter: grayscale(0) blur(0px);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	
}

   
  .echantillon1:hover {
	width: 20vw; /* on affiche l'image au carré */
	height: 20vw;
	border-radius: 50%;  /* on arrondit l'image */
	-webkit-transform: rotate(360deg); /* rotation de l'image */
	transform: rotate(360deg);
  }





.texte li{
	font:23px 'District Thin', helvetica, arial;
	list-style:none;
	font-weight:lighter;
	line-height:30px;
	color:#333;

	-webkit-text-fill-color: #333;
	-webkit-text-stroke-color: white;
	-webkit-text-stroke-width: 0.0005em;
}
.texte .lienpdf{
	margin-top:40px;
	margin-bottom:20px;
}

.bouton{
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:17px;
	text-decoration:none;
	margin:0;
	padding:5px 20px;
	color:white;
	text-shadow:0 -1px 0 rgb(37, 17, 126);
	border:1px solid rgb(73, 82, 212);
	background-color:#3071a7;

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3071a7),  color-stop(0.5, rgb(59, 61, 179)), color-stop(0.51,  rgb(59, 61, 179)), color-stop(1,  #211496));
	background:-webkit-linear-gradient(top, #3071a7 0%, rgb(59, 61, 179) 50%, rgb(59, 61, 179) 51%, #211496 100%);
	background:-moz-linear-gradient(top, #3071a7 0%, rgb(59, 61, 179) 50%, rgb(59, 61, 179) 51%, #211496 100%);
	background:-ms-linear-gradient(top, #3071a7 0%, rgb(59, 61, 179) 50%, rgb(59, 61, 179) 51%, #211496 100%);
	background:-o-linear-gradient(top, #3071a7 0%, rgb(59, 61, 179) 50%, rgb(59, 61, 179) 51%, #211496 100%);
	background:linear-gradient(top, #3071a7 0%, rgb(59, 61, 179) 50%, rgb(59, 61, 179) 51%, #211496 100%);

	-webkit-box-shadow:inset 0 1px 1px rgb(37, 17, 126), inset 0 -1px 1px #211496, 0 1px 3px #666;
	-moz-box-shadow:inset 0 1px 1px rgb(37, 17, 126), inset 0 -1px 1px #211496, 0 1px 3px #666;
	-o-box-shadow:inset 0 1px 1px rgb(37, 17, 126), inset 0 -1px 1px #211496, 0 1px 3px #666;
	-ms-box-shadow:inset 0 1px 1px rgb(37, 17, 126), inset 0 -1px 1px #211496, 0 1px 3px #666;
	box-shadow:inset 0 1px 1px rgb(37, 17, 126), inset 0 -1px 1px #211496, 0 1px 3px #666;

	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	-o-border-radius:20px;
	border-radius:20px;
}


.bouton:hover{
	border:1px solid #070e72;
	text-decoration:none;

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #9faaeb), color-stop(1,  rgb(99, 96, 236)));
	background:-webkit-linear-gradient(top, #9faaeb, rgb(99, 96, 236));
	background:-moz-linear-gradient(top, #9faaeb, rgb(99, 96, 236));
	background:-ms-linear-gradient(top, #9faaeb, rgb(99, 96, 236));
	background:-o-linear-gradient(top, #9faaeb, rgb(99, 96, 236));
	background:linear-gradient(top, #9faaeb, rgb(99, 96, 236));
}

.bouton:active{
	border:1px solid #070e72;

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2554ee), color-stop(1,  rgb(14, 37, 241)));
	background:-webkit-linear-gradient(top, #2554ee, rgb(14, 37, 241));
	background:-moz-linear-gradient(top, #2554ee, rgb(14, 37, 241));
	background:-ms-linear-gradient(top, #2554ee, rgb(14, 37, 241));
	background:-o-linear-gradient(top, #2554ee, rgb(14, 37, 241));
	background:linear-gradient(top, #2554ee, rgb(14, 37, 241));
}

strong {
	position: relative;	
}
strong::after {
	  content: '';
	  position: absolute;
	  bottom: -0.125rem;
	  left: -0.5rem;
	  right: -0.5rem;
	  height: 0.75rem;
  
	 
	  z-index: -1;
  
	 
	  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/664131/underline.svg');
	  background-repeat: no-repeat;  
	 
	  background-size: cover;
	}
li > strong {
		font-weight: 400;  
}

li > strong::after {
		  bottom: -0.2rem;
		  height: 0.5rem;
		  left: -0.25rem;
		  right: -0.25rem;
		}
	  
.sanssautdeligne { white-space:nowrap; }



.shine {
	position: relative;
	
}
.shine::before {
	position: absolute;
	top: 0;
	left: -15vw;
	opacity: 0;
	z-index: 2;
	display: block;
	content: '';
	width: 15vw;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
	-webkit-animation: shine 15s;
	animation: shine 15s;
	-webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


@-webkit-keyframes shine {
	
	50% {
		left: 0vw;
		opacity: 1;
	}
	100%{
		left: -15vw;
		opacity: 0;
	}
}
@keyframes shine {
	50% {
		left: 0vw;
		opacity: 1;
	}
	100%{
		left: -15vw;
		opacity: 0;
	}
}
  




  .slider1, .slider2, .slider3{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width:100vw;
	height:100vh;
	background-position: center;
}

.slider1::before {
	background-image: url("../images/avarois.png");
	-webkit-animation: slider1 60s;
	animation: slider1 60s;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width:100vw;
	height:100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-ms-background-size: auto;
	-o-background-size: auto;
	display: block;
	content: '';		
	-webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.slider2::before {

	background-image: url("../images/oria.png");
	-webkit-animation: slider2 60s;
	animation: slider2 60s;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width:100vw;
	height:100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-ms-background-size: auto;
	-o-background-size: auto;
	display: block;
	content: '';		
	-webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
	
.slider3::before {
	background-image: url("../images/zivisuk.png");
	-webkit-animation: slider3 60s;
	animation: slider3 60s;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width:100vw;
	height:100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-ms-background-size: auto;
	-o-background-size: auto;
	display: block;
	content: '';		
	-webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


@-webkit-keyframes slider1 {
	0% { -webkit-filter: blur(30px); opacity : 0;}
	3% { -webkit-filter: blur(30px); opacity : 0;}
	6% { -webkit-filter: blur(0px); opacity : 1;}
	15% { -webkit-filter: blur(0px); opacity : 1;}
	20% { -webkit-filter: blur(30px);opacity : 0;}
	100% { -webkit-filter: blur(30px); opacity : 0;}
}
@keyframes slider1 {
	0% { -webkit-filter: blur(30px); opacity : 0;}
	5% { -webkit-filter: blur(30px); opacity : 0;}
	10% { -webkit-filter: blur(0px); opacity : 1;}
	15% { -webkit-filter: blur(0px); opacity : 1;}
	20% { -webkit-filter: blur(30px);opacity : 0;}
	100% { -webkit-filter: blur(30px); opacity : 0;}
}

@-webkit-keyframes slider2 {
	0% { -webkit-filter: blur(30px); opacity : 0;}
	50% { -webkit-filter: blur(30px);opacity : 0;}
	55% { -webkit-filter: blur(0px); opacity : 1;}
	60% { -webkit-filter: blur(0px); opacity : 1;}
	65% { -webkit-filter: blur(30px); opacity : 0;}
	100% { -webkit-filter: blur(30px); opacity : 0;}
}
@keyframes slider2 {
	0% { -webkit-filter: blur(30px); opacity : 0;}
	50% { -webkit-filter: blur(30px);opacity : 0;}
	55% { -webkit-filter: blur(0px); opacity : 1;}
	60% { -webkit-filter: blur(0px); opacity : 1;}
	65% { -webkit-filter: blur(30px); opacity : 0;}
	100% { -webkit-filter: blur(30px); opacity : 0;}
}
@-webkit-keyframes slider3 {
	0% { -webkit-filter: blur(30px); opacity : 0;}
	70% { -webkit-filter: blur(30px);opacity : 0;}
	75% { -webkit-filter: blur(0px); opacity : 1;}
	80% { -webkit-filter: blur(0px); opacity : 1;}
	85% { -webkit-filter: blur(30px); opacity : 0;}
	100% { -webkit-filter: blur(30px); opacity : 0;}
}
@keyframes slider3 {
	0% { -webkit-filter: blur(30px); opacity : 0;}
	70% { -webkit-filter: blur(30px);opacity : 0;}
	75% { -webkit-filter: blur(0px); opacity : 1;}
	80% { -webkit-filter: blur(0px); opacity : 1;}
	85% { -webkit-filter: blur(30px); opacity : 0;}
	100% { -webkit-filter: blur(30px); opacity : 0;}
}

















.samples .share{
	margin-top:40px;
	text-align:center;
}

.samples .share .icon{
	margin:0 20px;
	cursor:pointer;
}

.samples .quit{
	background-position:-44px 0;
	cursor:default;
	position:absolute;
	right:0;
	top:45px;
}

.samples .quit:hover{
	background-position:-66px 0;
}
#book-wrapper{
	width:960px;
	height:600px;
	margin-left:20px;
	margin-right:20px;
}




.sample .loader{
	position:absolute;
	width:32px;
	height:32px;
	top:50%;
	left:50%;
}

.sample .loader i{
	background:white url(../pics/loader.gif) 4px 4px no-repeat;
	position:relative;
	top:-16px;
	left:-16px;
	width:32px;
	height:32px;
	display:block;

	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
}