meta-lightbox/dist/css/app.css

.meta-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box; }
  .meta-lightbox-overlay.meta-lightbox-open {
    visibility: visible;
    opacity: 1; }

.meta-lightbox-wrap {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center; }

.meta-lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: row;
  color: #fff;
  width: 100%;
  height: 100%; }
  .meta-lightbox-content .meta-lightbox-ajax {
    color: #212529; }
  .meta-lightbox-content .meta-lightbox-zoom-wrapper {
    display: block;
    height: 100%;
    width: 100%; }
    .meta-lightbox-content .meta-lightbox-zoom-wrapper:after {
      color: #fff;
      font: normal normal normal 14px/1 FontAwesome;
      content: '\f00e';
      position: absolute;
      right: 1em;
      bottom: 1em;
      right: 1em;
      text-shadow: 1px 1px 1px #000; }
    .meta-lightbox-content .meta-lightbox-zoom-wrapper.no-zoom:after {
      display: none; }

.meta-lightbox-title-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  text-align: center; }

.meta-lightbox-nav {
  display: none; }

.meta-lightbox-prev {
  position: absolute;
  top: 50%;
  left: 0; }

.meta-lightbox-next {
  position: absolute;
  top: 50%;
  right: 0; }

.meta-lightbox-close {
  position: absolute;
  top: 2%;
  right: 2%;
  line-height: 1em; }

.meta-lightbox-image {
  text-align: center; }
  .meta-lightbox-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    vertical-align: middle; }

.meta-lightbox-content iframe {
  width: 100%;
  height: 100%; }

.meta-lightbox-inline,
.meta-lightbox-ajax {
  max-height: 100%;
  overflow: auto; }

.meta-lightbox-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #fff;
  text-shadow: 0 1px 1px #000; }
  .meta-lightbox-error .alert {
    margin: 0;
    text-shadow: none; }

.meta-lightbox-error p {
  display: table-cell;
  vertical-align: middle; }

/* Effects
 **********************************************/
.meta-lightbox-notouch .meta-lightbox-effect-fade,
.meta-lightbox-notouch .meta-lightbox-effect-fadeScale,
.meta-lightbox-notouch .meta-lightbox-effect-slideLeft,
.meta-lightbox-notouch .meta-lightbox-effect-slideRight,
.meta-lightbox-notouch .meta-lightbox-effect-slideUp,
.meta-lightbox-notouch .meta-lightbox-effect-slideDown,
.meta-lightbox-notouch .meta-lightbox-effect-fall {
  transition: all 0.2s ease-in-out; }

/* fadeScale */
.meta-lightbox-effect-fadeScale .meta-lightbox-wrap {
  transition: all 0.3s;
  transform: scale(0.7); }

.meta-lightbox-effect-fadeScale.meta-lightbox-open .meta-lightbox-wrap {
  transform: scale(1); }

/* slideLeft / slideRight / slideUp / slideDown */
.meta-lightbox-effect-slideLeft .meta-lightbox-wrap,
.meta-lightbox-effect-slideRight .meta-lightbox-wrap,
.meta-lightbox-effect-slideUp .meta-lightbox-wrap,
.meta-lightbox-effect-slideDown .meta-lightbox-wrap {
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); }

.meta-lightbox-effect-slideLeft .meta-lightbox-wrap {
  transform: translateX(-10%); }

.meta-lightbox-effect-slideRight .meta-lightbox-wrap {
  transform: translateX(10%); }

.meta-lightbox-effect-slideLeft.meta-lightbox-open .meta-lightbox-wrap,
.meta-lightbox-effect-slideRight.meta-lightbox-open .meta-lightbox-wrap {
  transform: translateX(0); }

.meta-lightbox-effect-slideDown .meta-lightbox-wrap {
  transform: translateY(-10%); }

.meta-lightbox-effect-slideUp .meta-lightbox-wrap {
  transform: translateY(10%); }

.meta-lightbox-effect-slideUp.meta-lightbox-open .meta-lightbox-wrap,
.meta-lightbox-effect-slideDown.meta-lightbox-open .meta-lightbox-wrap {
  transform: translateY(0); }

/* fall */
.meta-lightbox-body-effect-fall .meta-lightbox-effect-fall {
  perspective: 1000px; }

.meta-lightbox-effect-fall .meta-lightbox-wrap {
  transition: all 0.3s ease-out;
  transform: translateZ(300px); }

.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap {
  transform: translateZ(0); }

.meta-lightbox-theme-default.meta-lightbox-overlay {
  background: #666;
  background: rgba(0, 0, 0, 0.6); }

.meta-lightbox-theme-default .meta-lightbox-nav {
  top: 10%;
  width: 20%;
  height: 80%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  opacity: 0.5;
  color: #fff;
  font-size: 3em;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000; }
  @media (min-width: 576px) {
    .meta-lightbox-theme-default .meta-lightbox-nav {
      width: 8%; } }
  .meta-lightbox-theme-default .meta-lightbox-nav .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1em;
    margin-left: -0.2em; }
  .meta-lightbox-theme-default .meta-lightbox-nav:hover {
    color: #007bff;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5); }

.meta-lightbox-theme-default .meta-lightbox-close {
  display: block;
  opacity: 0.5;
  color: #fff;
  text-decoration: none;
  font-size: 2em;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em; }
  .meta-lightbox-theme-default .meta-lightbox-close:focus {
    color: #007bff;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5); }

.meta-lightbox-theme-default .meta-lightbox-title {
  background: #000;
  color: #fff;
  padding: 7px 15px; }

.meta-lightbox-theme-default .meta-lightbox-ajax,
.meta-lightbox-theme-default .meta-lightbox-inline {
  color: #000;
  background: #fff;
  padding: 2em;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6); }

@media (max-width: 576px) {
  .meta-lightbox-wrap {
    top: 5px !important;
    bottom: 5px;
    left: 5px;
    right: 5px; }
  .meta-lightbox-theme-default .meta-lightbox-nav {
    height: 100%;
    opacity: 1;
    font-size: 2em; }
    .meta-lightbox-theme-default .meta-lightbox-nav .fa {
      margin-left: -0.4em; }
  .meta-lightbox-theme-default .meta-lightbox-close {
    opacity: 1; } }