body.compensate-for-scrollbar {
    overflow: hidden
  }
  
  .fancyboxMB-active {
    height: auto
  }
  
  .fancyboxMB-is-hidden {
    left: -9999px;
    margin: 0;
    position: absolute!important;
    top: -9999px;
    visibility: hidden
  }
  
  .fancyboxMB-container {
    -webkit-backface-visibility: hidden;
    height: 100%;
    left: 0;
    outline: none;
    position: fixed;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    transform: translateZ(0);
    width: 100%;
    z-index: 99992
  }
  
  .fancyboxMB-container * {
    box-sizing: border-box
  }
  
  .fancyboxMB-bg,.fancyboxMB-inner,.fancyboxMB-outer,.fancyboxMB-stage {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
  }
  
  .fancyboxMB-outer {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto
  }
  
  .fancyboxMB-bg {
    background: #1e1e1e;
    opacity: 0;
    transition-duration: inherit;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.47,0,.74,.71)
  }
  
  .fancyboxMB-is-open .fancyboxMB-bg {
    opacity: .9;
    transition-timing-function: cubic-bezier(.22,.61,.36,1)
  }
  
  .fancyboxMB-caption,.fancyboxMB-infobar,.fancyboxMB-navigation .fancyboxMB-button,.fancyboxMB-toolbar {
    direction: ltr;
    opacity: 0;
    position: absolute;
    transition: opacity .25s ease,visibility 0s ease .25s;
    visibility: hidden;
    z-index: 99997
  }
  
  .fancyboxMB-show-caption .fancyboxMB-caption,.fancyboxMB-show-infobar .fancyboxMB-infobar,.fancyboxMB-show-nav .fancyboxMB-navigation .fancyboxMB-button,.fancyboxMB-show-toolbar .fancyboxMB-toolbar {
    opacity: 1;
    transition: opacity .25s ease 0s,visibility 0s ease 0s;
    visibility: visible
  }
  
  .fancyboxMB-infobar {
    color: #ccc;
    font-size: 13px;
    -webkit-font-smoothing: subpixel-antialiased;
    height: 44px;
    left: 0;
    line-height: 44px;
    min-width: 44px;
    mix-blend-mode: difference;
    padding: 0 10px;
    pointer-events: none;
    top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }
  
  .fancyboxMB-toolbar {
    right: 0;
    top: 0
  }
  
  .fancyboxMB-stage {
    direction: ltr;
    overflow: visible;
    transform: translateZ(0);
    z-index: 99994
  }
  
  .fancyboxMB-is-open .fancyboxMB-stage {
    overflow: hidden
  }
  
  .fancyboxMB-slide {
    -webkit-backface-visibility: hidden;
    display: none;
    height: 100%;
    left: 0;
    outline: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: absolute;
    text-align: center;
    top: 0;
    transition-property: transform,opacity;
    white-space: normal;
    width: 100%;
    z-index: 99994
  }
  
  .fancyboxMB-slide:before {
    content: "";
    display: inline-block;
    font-size: 0;
    height: 100%;
    vertical-align: middle;
    width: 0
  }
  
  .fancyboxMB-is-sliding .fancyboxMB-slide,.fancyboxMB-slide--current,.fancyboxMB-slide--next,.fancyboxMB-slide--previous {
    display: block
  }
  
  .fancyboxMB-slide--image {
    overflow: hidden;
    padding: 44px 0
  }
  
  .fancyboxMB-slide--image:before {
    display: none
  }
  
  .fancyboxMB-slide--html {
    padding: 6px
  }
  
  .fancyboxMB-content {
    background: #fff;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: relative;
    text-align: left;
    vertical-align: middle
  }
  
  .fancyboxMB-slide--image .fancyboxMB-content {
    animation-timing-function: cubic-bezier(.5,0,.14,1);
    -webkit-backface-visibility: hidden;
    background: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 0;
    max-width: none;
    overflow: visible;
    padding: 0;
    position: absolute;
    top: 0;
    transform-origin: top left;
    transition-property: transform,opacity;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99995
  }
  
  .fancyboxMB-can-zoomOut .fancyboxMB-content {
    cursor: zoom-out
  }
  
  .fancyboxMB-can-zoomIn .fancyboxMB-content {
    cursor: zoom-in
  }
  
  .fancyboxMB-can-pan .fancyboxMB-content,.fancyboxMB-can-swipe .fancyboxMB-content {
    cursor: grab
  }
  
  .fancyboxMB-is-grabbing .fancyboxMB-content {
    cursor: grabbing
  }
  
  .fancyboxMB-container [data-selectable=true] {
    cursor: text
  }
  
  .fancyboxMB-image,.fancyboxMB-spaceball {
    background: transparent;
    border: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
  }
  
  .fancyboxMB-spaceball {
    z-index: 1
  }
  
  .fancyboxMB-slide--iframe .fancyboxMB-content,.fancyboxMB-slide--map .fancyboxMB-content,.fancyboxMB-slide--pdf .fancyboxMB-content,.fancyboxMB-slide--video .fancyboxMB-content {
    height: 100%;
    overflow: visible;
    padding: 0;
    width: 100%
  }
  
  .fancyboxMB-slide--video .fancyboxMB-content {
    background: #000
  }
  
  .fancyboxMB-slide--map .fancyboxMB-content {
    background: #e5e3df
  }
  
  .fancyboxMB-slide--iframe .fancyboxMB-content {
    background: #fff
  }
  
  .fancyboxMB-iframe,.fancyboxMB-video {
    background: transparent;
    border: 0;
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%
  }
  
  .fancyboxMB-iframe {
    left: 0;
    position: absolute;
    top: 0
  }
  
  .fancyboxMB-error {
    background: #fff;
    cursor: default;
    max-width: 400px;
    padding: 40px;
    width: 100%
  }
  
  .fancyboxMB-error p {
    color: #444;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 0
  }
  
  .fancyboxMB-button {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    margin: 0;
    padding: 10px;
    position: relative;
    -webkit-transition: all 0.3s!important;
    -moz-transition: all 0.3s!important;
    transition: all 0.3s!important;
    vertical-align: top;
    visibility: inherit;
    width: 44px;
    outline: none!important;
  }
  
  .fancyboxMB-button,.fancyboxMB-button:link,.fancyboxMB-button:visited {
    color: #ccc;
  }
  
  .fancyboxMB-button:hover {
    color: #fff;
    opacity: 1;
  }
  
  .fancyboxMB-button.fancyboxMB-focus {
    outline: none!important;
  }
  
  .fancyboxMB-button[disabled]:hover {
    color: #888888a3;
  }
  
  .fancyboxMB-button[disabled] {
    color: #888888a3;
    cursor: default;
    outline: none;
    opacity: 0.3;
  }
  
  .fancyboxMB-button div {
    height: 100%;
  }
  
  .fancyboxMB-button svg {
    display: block;
    height: 100%;
    overflow: visible;
    position: relative;
    width: 100%
  }
  
  .fancyboxMB-button svg path {
    fill: currentColor;
    stroke-width: 0
  }
  
  .fancyboxMB-button--fsenter svg:nth-child(2),.fancyboxMB-button--fsexit svg:first-child,.fancyboxMB-button--pause svg:first-child,.fancyboxMB-button--play svg:nth-child(2) {
    display: none
  }
  
  .fancyboxMB-progress {
    background: #ff5268;
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0;
    transition-property: transform;
    transition-timing-function: linear;
    z-index: 99998
  }
  
  .fancyboxMB-close-small {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #ccc;
    cursor: pointer;
    opacity: .8;
    padding: 8px;
    position: absolute;
    right: -12px;
    top: -44px;
    z-index: 401
  }
  
  .fancyboxMB-close-small:hover {
    color: #fff;
    opacity: 1
  }
  
  .fancyboxMB-slide--html .fancyboxMB-close-small {
    color: currentColor;
    padding: 10px;
    right: 0;
    top: 0
  }
  
  .fancyboxMB-slide--image.fancyboxMB-is-scaling .fancyboxMB-content {
    overflow: hidden
  }
  
  .fancyboxMB-is-scaling .fancyboxMB-close-small,.fancyboxMB-is-zoomable.fancyboxMB-can-pan .fancyboxMB-close-small {
    display: none
  }
  
  .fancyboxMB-navigation .fancyboxMB-button {
    background-clip: content-box;
    height: 100px;
    opacity: 0;
    position: absolute;
    top: calc(50% - 50px);
    width: 70px
  }
  
  .fancyboxMB-navigation .fancyboxMB-button div {
    padding: 7px
  }
  
  .fancyboxMB-navigation .fancyboxMB-button--arrow_left {
    left: 0;
    left: env(safe-area-inset-left);
    padding: 31px 26px 31px 6px
  }
  
  .fancyboxMB-navigation .fancyboxMB-button--arrow_right {
    padding: 31px 6px 31px 26px;
    right: 0;
    right: env(safe-area-inset-right)
  }
  
  .fancyboxMB-caption {
    background: linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);
    bottom: 0;
    color: #eee;
    font-size: 14px;
    font-weight: 400;
    left: 0;
    line-height: 1.5;
    padding: 75px 44px 25px;
    pointer-events: none;
    right: 0;
    text-align: center;
    z-index: 99996
  }
  
  @supports (padding: max(0px)) {
    .fancyboxMB-caption {
        padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))
    }
  }
  
  .fancyboxMB-caption--separate {
    margin-top: -50px
  }
  
  .fancyboxMB-caption__body {
    max-height: 50vh;
    overflow: auto;
    pointer-events: all
  }
  
  .fancyboxMB-caption a,.fancyboxMB-caption a:link,.fancyboxMB-caption a:visited {
    color: #ccc;
    text-decoration: none
  }
  
  .fancyboxMB-caption a:hover {
    color: #fff;
    text-decoration: underline
  }
  
  .fancyboxMB-loading {
    animation: a 1s linear infinite;
    background: transparent;
    border: 4px solid #888;
    border-bottom-color: #fff;
    border-radius: 50%;
    height: 50px;
    left: 50%;
    margin: -25px 0 0 -25px;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 50px;
    z-index: 99999
  }
  
  @keyframes a {
    to {
        transform: rotate(1turn)
    }
  }
  
  .fancyboxMB-animated {
    transition-timing-function: cubic-bezier(0,0,.25,1)
  }
  
  .fancyboxMB-fx-slide.fancyboxMB-slide--previous {
    opacity: 0;
    transform: translate3d(-100%,0,0)
  }
  
  .fancyboxMB-fx-slide.fancyboxMB-slide--next {
    opacity: 0;
    transform: translate3d(100%,0,0)
  }
  
  .fancyboxMB-fx-slide.fancyboxMB-slide--current {
    opacity: 1;
    transform: translateZ(0)
  }
  
  .fancyboxMB-fx-fade.fancyboxMB-slide--next,.fancyboxMB-fx-fade.fancyboxMB-slide--previous {
    opacity: 0;
    transition-timing-function: cubic-bezier(.19,1,.22,1)
  }
  
  .fancyboxMB-fx-fade.fancyboxMB-slide--current {
    opacity: 1
  }
  
  .fancyboxMB-fx-zoom-in-out.fancyboxMB-slide--previous {
    opacity: 0;
    transform: scale3d(1.5,1.5,1.5)
  }
  
  .fancyboxMB-fx-zoom-in-out.fancyboxMB-slide--next {
    opacity: 0;
    transform: scale3d(.5,.5,.5)
  }
  
  .fancyboxMB-fx-zoom-in-out.fancyboxMB-slide--current {
    opacity: 1;
    transform: scaleX(1)
  }
  
  .fancyboxMB-fx-rotate.fancyboxMB-slide--previous {
    opacity: 0;
    transform: rotate(-1turn)
  }
  
  .fancyboxMB-fx-rotate.fancyboxMB-slide--next {
    opacity: 0;
    transform: rotate(1turn)
  }
  
  .fancyboxMB-fx-rotate.fancyboxMB-slide--current {
    opacity: 1;
    transform: rotate(0deg)
  }
  
  .fancyboxMB-fx-circular.fancyboxMB-slide--previous {
    opacity: 0;
    transform: scale3d(0,0,0) translate3d(-100%,0,0)
  }
  
  .fancyboxMB-fx-circular.fancyboxMB-slide--next {
    opacity: 0;
    transform: scale3d(0,0,0) translate3d(100%,0,0)
  }
  
  .fancyboxMB-fx-circular.fancyboxMB-slide--current {
    opacity: 1;
    transform: scaleX(1) translateZ(0)
  }
  
  .fancyboxMB-fx-tube.fancyboxMB-slide--previous {
    transform: translate3d(-100%,0,0) scale(.1) skew(-10deg)
  }
  
  .fancyboxMB-fx-tube.fancyboxMB-slide--next {
    transform: translate3d(100%,0,0) scale(.1) skew(10deg)
  }
  
  .fancyboxMB-fx-tube.fancyboxMB-slide--current {
    transform: translateZ(0) scale(1)
  }
  
  @media (max-height: 576px) {
    .fancyboxMB-slide {
        padding-left:6px;
        padding-right: 6px
    }
  
    .fancyboxMB-slide--image {
        padding: 6px 0
    }
  
    .fancyboxMB-close-small {
        right: -6px
    }
  
    .fancyboxMB-slide--image .fancyboxMB-close-small {
        background: #4e4e4e;
        color: #f2f4f6;
        height: 36px;
        opacity: 1;
        padding: 6px;
        right: 0;
        top: 0;
        width: 36px
    }
  
    .fancyboxMB-caption {
        padding-left: 12px;
        padding-right: 12px
    }
  
    @supports (padding: max(0px)) {
        .fancyboxMB-caption {
            padding-left:max(12px,env(safe-area-inset-left));
            padding-right: max(12px,env(safe-area-inset-right))
        }
    }
  }
  
  .fancyboxMB-share {
    background: #f4f4f4;
    border-radius: 3px;
    max-width: 90%;
    padding: 30px;
    text-align: center
  }
  
  .fancyboxMB-share h1 {
    color: #222;
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 20px
  }
  
  .fancyboxMB-share p {
    margin: 0;
    padding: 0
  }
  
  .fancyboxMB-share__button {
    border: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    margin: 0 5px 10px;
    min-width: 130px;
    padding: 0 15px;
    text-decoration: none;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
  }
  
  .fancyboxMB-share__button:link,.fancyboxMB-share__button:visited {
    color: #fff
  }
  
  .fancyboxMB-share__button:hover {
    text-decoration: none
  }
  
  .fancyboxMB-share__button--fb {
    background: #3b5998
  }
  
  .fancyboxMB-share__button--fb:hover {
    background: #344e86
  }
  
  .fancyboxMB-share__button--pt {
    background: #bd081d
  }
  
  .fancyboxMB-share__button--pt:hover {
    background: #aa0719
  }
  
  .fancyboxMB-share__button--tw {
    background: #1da1f2
  }
  
  .fancyboxMB-share__button--tw:hover {
    background: #0d95e8
  }
  
  .fancyboxMB-share__button svg {
    height: 25px;
    margin-right: 7px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 25px
  }
  
  .fancyboxMB-share__button svg path {
    fill: #fff
  }
  
  .fancyboxMB-share__input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    color: #5d5b5b;
    font-size: 14px;
    margin: 10px 0 0;
    outline: none;
    padding: 10px 15px;
    width: 100%
  }
  
  .fancyboxMB-thumbs {
    background: #ddd;
    bottom: 0;
    display: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 2px 2px 4px;
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    top: 0;
    width: 212px;
    z-index: 99995
  }
  
  .fancyboxMB-thumbs-x {
    overflow-x: auto;
    overflow-y: hidden
  }
  
  .fancyboxMB-show-thumbs .fancyboxMB-thumbs {
    display: block
  }
  
  .fancyboxMB-show-thumbs .fancyboxMB-inner {
    right: 212px
  }
  
  .fancyboxMB-thumbs__list {
    font-size: 0;
    height: 100%;
    list-style: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    position: relative;
    white-space: nowrap;
    width: 100%
  }
  
  .fancyboxMB-thumbs-x .fancyboxMB-thumbs__list {
    overflow: hidden
  }
  
  .fancyboxMB-thumbs-y .fancyboxMB-thumbs__list::-webkit-scrollbar {
    width: 7px
  }
  
  .fancyboxMB-thumbs-y .fancyboxMB-thumbs__list::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3)
  }
  
  .fancyboxMB-thumbs-y .fancyboxMB-thumbs__list::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px
  }
  
  .fancyboxMB-thumbs__list a {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0,0,0,.1);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    float: left;
    height: 75px;
    margin: 2px;
    max-height: calc(100% - 8px);
    max-width: calc(50% - 4px);
    outline: none;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 100px
  }
  
  .fancyboxMB-thumbs__list a:before {
    border: 6px solid #ff5268;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .2s cubic-bezier(.25,.46,.45,.94);
    z-index: 99991
  }
  
  .fancyboxMB-thumbs__list a:focus:before {
    opacity: .5
  }
  
  .fancyboxMB-thumbs__list a.fancyboxMB-thumbs-active:before {
    opacity: 1
  }
  
  @media (max-width: 576px) {
    .fancyboxMB-thumbs {
        width:110px
    }
  
    .fancyboxMB-show-thumbs .fancyboxMB-inner {
        right: 110px
    }
  
    .fancyboxMB-thumbs__list a {
        max-width: calc(100% - 10px)
    }
  }
  
  
  /* ======================================================= 
   *
   *    Media boxes   
   *    Version: 3.5
   *    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] CHECKBOXES
   *      [7] THUMBNAIL OVERLAY EFFECT
   *      [8] FANCYBOX
   *      [9] MAGNIFIC POPUP
   *      [10] 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{
      }
  
  /* ====================================================================== *
        [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;
    }
    
    /* [START] THIS IS NOT LONGER NEEDED, BUT I'M LEAVING IT HERE IN CASE SOMEBODY IS USING THE OLD WAY */
  
    .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;
      }
    }
    
    /* [END] THIS IS NOT LONGER NEEDED, BUT I'M LEAVING IT HERE IN CASE SOMEBODY IS USING THE OLD WAY */
  
    .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: normal;
      font-weight: 600;
      color: rgb(0 0 0);
      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{
      color: #fff!important;
      text-transform: uppercase;
      text-decoration: none;
      font-size: 11px;
      font-weight: 400;
      cursor: pointer;
      border: none;
      background: #000;
      font-family: "Dosis", sans-serif;
      letter-spacing: 2px;
      margin: 75px auto;
      padding: 8px 28px;
      display: inline-block;
    }
  
    .media-boxes-no-more-entries{
      pointer-events: none;
    }
  
  
  /* ====================================================================== *
        [3] FILTER BAR
   * ====================================================================== */
      
    .auto-grid-filters-container{
      overflow: hidden;
    }
  
    .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 10px 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: 38px;
      line-height: 38px;
      text-decoration: none;
      margin: 0px;
      padding: 0 15px;
      background-color: #fff;
  
      -webkit-border-radius: 0px;
         -moz-border-radius: 0px;
              border-radius: 0px;
  
      -webkit-transition: border .1s;
         -moz-transition: border .1s;
           -o-transition: border .1s;
          -ms-transition: border .1s;
              transition: border .1s;
    }
  
    .media-boxes-filter>li a:hover{
      text-decoration: none;
      border: 1px solid #dadada;
    }
  
    .media-boxes-filter>li a.selected{
      background: #4d4c4d !important; 
      color: #fff !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: 38px;
        line-height: 38px;
        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: 38px;
        line-height: 38px;
        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-sort{
        display: inline-block;
        vertical-align: top;
      }
  
      .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{
        font-size: 12px;
        margin: 0 !important;
        display: block;
        height: 38px;
        line-height: 38px;
        padding: 0 15px !important;
        text-decoration: none;
        background-color: #fff;
        color: #444;
        cursor: pointer;
        vertical-align: top;
      }
  
      .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-menu > li > a{
        font-size: 12px;
        display: block;
        margin: 0 !important;
        padding: 0px 15px !important;
        color: #444;
        background: #fff;
        height: 38px !important;
        line-height: 38px !important;
        border-top: 1px solid rgba(175,175,175,.16)!important;
        text-decoration: none;
      }
  
      .media-boxes-drop-down-menu > li > a:hover{
        color: #000 !important;
      }
  
      .media-boxes-sort .media-boxes-drop-down-header .fa{
        display: none;
      }
  
      .media-boxes-sort-order{
        cursor: pointer;
        display: inline-block;
        width: 34px;
        height: 38px;
        line-height: 38px;
        color: #444;
        background: #fff;
        text-align: center;
        vertical-align: top;
        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] CHECKBOXES
   * ====================================================================== */
  
    .media-boxes-checkboxes{
      display: block;
      margin-bottom: 5px;
    }    
  
    /* Customize the label (the container) */
    .media-boxes-checkboxes-label {
      display: inline-block;
      position: relative;
      margin-right: 20px;
      padding-left: 30px;
      margin-bottom: 5px;
      cursor: pointer;
      font-size: 14px;
      font-weight: normal;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  
    /* Hide the browser's default checkbox */
    .media-boxes-checkboxes-label input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
  
    /* Create a custom checkbox */
    .media-boxes-checkboxes-checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #fff;
      border: 1px solid #EBEBEB;
  
      transition: background-color 0.3s ease;
    }
  
    /* On mouse-over, add a grey background color */
    .media-boxes-checkboxes-label:hover input ~ .media-boxes-checkboxes-checkmark {
      background-color: #f5f6fa;
    }
  
    /* When the checkbox is checked, add a blue background */
    .media-boxes-checkboxes-label input:checked ~ .media-boxes-checkboxes-checkmark {
      background-color: #2196F3;
    }
  
    /* Create the checkmark/indicator (hidden when not checked) */
    .media-boxes-checkboxes-checkmark:after {
      content: "";
    }
  
    /* Show the checkmark when checked */
    .media-boxes-checkboxes-label input:checked ~ .media-boxes-checkboxes-checkmark:after {
      content: "\f00c";
    }
  
    /* Style the checkmark/indicator */
    .media-boxes-checkboxes-label .media-boxes-checkboxes-checkmark:after {
      display: block;
      font-family: FontAwesome;
      font-size: 11px;
      line-height: 19px;
      text-align: center;
      color: #fff;
    }
  
  /* ====================================================================== *
        [7] THUMBNAIL OVERLAY EFFECT
   * ====================================================================== */
  
    .thumbnail-overlay{
      background: black; /* fallback for IE8 */
      background-color: rgba(34,34,34,.5);
      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 */
    }
  
    .thumbnail-overlay-title{
      letter-spacing: 0px;
      font-weight: 600;
      font-size: 16px;
      color: #fff;
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 28px;
    }
  
    .thumbnail-overlay i.fa, 
    .media-box-play-button, 
    .media-box-sound-button{
      background: rgba(255,255,255,.3);
      color:  #fff;
      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,.4);
      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);          
    }
  
  /* ====================================================================== *
        [8] FANCYBOX
   * ====================================================================== */
  
    .fancyboxMB-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 */
    }
  
    .fancyboxMB-thumbs{
      background: rgba(255,255,255,.1);
    }
  
  
  /* ====================================================================== *
        [9] 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;
    }
  
  
  /* ====================================================================== *
        [10] 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;
      z-index: 1;
      position: relative;
    }
    
    .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 */
    
    /* fill-height instead of the width */
    .media-box-image .media-box-fill-height[data-width][data-height] img{
      top: 0 !important; 
      left: -100% !important; 
      right: -100% !important; 
      bottom: 0 !important;
      min-width: 100% !important;
      width: auto !important;
      max-width: none !important;
      height: 100%;
    }
  
    .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);
    }
    
    /* 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: #4e4e4e;
      /*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;
    }
  
    /* LOADER ANIMATION */
  
    .media-boxes-loading-animation,
    .media-boxes-loading-animation:after {
      border-radius: 50%;
      width: 36px;
      height: 36px;
    }
    .media-boxes-loading-animation {
      box-sizing: border-box;
      position: absolute;
      margin-top: -18px;
      margin-left: -18px;
      top: 50%;
      left: 50%;
      font-size: 6px;
      text-indent: -9999px;
      border-top: 6px solid rgba(255, 255, 255, 0.2);
      border-right: 6px solid rgba(255, 255, 255, 0.2);
      border-bottom: 6px solid rgba(255, 255, 255, 0.2);
      border-left: 6px solid #ffffff;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: load8 1.1s infinite linear;
      animation: load8 1.1s infinite linear;
    }
    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  
  
  /* ====================================================================== *
      [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;
    }

#blog-grid .post {
    margin-bottom: 0!important;
}

/* creative */

.blog-container.creative .post {
    margin-bottom: 3%;
  }
  
  .post .post-intro .creative-intro-box {
    background-position: center center;
    background-size: cover;
    height: 0;
    width: 100%;
    padding-top: 66.64%;
    background-repeat: no-repeat;
  }
  
  .post .creative-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .post .creative-box .blog-creative-item {
    height: 101%;
    width: 101%;
    display: table;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  .post .creative-box .blog-creative-item .item-info {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .post .creative-box .blog-creative-item .item-info h3 {
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
    color: #000000;
    font-size: 14px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 0;
  }
  .post .creative-box .blog-creative-item .item-info em {
    font-style: normal;
    font-weight: 300;
    display: inline-block;
    padding: 5px;
    color: black;
    margin-top: 5px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 0;
  }
  .post .creative-box .blog-creative-item .item-info em a {
    color: #000;
    text-decoration: none;
  }
  .post .creative-box:hover .blog-creative-item {
    opacity: 1;
    background: rgba(255, 255, 255, .9);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  .post .creative-box:hover .item-info em,
  .post .creative-box:hover .item-info h3 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  
  /* minimal */
  
  .post .post-title.minimal {
    margin-top: 0;
  }

  .ajax-load-box.text-center {
    text-align: center;
  }

  .show-button-load-more {
    display: inline-block!important;
  }
  
  /* Load More */
  .media-boxes-load-more-button {
    color: #ffffff!important;
    text-transform: uppercase;
    text-decoration: none;
    font-size:  11px;
    font-weight: 400;
    cursor: pointer;
    border: none;
    background: #000000;
    font-family: "Dosis", sans-serif;
    letter-spacing: 2px;
    margin: 75px auto;
    padding: 16px 28px;
    line-height: 1;
    display: inline-block;
  }