@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  color: #fff;
  background: #007bff;
}
body{
  padding: 10px;
}

/*previous gallery design*/

/* 
.wrapper{
  margin: 50px auto 100px auto;
  max-width: 1903px; 
}
.wrapper nav{
  display: flex;
  justify-content: center;
}
.wrapper .items{
  display: flex;
  max-width: 720px;
  width: 100%;
  justify-content: space-evenly;
}
.items span{
  padding: 7px 25px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: #333D47;
  border-radius: 50px;
  
  border: 2px solid #333D47;
  transition: all 0.3s ease;
}
.items span.active,
.items span:hover{
  color: #fff;
  background: #333D47;
}

.gallery{
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.gallery .image{
  width: calc(100% / 4);
  padding: 7px;
}
.gallery .image span{
  display: flex;
  width: 100%;
  overflow: hidden;
}
.gallery .image img{
  width: 95%; 
  height: 26vh;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.gallery .image:hover img{
  transform: scale(1.1); cursor:pointer; cursor: hand;
}
.gallery .image.hide{
  display: none;
}
.gallery .image.show{
  animation: animate 0.4s ease;
}
@keyframes animate {
  0%{
    transform: scale(0.5);
  }
  100%{
    transform: scale(1);
  }
}

.preview-box{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  max-width: 700px;  
  max-height: 700px; 
  width: 100%; 
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  padding: 0 5px 5px 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  z-index: 1010;

}
.preview-box.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s ease;
}
.preview-box .details{
  padding: 13px 15px 13px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.details .title{
  display: flex;
  font-size: 18px;
  font-weight: 400;
}
.details .title p{
  font-weight: 500;
  margin-left: 5px;
}
.details .icon{
  color: #007bff;
  font-style: 22px;
  cursor: pointer;
}
.preview-box .image-box{
  width: 100%;
  display: flex;
}
.image-box img{
  width: 100%;
  border-radius: 0 0 3px 3px;
  
}
.shadow{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: none;
  background: rgba(0,0,0,0.4);
}
.shadow.show{
  display: block;
}

@media (max-width: 1000px) {
  .gallery .image{
    width: calc(100% / 3);
  }
}
@media (max-width: 800px) {
  .gallery .image{
    width: calc(100% / 2);
  }
}
@media (max-width: 700px) {
  .wrapper nav .items{
    max-width: 600px;
  }
  nav .items span{
    padding: 7px 15px;
  }
}
@media (max-width: 600px) {
  .wrapper{
    margin: 30px auto;
  }
  .wrapper nav .items{
    flex-wrap: wrap;
    justify-content: center;
  }
  nav .items span{
    margin: 5px;
  }
  .gallery .image{
    width: 100%;
  }
}
*/

/*************************************
     Gallary  page css Start   
 **************************************/

 .wrapper{
  margin: 50px auto 100px auto;
  max-width: 1903px; 
}

/* Start gallery area */
.singleAlbum {
  overflow: hidden;
  margin-bottom: 42px;
}

.albumThumb {
  position: relative;
  text-align: center;
  background-image: url(../imgFrame.png);
  background-repeat: no-repeat;
  background-size: 100%; 
  padding-bottom: 64px;

}
/* my new */
.image-div
{
  width: 312px;
  height: 202px;
  margin: 28px 0px 5px -14px;
}
/*new */
.albumThumb img {
  height:100%;
  width:100%;
}
/*
.albumThumb img {
  width: 317px;
  height: 205px;
  margin: 28px 0px 10px -14px;
}*/

.albumTitle {
  text-align: center;
  font-family: "Dosis";
  font-weight: 600;
}

.albumThumb img:hover {
  transform: scale(0.9);
  transition: 0.3s ease all;
}

.albumTitle a:hover {
  color: #349595;
  transition: 0.3s;
}
.albumDetails h2 {
	text-align: center;
	font-family: Dosis;
	font-weight: 600;
	color: #349595;
}

#gallery {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;

  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

@media (max-width:1200px) {
  #gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}

@media (max-width:800px) {
  #gallery {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}

@media (max-width:600px) {
  #gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

.gallery-category
{
  padding:20px 5px 20px 5px;
  background: #F5F5DC;
}

#gallery img,
#gallery video {
  width: 100%;
  height: auto;
  margin: 4% auto;
  box-shadow: -3px 5px 15px #000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.modal-img,
.model-vid {
  width: 100%;
  height: auto;
}

.modal-body {
  padding: 0px;
}

/* End gallery content */

.section_title {
  padding-bottom: 25px;
  position: relative;
}

.section_title img {
  height: 16px;
  width: auto;
  position: relative;
}

.section_title::before {
  background: #333333 none repeat scroll 0 0;
  bottom: 33px;
  content: "";
  height: 2px;
  left: 675px;
  position: absolute;
  /* transform: translateX(-50%); */
  width: 38px;
}

.section_title::after {
  background: #333333 none repeat scroll 0 0;
  bottom: 33px;
  content: "";
  height: 2px;
  right: 677px;
  position: absolute;
  /* transform: translateX(-50%); */
  width: 38px;
}

/*
.section_title::after {
  content: "\f19d";
  font-family: fontawesome;
  bottom: 0px;
  height: 19px;
  position: absolute;
  transform: translateX(-50%);
  background: #F5F5DC;
  font-size: 20px;
  width: 36px;
  color: #333333;
}*/
.section_title h2.title {
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  font-weight: 800;
  text-transform: uppercase;
}

.section_title p {
  color: #888888;
  font-family: 'Dosis';
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0px;
  margin-top: 0;
  text-transform: capitalize;
}

.gallery_page {
  /*background: #f4dcaa;*/
}

.gallery_menu {
  display: flex;
  justify-content: center;
}

.gallery_menu li {
  padding: 5px 0px;
  border-bottom: 1px solid #890013ed;
  border-top: 1px solid #890013ed;
  transition: all 0.4s;
}

.gallery_menu li+li {
  margin: 0px 10px;
}

.gallery_menu li a {
  padding: 7px 14px;
  color: #222222;
  font-size: 15px;
  font-family: 'Dosis';
  font-weight: 600;
}

.gallery_menu li:hover {
  background: #890013ed;
  color: #ffffff;
}

.gallery_menu li:hover a {
  color: #ffffff;
}

.gallery_menu li.active {
  background: #890013ed;
}

.gallery_menu li.active a {
  color: #ffffff;
}


/*Home page gallery button css*/
.load_more {
  text-align: center;
  padding: 35px 0px 10px 0px;
}

.load_more button {
  padding: 5px 19px 5px 25px;
  border: none;
  background: #890013ed;
  font-family: 'DOSIS';
  font-size: 19px;
  font-weight: 700;
  border-radius: 3px;
}

.load_more button a {
  color: #fff;
}

.load_more button a i {
  padding: 6px;
  font-size: 17px;
}

.load_more button:hover {
  background: #135252;
  transition: 0.35s;
}

.load_more button:hover i {
  transition: 0.3s;
  rotate: 180deg;
}

/*Home page gallery button css*/



/*************************************
     Gallary  page css end   
 **************************************/

@media (min-width: 1400px) {
  /*.albumThumb img {
      width: 314px;
      height: 206px;
      margin: 26px 1px 5px -13px;
  }*/
}
/* Normal desktop :992px. */

@media (min-width: 1170px) and (max-width: 1400px) {  
 /* .albumThumb img {
    width: 314px;
    height: 206px;
    margin: 26px 1px 5px -13px;
  } */
}

@media (min-width: 992px) and (max-width: 1169px) { 
.image-div {
  width: 297px;
  height: 192px;
  margin: 28px 1px 5px -12px;
}
 /* .albumThumb img {
    width: 307px;
    height: 200px;
    margin: 26px 1px 5px -14px;
  } */
}

@media (min-width: 850px) and (max-width: 991px) {
  .image-div {
    width: 361px;
    height: 228px;
    margin: 44px 1px 5px -16px;
  }
  /*.albumThumb img {
    width: 314px;
    height: 206px;
    margin: 26px 1px 5px -14px;
  }*/

}
@media (min-width: 768px) and (max-width: 850px) {
  .image-div {
    width: 314px;
    height: 205px;
    margin: 28px 1px 5px -13px;
  }
  /*.albumThumb img {
    width: 314px;
    height: 206px;
    margin: 26px 1px 5px -14px;
  }*/

}

@media only screen and (min-width: 600px) and (max-width: 767px) {

  .image-div {
    width: 520px;
    height: 343px;
    margin: 52px 1px 5px -27px;
  }
  /* .albumThumb img {
    width: 314px;
    height: 206px;
    margin: 26px 1px 5px -14px;
  } */
  /*.albumThumb {
    width: 314px;
    height: 206px;
    margin: 26px 1px 5px -14px;
  }*/
}
@media only screen and (min-width: 480px) and (max-width: 600px) {

  .image-div {
    width: 417px;
    height: 267px;
    margin: 42px 1px 5px -18px;
  }
  /* .albumThumb img {
    width: 314px;
    height: 206px;
    margin: 26px 1px 5px -14px;
  } */
  /*.albumThumb {
    width: 314px;
    height: 206px;
    margin: 26px 1px 5px -14px;
  }*/
}

@media (max-width: 479px) { 
  .image-div {
    width: 315px;
    height: 204px;
    margin: 28px 0px 32px -16px;
  }
  /*.albumThumb img {
      width: 230px;
      height: 151px;
      margin: 19px 0px 10px -12px;
  }*/
  .albumThumb {
      padding-bottom: 15px;
  }
  .albumTitle {
      font-size: 16px;
  }
  .singleAlbum {
      margin-bottom: 25px;
  }
}


/* End gallery content */