/* Magnific Popup CSS */
.mfp-bg {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1042;
   overflow: hidden;
   position: fixed;
   background: #0b0b0b;
   opacity: .8;
}

.mfp-wrap {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1043;
   position: fixed;
   outline: none !important;
   -webkit-backface-visibility: hidden;
}

.mfp-container {
   padding: 10px 50px 0;
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   text-align: center;

   &::before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
   }
}

.mfp-content {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   text-align: left;
   z-index: 1045;
}

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
   width: 100%;
   cursor: auto;
}

.mfp-ajax-cur {
   cursor: progress;
}

.mfp-zoom {
   cursor: pointer;
   cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
   cursor: auto;
}

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
   user-select: none;
}

.mfp-loading.mfp-figure {
   display: none;
}

.mfp-hide {
   display: none !important;
}

.mfp-preloader {
   color: #ccc;
   position: absolute;
   top: 50%;
   width: auto;
   text-align: center;
   margin-top: -.8em;
   left: 8px;
   right: 8px;
   z-index: 1044;

   .mfp-preloader a {
      color: #ccc;

      &:hover {
         color: white;
      }
   }
}

.mfp-s-ready .mfp-preloader {
   display: none;
}

.mfp-s-error .mfp-content {
   display: none;
}

button.mfp-close,
button.mfp-arrow {
   -webkit-appearance: none;
   background: transparent;
   border: 0;
   box-shadow: none;
   cursor: pointer;
   display: block;
   overflow: visible;
   outline: none;
   padding: 0;
   z-index: 1046;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

button.mfp-close {
   background: black;
   color: white;
   font-size: 28px;
   line-height: 45px;
   margin-left: 5px;
   position: absolute;
   right: 0;
   top: 0;
   width: 45px;
   height: 45px;

   &::after {
      @include fonticon;

      content: $lightbox_close;
      line-height: inherit;
   }

   &:hover,
   &:focus {
      opacity: .65;
   }
}

.mfp-counter {
   position: absolute;
   top: 0;
   right: 0;
   color: #ccc;
   font-size: 12px;
   line-height: 18px;
}

button.mfp-arrow {
   position: absolute;
   opacity: 1;
   top: 50%;
   margin: -55px 0 0;
   padding: 0;
   width: 90px;
   height: 110px;
   color: $white;
   font-size: 25px;

   &:hover,
   &:focus {
      opacity: .65;
      filter: alpha(opacity=65);
   }

   &::after {
      @include fonticon;
   }
}

.mfp-arrow-left {
   left: 0;

   &::after {
      content: $lightbox_left;
   }
}

.mfp-arrow-right {
   right: 0;

   &::after {
      content: $lightbox_right;
   }
}

/* iframe */
.mfp-iframe-holder {
   padding-top: 40px;
   padding-bottom: 40px;

   .mfp-content {
      line-height: 0;
      max-width: 600px;
      max-height: 80vh;
      width: 100%;
   }
}

.mfp-iframe-scaler {
   width: 100%;
   height: 0;
   overflow: hidden;
   padding-top: 100%;

   iframe {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 8px rgba(0, 0, 0, .6);
      background: black;
   }
}

/* inline html5 video */
.mfp-inline-holder {
   padding-top: 40px;
   padding-bottom: 40px;

   video {
      width: 100% !important;
      height: auto !important;
   }

   .mfp-content {
      max-height: calc(100vh - 80px);
      max-width: calc(100vh - 80px);
   }
}

/* Main image in popup */
.mfp-img {
   width: auto;
   max-width: 100%;
   height: auto;
   display: block;
   line-height: 0;
   box-sizing: border-box;
   padding-bottom: 40px;
   margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
   line-height: 0;

   &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 40px;
      bottom: 40px;
      display: block;
      right: 0;
      width: auto;
      height: auto;
      z-index: -1;
      box-shadow: 0 0 8px rgba(0, 0, 0, .6);
      background: #444;
   }

   small {
      color: #bdbdbd;
      display: block;
      font-size: 12px;
      line-height: 14px;
   }

   figure {
      margin: 0;
   }
}


/* title, counter, thumbnails */
.mfp-bottom-bar {
   margin-top: -36px;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   cursor: auto;
}

.mfp-title {
   text-align: left;
   line-height: 18px;
   color: #f3f3f3;
   word-wrap: break-word;
   padding-right: 36px;
}

.mfp-image-holder .mfp-content {
   max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
   cursor: pointer;
}

.mfp-thumbnails {

   .mfp-figure::after {
      bottom: 140px;
   }

   .mfp-pager {
      display: none;
      position: fixed;
      left: 0;
      width: 100%;
      overflow: hidden;
      height: auto;
      bottom: 0;
      max-height: 216px;
      background: black;
      z-index: 100;

      &::after {
         clear: both;
         display: block;
         content: '';
      }

      .dots {
         text-align: center;
         white-space: nowrap;
         overflow-x: auto;

         div {
            display: inline-block;
            vertical-align: middle;
            margin: 2px;
            opacity: .55;
            border: 2px solid $white;

            &.active {
               border-color: $brand-primary;
               opacity: 1;
            }

            &:hover {
               opacity: 1;
            }
         }

         button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: white;
            border: 0;
            height: 60px;
            overflow: hidden;
            vertical-align: middle;

            img {
               width: 60px;
            }

            @media screen and (min-width: 768px) {
               height: 100px;

               img {
                  width: 100px;
               }
            }
         }
      }
   }
}


@media screen and (min-width: 544px) {
   .mfp-thumbnails {
      .mfp-pager {
         display: block;
      }

      .mfp-img {
         padding-bottom: 140px;
      }

      .mfp-bottom-bar {
         margin-top: -141px;
      }

      .mfp-arrow {
         margin-top: -95px;
      }
   }
}

/* fade efekt */
.mfp-with-fade {
   .mfp-content,
   .mfp-arrow,
   &.mfp-bg {
      opacity: 0;
      -webkit-backface-visibility: hidden;
      @include transition(opacity .3s ease-out);
   }

   &.mfp-ready {
      .mfp-content,
      .mfp-arrow {
         opacity: 1;
      }

      &.mfp-bg {
         opacity: .85;
      }
   }


   &.mfp-removing {
      .mfp-content,
      .mfp-arrow,
      &.mfp-bg {
         opacity: 0;
      }
   }
}


@media all and (max-width: 900px) {
   .mfp-container {
      padding-left: 10px;
      padding-right: 10px;
   }

   button.mfp-arrow {
      background: black;
      font-size: 15px;
      margin-top: -25px;
      width: 40px;
      height: 50px;
   }

   .mfp-inline-holder {
      padding-top: 10px;
      padding-bottom: 10px;

      .mfp-content {
         max-height: calc(100vh - 20px);
         max-width: calc(100vh - 20px);
      }
   }

   @media screen and (min-width: 544px) {
      .mfp-thumbnails .mfp-arrow {
         margin-top: -95px;
      }
   }
}
