#mainwrapper {font: 11pt normal Arial, sans-serif;height: auto;text-align: center;}

#mainwrapper .box {display:inline-block;
    /*border: 5px solid #fff;*/
    cursor: pointer;
    height: 180px;
    float: left;
    margin: 0px;
    position: relative;
    overflow: hidden;
    width: 180px;
/*    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;*/
}
.box img{width:180px;}
#boxEffet {font: 11pt normal Arial, sans-serif;height: auto;margin: 10px auto 0 auto;text-align: center;max-width: 320px;}
/* image 210 x 100 */
#boxEffet .box210 {display:block;position:relative;cursor: pointer;overflow: hidden;border: 5px solid #fff;margin:5px auto 5px auto;
		width: 220px;height: 110px;
  /*  float: left; */
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}
/* image 240 x 150 */
#boxEffetLine {font: 11pt normal Arial, sans-serif;height: auto;margin: 10px auto 0 auto;text-align: center;max-width:1100px;}
#boxEffetLine .box240 {display:inline-block;position:relative;cursor: pointer;overflow: hidden;border: 5px solid #fff;margin:5px auto 5px auto;
		width: 250px;height: 160px;
  /*  float: left; */
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}
@media (min-width: 767px) {

	#mainwrapper .box img {position: absolute;left: 0;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		transition: all 300ms ease-out;
	}
	#mainwrapper .box .caption {background-color: rgba(0,0,0,0.8);position: absolute;color: #fff;z-index: 100;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		transition: all 300ms ease-out;
		left: 0;
	}
	
	#boxEffet .box210 img {position: absolute;left: 0;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		transition: all 300ms ease-out;
	}
	#boxEffet .box210 .caption {background-color: rgba(21,68,88,0.8);position: absolute;color: #fff;z-index: 100;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		transition: all 300ms ease-out;
		left: 0;
	}	
/* effet 3 Fade in et scale*/
	#boxEffet .box210 .fade-caption {opacity: 0;width: 210px;height: 100px;text-align: left;padding:5px;}
 /* Caption Behavior 3: Fade in. */
	#boxEffet .box210:hover .fade-caption {opacity: 1;}
	
/* image 240 x 150 */	
	#boxEffetLine .box240 img {position: absolute;left: 0;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		transition: all 300ms ease-out;
	}
	#boxEffetLine .box240 .caption {background-color: rgba(21,68,88,0.9);position: absolute;color: #fff;z-index: 100;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		transition: all 300ms ease-out;
		left: 0;
	}	

/* effet 3 Fade in et scale*/
	#boxEffetLine .box240 .fade-caption {opacity: 0;width: 240px;height: 150px;text-align: left;padding:5px;}
 /* Caption Behavior 3: Fade in. */
	#boxEffetLine .box240:hover .fade-caption {opacity: 1;}		
	
/* effet 1 */
	#mainwrapper .box .simple-caption {height: 35px;width: 190px;display: block;bottom: -35px;line-height: 25pt;text-align: center;}
	#mainwrapper .box:hover .simple-caption {
		-moz-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

/* effet 2 */
	#mainwrapper .box .full-caption {width: 180px;height: 180px;top: -180px;text-align: left;padding: 10px;}
 /* Caption Behavior 2: Move it down */
	#mainwrapper .box:hover .full-caption {
		-moz-transform: translateY(100%);
		-o-transform: translateY(100%);
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
/* effet 3 Fade in et scale*/
	#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
		opacity: 0;
		width: 180px;
		height: 180px;
		text-align: left;
		padding: 10px;
}
 /* Caption Behavior 3: Fade in. */
	#mainwrapper .box:hover .fade-caption {opacity: 1;}

/* Caption 4: Slide **/
	#mainwrapper .box .slide-caption {width: 175px;height: 180px;text-align: left;padding: 10px;left: 180px;}
 /*Caption Behavior 4: Slide it to the left */
	#mainwrapper .box:hover .slide-caption {background-color: rgba(0,0,0,1) !important;
		-moz-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		opacity: 1;
		transform: translateX(-100%);
	}

}
@media (max-width: 767px) {
	#mainwrapper .box {display:block;float:none;text-align:center;margin:5px auto 2px auto;}
}