.xthumb-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; background: #000; z-index: 9998; cursor: grab; }
.xthumb { -webkit-tap-highlight-color: transparent; }
.xthumb-header { height: 44px; overflow: hidden; font: bold 17px/21px "Helvetica Neue",Helvetica,sans-serif; padding: 0 44px 0 80px; position: absolute; top: 0; right: 0; left: 0; color: #fff; background: rgba(81,81,81, 0.75); border-bottom: 1px solid rgba(67, 67, 67, 0.85); z-index: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.xthumb-header-category { margin: 0 0 0 15px; display: inline-block; }
.xthumb-header-title-wrap { display: table; width: 100%; }
.xthumb-header-title { font-weight: 400; line-height: 16px; height: 44px; text-align: center; display: table-cell; vertical-align: middle; }
.xthumb-header-title > span { white-space: nowrap; }
.xthumb-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; background: url(i/close.svg) no-repeat 50% 50%; cursor: pointer; }

.xthumb-header-meta { position: absolute; top: 10px; left: 15px; }

.xthumb-light .xthumb-header,
.xthumb-light .xthumb-nav { opacity: 0 !important; }

.xthumb-grabbing { cursor: grabbing; }

.xthumb,
.xthumb-scroll-container,
.xthumb-item,
.xthumb-img { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; }

.xthumb-img { margin: auto; pointer-events: none; max-width: 100%; max-height: 100%; min-height: 50px; min-width: 50px; background: url(i/loading.gif) no-repeat 50% 50%; }
.xthumb-scroll-container { overflow: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0s cubic-bezier(0, 1, 1, 1) 0s; transition: transform 0s cubic-bezier(0, 1, 1, 1) 0s; }

.xthumb-active .layout__bg { display: none; }

.xthumb-nav { position: absolute; z-index: 1; top: 50%; margin: -50px 0 0 0; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.xthumb-nav.active { opacity: 0.5; cursor: pointer;  width: 100px; height: 100px; }
.xthumb-next { background: url(i/next.svg); right: 25px;  }
.xthumb-prev { background: url(i/prev.svg); left: 25px; }
.xthumb-nav.active:hover { opacity: 0.8; }

.xthumb-remove { width: 30px; height: 30px; background: #ac2925 url(i/remove.svg) no-repeat 50% 50%; position: absolute; bottom: 10px; right: 10px; cursor: pointer; opacity: 1; }
.xthumb-remove:hover { background-color: #d2322d; }

@media screen and (max-width:600px) {

    .xthumb-header { padding-left: 70px; }
    .xthumb-header-num { font-size: 0; }
    .xthumb-header-num:before { content: attr(data-short); font-size: 15px; }
    .xthumb-header-title { font-size: 15px; line-height: 14px; }
    .xthumb-header-title > span { font-size: 12px; }
    .xthumb-header-meta { left: 8px; font-weight: 400; }
    .xthumb-header-category { display: none; }
    .xthumb-nav { display: none; }
    .xthumb-remove { display: none; }


}