/**** Grid masonry ****/

 



/**** Gutters ****/

.has-gutters .box {
  margin: 5px 0;
}

.has-gutters .col1 { width: 90px; }
.has-gutters .col2 { width: 230px; }
.has-gutters .col3 { width: 370px; }
.has-gutters .col4 { width: 550px; }

/**** Transitions ****/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-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;
       -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;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}

@media (min-width: 992px) {
  #gridManapani  {
    width: 978px;
  }
}
@media (min-width: 1200px) {
  #gridManapani {
    width: 1170px;
  }
}

#gridManapani{
	 margin: 10px auto 50px; 
} 
#gridManapani .row{
  margin: 0 auto;
  padding: 0 ;
  position: relative
}
  
 
#gridManapani .bloc{
	background-color: #BDBDBD;
	position :relative;
	margin-bottom:0px;
	overflow:hidden ;  
}
#gridManapani .brick{
 	 padding: 10px;
 	 
}
 
#gridManapani .bloc:before{
	content: "";
	display: block;
	padding-top:100%;
	
}
 
#gridManapani .bloc.h_1-2{
	
}
#gridManapani .bloc.h_1-2:before{
	padding-top:50%; 
	margin-top:-10px
}
#gridManapani .bloc.h_5-2:before{
	padding-top:40%;
	margin-top:-10px
}
#gridManapani .bloc.h_5-3:before{
	padding-top:60%;
	margin-top:-10px
}
#gridManapani .bloc.h_5-4:before{
	padding-top:81%;
	margin-top:-10px
}
#gridManapani .bloc.h_3-4:before{
	padding-top:141%;
	margin-top:-10px
}
#gridManapani .bloc.h_3-2:before{
	padding-top:68%;
	margin-top:-10px
}

#gridManapani .bloc.h_4-3:before{
	padding-top:76%;
	margin-top:-10px
} 
#gridManapani .contentBloc{
	position: absolute;
	top:0;
	left:0; 
	width: 100%;
	height: 100%;
	 
}
#gridManapani .contentBloc figure{
	position: absolute;
	top:0;
	left:0; 
	width: 100%;
	height: 100%
}
#gridManapani .contentBloc figure img{
width: 100%;
height: auto
}

#gridManapani .contentBloc article{
	position: relative;
	float:left;
	top:0;
	left:0; 
	padding-left:10px;
	padding-right:10px 
}
#gridManapani .space150{
	margin-bottom:150px
} 
 #gridManapani .contentBloc h6{
 	padding: 0 10px
 }
 
#gridManapani .contentBloc article.bottom{
 	top:100%;
 	left:50%; 
 	-webkit-transform: translate(-50%,-150%);	
	-moz-transform: translate(-50%,-150%);
	-ms-transform: translate(-50%,-150%);
	-o-transform: translate(-50%,-150%);
	transform:translate(-50%,-150%); 
 	  
}
#gridManapani .contentBloc article.middle{
	top:50%;
	left:50%;  
	-webkit-transform: translate(-50%,-50%);	
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
#gridManapani .contentBloc article.middleTop{
	top:10%;
	left:50%;  
	-webkit-transform: translate(-50%,-10%);	
	-moz-transform: translate(-50%,-10%);
	-ms-transform: translate(-50%,-10%);
	-o-transform: translate(-50%,-10%);
	transform:translate(-50%,-10%);
}


@media (max-width: 992px) {
	#gridManapani .bloc.h_3-2:before{
	padding-top:71%; 
	}
	#gridManapani .space150{
	margin-bottom:80px
	} 
	
}
@media (max-width: 768px) {
	#gridManapani .col-xs-6{
		width: 49%
		
	}
}


