/* =========================================
GALLERY CONTAINER
========================================= */

.fd-gallery{

  opacity:0;
  visibility:hidden;

  transition:opacity .5s ease;

  max-width:1120px;

  margin:0 auto;

  padding:70px 34px 100px;

  box-sizing:border-box;

}

/* =========================================
GALLERY ITEMS
========================================= */

.fd-item{

  width:calc(33.333% - 18px);

  margin-bottom:18px;

  position:relative;

  overflow:hidden;

  cursor:pointer;

  background:#111827;

  box-shadow:0 15px 40px rgba(0,0,0,.12);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s cubic-bezier(.2,.8,.2,1),
    opacity .8s cubic-bezier(.2,.8,.2,1);

  opacity:0;
  transform:translateY(40px);

}

/* =========================================
VISIBLE STATE
========================================= */

.fd-item.visible{

  opacity:1;
  transform:translateY(0);

}

/* =========================================
HOVER EFFECT
========================================= */

.fd-item:hover{

  transform:translateY(-8px);

  box-shadow:0 25px 70px rgba(0,0,0,.18);

}

/* =========================================
MEDIA
========================================= */

.fd-item img,
.fd-item video{

  width:100%;
  display:block;

}

/* =========================================
LIGHTBOX
========================================= */

.fd-lightbox{

  position:fixed;
  inset:0;

  display:none;

  z-index:999999;

}

.fd-lightbox.active{

  display:block;

}

/* =========================================
BACKGROUND OVERLAY
========================================= */

.fd-bg{

  position:absolute;
  inset:0;

  background:rgba(0,0,0,.94);

  backdrop-filter:blur(8px);

}

/* =========================================
LIGHTBOX INNER
========================================= */

.fd-lightbox-inner{

  position:absolute;
  inset:0;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:40px;

  pointer-events:none;

}

/* =========================================
LIGHTBOX MEDIA
========================================= */

.fd-lightbox-inner img,
.fd-lightbox-inner video{

  max-width:92vw;
  max-height:88vh;

  pointer-events:auto;

}

/* =========================================
LIGHTBOX BUTTONS
========================================= */

.fd-close,
.fd-prev,
.fd-next{

  position:absolute;

  z-index:5;

  width:58px;
  height:58px;

  border:none;

  background:rgba(255,255,255,.14);

  backdrop-filter:blur(12px);

  color:#fff;

  font-size:32px;

  cursor:pointer;

  transition:
    transform .25s ease,
    background .25s ease;

}

.fd-close:hover,
.fd-prev:hover,
.fd-next:hover{

  transform:scale(1.08);

  background:rgba(255,255,255,.24);

}

/* =========================================
BUTTON POSITIONS
========================================= */

.fd-close{

  top:24px;
  right:24px;

}

.fd-prev{

  left:24px;
  top:50%;

  transform:translateY(-50%);

}

.fd-next{

  right:24px;
  top:50%;

  transform:translateY(-50%);

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px){

  .fd-item{

    width:calc(50% - 12px);

  }

}

@media(max-width:768px){

  .fd-gallery{

    padding:14px 14px 70px;

  }

  .fd-item{

    width:100% !important;

    margin-bottom:14px;

  }

  .fd-lightbox-inner{

    padding:12px;

  }

  .fd-lightbox-inner img,
  .fd-lightbox-inner video{

    max-width:100%;
    max-height:82vh;

    object-fit:contain;

  }

  .fd-close,
  .fd-prev,
  .fd-next{

    width:44px;
    height:44px;

    font-size:22px;

  }

  .fd-prev{

    left:8px;

  }

  .fd-next{

    right:8px;

  }

  .fd-close{

    top:8px;
    right:8px;

  }

}

/* =========================================
LIGHTBOX SWIPE ANIMATION
========================================= */

.fd-lightbox-inner img,
.fd-lightbox-inner video{

  animation:fdFadeMedia .22s ease;

}

@keyframes fdFadeMedia{

  from{

    opacity:.82;
    transform:scale(.985);

  }

  to{

    opacity:1;
    transform:scale(1);

  }

}