/* ===================================================================
* Infinity Third-party Stylesheets
* Template Ver. 2.0.0
* 12-17-2021
* -------------------------------------------------------------------
*
* TOC:
* # PrismJS
* # Swiper
* # PhotoSwipe main CSS
* # PhotoSwipe Skin
*
* ------------------------------------------------------------------- */
/* ===================================================================
* # PrismJS 1.20.0
* https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+markup-templating+php
*
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
* ------------------------------------------------------------------- */
code[class*="language-"],
pre[class*="language-"] {
color : #ccc;
background : none;
font-family : var(--font-mono);
font-size : calc(var(--text-size) * 0.9444);
text-align : left;
white-space : pre;
word-spacing : normal;
word-break : normal;
word-wrap : normal;
line-height : var(--vspace-1);
-moz-tab-size : 4;
-o-tab-size : 4;
tab-size : 4;
-webkit-hyphens : none;
-moz-hyphens : none;
-ms-hyphens : none;
hyphens : none;
}
/* Code blocks */
pre[class*="language-"] {
padding : var(--vspace-0_5) 0 var(--vspace-1);
margin : 0;
overflow : auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background : #2d2d2d;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding : .1em;
white-space : normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color : #999;
}
.token.punctuation {
color : #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color : #e2777a;
}
.token.function-name {
color : #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color : #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color : #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color : #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color : #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color : #67cdcc;
}
.token.important,
.token.bold {
font-weight : bold;
}
.token.italic {
font-style : italic;
}
.token.entity {
cursor : help;
}
.token.inserted {
color : green;
}
/* ===================================================================
* # Swiper 6.4.5
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2020 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: December 18, 2020
* ------------------------------------------------------------------- */
@font-face {
font-family : "swiper-icons";
src : url("data:application/font-woff;charset=utf-8;base64, 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") format("woff");
font-weight : 400;
font-style : normal;
}
:root {
--swiper-theme-color : #007aff;
}
.swiper-container {
margin-left : auto;
margin-right : auto;
position : relative;
overflow : hidden;
list-style : none;
padding : 0;
/* Fix of Webkit flickering */
z-index : 1;
}
.swiper-container-vertical>.swiper-wrapper {
flex-direction : column;
}
.swiper-wrapper {
position : relative;
width : 100%;
height : 100%;
z-index : 1;
display : flex;
transition-property : transform;
box-sizing : content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
transform : translate3d(0px, 0, 0);
}
.swiper-container-multirow>.swiper-wrapper {
flex-wrap : wrap;
}
.swiper-container-multirow-column>.swiper-wrapper {
flex-wrap : wrap;
flex-direction : column;
}
.swiper-container-free-mode>.swiper-wrapper {
transition-timing-function : ease-out;
margin : 0 auto;
}
.swiper-slide {
flex-shrink : 0;
width : 100%;
height : 100%;
position : relative;
transition-property : transform;
}
.swiper-slide-invisible-blank {
visibility : hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height : auto;
}
.swiper-container-autoheight .swiper-wrapper {
align-items : flex-start;
transition-property : transform, height;
}
/* 3D Effects */
.swiper-container-3d {
perspective : 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
transform-style : preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
pointer-events : none;
z-index : 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image : linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image : linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image : linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image : linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode>.swiper-wrapper {
overflow : auto;
scrollbar-width : none;
/* For Firefox */
-ms-overflow-style : none;
/* For Internet Explorer and Edge */
}
.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
display : none;
}
.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
scroll-snap-align : start start;
}
.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
scroll-snap-type : x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
scroll-snap-type : y mandatory;
}
:root {
--swiper-navigation-size : 44px;
/*
--swiper-navigation-color : var(--swiper-theme-color);
*/
}
.swiper-button-prev,
.swiper-button-next {
position : absolute;
top : 50%;
width : calc(var(--swiper-navigation-size) / 44 * 27);
height : var(--swiper-navigation-size);
margin-top : calc(-1 * var(--swiper-navigation-size) / 2);
z-index : 10;
cursor : pointer;
display : flex;
align-items : center;
justify-content : center;
color : var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity : 0.35;
cursor : auto;
pointer-events : none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-family : swiper-icons;
font-size : var(--swiper-navigation-size);
text-transform : none !important;
letter-spacing : 0;
text-transform : none;
font-variant : initial;
line-height : 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left : 10px;
right : auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content : "prev";
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right : 10px;
left : auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content : "next";
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
--swiper-navigation-color : #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
--swiper-navigation-color : #000000;
}
.swiper-button-lock {
display : none;
}
:root {
/*
--swiper-pagination-color: var(--swiper-theme-color);
*/
}
.swiper-pagination {
position : absolute;
text-align : center;
transition : 300ms opacity;
transform : translate3d(0, 0, 0);
z-index : 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity : 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom : 10px;
left : 0;
width : 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow : hidden;
font-size : 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform : scale(0.33);
position : relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform : scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform : scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform : scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform : scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform : scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform : scale(0.33);
}
.swiper-pagination-bullet {
width : 8px;
height : 8px;
display : inline-block;
border-radius : 100%;
background : #000;
opacity : 0.2;
}
button.swiper-pagination-bullet {
border : none;
margin : 0;
padding : 0;
box-shadow : none;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor : pointer;
}
.swiper-pagination-bullet-active {
opacity : 1;
background : var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical>.swiper-pagination-bullets {
right : 10px;
top : 50%;
transform : translate3d(0px, -50%, 0);
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin : 6px 0;
display : block;
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top : 50%;
transform : translateY(-50%);
width : 8px;
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display : inline-block;
transition : 200ms transform, 200ms top;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin : 0 4px;
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left : 50%;
transform : translateX(-50%);
white-space : nowrap;
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition : 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition : 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
background : rgba(0, 0, 0, 0.25);
position : absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background : var(--swiper-pagination-color, var(--swiper-theme-color));
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
transform : scale(0);
transform-origin : left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin : right top;
}
.swiper-container-horizontal>.swiper-pagination-progressbar,
.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width : 100%;
height : 4px;
left : 0;
top : 0;
}
.swiper-container-vertical>.swiper-pagination-progressbar,
.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width : 4px;
height : 100%;
left : 0;
top : 0;
}
.swiper-pagination-white {
--swiper-pagination-color : #ffffff;
}
.swiper-pagination-black {
--swiper-pagination-color : #000000;
}
.swiper-pagination-lock {
display : none;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius : 10px;
position : relative;
-ms-touch-action : none;
background : rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal>.swiper-scrollbar {
position : absolute;
left : 1%;
bottom : 3px;
z-index : 50;
height : 5px;
width : 98%;
}
.swiper-container-vertical>.swiper-scrollbar {
position : absolute;
right : 3px;
top : 1%;
z-index : 50;
width : 5px;
height : 98%;
}
.swiper-scrollbar-drag {
height : 100%;
width : 100%;
position : relative;
background : rgba(0, 0, 0, 0.5);
border-radius : 10px;
left : 0;
top : 0;
}
.swiper-scrollbar-cursor-drag {
cursor : move;
}
.swiper-scrollbar-lock {
display : none;
}
.swiper-zoom-container {
width : 100%;
height : 100%;
display : flex;
justify-content : center;
align-items : center;
text-align : center;
}
.swiper-zoom-container>img,
.swiper-zoom-container>svg,
.swiper-zoom-container>canvas {
max-width : 100%;
max-height : 100%;
object-fit : contain;
}
.swiper-slide-zoomed {
cursor : move;
}
/* Preloader */
:root {
/*
--swiper-preloader-color: var(--swiper-theme-color);
*/
}
.swiper-lazy-preloader {
width : 42px;
height : 42px;
position : absolute;
left : 50%;
top : 50%;
margin-left : -21px;
margin-top : -21px;
z-index : 10;
transform-origin : 50%;
animation : swiper-preloader-spin 1s infinite linear;
box-sizing : border-box;
border : 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius : 50%;
border-top-color : transparent;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color : #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color : #000;
}
@keyframes swiper-preloader-spin {
100% {
transform : rotate(360deg);
}
}
/* a11y */
.swiper-container .swiper-notification {
position : absolute;
left : 0;
top : 0;
pointer-events : none;
opacity : 0;
z-index : -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function : ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events : none;
transition-property : opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events : none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events : auto;
}
.swiper-container-cube {
overflow : visible;
}
.swiper-container-cube .swiper-slide {
pointer-events : none;
-webkit-backface-visibility : hidden;
backface-visibility : hidden;
z-index : 1;
visibility : hidden;
transform-origin : 0 0;
width : 100%;
height : 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events : none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin : 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events : auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next+.swiper-slide {
pointer-events : auto;
visibility : visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
z-index : 0;
-webkit-backface-visibility : hidden;
backface-visibility : hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position : absolute;
left : 0;
bottom : 0px;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
-webkit-filter : blur(50px);
filter : blur(50px);
z-index : 0;
}
.swiper-container-flip {
overflow : visible;
}
.swiper-container-flip .swiper-slide {
pointer-events : none;
-webkit-backface-visibility : hidden;
backface-visibility : hidden;
z-index : 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events : none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events : auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
z-index : 0;
-webkit-backface-visibility : hidden;
backface-visibility : hidden;
}
/* ===================================================================
* # PhotoSwipe main CSS by Dmitry Semenov
* photoswipe.com | MIT license
*
* ------------------------------------------------------------------- */
/*
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
display : none;
position : absolute;
width : 100%;
height : 100%;
left : 0;
top : 0;
overflow : hidden;
-ms-touch-action : none;
touch-action : none;
z-index : 1500;
-webkit-text-size-adjust : 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility : hidden;
outline : none;
}
.pswp * {
-webkit-box-sizing : border-box;
box-sizing : border-box;
}
.pswp img {
max-width : none;
}
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity : 0.001;
will-change : opacity;
/* for open/close transition */
-webkit-transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--open {
display : block;
}
.pswp--zoom-allowed .pswp__img {
/* autoprefixer: off */
cursor : -webkit-zoom-in;
cursor : -moz-zoom-in;
cursor : zoom-in;
}
.pswp--zoomed-in .pswp__img {
/* autoprefixer: off */
cursor : -webkit-grab;
cursor : -moz-grab;
cursor : grab;
}
.pswp--dragging .pswp__img {
/* autoprefixer: off */
cursor : -webkit-grabbing;
cursor : -moz-grabbing;
cursor : grabbing;
}
/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0;
-webkit-transform : translateZ(0);
transform : translateZ(0);
-webkit-backface-visibility : hidden;
will-change : opacity;
}
.pswp__scroll-wrap {
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
overflow : hidden;
}
.pswp__container,
.pswp__zoom-wrap {
-ms-touch-action : none;
touch-action : none;
position : absolute;
left : 0;
right : 0;
top : 0;
bottom : 0;
}
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
-webkit-user-select : none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
-webkit-tap-highlight-color : transparent;
-webkit-touch-callout : none;
}
.pswp__zoom-wrap {
position : absolute;
width : 100%;
-webkit-transform-origin : left top;
-ms-transform-origin : left top;
transform-origin : left top;
/* for open/close transition */
-webkit-transition : -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition : transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp__bg {
will-change : opacity;
/* for open/close transition */
-webkit-transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
-webkit-transition : none;
transition : none;
}
.pswp__container,
.pswp__zoom-wrap {
-webkit-backface-visibility : hidden;
}
.pswp__item {
position : absolute;
left : 0;
right : 0;
top : 0;
bottom : 0;
overflow : hidden;
}
.pswp__img {
position : absolute;
width : auto;
height : auto;
top : 0;
left : 0;
}
/*
stretched thumbnail or div placeholder element (see below)
style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
-webkit-backface-visibility : hidden;
}
/*
div element that matches size of large image
large image loads on top of it
*/
.pswp__img--placeholder--blank {
background : #222;
}
.pswp--ie .pswp__img {
width : 100% !important;
height : auto !important;
left : 0;
top : 0;
}
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg {
position : absolute;
left : 0;
top : 50%;
width : 100%;
text-align : center;
font-size : 14px;
line-height : 16px;
margin-top : -8px;
color : #CCC;
}
.pswp__error-msg a {
color : #CCC;
text-decoration : underline;
}
/* ===================================================================
* # PhotoSwipe Skin
*
*
* ------------------------------------------------------------------- */
/*
Contents:
1. Buttons
2. Share modal and links
3. Index indicator ("1 of X" counter)
4. Caption
5. Loading indicator
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
*/
/* -------------------------------------------------------------------
* ## 1. buttons
* ------------------------------------------------------------------- */
/* <button> css reset */
.pswp__button {
width : 44px;
height : 44px;
line-height : 1;
position : relative;
background : none;
cursor : pointer;
overflow : visible;
-webkit-appearance : none;
display : block;
border : 0;
padding : 0;
margin : 0;
float : right;
opacity : 0.6;
-webkit-transition : opacity 0.2s;
transition : opacity 0.2s;
-webkit-box-shadow : none;
box-shadow : none;
}
.pswp__button:focus,
.pswp__button:hover {
opacity : 1;
background-color : transparent;
}
.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 {
background : url(../images/photoswipe/default-skin.png) 0 0 no-repeat;
background-size : 264px 88px;
width : 44px;
height : 44px;
}
@media (-webkit-min-device-pixel-ratio: 1.1),
(-webkit-min-device-pixel-ratio: 1.09375),
(min-resolution: 105dpi),
(min-resolution: 1.1dppx) {
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image : url(images/photoswipe/default-skin.svg);
}
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background : none;
}
}
.pswp__button--close {
background-position : 0 -44px;
}
.pswp__button--share {
background-position : -44px -44px;
}
.pswp__button--fs {
display : none;
}
.pswp--supports-fs .pswp__button--fs {
display : block;
}
.pswp--fs .pswp__button--fs {
background-position : -44px 0;
}
.pswp__button--zoom {
display : none;
background-position : -88px 0;
}
.pswp--zoom-allowed .pswp__button--zoom {
display : block;
}
.pswp--zoomed-in .pswp__button--zoom {
background-position : -132px 0;
}
/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
visibility : hidden;
}
/*
Arrow buttons hit area
(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
background : none;
top : 50%;
margin-top : -22px;
width : 30px;
height : 32px;
position : absolute;
}
.pswp__button--arrow--left {
left : 12px;
}
.pswp__button--arrow--right {
right : 12px;
}
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
content : '';
top : 0;
background-color : rgba(0, 0, 0, 0.3);
height : 30px;
width : 32px;
position : absolute;
border-radius : 3px;
}
.pswp__button--arrow--left:before {
left : 6px;
background-position : -138px -44px;
}
.pswp__button--arrow--right:before {
right : 6px;
background-position : -94px -44px;
}
/* -------------------------------------------------------------------
* ## 2. Share modal/popup and links
* ------------------------------------------------------------------- */
.pswp__counter,
.pswp__share-modal {
-webkit-user-select : none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
}
.pswp__share-modal {
display : block;
background : rgba(0, 0, 0, 0.5);
width : 100%;
height : 100%;
top : 0;
left : 0;
padding : 10px;
position : absolute;
z-index : 1600;
opacity : 0;
-webkit-transition : opacity 0.25s ease-out;
transition : opacity 0.25s ease-out;
-webkit-backface-visibility : hidden;
will-change : opacity;
}
.pswp__share-modal--hidden {
display : none;
}
.pswp__share-tooltip {
z-index : 1620;
position : absolute;
background : #FFF;
top : 56px;
border-radius : 3px;
display : block;
width : auto;
right : 44px;
-webkit-box-shadow : 0 2px 5px rgba(0, 0, 0, 0.25);
box-shadow : 0 2px 5px rgba(0, 0, 0, 0.25);
-webkit-transform : translateY(6px);
-ms-transform : translateY(6px);
transform : translateY(6px);
-webkit-transition : -webkit-transform 0.25s;
transition : transform 0.25s;
-webkit-backface-visibility : hidden;
will-change : transform;
}
.pswp__share-tooltip a {
display : block;
padding : 9px 15px;
color : #000;
text-decoration : none;
font-size : 13px;
line-height : 18px;
}
.pswp__share-tooltip a:hover {
text-decoration : none;
color : #000;
}
.pswp__share-tooltip a:first-child {
/* round corners on the first/last list item */
border-radius : 3px 3px 0 0;
}
.pswp__share-tooltip a:last-child {
border-radius : 0 0 3px 3px;
}
.pswp__share-modal--fade-in {
opacity : 1;
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
-webkit-transform : translateY(0);
-ms-transform : translateY(0);
transform : translateY(0);
}
/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
padding : 16px 12px;
}
a.pswp__share--facebook:before {
content : '';
display : block;
width : 0;
height : 0;
position : absolute;
top : -12px;
right : 15px;
border : 6px solid transparent;
border-bottom-color : #FFF;
-webkit-pointer-events : none;
-moz-pointer-events : none;
pointer-events : none;
}
a.pswp__share--facebook:hover {
background : #3E5C9A;
color : #FFF;
}
a.pswp__share--facebook:hover:before {
border-bottom-color : #3E5C9A;
}
a.pswp__share--twitter:hover {
background : #55ACEE;
color : #FFF;
}
a.pswp__share--pinterest:hover {
background : #CCC;
color : #CE272D;
}
a.pswp__share--download:hover {
background : #DDD;
}
/* -------------------------------------------------------------------
* ## 3. Index indicator ("1 of X" counter)
* ------------------------------------------------------------------- */
.pswp__counter {
position : absolute;
left : 6px;
top : 0;
height : 44px;
font-size : 13px;
line-height : 44px;
color : #FFF;
opacity : 0.75;
padding : 0 10px;
}
/* -------------------------------------------------------------------
* ## 4. Caption
* ------------------------------------------------------------------- */
.pswp__caption {
position : absolute;
left : 0;
bottom : 0;
width : 100%;
min-height : 45px;
}
.pswp__caption h4 {
font-size : 1.6rem;
line-height : 1.5;
margin : 0 0 .6rem;
color : white;
}
.pswp__caption small {
font-size : 12px;
color : rgba(255, 255, 255, 0.5);
}
.pswp__caption__center {
text-align : center;
max-width : 900px;
margin : 0 auto;
font-size : 14px;
padding : 10px;
line-height : 20px;
color : rgba(255, 255, 255, 0.5);
}
.pswp__caption--empty {
display : none;
}
/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
visibility : hidden;
}
/* -------------------------------------------------------------------
* ## 5. Loading indicator (preloader)
* You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
* ------------------------------------------------------------------- */
.pswp__preloader {
width : 44px;
height : 44px;
position : absolute;
top : 0;
left : 50%;
margin-left : -22px;
opacity : 0;
-webkit-transition : opacity 0.25s ease-out;
transition : opacity 0.25s ease-out;
will-change : opacity;
direction : ltr;
}
.pswp__preloader__icn {
width : 20px;
height : 20px;
margin : 12px;
}
.pswp__preloader--active {
opacity : 1;
}
.pswp__preloader--active .pswp__preloader__icn {
/* We use .gif in browsers that don't support CSS animation */
background : url(..images/photoswipe/preloader.gif) 0 0 no-repeat;
}
.pswp--css_animation .pswp__preloader--active {
opacity : 1;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
-webkit-animation : clockwise 500ms linear infinite;
animation : clockwise 500ms linear infinite;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
-webkit-animation : donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
animation : donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}
.pswp--css_animation .pswp__preloader__icn {
background : none;
opacity : 0.75;
width : 14px;
height : 14px;
position : absolute;
left : 15px;
top : 15px;
margin : 0;
}
.pswp--css_animation .pswp__preloader__cut {
/*
The idea of animating inner circle is based on Polymer ("material") loading indicator
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
*/
position : relative;
width : 7px;
height : 14px;
overflow : hidden;
}
.pswp--css_animation .pswp__preloader__donut {
-webkit-box-sizing : border-box;
box-sizing : border-box;
width : 14px;
height : 14px;
border : 2px solid #FFF;
border-radius : 50%;
border-left-color : transparent;
border-bottom-color : transparent;
position : absolute;
top : 0;
left : 0;
background : none;
margin : 0;
}
@media screen and (max-width: 1024px) {
.pswp__preloader {
position : relative;
left : auto;
top : auto;
margin : 0;
float : right;
}
}
@-webkit-keyframes clockwise {
0% {
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
100% {
-webkit-transform : rotate(360deg);
transform : rotate(360deg);
}
}
@keyframes clockwise {
0% {
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
100% {
-webkit-transform : rotate(360deg);
transform : rotate(360deg);
}
}
@-webkit-keyframes donut-rotate {
0% {
-webkit-transform : rotate(0);
transform : rotate(0);
}
50% {
-webkit-transform : rotate(-140deg);
transform : rotate(-140deg);
}
100% {
-webkit-transform : rotate(0);
transform : rotate(0);
}
}
@keyframes donut-rotate {
0% {
-webkit-transform : rotate(0);
transform : rotate(0);
}
50% {
-webkit-transform : rotate(-140deg);
transform : rotate(-140deg);
}
100% {
-webkit-transform : rotate(0);
transform : rotate(0);
}
}
/* -------------------------------------------------------------------
* ## 6. additional styles
* ------------------------------------------------------------------- */
/* root element of UI */
.pswp {
font-family : var(--font-2);
}
.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 {
position : absolute;
left : 0;
top : 0;
height : 44px;
width : 100%;
padding : 0 6px;
}
.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 {
background-color : rgba(0, 0, 0, 0.5);
}
/* 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 {
background-color : rgba(0, 0, 0, 0.3);
}
/* 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;
}