.activity{
  height: 100%;
  margin-top: 40px;
  min-height: 100%;
  min-height: 50rem;
  width: 100%;
}


.filters_wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;
  list-style: none;
  margin: 0 auto 10px;
  padding: 0;
}
.filters_wrapper h5{
  color: #EE9C16;
  margin-bottom: 0.3em;
}
.box{
  width: 95%;
  display: flex;
}
.boxes{
  width: 50%;
  padding: 0px;
  /* box-shadow: 3px 3px 10px -10px rgba(0, 0, 0, 1), -5px -5px 10px -10px rgba(0, 0, 0, 1); */
  margin: 0px 5px 25px 5px;
  text-align: center;
  background-color: #152637;
}
.boxes h6{
  margin-bottom: 10px;
  color: white;
}

.boxes img{
  height: 211px;
  object-fit: cover;
  width: 100%;
  margin-bottom: -10px;
}

.boxes img:hover{
  cursor: pointer;
  filter: brightness(65%);
}

.fullImageView{
  display: none;
  position: fixed;
  object-fit: cover;
  z-index: 1;
  width: 100%;
  height: 580px;
  background-color: black;
  overflow: hidden;
  top: 40px;
}

.fullImageView span{
  position: absolute;
  top: 0; right: 10px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  cursor: pointer;

}
.fullImageView img{
  object-fit: cover;
  position: absolute;
  top: 10%; left: 15%;
  transform: translate(-10%, -10%);
  transform: scale(1.1);
  width: 70%;
  height: 500px;

}
@media (max-width:1000px) {
  .fullImageView img{
    top: 20%; left: 5%;
    height: 400px;
    width: 90%;
  }
}
@media (max-width:750px) {

  .fullImageView img{
    top: 20%; left: 5%;
    height: 300px;
    width: 90%;
  }
}
@media (max-width:480px) {
  .fullImageView{
    height: 100%;
  }
  .fullImageView img{
    top: 30%; left: 5%;
    height: 200px;
    width: 90%;
  }
  .select{
    word-wrap: break-word;
    width: 95%;
  }
}