/* =======================================================
 *
 *    Media boxes
 *    Version: 3.3
 *    By castlecode
 *
 *    Contact: http://codecanyon.net/user/castlecode
 *    Created: March 11, 2014
 *
 *    Copyright (c) 2013, castlecode. All rights reserved.
 *    Available only in http://codecanyon.net/
 *
 *    ---------------------------------
 *    CONTENTS
 *    ---------------------------------
 *
 *    (1) GRAPHIC STYLE (Play around in this section)
 *
 *      [1] MEDIA BOX CONTENT
 *      [2] LOAD MORE
 *      [3] FILTER BAR
 *      [4] SEARCH FILTER
 *      [5] DROP DOWN MENU
 *      [6] THUMBNAIL OVERLAY EFFECT
 *      [7] FANCYBOX
 *      [8] MAGNIFIC POPUP
 *      [9] SOCIAL FOR MAGNIFIC POPUP
 *
 *    (2) NEEDED STYLE (Don't play here)
 *
 *      [1] SETUP
 *      [2] MEDIA BOX THUMBNAIL
 *      [3] MEDIA BOX CONTENT
 *      [4] THUMBNAIL OVERLAY EFFECT
 *      [5] MAGNIFIC POPUP
 *
 * ======================================================= */

/*
//This is optional, but you need it for a full width gallery
  body{
    margin:0;
    min-height: 1000px;
    overflow-y: scroll;
  }
*/

/*
//This is for preventing that the content of your page shifts to the right when magnific popup is activated
  html {
    margin-right: 0 !important;
    overflow: visible !important;
}
*/

/* ********************************************************************
(1) GRAPHIC STYLE (Play around in this section)
********************************************************************* */

/* GLOBAL FONT */
.mfp-container, .media-box, .media-boxes-load-more-button, .media-boxes-filter, .media-boxes-drop-down-menu > li > a, .media-boxes-drop-down-header, .media-boxes-search {      /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; }

/* ====================================================================== *
    [1] MEDIA BOX CONTENT
 * ====================================================================== */
.media-box { font-size: 13px; }
.media-box iframe { display: block; margin: 0 !important; }
.media-box-container { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;    /*
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
         -o-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
        -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    */ }
  .media-box-content { padding: 20px; position: relative; background: white; color: rgb(51, 51, 51); line-height: 17px; }
  .thumbnail-overlay-animated { position: relative; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
  .thumbnail-overlay-animated[data-from="top"] { top: -20px; }
  .thumbnail-overlay-animated[data-from="bottom"] { top: 20px; }
  .thumbnail-overlay-animated[data-from="left"] { left: -20px; }
  .thumbnail-overlay-animated[data-from="right"] { left: 20px; }

  /* desktop */
  @media only screen and (min-width:768px) {
    .thumbnail-overlay:hover .thumbnail-overlay-animated { opacity: 1; left: 0; top: 0; }
  }

  /* mobile */
  @media only screen and (max-width:768px) {
    .media-box-image:hover .thumbnail-overlay-animated { opacity: 1; left: 0; top: 0; }
  }
  .thumbnail-overlay-button { display: inline-block; font-size: 13px; background: rgba(255, 255, 255, .3); color: #fff; padding: 10px 14px; margin: 3px 0; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; }
  .thumbnail-overlay-button:hover { background: rgba(255, 255, 255, .4); }
  .thumbnail-overlay-caption { display: inline-block; color: white; font-size: 11px; background: rgba(255, 255, 255, .2); padding: 4px 6px; margin: 3px 0; }
  .media-box-title { letter-spacing: 0px; line-height: 1; font-weight: 600; color: rgb(51, 51, 51); font-size: 18px; }
  .media-box-title small { font-size: 12px; display: block; margin-top: 5px; }
  .media-box-year { color: gray; font-size: 11px; margin-bottom: 3px; }
  .media-box-author { font-size: 11px; margin: 3px 0 0px 0 !important; }
  .media-box-categories { font-size: 11px; line-height: 15px; color: #e54e53; margin-top: 5px; }
  .media-box-categories span { color: #333333; font-weight: 600; }
  .media-box-date { font-size: 11px; line-height: 15px; color: #e54e53; margin-top: 5px; }
  .media-box-date span { color: #333333; font-weight: 600; }
  .media-box-big-icon { margin-bottom: 12px; }
  .media-box-big-icon .fa { font-size: 55px !important; color: white !important; -webkit-transform: scale(1) !important; -moz-transform: scale(1) !important; -ms-transform: scale(1) !important; -o-transform: scale(1) !important; transform: scale(1) !important; }
  .media-box-text { color: rgb(119, 119, 119); font-size: 14px; line-height: 26.6px; margin: 13px 0px 13px 0 !important; }
  .media-box-quote { padding: 30px; background: #e54e53; color: #fff; font-size: 14px; line-height: 28px; }
  .media-box-quote span { display: block; margin-top: 20px; font-size: 13px; }
  .media-box-subscribe { padding: 30px; background: #2C393F; color: #fff; font-size: 14px; line-height: 28px; }
  .media-box-subscribe p { color: #fff; }
  .media-box-subscribe input { border-radius: 0px; border: 0; margin-top: 10px; margin-bottom: 15px; }
  .media-box-subscribe .btn { border: 0; color: #fff; background: #86979F; border-radius: 2px; -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); min-width: 120px; font-size: 12px; padding: 12px; }
  .media-box-view-image { margin: 12px 0 0 0; }
  .media-box-more a, .media-box-view-image a { text-decoration: none !important; color: inherit; padding: 0; margin: 0; color: #e54e53; font-weight: 600; font-size: 11px; }
  .media-box-more a:hover, .media-box-view-image a:hover { color: #333333; }
  a.media-box-read-more-link { background: #e54e53; color: #fff; padding: 0 4px; }
  a.media-box-read-more-link:hover { background: #333333; text-decoration: none; }
  .media-box-footer { background: #e4e4e4; padding: 20px; }
  .media-box-social-buttons { text-align: center; }
  .media-box-social-buttons i { font-size: 15px; color: #C7C7C7; margin: 0 7px; -webkit-transition: color .1s; -moz-transition: color .1s; -o-transition: color .1s; -ms-transition: color .1s; transition: color .1s; }
  .media-box-social-buttons i:hover { color: #333; }
  .media-box-play-button { background: rgba(28, 186, 200, 1) !important; color: #fff !important; padding-left: 3px; }
  .media-box-sound-button { background: rgba(28, 186, 200, 1) !important; color: #fff !important; padding-left: 1px; }
  .media-box-logo { text-align: center; font-size: 80px; padding: 30px 0; color: rgba(255, 255, 255, .7); -webkit-transition: color .1s; -moz-transition: color .1s; -o-transition: color .1s; -ms-transition: color .1s; transition: color .1s; }
  .media-box-logo:hover { color: rgba(255, 255, 255, 1); }
  .media-box-price { font-size: 16px; color: #e54e53; margin-top: 10px; }
  .media-box-price del { font-size: 12px; color: #A4A4A4; }
  .media-box-sale { color: #fff; background: #e54e53; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; text-align: center; position: absolute; font-weight: 100; font-size: 12px; top: -10px; right: 10px; z-index: 99; }

  /* ====================================================================== *
      [2] LOAD MORE
   * ====================================================================== */
  .media-boxes-load-more-button { cursor: pointer; width: 150px; text-align: center; color: white; background-color: #333333; font-size: 14px !important; height: 15px; padding: 10px 15px 10px 15px; margin: 0px auto; line-height: 15px; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; }
  .media-boxes-no-more-entries { filter: alpha(opacity=20); opacity: 0.2; }

  /* ====================================================================== *
      [3] FILTER BAR
   * ====================================================================== */
  .filters-container { margin-bottom: 15px; }
  .filters-container:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; }
  .media-boxes-filter { font-size: 0px; list-style: none; margin: 0; padding: 0px; text-align: left; display: inline-block; }
  .media-boxes-filter>li { display: inline-block; margin: 0 5px 5px 0; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ }
  .media-boxes-filter>li:last-child { margin-right: 0 !important; }
  .media-boxes-filter>li a { -webkit-box-sizing: content-box !important; /* Safari/Chrome, other WebKit */ -moz-box-sizing: content-box !important;    /* Firefox, other Gecko */ box-sizing: content-box !important;         /* Opera/IE 8+ */ vertical-align: top; border: 1px solid #EBEBEB; display: block; cursor: pointer; color: #444444; font-size: 13px; height: 34px; line-height: 33px; text-decoration: none; margin: 0px; padding: 0 15px; background-color: #fff; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-transition: background-color .1s; -moz-transition: background-color .1s; -o-transition: background-color .1s; -ms-transition: background-color .1s; transition: background-color .1s; }
  .media-boxes-filter>li a:hover { text-decoration: none; background: #333333; color: #fff; }
  .media-boxes-filter>li a.selected { background: #e54e53 !important; color: #fff !important; -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important; -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important; }

  /* ====================================================================== *
      [4] SEARCH FILTER
   * ====================================================================== */
  .media-boxes-search { margin-bottom: 5px; display: inline-block; border: 1px solid #EBEBEB; }
  .media-boxes-search .media-boxes-icon, .media-boxes-search .media-boxes-clear { display: inline-block; font-size: 13px; height: 34px; line-height: 34px; width: 34px; text-align: center; background: #fff; margin-right: -4px; color: #444444; }
  .media-boxes-search .media-boxes-clear { margin-right: -1px; cursor: pointer; }
  .media-boxes-search input[type=text] { vertical-align: top; height: 34px; line-height: 34px; min-width: 150px; max-width: 170px; margin: 0 !important; margin-right: -4px !important; padding: 0 10px 0 0 !important; font-size: 13px; box-shadow: none !important; border: none !important; background-color: #fff; color: #444444; outline: 0; -webkit-appearance: none; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }
  .media-boxes-search input::-webkit-input-placeholder { /* Chrome */
  color: #444444; font-weight: 300; }
  .media-boxes-search input:-ms-input-placeholder { /* IE 10+ */
  color: #444444; font-weight: 300; }
  .media-boxes-search input::-moz-placeholder { /* Firefox 19+ */
  color: #444444; font-weight: 300; }
  .media-boxes-search input:-moz-placeholder { /* Firefox 4 - 18 */
  color: #444444; font-weight: 300; }

  /* ====================================================================== *
      [5] DROP DOWN MENU
   * ====================================================================== */
  .media-boxes-drop-down, .media-boxes-drop-down-header, .media-boxes-drop-down-menu, .media-boxes-drop-down-menu > li > a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
  .media-boxes-drop-down { width: 150px; margin: 0; margin-bottom: 5px; position: relative; display: inline-block; border: 1px solid #EBEBEB; }
  .media-boxes-drop-down-header { background-color: white; cursor: pointer; }
  .media-boxes-drop-down-header .fa { float: right; height: 34px; line-height: 31px; }
  .media-boxes-drop-down-menu { margin: 0 !important; padding: 0 !important; z-index: 99999; position: absolute; width: 100%; display: none; border: 0 !important; -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1); box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1); }
  .media-boxes-drop-down-menu > li { list-style: none; margin: 0 !important; padding: 0 !important; }
  .media-boxes-drop-down-header { font-size: 12px; margin: 0 !important; display: block; height: 34px; line-height: 34px; padding: 0 15px !important; text-decoration: none; background-color: #fff; color: #444444; }
  .media-boxes-drop-down-menu > li > a { font-size: 12px; display: block; margin: 0 !important; padding: 10px 15px !important; color: #444444; background: #fff; height: auto !important; line-height: normal !important; border-top: 1px solid rgba(175, 175, 175, .16) !important; text-decoration: none; }
  .media-boxes-drop-down-menu > li > a:hover { background: #e54e53 !important; color: #fff !important; }
  .media-boxes-drop-down-menu > li.selected > a, .media-boxes-drop-down-menu > li > a.selected {          /* */ }
  .media-boxes-sort { display: inline-block; vertical-align: top; }
  .media-boxes-sort .media-boxes-drop-down-header .fa { display: none; }
  .media-boxes-sort-order { cursor: pointer; vertical-align: top; display: inline-block; width: 34px; height: 34px; line-height: 33px; color: #444444; background: #fff; text-align: center; border: 1px solid #EBEBEB; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; }
  .media-boxes-sort-order>span { display: none; }
  .media-boxes-sort-order>span.selected { display: inline-block; }

  /* ====================================================================== *
      [6] THUMBNAIL OVERLAY EFFECT
   * ====================================================================== */
  .thumbnail-overlay { background: black; /* fallback for IE8 */ background-color: rgba(229, 78, 83, .90); color: #333333; }

  /* The style for centering the caption (vertically and horizontally) */
  .thumbnail-overlay>div.aligment { height: 100%; width: 100%; display: table !important; }
  .thumbnail-overlay>div.aligment>div.aligment { padding: 10px; display: table-cell !important; vertical-align: middle; /* FOR VERTICAL ALIGN */ text-align: center; /* FOR HORIZONTAL ALIGN */ }
  .overlay-title { font-weight: 500; font-size: 16px; display: block; line-height: 16px; margin-bottom: 5px; }
  .overlay-description { font-size: 12px; display: block; line-height: 16px; }
  .thumbnail-overlay i.fa, .media-box-play-button, .media-box-sound-button { background: #fff; color: #e54e53; text-align: center; display: inline-block; margin: 3px; height: 50px; width: 50px; line-height: 50px; font-size: 15px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ -webkit-border-radius: 50%; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -moz-border-radius: 50%; /* Firefox 1-3.6 */ border-radius: 50%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ -webkit-transition: all .05s linear; -moz-transition: all .05s linear; -o-transition: all .05s linear; -ms-transition: all .05s linear; transition: all .05s linear; }
  .media-box-play-button, .media-box-sound-button { font-size: 15px; height: 50px; width: 50px; line-height: 50px; }
  .thumbnail-overlay i.fa:hover { background: rgba(255, 255, 255, .3); color: #fff; cursor: pointer; }
  .mb-play-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('icons/blank.gif'); /* IE hack, since IE doesn't recognize the hover state in places where there's nothing */ }
  .mb-play-container .fa { border: 2px solid #fff; padding: 14px 15px 13px 17px; font-size: 19px; color: #fff; text-align: center; width: 50px; height: 50px; -webkit-border-radius: 50%; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -moz-border-radius: 50%; /* Firefox 1-3.6 */ border-radius: 50%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; -webkit-transition: background-color .2s, -webkit-transform .2s; -moz-transition: background-color .2s, -moz-transform .2s; -o-transition: background-color .2s, -o-transform .2s; -ms-transition: background-color .2s, -ms-transform .2s; transition: background-color .2s, transform .2s; }
  .mb-play-container:hover .fa { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

  /* ====================================================================== *
      [7] FANCYBOX
   * ====================================================================== */
  .fancybox-caption { padding: 0 !important; height: 44px !important; text-align: center; border-top: 0; display: flex; align-items: center; /* Vertical center alignment */ justify-content: center; /* Horizontal center alignment */ }
  .fancybox-thumbs { background: rgba(255, 255, 255, .1); }

  /* ====================================================================== *
      [8] MAGNIFIC POPUP
   * ====================================================================== */
  .mb-open-popup { cursor: pointer; }
  .mfp-arrow.mfp-arrow:before, .mfp-arrow.mfp-arrow:after { border: none !important; }
  .mfp-arrow.mfp-arrow-left { background: url('icons/icon-arrow-left.png') 50% 50% no-repeat !important; }
  .mfp-arrow.mfp-arrow-right { background: url('icons/icon-arrow-right.png') 50% 50% no-repeat !important; }
  .mfp-close { background: url('icons/icon-close.png') right no-repeat !important; }

  /* Just some example in how to add a loder image (gif) to the popup
    .mfp-preloader {
   width: 24px;
   height: 24px;
   margin: auto;
   color: transparent;
   background-image: url('icons/loading-image.gif');
    }
    */
  .iframe-on-grid { cursor: pointer; }
  .iframe-on-grid-container, .iframe-on-grid-container iframe { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; border: none; background: #000; display: none; }
  .iframe-on-grid-container { display: block; }
  .mfp-hide { display: none; }

  /* ====================================================================== *
     [9] SOCIAL FOR MAGNIFIC POPUP
   * ====================================================================== */
  .media-boxes-social-container { float: right; margin-right: 10px; font-size: 18px; }
  .media-boxes-social-container>* { margin-right: 5px; }

  /*
   *
   *
   *
   *
   *  BRIDGE (Unless you know what you are doing don't scroll down) ========>
   *
   *
   *
   *
   */

  /* ********************************************************************
    (2) NEEDED STYLE (Don't play here)
  ********************************************************************* */

  /* ====================================================================== *
     [1] SETUP
   * ====================================================================== */

  .media-box {    /* Box-model */
  display: none; /* hidden by default, the plugin will take care of showing it */ float: left; }
  .media-box, .media-box-hidden {    /* hardware acceleration */
  -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  .media-box-hidden, .not-loaded-before-search { display: none; /* hide the hidden boxes */ }
  .media-boxes-container { margin-right: 0 !important; margin-bottom: 0 !important; }
  .media-box-loaded { display: block; /* class to show the boxes once the plugin has been initialized */ }
  [onclick] { cursor: pointer; }
  [hide_if_empty] { display: none !important; }

  /* ====================================================================== *
     [2] MEDIA BOX THUMBNAIL
  * ====================================================================== */
  .media-box-image { position: relative; overflow: hidden; width: 100%; }

  /* Hack to center the image */
  .media-box-image div[data-width][data-height] { position: relative; overflow: hidden; }
  .media-box-image div[data-width][data-height] img { position: absolute; top: -100%; left: 0; right: 0; bottom: -100%; margin: auto; }

  /* End Hack */
  .media-box .media-box-image img { width: 100%; max-width: 100%; display: block; }
  .media-box img { max-width: 100%; -webkit-transform: translate3D(0, 0, 0); -moz-transform: translate3D(0, 0, 0); -ms-transform: translate3D(0, 0, 0); -o-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); }

  /* Invert position */
  .media-box .media-box-fill-height[data-width][data-height] img { top: 0 !important; left: -100% !important; right: -100% !important; bottom: 0 !important; width: auto !important; max-width: none !important; height: 100%; }

  /* Loading and broken thumbnail effects */
  .media-box-image div[data-thumbnail], .media-box-image div[data-popup] { background-position: center center; background-repeat: no-repeat; }
  .image-with-dimensions { background-color: black; background-image: url('icons/loading-image.gif'); }
  .broken-image-here { background-color: #BE3730; background-image: url('icons/broken-image.png'); }
  .broken-image-here:not([data-height]) { min-height: 150px; }

  /* ====================================================================== *
    [3] MEDIA BOX CONTENT
   * ====================================================================== */
  .media-box-container { overflow: hidden; position: relative; z-index: 1; }
  .media-box-container:hover { z-index: 2; /* bring the hover media box to the front */ }

  /* ====================================================================== *
    [4] THUMBNAIL OVERLAY EFFECT
   * ====================================================================== */
  .thumbnail-overlay { position: absolute; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ width: 100%; }

  /* REVEAL EFFECT */
  .position-reveal-effect .media-box-thumbnail-container { z-index: 2; position: absolute; width: 100%; top: 0; left: 0; }
  .position-reveal-effect .thumbnail-overlay { z-index: 1; position: absolute; left: 0; }
  .overlay-always-visible { display: block !important; zoom: 1 !important; filter: alpha(opacity=100) !important; opacity: 1 !important; }
  .overlay-text-left>.aligment>.aligment { text-align: left !important; }
  .overlay-text-right>.aligment>.aligment { text-align: right !important; }

  /* ====================================================================== *
    [5] MAGNIFIC POPUP
   * ====================================================================== */
  .mfp-arrow:focus { opacity: 0.65; filter: alpha(opacity=65); }
  .mfp-arrow:hover { opacity: 1 !important; filter: alpha(opacity=100) !important; }

  /* at start */
  .my-mfp-slide-bottom .mfp-figure { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }

  /* animate in */
  .my-mfp-slide-bottom.mfp-ready .mfp-figure { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }

  /* animate out */
  .my-mfp-slide-bottom.mfp-removing .mfp-figure { opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }

  /* Dark overlay, start state */
  .my-mfp-slide-bottom.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }

  /* animate in */
  .my-mfp-slide-bottom.mfp-ready.mfp-bg { opacity: 0.8; }

  /* animate out */
  .my-mfp-slide-bottom.mfp-removing.mfp-bg { opacity: 0; }