/*====================================
=            masonry Page            =
====================================*/

.masonry{
  display: block;
-webkit-column-gap: 0.25rem;
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}

/* 5 columns */
.masonry.masonry-columns-5{
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
@media(max-width: 1170px){
  .masonry.masonry-columns-5{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}


/*-4 columns------*/
.masonry.masonry-columns-4{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}

/*-3 columns------*/
.masonry.masonry-columns-3{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}

/*-2 columns------*/
.masonry.masonry-columns-2{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

/*-1 columns------*/
.masonry.masonry-columns-1{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}


/*--------Responsive---------*/
@media(max-width: 991px){
  .masonry.masonry-columns-4,
  .masonry.masonry-columns-5{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}

@media(max-width: 767px){
  .masonry.masonry-columns-4,
  .masonry.masonry-columns-5,
  .masonry.masonry-columns-3{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}

@media(max-width: 540px){
  .masonry.masonry-columns-4,
  .masonry.masonry-columns-5,
  .masonry.masonry-columns-3,
  .masonry.masonry-columns-2{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}

.masonry .masonry-item {
    display: inline-block;
    width: 100%;
    padding: 0;
    border: 1px solid transparent;
    transition: all 0.4s ease-in-out;
  }
  .masonry .masonry-item:hover {
      border: 1px solid #ffc762;
  }

/*=====  End of masonry Page  ======*/

/* --- Thumbnail Hover Effects --- */

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  cursor: default;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.hovereffect:hover img {
  filter: grayscale(1) blur(2px);
  -webkit-filter: grayscale(1) blur(2px);
}
