.polaroid {
  background: #fff;
  text-align: center;
  padding: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.2);
}
.caption {
  font-size: 14px;
  text-align: center;
  line-height: 2em;
}
.item {
  display: inline-block;
  margin-top: 2rem;
  filter: grayscale(100%);
}
.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) {
  transform: scale(0.8, 0.8) rotate(5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
  transform: rotate(6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+2) {
  transform: scale(0.8, 0.8) rotate(-5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
  transform: rotate(-6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+4) {
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
  transform: rotate(4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:nth-of-type(4n+3) {
  transform: scale(0.8, 0.8) rotate(-3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
  transform: rotate(-4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:hover {
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}
.item:hover .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 90%;
  bottom: 0%;
  right: 5%;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
  transition: all 0.35s;
}
.polaroid img {
    max-width: 230px;
}
#gallery .container {
    /*background-color: #fffff2b8; */
    /* background-image: repeating-radial-gradient(circle, 
 #E4D4BB, #E7DAC6 50%, #E7DAC6 100%
 ); */
    /* background-size: 10px 10px; */
}
.mobileGalleryWrapper{
  display: none;
}
@media only screen and (max-width: 1024px){
  .mobileGalleryWrapper {
      display: inline;
      min-height: 500px;
      float: left;
      margin: 0 auto;
      width: 100%;
      margin-top:50px;
  }

  ul.photostack.js-photostack {
      margin: 0 auto;
      top: 15% !important;
  }
  .largeScreenGallery{
    display: none;
  }

}

@media only screen and (min-width: 1024px){
  
.item:hover {
    transform: scale(1.5, 1.5) rotate(0deg) !important;
}

  .rowOfThree {
      position: relative;
      /* bottom: 0px; */
  }
  .galleryWrapper {
      position: relative;
      min-height: 600px;
  }
  .row1, .row2, .row3, .row4 {
      position: absolute;
    
  }

  .rowOfThree.row1 {
      top: 0px;
  }
  .rowOfThree.row2 {
   top: 128px;
    z-index: 10;
  }
  .rowOfThree.row3 {
      bottom: 50px;
  }

  .rowOfThree.row4 {

  }
  .item{
    position: relative;
  }
  .item:hover {
      z-index: 20 !important;
  }

  .item:nth-of-type(4n+1) {
      left: 16%;
  }
  .item:nth-of-type(4n+2){
   left: 10%;
  }

  .item:nth-of-type(4n+3){
   
  }
  .item:nth-of-type(4n+4) {
      right: 10%;
  }
  .row3 .item:nth-of-type(4n+2) {
      top: 0px;
  }
  .row3 .item:nth-of-type(4n+3) {
      top: 0px;
  }
    .row3 .item:nth-of-type(4n+2) {
        transform: scale(0.8, 0.8) rotate(-12deg);
    }
    .row3 .item:nth-of-type(4n+3) {
        transform: scale(0.8, 0.8) rotate(10deg);
    }
    .row2 .item:nth-of-type(4n+2) {
        transform: scale(0.8, 0.8) rotate(-7deg);
    }
    .row2 .item:nth-of-type(4n+3) {
        transform: scale(0.8, 0.8) rotate(11deg);
    }    
    
    .row1 .item:nth-of-type(4n+2) {
        transform: scale(0.8, 0.8) rotate(-2deg);
    }
    .row1 .item:nth-of-type(4n+3) {
        transform: scale(0.8, 0.8) rotate(-11deg);
    }      
    .row1 .item:nth-of-type(4n+1) {
        transform: scale(0.8, 0.8) rotate(-17deg);
    }
     .row2 .item:nth-of-type(4n+1) {
        transform: scale(0.8, 0.8) rotate(14deg);
    } 
     .row2 .item:nth-of-type(4n+3) {
        transform: scale(0.8, 0.8) rotate(19deg);
    }    
     .row2 .item:nth-of-type(4n+4) {
        transform: scale(0.8, 0.8) rotate(-11deg);
    }     
    
    
}