/* Modal Pop-up Window */

.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;}

.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;}











/* Gallery Page Tweaks */

.workshop-gallery {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

.workshop-gallery .element.image {width:19.2%; margin: 0 1% 1% 0; position:relative; overflow:hidden; line-height: 0px; transition: all 0.3s; border-radius: 50%;}

.workshop-gallery .element.image:nth-of-type(5n+5) {margin-right:0;}

/*.workshop-gallery .element.image {width:23.5%; margin: 0 2% 2% 0; position:relative;overflow:hidden;float:left; line-height:0px; overflow:hidden; transition: all 0.3s;}

.workshop-gallery .element.image:nth-of-type(4n+4) {margin-right:0;}*/

.workshop-gallery .element.image a.overlay {opacity:0; position: absolute; width: 100%; height: 100%; background: rgba(237,28,36,.75); top: 0; left: 0; transition: all 0.8s;}

.workshop-gallery .element.image a.overlay:before {color: #ffffff; content: "\e91c"; font-family: "workshop"; font-size: calc(16pt + 4vw); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: all 0.3s;}

.workshop-gallery .element.image:hover a.overlay {opacity: 1;}

.workshop-gallery .element.image img {transition: all 0.3s;}

.workshop-gallery .element.image:hover img {transform: scale3d(1.1,1.1,1); -webkit-transform: scale3d(1.2,1.2,1);}







@media only screen and (max-width:1024px) {

  .workshop-gallery .element.image:nth-of-type(5n+5) {margin-right:2%;}

  .workshop-gallery .element.image {width:23.5%; margin: 0 2% 2% 0; }

  .workshop-gallery .element.image:nth-of-type(4n+4) {margin-right:0;}

}





@media only screen and (max-width:768px) {

  .workshop-gallery .element.image:nth-of-type(4n+4) {margin-right:2%;}

  .workshop-gallery .element.image {width:32%; margin: 0 2% 2% 0; }

  .workshop-gallery .element.image:nth-of-type(3n+3) {margin-right:0;}

}



@media only screen and (max-width:480px) {

  .workshop-gallery .element.image:nth-of-type(5n+5) {margin-right:4%;}

  .workshop-gallery .element.image:nth-of-type(3n+3) {margin-right:4%;}

  .workshop-gallery .element.image {width:48%; margin: 0 4% 3% 0; }

  .workshop-gallery .element.image:nth-of-type(2n+2) {margin-right:0;}

}





@media only screen and (min-width:480px) {

/*  .element {

    margin: 0 0 30px; width: calc(100% / 2 - 150px);

  }*/

}



@media only screen and (min-width:768px) {

/*  .element {

    margin: 0 0 30px; width: calc(100% / 4 + 150px);

  }*/

}



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

}



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

}



@media only screen and (min-width:1200px) {

/*  .element {

    width: calc(100% / 3 - 150px);

  }*/

}



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

}