.pswp__bg {
    background-color: #fff;
}

.pswp__button {
    width: 3em;
    height: 3em;
    position: relative;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    display: block;
    float: right;
    opacity: 0.75;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-box-shadow: none;
    text-align: center;
}
.pswp__button:focus,
.pswp__button:hover {
    opacity: 1;
}
.pswp__button:active {
    outline: none;
    opacity: 0.9;
}
.pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */

.pswp__ui--over-close .pswp__button--close {
    opacity: 1;
}
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    width: 3em;
    height: 3em;
}
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    font-size: 4em;
    line-height: 1em;
}
.pswp__button--arrow--left:before {
    content: "\f104";
    color: #303030;
    font-family: 'Font Awesome 5 Pro';
    margin-left: -7.5px;
}
.pswp__button--arrow--right:before {
    content: "\f105";
    color: #303030;
    font-family: 'Font Awesome 5 Pro';
    margin-right: -7.5px;
}

.pswp__button--close::before {
    content: "\f00d";
    color: #303030;
    font-family: 'Font Awesome 5 Pro';
}
.pswp__button--fs {
    display: none;
}
.pswp__button--fs::before {
    content: "\f0b2";
    color: #303030;
    font-family: 'Font Awesome 5 Pro';
}
.pswp--supports-fs .pswp__button--fs {
    display: block;
}
.pswp__button--zoom {
    display: none;
}
.pswp__button--zoom::before {
    content: "\f00e";
    color: #303030;
    font-family: 'Font Awesome 5 Pro';
}
.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}
.pswp--zoomed-in .pswp__button--zoom::before {
    content: "\f010";
    color: #303030;
    font-family: 'Font Awesome 5 Pro';
}
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: hidden;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
    background-color: rgba(255,255,255,0.5);
    top: 50%;
    width: 3em;
    height: 4em;
    margin-top: -2em;
    position: absolute;
    text-align: center;
}
.pswp__button--arrow--left {
    border-radius: 0 100% 100% 0;
    left: 0;
}
.pswp__button--arrow--right {
    border-radius: 100% 0 0 100%;
    right: 0;
}
/*

        3. Index indicator ("1 of X" counter)

*/

.pswp__counter {
    position: absolute;
    left: 0;
    top: 0;
    height: 3em;
    font-size: 13px;
    line-height: 3em;
    color: #303030;
    opacity: 0.75;
    padding: 0 10px;
}
/*

        4. Caption

*/

.pswp__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 44px;
}
.pswp__caption small {
    font-size: 11px;
    color: #BBB;
}
.pswp__caption__center {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: #CCC;
}
.pswp__caption--empty {
    display: none;
}
/* Fake caption element, used to calculate height of next/prev image */

.pswp__caption--fake {
    visibility: hidden;
}
/*

        6. Additional styles

*/
/* root element of UI */

.pswp__ui {
    -webkit-font-smoothing: auto;
    visibility: visible;
    opacity: 1;
    z-index: 1550;
}
/* top black bar with buttons and "1 of X" indicator */

.pswp__top-bar {
    background-color: #eee;
    position: absolute;
    left: 0;
    top: 0;
    height: 3em;
    width: 100%;
}
.pswp__top-bar .pswp__button::before {
    font-size: 1.5em;
    line-height: 2em;
}
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    -webkit-backface-visibility: hidden;
    will-change: opacity;
    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    visibility: visible;
}
.pswp__top-bar,
.pswp__caption {

}
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {

}
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */

.pswp__ui--idle .pswp__top-bar {
    opacity: 0;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
    opacity: 0;
}
/*
        pswp__ui--hidden class is added when controls are hidden
        e.g. when user taps to toggle visibility of controls
*/

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
    /* Force paint & create composition layer for controls. */

    opacity: 0.001;
}
/* pswp__ui--one-slide class is added when there is just one item in gallery */

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
    display: none;
}
.pswp__element--disabled {
    display: none !important;
}
.pswp--minimal--dark .pswp__top-bar {
    background: none;
}

.pswp__zoom-wrap .responsive-video {
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%!important;
    padding: 0;
    margin: auto;
    height: 100%!important;
}
.pswp__zoom-wrap .responsive-video img {
    height: 100%;
}