*{
    scroll-behavior: smooth;
}
    /* codepen */
    .galleryContainer{
        min-height: 450px;
        padding: 0;
      }
      ul{
  list-style: none;
}

img{
  max-width: 100%;
  height: auto;
}



.filter-menu{
  margin-bottom: 20px;
}
.filter-menu li{
  display: inline-block;
  padding: 10px 18px;
  background: #eb4d4b;
  color: #fff;
  cursor: pointer;
}
.filter-menu li:hover,
.filter-menu li.current{
  background: #ff7979;
}



.filter-item li{
  /* width: 50%; */
  padding: 2px;
  float: left;
}

.filter-item li.active{
  /* width: 50%; */
  padding: 2px;
  transition: all 0.5s ease;
  /*margin-right: 20px;*/
}

.filter-item li.delete{
  width: 0%;
  padding: 0;
  transition: all 0.5s ease;
}

.filter-item img{
  display: block;
  /* width: 100%; */
  /* height: 100%; */
}

/* @media screen and (min-width: 768px){
  .filter-item li.active,
  .filter-item li{
      width: 33.33%;
  }

}
@media screen and (min-width: 1280px){
  .filter-item li.active,
  .filter-item li{
      width: 15%;
  }


} */
.box1,.box2,.box3{
  width: 100%;
  height: 200px;
  /* margin: 80px 0px; */
  margin: 10px 0px;
  position: sticky;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}
/* .box1{
  margin-top: 80px;
}
.box2{
  margin-top: 30px;
} */
/* @media(min-width:1700px){
  .container{
    max-width: 1340px;
  }
} */
#sidePanel{
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  /* align-items: center; */
  height: 620px;
  margin-top: 63px;
}
.box1{
    margin: 0 !important;
}
.filter-menu,.filter-menu li{
  background: #333;
}
.filter-menu,.filter-item{
  padding: 0;
}
.filter-menu li:hover, .filter-menu li.current{
  background: #686868;
}
#modalText{
  /*padding: 10px;*/
}
/* #modalImg{
        width: 100% !important;
      } */
      .modal-dialog{
        max-width: 600px !important;
      }
      /* to make modal at center */
      .modal-dialog {
        min-height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: auto;
    }

    .filter-item{
      display: grid !important;
      grid-template-columns: repeat(5,1fr);
      grid-gap: 20px !important;
      /* height: auto !important; */

    }
    .delete{
      display: none;
    }
    .filter-item li.active {      
      height: auto;
      justify-content: center;
      display: flex;
      align-items: center;
      cursor: pointer;
  }
  
  /**/
  .box1:hover,.box2:hover,.box3:hover{
      transform: scale(1.1);
transition: 1s ease all;
  }
  .modal-header{
      justify-content: end !important;
      border: none !important;
  }
  .fa-close{
    background: none;
    font-size: 20px !important;
    cursor: pointer;
  }