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



/*
  Container for the gallery:

  Absolutely positioned
  Stretch to fill the whole window width
  Fixed height
  Hide the overflow to prevent horizontal scrollbars

  Vertically centred in the viewport: http://css-discuss.incutio.com/wiki/Centering_Block_Element#Centering_an_absolutely_positioned_element 
*/

#galleryContainer {
	width: 100%;
	height: 86%;        /* Image height + 200px */
	overflow: auto;
	position: absolute;
	/*top: auto 0; */
	margin-top: 0px;
	margin-bottom: auto ;
	/*margin:80px;/*modifier le position de slider (haut ou bas)*/
	
}


/*
  The gallery div that contains all the images

  We'll set the width dynamically in the JavaScript as the images load
*/

#gallery {
	width: auto;
	height: 80%;        /* Image height + 100px */
	padding: 50px 0;
	position: absolute;
	/*z-index: 2; */
	left: 150px;
	top: 50px;
}


/*
  Individual slides within the gallery:

  Float them left so that they're all side by side
  Fixed height (the width will vary as required)
  Add some horizontal margin between the slides
  Add a bottom fading reflection for WebKit browsers
*/

#gallery img {
  float: left;
  height: 100%;
  margin: 0 2px;      /* Adjust the left/right margin to show greater or fewer slides at once */
 
}


.buttonLeft {
	background-image: url(../../images/left.jpg);
	background-repeat: no-repeat ;
	opacity: 0.4;
	width: 20px;
	height: 20px;
	overflow: hidden;
	margin: 0 auto;
	cursor: pointer;
	float: left;
}

.buttonRight {
	background-image: url(../../images/right.jpg);
	background-repeat: no-repeat;
	opacity: 0.4;
	width: 20px;
	height: 20px;
	overflow: hidden;
	margin: 0 auto;
	cursor: pointer;
	float: right;
}

.draggerBar {
	background: rgba(0,0,0,0.2);
	width: 300px;
	hight: 2px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.scroll {
	left: 50%;
	bottom: 30px;
}