.grid, .gridNoCat {
  position: relative;

}
.item {
  display: block;
  position: absolute;
  width: 33%;
  /* height: 100px; */
  height: auto;
  margin: 0px;
  padding: 0px;
  z-index: 1;
  /* background: #000; */
  /* color: #fff; */
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;

}

.item-content .img-wrapper {
  /* width: 100%; */
  /* height: auto; */
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  /* resize: horizontal; */
  /* border: 1px dashed; */

  max-width: 100%;

}



.item-content .img-wrapper .img-innerWrapper {

  width: 100%;
  padding-bottom: 66.66%;
  position: relative;
  overflow: hidden;
}

.img-wrapper .overlayBox {
  position: absolute;
  /* bottom: -60px; */
  bottom: 0;
  width:100%;
  height: 60px;
  z-index: 9;
  /* display: none; */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-out;
}

.img-wrapper:hover .overlayBox {
  bottom: 0;
  /* display: block; */
  visibility: visible;
  opacity: 1;

}

.img-wrapper .overlayBox .caption {
  color: #fff;
  z-index: 11;
  position: absolute;
  padding: 0 20px;
}

.img-wrapper .overlayBox .caption p {
  text-transform: uppercase;
}

.img-wrapper .overlayBox .bgBox {
  width: 100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  /* background-color: rgb(147 185 52 / 80%); */
  background-color: rgb(0 64 112 / 80%);
  z-index: 10;
}

#mainpage-6 .img-wrapper .overlayBox .bgBox {
  background-color: rgb(22 148 178 / 80%);
}


#mainpage-5 .img-wrapper .overlayBox .bgBox {
  background-color: rgb(32 80 24 / 80%);
}

#mainpage-7 .img-wrapper .overlayBox .bgBox {
  background-color: rgb(239 121 0 / 80%);
}


.item-content img {
  max-width:100%;
  height: auto;
  position: absolute;
  top:-100%; left:0; right: 0; bottom:-100%;
  margin: auto;
}



.sortMenu {
  display: flex;
  flex-direction: row;
  /* justify-content: space-around; */
  justify-content: center;
  flex-wrap: wrap;
}
.filter-button {
  display: inline;
  padding: 5px 10px;
  margin: 0px 10px;
  cursor: pointer;#

}
.filter-button p {
  display: inline;
  text-transform: uppercase;
}

.filter-button p:hover, .filter-button.active p {
  /* color: #94c11b; */
  color: #004070;

}




@media (max-width: 1279px){
    .item {
      /* padding: 10px; */
    }
    .item-content .img-wrapper {

      padding: 15px;
    }
}


@media (max-width: 1000px){

    .img-wrapper .overlayBox {
      height: 47px;
    }
    .img-wrapper .overlayBox p {
      margin: 11px 0 11px;
    }
}


@media (max-width: 780px){
    .item {

      width: 50%;
    }
    .item-content .img-wrapper {

      padding: 10px;
    }

    .img-wrapper .overlayBox {
      height: 40px;
    }
    .img-wrapper .overlayBox p {
      margin: 8px 0 7px;
    }
}



@media (max-width: 450px){

    .img-wrapper .overlayBox {
      height: 30px;
    }
    .img-wrapper .overlayBox p {
      margin: 4px 0 1px;
      font-size: 13px;
    }
}