@charset "UTF-8";
/* CSS Document */

.overlay {
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
overflow: hidden;
z-index: 999;
 backdrop-filter: blur(12px);
 pointer-events: none;
}
.overlay.active{
opacity: 1;
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
overflow: hidden;
z-index: 999;
 backdrop-filter: blur(12px);
pointer-events: all;
}
.overlay img {
max-width: 800px;
margin: auto;
  position: absolute;
  inset: 0px;
  width: 100%;
  height: auto;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */




/* Styles the close link, adds the slide down transition */

.lightbox-close {
position: absolute;
right: 20px;
top: 20px;
width:30px;
height:30px;
background-image: url("../images/cross.svg");
background-size: cover;
box-sizing: border-box;
text-decoration: none;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index: 30;
}

.overlay .bg {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

body.no-scroll {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}