<div class="gallery masonryeffectcontent{{ module.show_grid_layout }}"> 
{% for item in module.images_gallary %}
	{% if item.big_image.src %}		
    <a href="{{ item.big_image.src }}" class="big masonry_item">
      {% if item.thumb_image.src %}
        <img src="{{ item.thumb_image.src }}" alt="{{ item.thumb_image.alt }}" title="{{ item.thumb_image.alt }}">
      {% endif %}
    </a>
	{% endif %}
{% endfor %}  
</div>

          
        

          
            .masonryeffectcontent { /* Masonry container */

  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
   margin: 1.5em;
    padding: 0;
    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    font-size: .85em;
}
.masonryeffectcontent3 {
  -webkit-column-count: 3;
  -moz-column-count:3;
  column-count: 3;
}

.masonryeffectcontent4 {
  -webkit-column-count: 4;
  -moz-column-count:4;
  column-count: 4;
}

.masonryeffectcontent5 {
  -webkit-column-count: 5;
  -moz-column-count:5;
  column-count: 5;
}

.masonryeffectcontent6 {
      -webkit-column-count: 6;
  -moz-column-count:6;
  column-count: 6;
}
.masonry_item {
    display: inline-block;
    background: #fff;
    padding: 5px;
    margin: 0 0 10px;
    width: 100%;
    -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.masonry_item img{max-width:100%; width: 100%}

@media only screen and (max-width: 320px) {
    .masonryeffectcontent, .masonryeffectcontent3, .masonryeffectcontent4, .masonryeffectcontent5, .masonryeffectcontent6 {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 321px) and (max-width: 768px){
     .masonryeffectcontent, .masonryeffectcontent3, .masonryeffectcontent4 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
  
  .masonryeffectcontent5, .masonryeffectcontent6 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonryeffectcontent, .masonryeffectcontent3, .masonryeffectcontent4 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
  
  .masonryeffectcontent5, .masonryeffectcontent6 {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
@media only screen and (min-width: 1201px) {
    .masonryeffectcontent3 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    .masonryeffectcontent4 {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
  
   .masonryeffectcontent5 {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
  
   .masonryeffectcontent6 {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }
}
          
        

          
            jQuery( document ).ready( function() {
  setTimeout( function() {
    var gallery = jQuery('.gallery a').simpleLightbox();
 }, 1200);
});