:root { --epcl-font-family: "DM Sans", sans-serif; --epcl-title-font-family: "Urbanist", sans-serif; --epcl-font-size: 16px; --epcl-line-height: 1.9; --epcl-font-size-editor: 17px; --epcl-line-height-editor: 1.9; --epcl-main-color: var(--ghost-accent-color); --epcl-secondary-color: #FF2AAC; --epcl-titles-color: #282424; --epcl-black: #282424; --epcl-meta-color: #4D6385; --epcl-background-color: #FAF8FF; --epcl-boxes-background-color: #fff; --epcl-boxes-border-color: #E9E8FF; --epcl-border-color: #E9E8FF; --epcl-boxes-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.03); --epcl-small-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); --epcl-medium-shadow: 0px 8px 16px -4px rgba(0, 0, 0, 0.10); --epcl-large-shadow: 0px 4px 25px -4px rgba(0, 0, 0, 0.20); --epcl-transition-bezier: cubic-bezier(.5, 2.5, .7, .7); --epcl-code-background: #211d3f; --epcl-code-color: #b0b9c5; --epcl-small-border-radius: 4px; --epcl-medium-border-radius: 10px; --epcl-large-border-radius: 100px } .toc { overflow-y: auto } .toc > .toc-list { overflow: hidden; position: relative } .toc > .toc-list li { list-style: none } .toc-list { margin: 0; padding-left: 30px; font-size: 15px } .toc-list .toc-list { padding: 5px; padding-left: 20px; font-size: 15px } a.toc-link { display: inline-block; height: 100%; padding: 5px 0 0 } .is-collapsible { max-height: 500px; overflow: hidden; opacity: 1; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out } .is-collapsed { max-height: 0; opacity: 0 } .is-position-fixed { position: fixed !important; top: 0 } .is-active-link { font-weight: 600; color: var(--epcl-black) } .toc-link:before { background-color: var(--epcl-border-color); content: ' '; display: inline-block; height: inherit; left: 0; margin-top: -1px; position: absolute; width: 2px; -webkit-transition: all 300ms ease; transition: all 300ms ease } .is-active-link:before { background-color: var(--epcl-main-color) } .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: none } .slick-list.dragging { cursor: pointer } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto } .slick-track:after, .slick-track:before { display: table; content: '' } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px } [dir=rtl] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } .slick-loading .slick-list { outline: 0 } .slick-next, .slick-prev { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 35px; height: 35px; padding: 0; text-align: center; line-height: 35px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: #fff; border: none; outline: none; background: var(--epcl-main-color); border-radius: 30px; z-index: 10 } .outer-arrows .slick-next, .outer-arrows .slick-prev, .top-arrows .slick-next, .top-arrows .slick-prev { width: 50px; height: 50px; line-height: 50px } .slick-next:before, .slick-prev:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../images/right-arrow-white.svg") no-repeat center center; background-size: 15px } .slick-prev:before { background: url("../images/left-arrow-white.svg") no-repeat center center; background-size: 15px } .outer-arrows .slick-prev { left: -10px } .outer-arrows .slick-next { right: -10px } .top-arrows .slick-prev { left: auto; right: 80px; top: -60px; -webkit-transform: none; -ms-transform: none; transform: none } .top-arrows .slick-next { right: 20px; top: -60px; -webkit-transform: none; -ms-transform: none; transform: none } .top-arrows .slick-next:hover, .top-arrows .slick-prev:hover { -webkit-transform: translate(-2px, -2px); -ms-transform: translate(-2px, -2px); transform: translate(-2px, -2px) } .bottom-arrows .slick-prev { top: auto; left: auto; right: 40px; bottom: 5px; -webkit-transform: none; -ms-transform: none; transform: none } .bottom-arrows .slick-next { top: auto; right: 0px; bottom: 5px; -webkit-transform: none; -ms-transform: none; transform: none } .slick-slider .slick-arrow.slick-disabled { opacity: 0; visibility: hidden } .slick-prev { left: 20px } .slick-next { right: 20px } .slick-next:hover, .slick-prev:hover { background-color: var(--epcl-main-color) } .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before { opacity: 1 } .slick-next.slick-disabled:before, .slick-prev.slick-disabled:before { opacity: .25 } .slick-next:before, .slick-prev:before { -webkit-transition: all 300ms ease; transition: all 300ms ease } [dir=rtl] .slick-prev { right: 20px; left: auto; -webkit-transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%) } .slick-prev:before { content: '\f104' } [dir=rtl] .slick-prev:before { content: '\f105' } [dir=rtl] .slick-next { right: auto; left: 20px; -webkit-transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%) } .slick-next:before { content: '\f105' } [dir=rtl] .slick-next:before { content: '\f104' } .slick-dotted.slick-slider { margin-bottom: 30px } .slick-dots { position: absolute; bottom: -40px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center } .slick-dots li { position: relative; display: inline-block; margin: 0 7px; padding: 0; cursor: pointer } .slick-dots li button { border-radius: 10px; font-size: 0; display: block; width: 9px; height: 9px; text-align: center; line-height: 20px; font-weight: bold; cursor: pointer; outline: none; background: #DFE2FB; position: relative; -webkit-box-shadow: var(--epcl-medium-shadow); box-shadow: var(--epcl-medium-shadow) } .slick-dots li.slick-active button { opacity: 1; width: 22px; background: var(--epcl-secondary-color) } .slick-dots li button:hover { opacity: 1 } code[class*=language-], pre[class*=language-] { letter-spacing: 0px; color: #b0b9c5; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre-wrap; word-spacing: normal; word-break: break-all; word-wrap: normal; line-height: 1.6; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none } code[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, pre[class*=language-]::-moz-selection { text-shadow: none; background: #383e49 } code[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, pre[class*=language-]::-moz-selection { text-shadow: none; background: #9aa2b1 } code[class*=language-] ::selection, code[class*=language-]::selection, pre[class*=language-] ::selection, pre[class*=language-]::selection { text-shadow: none; background: #9aa2b1 } @media print { code[class*=language-], pre[class*=language-] { text-shadow: none } } pre[class*=language-] { padding: 1.5em 1.75em; margin: .5em 0; overflow: auto } :not(pre) > code[class*=language-], pre[class*=language-] { background: #211d3f; border-radius: var(--epcl-medium-border-radius) } :not(pre) > code[class*=language-] { padding: .1em; border-radius: .3em; white-space: normal } .token.cdata, .token.comment, .token.doctype, .token.prolog { color: #5C6370 } .token.punctuation { color: #abb2bf } .token.selector, .token.tag { color: #e06c75 } .token.attr-name, .token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol { color: #d19a66 } .token.attr-value, .token.builtin, .token.char, .token.inserted, .token.string { color: #98c379 } .language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url { color: #56b6c2 } .token.atrule, .token.keyword { color: #c678dd } .token.function { color: #61afef } .token.important, .token.regex, .token.variable { color: #c678dd } .token.bold, .token.important { font-weight: bold } .token.italic { font-style: italic } .token.entity { cursor: help } pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber } pre.line-numbers > code { position: relative } .line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; letter-spacing: -1px; border-right: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber } .line-numbers-rows > span:before { content: counter(linenumber); color: #5C6370; display: block; padding-right: 0.8em; text-align: right } div.code-toolbar { position: relative } div.code-toolbar > .toolbar { position: absolute; top: 10px; right: 25px; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; opacity: 0 } div.code-toolbar:hover > .toolbar { opacity: 1 } div.code-toolbar > .toolbar .toolbar-item { display: inline-block } div.code-toolbar > .toolbar a { cursor: pointer } div.code-toolbar > .toolbar > .toolbar-item > button { background: none; border: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span { color: #fff; font-weight: 700; font-size: .8em; padding: 3px 10px; border-radius: var(--epcl-large-border-radius) } div.code-toolbar > .toolbar > .toolbar-item > span { text-transform: uppercase } div.code-toolbar > .toolbar > .toolbar-item > a { background: var(--epcl-main-color); color: #fff } div.code-toolbar .toolbar-item .copy-to-clipboard-button { background: var(--epcl-main-color) !important; color: #fff } div.code-toolbar > .toolbar > .toolbar-item > a:focus, div.code-toolbar > .toolbar > .toolbar-item > a:hover, div.code-toolbar > .toolbar > .toolbar-item > button:focus, div.code-toolbar > .toolbar > .toolbar-item > button:hover, div.code-toolbar > .toolbar > .toolbar-item > span:focus, div.code-toolbar > .toolbar > .toolbar-item > span:hover { color: #fff; text-decoration: none } .tooltipster-small { background: #fff; color: var(--epcl-black); border-radius: 4px; border: 2px solid var(--epcl-border-color); -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1) } .tooltipster-small .tooltipster-content { font: 13px var(--epcl-title-font-family); color: #333; padding: 7px; text-align: center } .tooltipster-default { background: #1f1f1f; color: #fff; -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3) } .tooltipster-default .tooltipster-content { font-family: var(--epcl-title-font-family), sans-serif; font-size: 13px; line-height: 1.4; padding: 15px 25px; overflow: hidden } .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { } .tooltipster-icon { cursor: help; margin-left: 4px } .tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999999; pointer-events: none; width: auto; overflow: visible } .tooltipster-base .tooltipster-content { overflow: hidden } .tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1 } .tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute } .tooltipster-arrow-top span, .tooltipster-arrow-top-left span, .tooltipster-arrow-top-right span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-top: 8px solid; bottom: -7px } .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -7px } .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-left span, .tooltipster-arrow-bottom-right span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid; top: -7px } .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -7px } .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top span { left: 0; right: 0; margin: 0 auto } .tooltipster-arrow-bottom-left span, .tooltipster-arrow-top-left span { left: 6px } .tooltipster-arrow-bottom-left .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { left: 5px } .tooltipster-arrow-bottom-right span, .tooltipster-arrow-top-right span { right: 6px } .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border { right: 5px } .tooltipster-arrow-left .tooltipster-arrow-border, .tooltipster-arrow-left span { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -7px } .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px } .tooltipster-arrow-right .tooltipster-arrow-border, .tooltipster-arrow-right span { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -7px; left: -7px } .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px } .tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; transition-property: opacity } .tooltipster-fade-show { opacity: 1 } .tooltipster-grow { -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-backface-visibility: hidden } .tooltipster-grow-show { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15) } .tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform } .tooltipster-swing-show { opacity: 1; -webkit-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1); -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4) } .tooltipster-fall { top: 0; -webkit-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15) } .tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; transition-property: all; top: 0px !important; opacity: 0 } .tooltipster-slide { left: -40px; -webkit-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15) } .tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; transition-property: all; left: 0px !important; opacity: 0 } .tooltipster-content-changing { opacity: 0.5; -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #fff; opacity: 0.8; filter: alpha(opacity=80) } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle } .mfp-align-top .mfp-container:before { display: none } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045 } .mfp-ajax-holder .mfp-content, .mfp-inline-holder .mfp-content { width: 100%; cursor: auto } .mfp-ajax-cur { cursor: progress } .mfp-zoom-out-cur { cursor: -webkit-zoom-out; cursor: zoom-out } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in } .mfp-auto-cursor .mfp-content { cursor: auto } .mfp-arrow, .mfp-close, .mfp-counter, .mfp-preloader { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .mfp-loading.mfp-figure { display: none } .mfp-hide { display: none !important } .mfp-preloader { color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044 } .mfp-preloader a { color: #cccccc } .mfp-preloader a:hover { color: white } .mfp-s-ready .mfp-preloader { display: none } .mfp-s-error .mfp-content { display: none } .mfp-arrow, button.mfp-close { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none } button::-moz-focus-inner { padding: 0; border: 0 } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0; cursor: pointer; filter: alpha(opacity=65); padding: 0 0 18px 10px; color: #282424; font-style: normal; font-size: 20px; -webkit-transition: all 300ms ease; transition: all 300ms ease } .mfp-close:focus, .mfp-close:hover { opacity: 1; filter: alpha(opacity=100) } .mfp-close-btn-in .mfp-close { color: #333333 } .mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close { color: var(--epcl-black); right: -6px; text-align: right; padding-right: 6px; -webkit-transition: all 300ms ease; transition: all 300ms ease; width: 100% } .mfp-counter { position: absolute; top: 0; right: 0; color: #282424; font-size: 12px; line-height: 18px } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; color: var(--epcl-black); font-size: 30px; line-height: 110px; -webkit-transition: all 300ms ease; transition: all 300ms ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } svg { pointer-events: none !important } .mfp-arrow:active { margin-top: -54px } .mfp-arrow:focus, .mfp-arrow:hover { opacity: 1; filter: alpha(opacity=100) } .mfp-arrow-left { left: 0 } .mfp-arrow-left .mfp-a, .mfp-arrow-left:after { margin-left: 31px } .mfp-arrow-left .mfp-b, .mfp-arrow-left:before { margin-left: 25px } .mfp-arrow-right { right: 0 } .mfp-arrow-right .mfp-a, .mfp-arrow-right:after { margin-left: 39px } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px } .mfp-iframe-holder .mfp-close { top: -40px } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25% } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black } img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto } .mfp-figure { line-height: 0 } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; background: #444444 } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px } .mfp-figure figure { margin: 0 } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto } .mfp-title { text-align: left; line-height: 18px; color: #282424; padding-top: 5px; font-size: 14px; word-wrap: break-word; padding-right: 36px } .mfp-image-holder .mfp-content { max-width: 100% } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer } @media screen and (max-height: 300px), screen and (max-width: 800px) and (orientation: landscape) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0 } .mfp-img-mobile img.mfp-img { padding: 0 } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0 } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; box-sizing: border-box } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0 } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0 } } @media (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75) } .mfp-arrow-left { -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0 } .mfp-arrow-right { -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100% } .mfp-container { padding-left: 6px; padding-right: 6px } } .mfp-ie7 .mfp-img { padding: 0 } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px } .mfp-ie7 .mfp-container { padding: 0 } .mfp-ie7 .mfp-content { padding-top: 44px } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0 }