/*! By André Rinas, www.andrerinas.de Documentation, www.simplelightbox.com Available for use under the MIT License Version 2.14.0 */ body.hidden-scroll { overflow: hidden; } .sl-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #fff; display: none; z-index: 1035; } .sl-wrapper { z-index: 1040; width: 100%; height: 100%; left: 0; top: 0; position: fixed; } .sl-wrapper * { box-sizing: border-box; } .sl-wrapper button { border: 0 none; background: transparent; font-size: 28px; padding: 0; cursor: pointer; } .sl-wrapper button:hover { opacity: 0.7; } .sl-wrapper .sl-close { display: none; position: fixed; right: 27%; top: 30px; z-index: 90; margin-top: -14px; margin-right: -14px; height: 44px; width: 44px; line-height: 44px; font-family: Arial, Baskerville, monospace; color: #000; font-size: 3rem; background: #f3f3f3; border-radius: 20px; } .sl-wrapper .sl-counter { display: none; position: fixed; top: 30px; left: 27%; z-index: 90; color: #000; font-size: 2rem; } .sl-wrapper .sl-download { display: none; position: fixed; bottom: 5px; width: 100%; text-align: center; z-index: 10060; color: #fff; font-size: 1rem; } .sl-wrapper .sl-download a { color: #fff; } .sl-wrapper .sl-navigation { width: 100%; display: none; } .sl-wrapper .sl-navigation button { position: fixed; top: 50%; margin-top: -22px; height: 48px; width: 22px; line-height: 44px; text-align: center; display: block; z-index: 10060; font-family: Arial, Baskerville, monospace; color: #000; } .sl-wrapper .sl-navigation button.sl-next { right: 5px; font-size: 2rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 5px; font-size: 2rem; } @media (min-width: 35.5em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 10px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 10px; font-size: 3rem; } } @media (min-width: 50em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 26%; /*right: 100px;*/ font-size: 3rem; background: #f3f3f3; border-radius: 20px; z-index: 90; } .sl-wrapper .sl-navigation button.sl-prev { left: 26%; /*left: 100px;*/ background: #f3f3f3; border-radius: 20px; font-size: 3rem; z-index: 90; } } .sl-wrapper.sl-dir-rtl .sl-navigation { direction: ltr; } .sl-wrapper .sl-image { position: fixed; -ms-touch-action: none; touch-action: none; z-index: 10000; } .sl-wrapper .sl-image img { margin: 0; padding: 0; display: block; border: 0 none; width: 100%; height: auto; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; position: relative; z-index: 1009999; } @media (min-width: 35.5em) { .sl-wrapper .sl-image img { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image img { border: 0 none; } } .sl-wrapper .sl-image iframe { background: #000; border: 0 none; } @media (min-width: 35.5em) { .sl-wrapper .sl-image iframe { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image iframe { border: 0 none; } } .sl-wrapper .sl-image .sl-caption { display: none; padding: 10px; color: #fff; background: rgba(0, 0, 0, 0.8); font-size: 1rem; position: absolute; bottom: 0; left: 0; right: 0; } .sl-wrapper .sl-image .sl-caption.pos-top { bottom: auto; top: 0; } .sl-wrapper .sl-image .sl-caption.pos-outside { bottom: auto; } .sl-spinner { display: none; border: 5px solid #333; border-radius: 40px; height: 40px; left: 50%; margin: -20px 0 0 -20px; opacity: 0; position: fixed; top: 50%; width: 40px; z-index: 1007; -webkit-animation: pulsate 1s ease-out infinite; -moz-animation: pulsate 1s ease-out infinite; -ms-animation: pulsate 1s ease-out infinite; -o-animation: pulsate 1s ease-out infinite; animation: pulsate 1s ease-out infinite; } .sl-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .sl-transition { transition: -moz-transform ease 200ms; transition: -ms-transform ease 200ms; transition: -o-transform ease 200ms; transition: -webkit-transform ease 200ms; transition: transform ease 200ms; } @-webkit-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @keyframes pulsate { 0% { transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @-moz-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @-o-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @-ms-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }