@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://unpkg.com/aos@2.3.1/dist/aos.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap");
/*variables*/
.photo-gallery-title-div {
  text-align: center;
}

.photo-gallery-title-div p {
  margin-bottom: 0;
  color: #828a9c;
}

.photo-gallery-title-div h1 {
  color: #ff3514;
}

.gallery-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  cursor: pointer;
  overflow: hidden;
}

.gallery-container {
  overflow: hidden;
  cursor: pointer;
}

.child,
.child-1,
.child-2,
.child-3,
.child-5,
.child-6,
.child-7,
.child-8 {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.child-1:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
  overflow: hidden;
}

.child-2:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
  overflow: hidden;
}

.child-3:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
  overflow: hidden;
}

.child:hover {
  -ms-transform-origin-x: scale(1.2);
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: 0.5s all ease-in-out !important;
  transition: 0.5s all ease-in-out !important;
  overflow: hidden;
}

.child-5:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: 0.5s all ease-in-out !important;
  transition: 0.5s all ease-in-out !important;
  overflow: hidden;
}

.child-6:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  overflow: hidden;
  -webkit-transition: 0.5s all ease-in-out !important;
  transition: 0.5s all ease-in-out !important;
}

.child-7:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: 0.5s all ease-in-out !important;
  transition: 0.5s all ease-in-out !important;
  overflow: hidden;
}

.child-8:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: 0.5s all ease-in-out !important;
  transition: 0.5s all ease-in-out !important;
  overflow: hidden;
}

.lastFour {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 280px 200px;
      grid-template-columns: 280px 200px;
  margin: 0px !important;
  padding: 0px !important;
  overflow: hidden;
}

.parent-1,
.parent-2,
.parent-5,
.parent-6,
.parent-7,
.parent-8 {
  overflow: hidden;
  min-height: 265px;
  min-width: 277px;
  margin: 0px !important;
  padding: 0px !important;
}

.parent-3 {
  overflow: hidden;
  min-height: 265px;
  min-width: 555px;
  height: 265px;
  width: 555px;
  margin: 0px !important;
  padding: 0px;
}

.child-1 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background: url("../images/photogallery1.jpg");
  background-position: center;
  background-size: cover;
  margin: 0px !important;
  padding: 0px !important;
}

.child-2 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background: url("../images/photogallery2.jpg");
  background-position: center;
  background-size: cover;
  margin: 0px !important;
  padding: 0px !important;
}

.child-3 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background: url("../images/photogallery3.jpg");
  background-position: center;
  background-size: cover;
  margin: 0px !important;
  padding: 0px !important;
}

.parent {
  width: 550px;
  height: 540px;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background-image: url("../images/photogallery4.jpg");
  background-position: center;
  background-size: cover;
  margin: 0px !important;
  padding: 0px !important;
}

.child-5 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background-image: url("../images/photogallery5.jpg");
  background-position: center;
  background-size: cover;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
}

.child-6 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background-image: url("../images/photogallery6.jpg");
  background-position: center;
  background-size: cover;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
}

.child-7 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background-image: url("../images/photogallery7.jpg");
  background-position: center;
  background-size: cover;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
}

.child-8 {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background-image: url("../images/photogallery8.jpg");
  background-position: center;
  background-size: cover;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
}

.black-overlay {
  display: none;
  font-size: 25px;
  color: #ffffff !important;
  font-family: sans-serif;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 60px;
  cursor: pointer;
}

.child::before,
.child-1::before,
.child-2::before,
.child-3::before,
.child-5::before,
.child-6::before,
.child-7::before,
.child-8::before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: all 0.2s ease-in-out !important;
  transition: all 0.2s ease-in-out !important;
}

.parent:hover .child:before,
.parent:focus .child:before,
.parent-1:hover .child-1:before,
.parent-1:focus .child-1:before,
.parent-2:hover .child-2:before,
.parent-2:focus .child-2:before,
.parent-3:hover .child-3:before,
.parent-3:focus .child-3:before,
.parent-5:hover .child-5:before,
.parent-5:focus .child-5:before,
.parent-6:hover .child-6:before,
.parent-6:focus .child-6:before,
.parent-7:hover .child-7:before,
.parent-7:focus .child-7:before,
.parent-8:hover .child-8:before,
.parent-8:focus .child-8:before {
  display: block;
}

.parent:hover span,
.parent:focus span,
.parent-1:hover span,
.parent-1:focus span,
.parent-2:hover span,
.parent-2:focus span,
.parent-3:hover span,
.parent-3:focus span,
.parent-5:hover span,
.parent-5:focus span,
.parent-6:hover span,
.parent-6:focus span,
.parent-7:hover span,
.parent-7:focus span,
.parent-8:hover span,
.parent-8:focus span {
  display: block;
}

#overlay-slider {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: rgba(17, 17, 19, 0.9);
}

.photogallery-splide {
  top: 30%;
  text-align: center;
  margin: 0 auto;
}

.splide-slide {
  display: block !important;
  width: 42%;
  text-align: center;
  margin: 0 auto;
}

.splide-slide img {
  width: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 350px;
}

.close-slider-div {
  position: absolute;
  left: 97%;
  top: 8%;
}

.close-slider-div span {
  font-size: 25px;
  color: gray;
  cursor: pointer;
}

@media (max-width: 1300px) and (max-height: 900px) {
  .lastFour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0px !important;
    padding: 0px !important;
  }
  .splide-slide {
    position: relative;
    display: block !important;
    width: 30%;
    text-align: center;
    margin: 0 auto;
  }
  .splide-slide img {
    width: 400px;
    height: 350px;
    margin: 0 auto;
  }
  .close-slider-div {
    position: absolute;
    left: 96%;
    top: 8%;
  }
  .close-slider-div span i {
    font-size: 30px;
  }
}

@media (max-width: 620px) and (max-height: 800px) {
  .lastFour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .parent-3.child-3 #special-overlay i {
    margin-right: 50px !important;
  }
  .splide-slide {
    position: relative;
    display: block !important;
    width: 17%;
    text-align: center;
    margin: 0 auto;
  }
  .splide-slide img {
    min-width: 250px;
    min-height: 300px;
    margin: 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .close-slider-div {
    position: absolute;
    left: 92%;
    top: 8%;
  }
}

@media (orientation: portrait) and (min-width: 280px) and (max-width: 390px) {
  .splide-slide {
    position: relative;
    display: block !important;
    width: 12%;
    text-align: center;
    margin: 0 auto;
  }
  .splide-slide img {
    min-width: 280px;
    min-height: 300px;
    margin: 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .close-slider-div {
    position: absolute;
    left: 90%;
    top: 8%;
  }
}

@media (orientation: portrait) and (max-width: 500px) {
  .splide-slide {
    position: relative;
    display: block !important;
    width: 12%;
    text-align: center;
    margin: 0 auto;
  }
  .splide-slide img {
    min-width: 250px;
    min-height: 300px;
    margin: 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .close-slider-div {
    position: absolute;
    left: 90%;
    top: 8%;
  }
}

@media (max-width: 800px) and (min-height: 1000px) {
  .lastFour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0px !important;
    padding: 0px !important;
  }
  .splide-slide {
    position: relative;
    display: block !important;
    width: 25%;
    text-align: center;
    margin: 0 auto;
  }
  .splide-slide img {
    min-width: 280px;
    min-height: 300px;
    margin: 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .close-slider-div {
    position: absolute;
    left: 95%;
    top: 12%;
  }
}

@media (min-width: 1000px) and (min-height: 1000px) {
  .lastFour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0px !important;
    padding: 0px !important;
  }
  .splide-slide {
    position: relative;
    display: block !important;
    width: 30%;
    text-align: center;
    margin: 0 auto;
  }
  .splide-slide img {
    width: 400px;
    height: 350px;
    margin: 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .close-slider-div {
    position: absolute;
    left: 96%;
    top: 8%;
  }
  .close-slider-div span i {
    font-size: 30px;
  }
}
/*# sourceMappingURL=photogallery.css.map */