.to-lightbox{
    list-style: none;
    padding: 0 !important;
    margin:2em auto;
}
.to-lightbox > li{
    list-style: none;
    display: block;
    position: relative;
    width: 100%;
  max-width: 600px;
  padding: 0;
  overflow: hidden;
  margin:1em 0;
}


.to-lightbox >li::before{
    content:"";
    display: block;
    position: relative; 
    width: 100%;
    padding-bottom: 56.25%;
    background: rgba(0,0,0,0.5);
    z-index: 2;
    opacity: 0;
    transition: all 0.2s linear 0s;
  }
  
  .to-lightbox >li:hover::before{
    opacity: 1;
  }
  .to-lightbox >li::after{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='svg1' viewBox='0 0 60 60'%3E%3Cpath id='path1096' style='stroke-linejoin:round;stroke:%23ffffff;stroke-linecap:round;stroke-width:8.1225;fill:none' transform='matrix(1.0003 0 0 1.0003 .012290 -.00019884)' d='m24.656 4.6875c-11.018 0-19.937 8.9505-19.937 19.968-0.0002 11.019 8.919 19.969 19.937 19.969 4.525 0 8.682-1.585 12.032-4.125 9.225 13.436 15.699 16.29 17.906 14.156 2.263-2.209-1.221-8.512-13.906-18.187 2.451-3.315 3.937-7.376 3.937-11.813 0-11.018-8.95-19.968-19.969-19.968z' /%3E%3Cpath id='path1201' style='stroke-linejoin:round;fill-rule:evenodd;stroke:%23000000;stroke-linecap:round;stroke-width:3.2246;fill:%23ffffff' transform='matrix(.96911 0 0 .96911 .68733 .89552)' d='m31.914 32.619c12.338 21.099 21.052 25.471 23.73 22.881 2.772-2.705-1.893-11.073-22.11-24.534l-1.62 1.653z' /%3E%3Cpath id='path1202' style='stroke-linejoin:round;fill-rule:evenodd;stroke:%23000000;stroke-linecap:round;stroke-width:3.2246;fill:%23ffffff' transform='matrix(.96911 0 0 .96911 .68733 .89552)' d='m45.373 24.518c0 11.373-9.23 20.604-20.604 20.604-11.373 0-20.604-9.231-20.604-20.604 0.0004-11.374 9.231-20.604 20.604-20.604 11.374-0.0001 20.604 9.23 20.604 20.604z' /%3E%3Cpath id='path1203' style='stroke-linejoin:round;fill-rule:evenodd;stroke:%23000000;stroke-linecap:round;stroke-width:2.4992;fill:%23ffffff' transform='matrix(1.0003 0 0 1.0003 .012290 -.00019884)' d='m40.385 24.648c0 8.674-7.04 15.714-15.714 15.714s-15.713-7.04-15.713-15.714c-0.0003-8.674 7.039-15.713 15.713-15.713 8.674-0.0003 15.714 7.039 15.714 15.713z' /%3E%3Cpath id='path839' style='fill:%23000000' d='m21.983 21.948v-6.096c0-0.852 0.234-1.545 0.7-2.078 0.466-0.546 1.132-0.82 1.998-0.82s1.533 0.274 1.999 0.82c0.48 0.533 0.719 1.226 0.719 2.078v6.096h6.016c0.879 0 1.572 0.24 2.078 0.719 0.52 0.467 0.78 1.126 0.78 1.979 0 0.866-0.26 1.539-0.78 2.018-0.506 0.48-1.199 0.72-2.078 0.72h-6.016v6.075c0 0.866-0.239 1.566-0.719 2.099s-1.146 0.799-1.999 0.799c-0.852 0-1.519-0.266-1.998-0.799-0.466-0.533-0.7-1.233-0.7-2.099v-6.075h-6.015c-0.853 0-1.546-0.26-2.079-0.78-0.519-0.533-0.779-1.185-0.779-1.958 0-0.853 0.253-1.512 0.759-1.979 0.52-0.479 1.219-0.719 2.099-0.719h6.015z' /%3E%3C/svg%3E");
    position: absolute;
    z-index: 3;
    width: 30px;
    top:60%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s linear 0s;
    opacity: 0;
  }
  
  .to-lightbox >li:hover::after{
    top:50%;
    opacity: 1;
  }

  .to-lightbox > li img{
    flex-grow: 0 !important;
     display: block;
     position: absolute;
     width: 100%;
     top:0;
     bottom: 0;
     left: 0;
     right: 0;
     margin:auto;
  }

#modal-galleries {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000000;
    display: none;
}
#close-modal{
    position: absolute;
    top:20px;
    right: 20px;
    background: none;
    border:none;
    width: 30px;
    z-index: 2000002;
}
#modal-galleries.visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#modal-galleries .flexslider {
    display: none;
    width: 80%;
    height: 80vh;
    margin-top: 10vh;
    position: relative;
}
#modal-galleries .flexslider img{
    display: inline-block;
    width: auto;
    margin:auto;
    max-height: 100%;
}
#modal-galleries .flexslider.visible {
    display: block;
}

#modal-galleries .slides {
    list-style: none;
    padding: 0;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
}

#modal-galleries .slides.visible {
    opacity: 1;
}

#modal-galleries .slides>li > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 80vh;
}

#modal-galleries .flexslider {
    border: none;
    background: none;
}

#modal-galleries .flexslider ul,
#modal-galleries .flexslider ul li {
    list-style: none !important;
}

#modal-galleries .flex-control-paging li a {
    background: #777
}

#modal-galleries .flex-control-paging li a.flex-active {
    background: #ccc
}
.flex-direction-nav a::before {
	color: rgba(0,0,0, 0.8);
}
#modal-galleries .flex-direction-nav .flex-next{
    right: 0;
    opacity: 1
}

#modal-galleries .flex-direction-nav .flex-prev{
    left: 0;
    opacity: 1
}

.gallery-article {
	margin:2em 0;
}
.gallery-article > li{
  width: 100%;
  flex:1 0 100%;
  justify-content: center;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#main-content .gallery-article figure img{
  flex-grow: 0 !important;
  display: block;
  width: 100%;
  max-width: 300px !important;
  /*! width: auto; */
}
@media screen and (min-width:767px){

    .to-lightbox.columns-3 {
        display: flex;
        flex-wrap: wrap;
      }
      .to-lightbox.columns-3 > li{
        flex:0 0 32%;
        margin-right: 2%;
      }
      
      .to-lightbox.columns-3 > li:nth-child(3n){
        margin-right: 0;
      }

      /* .to-lightbox.columns-4 {
        display: flex;
        flex-wrap: wrap;
      }
      .to-lightbox.columns-4 > li{
        flex:0 0 24%;
        margin-right: 1.33%;
        margin-bottom: 1em;
        margin-top:0;
      }
      
      .to-lightbox.columns-4 > li:nth-child(4n){
        margin-right: 0;
      } */

      .to-lightbox.columns-4{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 10px;
        row-gap: 10px
      }
      
      .to-lightbox.columns-4 > li{
        margin: 0;
      }
    .flex-direction-nav a::before {
        color: rgba(255,255,255, 0.8);
    }
    #modal-galleries .flex-direction-nav .flex-next{
        right: -1%;
        opacity: 1
    }
    
    #modal-galleries .flex-direction-nav .flex-prev{
        left: -1%;
        opacity: 1
    }
}