/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/

/* -----------------------------------------
   Shared Styles
----------------------------------------- */

.bottom{ margin: 8px 0 8px;}
.pad {padding: 15%;}
.top { padding-top:10%;}
.top-mag{margin-top:45px;}

.full{width:100%; max-width:100%;}

.white {color:#FFF; text-transform: uppercase;}
.vert {background-color: #4B535D;}
.alignright{ text-align:right;}
.inner{ padding:0px; }
.inner3-image{padding:0px;}
.inner1{ padding:14px; }
.inner2{ padding:14px; }
.inner3{padding:14px;}

.logo{ margin-top:10px; margin-left: 10px; padding-bottom: 10px;  }
.img-gauche{ margin-bottom:1.25rem;}

.wrap { width:100%; overflow:hidden; padding-top:1rem; }
.wrap-gris { width:100%; background-color:#5e5f61; border-bottom:3px solid #0078a0;}
.footer { width:100%; border-top:3px solid #0078a0;}
#logo-box{ margin-top:-10px; }

.link-up{display: none;}
.link-prev{display: inline-block; float: left; padding-bottom: 1rem;}
.link-next{display: inline-block; float: right; padding-bottom: 1rem;}

.px1 {height:1px;}
.img-left{float: left;}
.img-center{display: block;
    margin-left: auto;
    margin-right: auto;}
.img-right{float:right;}

#footer { background-color:#58585A;}
#footer h3 {color:#FFF;}
#footer p {color:#FFF;}
#footer ul  {margin:0; padding:0;}
#footer ul li {margin:0; padding:0;list-style:none;}
#footer a:link {color:#FFF;}
#footer a:visited {color:#FFF;}
#footer a:hover {color:#FFF;}
	
/**** IMPORTANT THESE ARE NEEDED ****/	
	#container {
	  float:none;
	  padding: 0;
	  margin:5px auto;
	  margin-bottom:30px;
	  /* content-box is NEEDED. if border-box is enabled
	     then it when Masonry calculates the height and width
		 of the container it counts incorrectly and the result
		 images running to the edge of the container on the right
		 and bottom sides. Only apply content-box to the container. */
	  -webkit-box-sizing:content-box;
	  -moz-box-sizing:content-box;
	  box-sizing:content-box;
	}
	
	.box {
	  margin: 5px;
	  float: left;
	  /* optional */
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	}
	.box img, { display: block; width: 100%; }
	
	/* unfortunately masonry needs hard pxs for images */
	.col1 { width: 80px; }
	.col2 { width: 240px; }
	.col3 { width: 290px; }
	.col4 { width: 380px; }
	.col5 { width: 480px; }
	.col1 img { max-width: 80px; }
	.col2 img { max-width: 240px; }
	.col3 img { max-width: 290px; }
	.col4 img { max-width: 380px; }
	.col5 img { max-width: 480px; }
	
	/* animations for the transition/reordering */
	.transitions-enabled.masonry,
	.transitions-enabled.masonry .masonry-brick {
	  -webkit-transition-duration: 0.7s;
	  -moz-transition-duration: 0.7s;
	  -ms-transition-duration: 0.7s;
	  -o-transition-duration: 0.7s;
	  transition-duration: 0.7s;
	}
	.transitions-enabled.masonry {
	  -webkit-transition-property: height, width;
	  -moz-transition-property: height, width;
	  -ms-transition-property: height, width;
	  -o-transition-property: height, width;
	  transition-property: height, width;
	}
	.transitions-enabled.masonry  .masonry-brick {
	  -webkit-transition-property: left, right, top;
	  -moz-transition-property: left, right, top;
	  -ms-transition-property: left, right, top;
	  -o-transition-property: left, right, top;
	  transition-property: left, right, top;
	}

/**** Clearfix ****/
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }



.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;
    display: none;
}

.overlay .title {
    text-align: center;
    font-size: 1rem;
}

.overlay .description {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.80);
    width: 100%;
    margin: 0;
}

.overlay .description p {
    margin: 20px;
}

.box:hover .overlay {
    display: block;
}