div#zone_galerie{
background:url("../images/galerie.jpg") no-repeat;
width: 958px; /*Width of Carousel Viewer itself*/
height: 620px;
padding:70px 0 0 60px ;
margin:0 0 0 10px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 830px; /*Width of Carousel Viewer itself*/
height: 545px; /*Height should enough to fit largest content's height*/
-webkit-box-sizing: border-box; /* set box model so container width and height value includes any padding/border defined */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0; /*margin around each panel*/
width: 830px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
.stepcarousel .panel img{
width:auto;
height: 830px;
height:545px;
margin:auto;
position:relative;
}

span.paginatecircle{ /* CSS for paginate circle spans. Required */
border-radius: 10px;
width: 6px;
height: 6px;
cursor: pointer;
display: inline-block;
margin-right: 4px;
}

span.paginatecircle:hover{
background: gray;
}

span.paginatecircle.selected{
background: black;
}
img.mygallery_navbutton{
display:block;
width:30px;
margin-top:250px;
}

@media only screen and (min-width: 300px) and (max-width: 800px) {
div#content_droit img {
    max-width: 500px;
}

div#zone_galerie{
background:url("../images/galerie-mini.jpg") no-repeat;
width: 520px; /*Width of Carousel Viewer itself*/
height:350px;
margin:auto;
padding:35px 0 0 33px ;
}
img.mygallery_navbutton{
display:block;
width:25px;
margin-top:140px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 454px; /*Width of Carousel Viewer itself*/
height: 300px; /*Height should enough to fit largest content's height*/
-webkit-box-sizing: border-box; /* set box model so container width and height value includes any padding/border defined */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0; /*margin around each panel*/
width: 454px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
.stepcarousel .panel img{
width:auto;
height: 300px;

margin:auto;
position:relative;
align:center;
}
@media only screen and (min-width: 800px) and (max-width: 1000px) {




	/* Style adjustments for viewports that meet the condition */



}