/*********************************
* Slideshow Styling
*********************************/

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : portrait)  {
	
	#slideshow {
	width: 50%;
	height:50%;
	margin: 100px auto;

    position:relative;

    overflow: hidden;
}
	#slideshow.fullscreen {
position: fixed;
top: 49px;
left: 0;
width: 375px;
height: 331px;
margin: 0;
padding: 0;
overflow: hidden;
background: white;
	}
	.img-wrapper {
	    min-width: 75%;
    min-height: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    z-index: 8;
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 50px;
	}
		#slideshow .img-wrapper.active {
		    z-index:10;
		}

		#slideshow .img-wrapper.last-active {
		    z-index:9;
		}

	/*********************************
	* Thumbnail Styling
	*********************************/
	.thumbs-container {
width: 955px;
    height: 158px;
    position: fixed;
    z-index: 11;
    background: none;
    opacity: .9;
    text-align: center;
    margin-left: -10px;
    margin-right: auto;
    bottom: 1%;
    top: 600px;
    left: 27px;
    display: none;
	
	}
		.thumbs-container.top {
			top: 0;
		}
		.thumbs-container.bottom {
			bottom: 0;
		}
		.prev, .next {
			    width: 2%;
    min-width: 0px;
    height: 48px;
    padding: 46px 0%;
    color: #999999;
    cursor: pointer;
	    
		}
		.prev { 
		
		
	     float: left;
background: url(../images/site/fleche-gauche-slider.png)no-repeat;
width: 37px;
top: -400px;
position: relative;
left: -17px;
z-index: 99;

		
		}
		.next { 
		
	background: url(../images/site/fleche-droite-slider.png)no-repeat;
width: 37px;
top: -400px;
position: relative;
z-index: 99;
right: -321px;
		
		}
			.prev:hover, .next:hover {
				color: #555555;
			}
		ul.thumbs {
			    position: absolute;
    top: 0;
    left: 45px;
    right: 45px;
    height: 140px;
    padding: 0;
    margin: 0px 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
		}
			.thumb {
	    display: inline-block;
    width: 210px;
    height: 110px;
    margin: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    background-color: #001e72;
    width: 256px;
	
	
	
			}
				.thumb:first-of-type {
					margin-left: 0px;
				}
			.thumb.active {
				         width: 256px;
    height: 110px;
    border: 2px solid #fb4c67;
    background-color: #001e72;
			}
	
}

@media screen and (min-width: 1096px) and (max-width: 4000px) {

#slideshow {
	width: 50%;
	height:50%;
	margin: 100px auto;

    position:relative;

    overflow: hidden;
}
	#slideshow.fullscreen {
	     position: fixed;
    top: 49px;
    left: 0;
    width: 100%;
    height: 651px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: white;
	}
	.img-wrapper {
	    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    z-index: 8;
    background-size: cover;
    background-position: center center;
    width: 30px;
    height: 50px;
	}
		#slideshow .img-wrapper.active {
		    z-index:10;
		}

		#slideshow .img-wrapper.last-active {
		    z-index:9;
		}

	/*********************************
	* Thumbnail Styling
	*********************************/
	.thumbs-container {
width: 955px;
    height: 158px;
    position: fixed;
    z-index: 11;
    background: none;
    opacity: .9;
    text-align: center;
    margin-left: -10px;
    margin-right: auto;
    bottom: 1%;
    top: 600px;
    left: 27px;
    display: none;
	
	}
		.thumbs-container.top {
			top: 0;
		}
		.thumbs-container.bottom {
			bottom: 0;
		}
		.prev, .next {
			    width: 2%;
    min-width: 0px;
    height: 48px;
    padding: 46px 0%;
    color: #999999;
    cursor: pointer;
	    
		}
		.prev { 
		
		
	       float: left;
    background: url(../images/site/fleche-gauche-slider.png)no-repeat;
    width: 37px;
      top: -240px;
    position: relative;
    left: -17px;
    z-index: 99;

		
		}
		.next { 
		
		    background: url(../images/site/fleche-droite-slider.png)no-repeat;
    width: 37px;
       top: -240px;
    position: relative;
    z-index: 99;
    right: -934px;
		
		
		}
			.prev:hover, .next:hover {
				color: #555555;
			}
		ul.thumbs {
			    position: absolute;
    top: 0;
    left: 45px;
    right: 45px;
    height: 140px;
    padding: 0;
    margin: 0px 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
		}
			.thumb {
	    display: inline-block;
    width: 210px;
    height: 110px;
    margin: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    background-color: #001e72;
    width: 256px;
	
	
	
			}
				.thumb:first-of-type {
					margin-left: 0px;
				}
			.thumb.active {
				         width: 256px;
    height: 110px;
    border: 2px solid #fb4c67;
    background-color: #001e72;
			}
			
			
}