#facebox { position: absolute; top: 0; left: 0; z-index: 201; text-align: left }
#facebox .popup { position:relative; margin-bottom : 160px }

  #facebox .fbox-container {
    width: auto; background: #fff; max-width : 100%;
    -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
    box-shadow:0 0 18px rgba(0,0,0,0.4);
  }

#facebox .content {
    display:table; width : auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/*
  SPECIFICALLY FOR IMAGE PREVIEW POPUPS:
  Facebox allows you to load custom CSS popups (by appending the target CSS class to .content), such as
  <a href="remote.html" rel="facebox[.bolder]">text</a>. Unfortunately, it does not
  support class names which use dashes,
  eg. <a href="remote.html" rel="facebox[.popup-image-preview]">text</a> will not work.
  Thus, I am using the camel case .popupImagePreview here.
*/
#facebox .popupImagePreview {
  width: 600px;
}
  @media screen and (max-width: 767px) {
    #facebox .popupImagePreview {
      width: 300px;
    }
  }
  /* Image in Image Preview Popups - similar to .img-responsive */
  .popupImagePreview img {
    max-width: 100%;
    width: 100%; /* IE fix for responsive image */
    height: auto;
  }

#facebox .content > p:first-child { margin-top:0 }
#facebox .content > p:last-child { margin-bottom:0 }

#facebox .close{  position:absolute; top: 8px; right : 8px }
#facebox .close img{ opacity: 1.0 }
#facebox .close:hover img{ opacity: 0.6 }
#facebox .loading { text-align: center }
#facebox .image { text-align: center; line-height : 0; /* Removes additional spacing below image */ }

#facebox img { border: 0; margin: 0 }
#facebox_overlay { position: fixed; top: 0px; left: 0px; height:100%; width:100% }
.facebox_hide { z-index:-100 }
.facebox_overlayBG { background-color: #fff; z-index: 200 }

@media screen and (max-width: 767px) {
  #facebox .popup { margin-bottom : 100px }
}