/* ####
MOODBOARD moodboard.tpl
#### */

#moodboard {
    min-height: 100vh;
    margin: 80px 0;
    background-image: url('../images/moodboard-loading-2a.gif');
    background-size: 121px 112px;
    background-repeat: no-repeat;
    background-position: 50% 200px;
    margin-top: 160px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;    
}
#moodboard .moodboard-name,
#moodboard .moodboard-name-static {
    position: absolute;
    left: 10px;
    top: -70px;
    font-size: 2em;
    color: #fff;
    font-weight: 600;
    z-index: 89;
    opacity: 0;
    transition: opacity 1000ms;
    transition-delay: 200ms;
    line-height: 1;
}
#moodboard.done-loading {
    background-image: none;
}
#moodboard.done-loading .moodboard-name,
#moodboard.done-loading .moodboard-name-static {
    opacity: 1;
}
#moodboard .moodboard-name input {
    font-family: inherit;
    font-size: inherit;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    color: #fff;
    border: 0;
    padding: 0;
    line-height: 1;
    transform: translateY(-13px);
    width: 250px;
    font-weight: 600;
}
#moodboard .moodboard-name button {
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    width: 40px;
    height: 40px;   
    line-height: 1;
    border: 0;
    border-radius: 3px;
    color: transparent;
    transform: translateY(-4px);
    background-color: #0b6635;
    cursor: pointer;
    background-image: url('../images/icons/save-name.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: 50% 50%; 
    margin-left: 10px;

}

#moodboard .treegroup {
  padding-bottom: 200px;
  width: 24.8%;
  float: left;
}

#moodboard .treegroup.nomove {
  padding-bottom: 0px;
}

#moodboard .moodboard-item {
    width: auto;
    float: left;
    position: relative;
    opacity: 0;
    transition: opacity 300ms;
    cursor: crosshair;
    box-sizing: border-box;

    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;

}
    /* sortable classes */
    .sortable-ghost {
        background: #333030;
        border-radius: 2px;
    }
    .sortable-chosen {
        
    }
    .sortable-drag {
        
    }
    .ghostOverride {
        opacity: 0.2;
    }
#moodboard .moodboard-item:hover .remove_from_moodboard,
#moodboard .moodboard-item:hover .change_picture,
#moodboard .moodboard-item:hover .enlarge_picture,
#moodboard .moodboard-item:hover .clone_picture {
    display: block;
}
#moodboard .moodboard-item.visible {
    opacity: 1;
}
#moodboard .moodboard-item .details {
    position: absolute;
    left:  20px;
    bottom: 20px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 3px;
    max-width: 80%;
}
#moodboard .moodboard-item .details h2 {
    font-style: italic;
    display: block;
    /*max-width: 300px;*/
    max-width: 90%;
    line-height: 1.2;
    font-weight: 600;
}
#moodboard .moodboard-item .details a {
    color: #fff;
    display: block;
    padding: 10px 15px;
}
#moodboard .moodboard-item img {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    pointer-events: none;
}
#moodboard .moodboard-item {
   cursor: move;   
}
#moodboard .moodboard-item.nomove {
    cursor: default !important;
}
#moodboard .moodboard-item.is-dragging,
#moodboard .moodboard-item.is-positioning-post-drag {
    /* background: #fff; */
    z-index: 2; /* keep dragged item on top */
    cursor: move;
}
.packery-drop-placeholder {
    outline: 5px dashed hsla(0, 0%, 0%, 0.1);
    outline-offset: -16px;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    background-image: url('../images/icons/drag-moodboard.png');
    background-position: 50% 50%;
    background-size: 130px 130px;
    background-repeat: no-repeat;
}



/* ####
LISTING moodboards.tpl
#### */
#moodboards-listing {
    padding-bottom: 0px;
    min-height: calc(100vh - 200px);
}
#moodboards-listing ul {
    margin: 80px auto;  margin-bottom: 50px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
#moodboards-listing ul li {
    position: relative;
    height: 100px;
    background: #615e5e;
}
#moodboards-listing ul li a {
    display: block;
    color:#fff;
}
#moodboards-listing ul li:hover {
    opacity: .9;
}
#moodboards-listing ul li:nth-of-type(odd) {
    background: #686464;
}
#moodboards-listing ul li .moodboard-listing-name {
    font-size: 2em;
    line-height: 100px;
    width: 100%;
    max-width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding-left: 30px;
    color: #fff;
}
#moodboards-listing ul li .moodboard-listing-preview {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#moodboards-listing ul li .moodboard-listing-preview img {
    display: inline-block;
    width: 100px;
    margin-right: -3px;
}
ul li.moodboards-listing-item a{
    color: #ffffff;
}


.moodboard-delete,
.remove_from_moodboard,
.moodboard-close-modal,
.change_picture,
.enlarge_picture,
.clone_picture,
.moodboard-view-icon {
    font-size: 15px;
    line-height: 20px;
    text-transform: lowercase;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: #262626;
    position: absolute;
    cursor: pointer;
    /*border: 1px solid #141414; */
    font-weight: bold;
    color: #fff;
}
.moodboard-delete:hover,
.remove_from_moodboard:hover,
.moodboard-close-modal:hover,
.change_picture:hover,
.enlarge_picture:hover,
.clone_picture:hover,
.moodboards-listing-item a:hover .moodboard-view-icon {
    background-color: #3e3a3b;
}
.change_picture {
    background-image: url('../images/icons/picture.svg');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.enlarge_picture {
    background-image: url('../images/treeEbb/fullscreen_large.png');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.clone_picture {
    background-image: url('../images/icons/clone.svg');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.moodboard-view-icon {
    background-image: url('../images/icons/view.svg');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#moodboards-listing ul li .moodboard-delete {
    right: 30px;
    top: 50%;
    margin-top: -10px;    
}
.remove_from_moodboard {
    bottom: 20px;
    right: 20px;
    display: none;
}
.change_picture {
    bottom: 20px;
    right: 42px;
    display: none;
}
.clone_picture {
    bottom: 20px;
    right: 86px;
    display: none;
}
.enlarge_picture {
    bottom: 20px;
    right: 64px;
    display: none;
}



/* ####
OVERALL alle popups / modals
#### */
.moodboard-control-modal {
    display: none;
    max-width: 300px;
    width: 90%;
    padding: 30px;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.01);
    position: fixed;
    background: #2f2f2f;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 91;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 30px;
    color: #fff;
}
.moodboard-control-modal .control-modal-title {
    font-size: 1.3em;
    margin-bottom: 1em;
    font-weight: 600;
}
.moodboard-close-modal {
    position: absolute;
    right: 20px;
    top: 20px;
}
.moodboard-control-modal form {
    margin-top: 1em;
}
.moodboard-control-modal input {
    font-family: inherit;
    font-size: inherit;
    background: #888;
    color: #000;
    border: 0;
    border-radius: 2px;
    padding: 4px;
    margin: 10px 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.moodboard-control-modal input[type=submit] {
    background: #fff;
    color: #000;
    padding: 10px 10px;
    font-weight: 600;
    cursor: pointer;
}
.moodboard-control-modal .picture-select-pics {
    margin-top: 10px;
}
.moodboard-control-modal .picture-select-pics img {
    display: block;
    cursor: pointer;
    width: 25%;
    float: left;
    box-sizing: border-box;
}
.moodboard-control-modal .picture-select-pics img:hover,
.moodboard-control-modal .picture-select-pics img.selected {
    border: 10px solid #2f2f2f;
}



#moodboard-bg-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    left: 0;
    top: 0;
    z-index: 89;
    display: none;
}
.moodboard-item.ui-draggable-dragging,
.moodboard-item.is-positioning-post-drag {
    /*padding: 0;*/
    /*margin: 0;*/
    /*border-color: white;*/
    /*background: none;*/
    /*z-index: 2;*/
}



/* Dropdown moodboard login */

.moodboardlogin {
    display:none; 
    position: fixed; 
    width: 355px;
    max-width: 90%;
    top: 50%;
    left: 50%;
    z-index: 9992;
    box-sizing: border-box;
    padding: 30px 30px;
    background: #252525;
    max-height: 400px;
    color: #fff;
    overflow-y: auto;
    min-height: 100px;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    border-radius: 3px;
    pointer-events: all;
}
@media screen and (max-width: 900px) {
    .moodboardlogin {
        top: 50px;
        left: 50%;
        max-width: 100%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
}


.moodboardlogin a:hover {
    opacity: 0.8;
}
.moodboardlogin .txt span:nth-of-type(2) {
    font-size: .9em;
    background: rgba(0,0,0,0.3);
    padding: 12px 15px;
    border-radius: 3px;
    display: block;
    line-height: 1.6;
    margin: 5px 0;
}

.moodboardlogin.popout span.title {
    font-size: 1.2em;
    margin-bottom: .2em;
    display: block;
}
.moodboardlogin.popout .form input, 
.moodboardlogin.popout .form textarea {
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    color: #222;
    font-size: .85em; font-weight: 400;
    padding: 5px;
    border: none;
    width: 49%;
    width: 100%;
    margin: 5px 0;
    font-family: verdana, arial, sans-serif;
    float:left;
    border: 1px solid transparent;
}
.moodboardlogin input,
.moodboardlogin input.button {
    display: block;
    float: none;
    width: 100%!important;
}
.moodboardlogin input.button {
    margin-top: 6px;
}
.moodboardlogin a.login,
.moodboardlogin a.register,
.moodboardlogin a.resetpassword,
.moodboardlogin a#login-logout {
    color: #fff;
    padding-top: 0px;
    display: block;
    clear: both;
    font-weight: 400;
    font-size: .9em;
}
.moodboardlogin a#login-logout:hover {
    background: transparent!important;
}
.moodboardlogin.popout .form input.button  {
    background: url("../images/icons/button-arrow.png") no-repeat scroll 95% 50% #e6dcb0;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #282828;
    cursor: pointer;
    display: block;
    font-weight: 400;
    padding: 6px 6px 6px 15px;
    text-align: left;
    font-family: inherit;
    font-size: 1em;
}
.moodboardlogin.popout .form input.button:hover {
    background-color: #f1e7ba; 
}
.moodboardlogin.popout div.pclose {
    width:20px; height:20px;
    left: auto;
    bottom:auto;
    top: 15px;
    right: 15px;
    cursor: pointer;
    position: absolute;
    text-align: center;
    transform-origin: center center;
    overflow: hidden;
    border-radius: 3px;
    background: #262626;
    background-image: url(/images/treeEbb/close.png);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
}
.moodboardlogin.popout div.pclose:hover {
    background-color: #3e3a3b;
}

/* Dropdown moodboard listing */
.moodboardslist {
    display:none; 
    position: absolute; 
    width: 355px;
    top: 100%;
    right: 10px;
    z-index: 92;
    box-sizing: border-box;
    padding: 10px 20px;
    background: #2f2f2f;
    overflow-y: auto;
    max-height: 300px;
}
.moodboardslist .moodboards-listing-item {
    background: #2f2f2f;
    display: block;
    border-bottom: 1px solid #414141;
    position: relative; padding: 5px 10px;
}
.moodboardslist .moodboards-listing-item:last-of-type {
    border-bottom: 0;
}
.moodboardslist .moodboards-listing-item a {
    color: #efefef;
    display: block;
}
.moodboardslist .moodboards-listing-item a:hover {
    color: #ccc;
}
.moodboardslist .moodboards-listing-item  .moodboard-listing-name em {
    display: block;
    padding-right: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
}
.moodboardslist .moodboards-listing-item .moodboard-delete {
    position: absolute;
    top: 6px;
    right: 10px;
}
.moodboardslist .moodboards-listing-item .moodboard-view-icon {
    right: 40px;
    top: 6px;
}
.moodboardslist .moodboards-listing-item a.button {
   
}
.moodboardslist .moodboards-listing-item a.button:hover {
    background: transparent!important;
}
/* add new */
.moodboardslist .moodboards-listing-item:last-of-type a:before {
    content: "+";
    width: 20px;
    height: 20px;
    background: #2a2a2a;
    color: #fff;
    line-height: 18px;
    display: block;
    float: left;
    border-radius: 3px;
    text-align: center;
    font-size: 1em;
    margin-right: 7px;
    margin-top: 3px;
}
/*active item */
.moodboardslist .moodboards-listing-item.isactive {
    border-bottom: 0;
}
.moodboardslist .moodboards-listing-item.isactive {
    padding: 5px 0;
}
.moodboardslist .moodboards-listing-item.isactive a {
    font-size: 1.2em;
    background: #434343;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    font-weight: 600;
}
.moodboardslist .moodboards-listing-item.isactive a span.subtag {
    display: block;
    font-size: 0.7em;
    font-weight: 300;
}
.moodboardslist .moodboards-listing-item.isactive .moodboard-delete,
.moodboardslist .moodboards-listing-item.isactive .moodboard-view-icon {
    top: 16px;
}




/* moodboard_copylink */
.moodboard_copylink {
    position: absolute;
    right: 10px;
    top: -70px;
    font-size: 0.9em;
}
.moodboard_copylink input.sharelinkField {
    width: 350px;
    background: #333030;
    color: #ccc;
    border-radius: 3px;
    border: 0;
    padding: 5px;
    font-family: inherit;
    margin-right: 10px;
}
.moodboard_copylink span {
    text-transform: uppercase;
    color: #ccc;
    cursor: pointer;
    font-size: .8em;
}



span.divider{
    color: #ccc;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 1em;
}

/* empty moodboard notice */
h2.empty-moodboard-notice {
    background-color: #cc0000;
    color:#ffffff;
    text-align: center;
    padding: 20px;
    border-radius: 3px;
    font-size: 1.2em;
    font-weight: 400;
    margin: 0;
}

/* moodboard nav mobile */
#moodboard_nav_mobile {
    display: none;
}

/* vergrotingen/owl */
#moodboard-carousel {
    display:none;
    background-color: rgba(62,59,59,0.8);
    position: fixed;
    top: 50px;
    left: 100px;
    z-index: 99999;
    width: calc(100% - 100px);
    height: 100%;
    vertical-align: middle;
    text-align: center;
}
@media screen and (max-width: 900px) {
    #moodboard-carousel {
        top: 40px;
    }
}
#moodboard-carousel .item {
    padding: 30px 0;
    text-align: center;
    width: 100%;
    height: calc(100vh - 50px);
    box-sizing: border-box;
}
#moodboard-carousel .item img {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 80%;
    max-height: 80%;
}
#moodboard-carousel div.close {
    cursor:pointer;
    width: 16px;
    height: 16px;
    background-image: url(/images/treeEbb/close.png);
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    left: auto;
    top: auto;
    right: 30px;
    top: 30px;
    z-index: 999;
}

div#moodboardLoader {
    position: fixed;
    bottom: 50%;
    left: 50%;
    z-index: 2;
    overflow: hidden;
    cursor: default;
    transition: opacity 150ms ease;
    display:none;
    width: 112px;
    height:112px;
    margin-left: -56px;
    background-image: url(/images/moodboard-loading-2a.gif);
    background-size: 112px 112px;
    background-repeat: no-repeat;
}



#moodboard-carousel div.owl-controls {
    display: none!important;
}
@media screen and (max-width: 900px) {
    #moodboard-carousel {
        left: 0;
        width: 100%;
    }
    #moodboard-carousel div.close {
        right: 15px;
        top: 15px;
    }
}
@media screen and (min-width: 901px) {
    span#pdfbutton::before {
        content: "DOWNLOAD ";
    }
}
/* all responsive */
@media screen and (max-width: 900px) {
    #moodboard {
        padding-top: 40px;
        padding-bottom: 40px;
        margin: 50px -30px;
        width: calc(100% + 60px);  
        min-height: calc(100vh - 200px);
        box-sizing: border-box;     
    }
    #moodboard .moodboard-name,
    #moodboard .moodboard-name-static {
        left: 0;
        top: 0;
        font-size: 1.3em;
    }
    #moodboard .moodboard-item .details {
        display: none;
    }
    #moodboard .moodboard-name {

    }
    #moodboard .moodboard-name input {
        width: 130px;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);        
    }
    #moodboard .moodboard-name button {
        width: 20px;
        height: 20px;
        transform: translateY(-2px);
        -webkit-transform: translateY(-2px);
        background-size: 12px 12px;            
    }
    #moodboard .moodboard-item:not(.nomove) {
        /* markup */
        padding-bottom: 25px;
    }
    #moodboard .moodboard-item img {
        padding: 3px;
    }
    /* tools */
    .remove_from_moodboard,
    .change_picture,
    .enlarge_picture,
    .clone_picture {
        display: block;
        background-color:transparent;
        background-size: 6px 6px;
    }
    .remove_from_moodboard {
        bottom: 5px;
        right: 7px;
    }
    .change_picture {
        bottom: 5px;
        right: 50%;
        margin-right: -10px;
    }
    .enlarge_picture {
        /*bottom: 5px;*/
        /*right: auto;*/
        /*left: 7px;*/
    }
    .clone_picture {
        bottom: 5px;
        right: auto;
        left: 7px;
    }
    /* share link */
    .moodboard_copylink {
        top: 0;
        right: 5px;
        z-index: 91;
    }   
    .moodboard_copylink input.sharelinkField {
        position: absolute;
        top: -11000px;
        left: -100px;
        opacity: none;
        pointer-events: none;
    }
    span.divider{
        display: none;
    }


    .moodboard_copylink span {
        background: rgba(0,0,0,0.1);
        padding: 10px;
        line-height: 1;
        border-radius: 3px;
    }

    /* moodboard nav mobile */
    #moodboard_nav_mobile {
        display: block;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
        width: 100%;
        height: 40px;
        background: #2f2f2f;
        box-sizing: border-box;
        padding: 5px 10px;
        font-size: 12px;
    }
    #moodboard_nav_mobile .compare,
    #moodboard_nav_mobile .moodboardbutton {
        margin: 0;
        margin-top: 1px;
        margin-right: 5px;
        float: left;
        height: 30px;
        padding-right: 7px;
        padding-left: 7px;
        background-image: none;
        line-height: 28px;        
    }
    #moodboard_nav_mobile .loginbutton {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 7px;
        bottom: 4px;
        background: #6e6e6e;
        background-image: url('../images/icons/login.svg');   
        background-size: 16px 16px;
        background-position: center center;
        background-repeat: no-repeat;
        border-radius: 3px;
    }
    #moodboard_nav_mobile .slideout_mobile {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 200px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #5d5959;
        -webkit-transform: translateY(-100%);
        display: none;
        box-sizing: border-box;
        padding: 20px;
    }
    #moodboard_nav_mobile .slideout_mobile input {
        width: 100%;
        max-width: 100%;
        border-radius: 3px;
        box-sizing: border-box;
        padding: 5px;
        border: 1px solid transparent;
        float:none;
        margin: 2% 1% 0 0;
        background-color:#ffffff;
    }
    #moodboard_nav_mobile .slideout_mobile input[type='submit']{
        background: url('../images/icons/button-arrow.png') no-repeat scroll 95% 50% #b4b0b0;
        text-align: left;
    }
    #moodboard_nav_mobile .slideout_mobile a{
        color: #ffffff;
    }
    #moodboard_nav_mobile .slideout_mobile .pclose {
        color: #ffffff;
        position: absolute;
        left: 50%;
        top: -10px;
        margin-left: -10px;

	    font-size: 15px;
	    line-height: 20px;
	    text-transform: lowercase;
	    text-align: center;
	    width: 20px;
	    height: 20px;
	    border-radius: 3px;
	    cursor: pointer;
	    /*border: 1px solid #141414; */
	    font-weight: bold;
	    color: transparent;
	    position: relative;
	    z-index: 3;

	    background-image: url('../images/icons/close-slideout.svg');
	    background-size: 10px 10px;
	    background-repeat: no-repeat;
	    background-position: 50% 50%;

    }
    #moodboard_nav_mobile .slideout_mobile.moodboardlist ul li{
        display: block;
        border-bottom: 1px solid #2f2f2f;
        height: 30px;
        width: 100%;
        color: #ffffff;
        border-radius: 3px;
        box-sizing: border-box;
        padding: 5px;
    }
    #moodboard_nav_mobile .slideout_mobile.moodboardlist ul li.isactive{
        height: 48px;
        background-color: #3a3a3a;

    }
    #moodboard_nav_mobile .slideout_mobile.moodboardlist ul li a{
        color: #ffffff;
    }
    #moodboard_nav_mobile .slideout_mobile.moodboardlist ul li a div.subtag{
        display:block;
        width: 100%;
        float: right;
        font-size: 0.8em;
    }
    #moodboard_nav_mobile .slideout_mobile.moodboardlist ul li a div.moodboard-view-icon{
        display:inline-block;
        right: 50px;
    }
    #moodboard_nav_mobile .slideout_mobile.moodboardlist ul li a div.moodboard-delete{
        display:inline-block;
        right: 25px;
    }
    /* add new */
    a.new-moodboard-mobile:before {
        content: "+";
        width: 20px;
        height: 20px;
        background: #2a2a2a;
        color: #fff;
        line-height: 18px;
        display: block;
        float: left;
        border-radius: 3px;
        text-align: center;
        font-size: 1em;
        margin-right: 7px;
    }
    a.new-moodboard-mobile:hover {
        background: transparent!important;
    }
    span.enlarge_picture {
        position: absolute;
        top: 3px;
        right: 3px;
        min-width: 18px!important;
        min-height: 18px!important;
        background-color: rgba(0,0,0,0.25);
        border-radius: 2px;
    }



}

.mfp-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.78);
  z-index: 9999;
}
.mfp-figure {
  height: 100vh;
}
.mfp-figure .mfp-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mfp-zoom-out-cur {
  cursor: zoom-out;
}