@charset "utf-8";

/* LOADING */
#loader {
	margin: 0px auto;
	padding : 50px 0;
	text-align: center;
}

/* SLIDES */

#slideshow {
	position:relative;
	box-sizing: border-box;
	padding-bottom:66.25%; /* Ratio 16/9 */
	display: none;
}

#slideshow img{
	position:absolute;
	z-index:1;
	width:100%;
}

#slideshow img.active{
	z-index:3;
}

/* COMMANDS PREV NEXT PAUSE */

#slpause {
	-webkit-user-select: none;
  	-moz-user-select: none;
 	-ms-user-select: none;
  	user-select: none;
	z-index:1;
	position: absolute;
	top : 0;
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,0.5);
  	transition: background-color 0.6s ease;
  	border-radius: 10px;
	margin-top: 180px;
	left : 46.875%;
}

#slpauseimg {
	width: 100%;
	height : 100%;
	background-image: url("../img/pause.png");
}

.slcenterbuttons {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	width:100%;
	z-index:4;
}

.slprev, .slnext {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index:1;
  cursor: pointer;
  position: absolute;
  top: 0;
  width:auto;
  padding: 16px;
  top:50%;
  margin-top: -22px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(0,0,0,0.5);
  transition: background-color 0.6s ease;
  border-radius: 0 10px 10px 0;
}

.slprev:hover, .slnext:hover, .slpause:hover {
  color: white;
  background-color: rgba(0,0,0,0.8);
}

.slnext {
  right: 0;
  border-radius: 10px 0 0 10px;
}

/* APERCUS */

#overlays {
	position:relative;
	box-sizing: border-box;
	width : 100%;
	margin: 0 auto;
	display: none;
	padding: 0;
	line-height: 0; /* Fix for gap under img */
}

#overlays img {
	width: 100%;
	filter: grayscale(0.85);
}

#overlays img:hover {
	filter: grayscale(0);
}

.slides8Overviews { width:12.5%; float: left;}
.slides7Overviews { width:14.2857142857%; float: left; display: block;}
.slides6Overviews { width:16.66666%; float: left;}
.slides5Overviews { width:20%; float: left;}
.slides4Overviews { width:25%; float: left;}
.slides3Overviews { width:33.33333%; float: left;}

.slidesOverviewsMiddle { margin:0 0%; }
.slidesOverviewsFirst {	margin-right:0%;}
.slidesOverviewsLast { margin-left:0%; }

.clearer { clear: both; } /* hack for non height 0 of gallery */