.element {
  margin: 0 auto 30px auto; width: 80%;
}
.element img {
  display: inline-block; width: 100%; height: auto;
}
.js-modal {
  display: none; position: fixed; z-index: 1000000000; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}
.modal-content {
  position: relative; background-color: transparent; margin: auto; padding: 0; width: 50%; max-width: 800px;
}
.modal-close {
  color: #fff; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold;
}
.modal-close:hover, .modal-close:focus {
  color: #999; text-decoration: none; cursor: pointer;
}
/**
  * This breaks the slideshow completely.

.slides {
  display: none;
}
.slides img {
  display: block; margin: 0 auto; height: auto; max-height: 680px; max-width: 80%; padding: 20px 0;
}
*/
.prev, .next {
  cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: #fff; font-weight: bold; font-size: 20px; transition: 0.6s ease;
  border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none;
}
.next {
  right: 0; border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8); color: #fff;
}
.caption-container {
  text-align: center; background-color: transparent; padding: 2px 16px; color: #fff;
}
img.demo {
  opacity: 0.6;
}
.active, .demo:hover {
  opacity: 1;
}
img.hover-shadow {
  transition: 0.3s;
}
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Gallery Page Tweaks */
.bfm-gallery.js-gallery.flex-content {display:block;}
.bfm-gallery .element.image {width:19.2%; margin: 0 1% 1% 0; position:relative;overflow:hidden;float:left; line-height: 0px;}
.bfm-gallery .element.image:nth-of-type(5n+5) {margin-right:0;}
.bfm-gallery .element.image a.overlay {opacity:0; position: absolute; width: 100%; height: 100%; background: rgba(29,36,53,.85) url(../img/piczoom-icon.png) no-repeat center ; top: 0; left: 0; color: white; justify-content: center; align-items: center; font-family: "montserrat"; font-size:1.4em; transition: all 0.3s ease-in-out;}
.bfm-gallery .element.image:hover a.overlay {opacity: 1;}


@media only  (max-width:1024px) {
  .bfm-gallery .element.image:nth-of-type(5n+5) {margin-right:2%;}
  .bfm-gallery .element.image {width:23.5%; margin: 0 2% 2% 0; }
  .bfm-gallery .element.image:nth-of-type(4n+4) {margin-right:0;}
}


@media only  (max-width:768px) {
  .bfm-gallery .element.image:nth-of-type(4n+4) {margin-right:2%;}
  .bfm-gallery .element.image {width:32%; margin: 0 2% 2% 0; }
  .bfm-gallery .element.image:nth-of-type(3n+3) {margin-right:0;}
}

@media only  (max-width:480px) {
  .bfm-gallery .element.image:nth-of-type(5n+5) {margin-right:4%;}
  .bfm-gallery .element.image:nth-of-type(3n+3) {margin-right:4%;}
  .bfm-gallery .element.image {width:48%; margin: 0 4% 3% 0; }
  .bfm-gallery .element.image:nth-of-type(2n+2) {margin-right:0;}
}


@media only  (min-width:480px) {
/*  .element {
    margin: 0 0 30px; width: calc(100% / 2 - 150px);
  }*/
}

@media only  (min-width:768px) {
/*  .element {
    margin: 0 0 30px; width: calc(100% / 4 + 150px);
  }*/
}

@media only  (min-width:980px) {
}

@media only  (min-width:1024px) {
}

@media only  (min-width:1200px) {
/*  .element {
    width: calc(100% / 3 - 150px);
  }*/
}

@media only  (min-width:1400px) {
}