.tobi-zoom {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
position: relative;
text-decoration: none;
}
.tobi-zoom img {
display: block;
}
.tobi-zoom__icon {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(159, 159, 159, 0.90);
bottom: 0;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
position: absolute;
right: 0;
}
.tobi-zoom__icon svg {
color: #fff;
fill: none;
height: 1.11111em;
padding-bottom: .22222em;
padding-left: .22222em;
padding-right: .22222em;
padding-top: .22222em;
pointer-events: none;
stroke-linecap: square;
stroke-linejoin: miter;
stroke-width: 2;
stroke: #fff;
width: 1.11111em;
}
.tobi-is-open {
overflow-y: hidden;
}
.tobi {
background-color: rgba(159, 159, 159, 0.90);
bottom: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
contain: strict;
font-size: 18px;
left: 0;
line-height: 1.5555555555555556;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 1337;
}
.tobi[aria-hidden="true"] {
display: none;
}
.tobi *,
.tobi *::before,
.tobi *::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.tobi__slider {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
will-change: transform;
}
.tobi__slider:not(.tobi__slider--is-dragging) {
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (prefers-reduced-motion: reduce){
.tobi__slider:not(.tobi__slider--is-dragging) {
-webkit-transition: none;
transition: none;
}
}
.tobi__slider--is-draggable .tobi__slider__slide__content {
cursor: -webkit-grab;
cursor: grab;
}
.tobi__slider--is-dragging .tobi__slider__slide__content {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.tobi__slider__slide {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.tobi__slider__slide__content>figure {
margin: 0;
position: relative;
}
.tobi__slider__slide__content>figure>img {
display: block;
height: auto;
max-height: 85vh;
max-width: 85vw;
width: auto;
}
.tobi__slider__slide__content>figure>figcaption {
background-color: rgba(255,255,255,0.94);
bottom: 0;
color: #1a2a3a;
display: block;
left: 0;
padding-bottom: .22222em;
padding-left: .44444em;
padding-right: .44444em;
padding-top: .22222em;
position: absolute;
white-space: pre-wrap;
width: 100%;
}
.tobi__slider__slide__content[data-type="html"] {
max-height: 85vh;
max-width: 85vw;
overflow: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.tobi__slider__slide__content[data-type="html"] video {
cursor: auto;
display: block !important;
max-height: 85vh;
max-width: 85vw;
}
.tobi__slider__slide__content[data-type="iframe"] {
max-height: 85vh;
max-width: 85vw;
overflow: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.tobi__slider__slide__content[data-type="iframe"] iframe {
display: block !important;
height: 85vh;
width: 85vw;
}
.tobi__slider__slide__content[data-type="youtube"] {
max-height: 85vh;
max-width: 85vw;
overflow: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.tobi__slider__slide__content[data-type="youtube"] iframe {
display: block !important;
}
.tobi>button {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgba(0,0,0,0);
border: .05556em solid transparent;
color: #fff;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font: inherit;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
margin: 0;
opacity: .5;
padding-bottom: .22222em;
padding-left: .22222em;
padding-right: .22222em;
padding-top: .22222em;
position: absolute;
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
will-change: opacity, transform;
}
@media screen and (prefers-reduced-motion: reduce){
.tobi>button {
-webkit-transition: none;
transition: none;
will-change: opacity;
}
}
.tobi>button svg {
pointer-events: none;
stroke: #fff;
stroke-width: 1;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
color: #fff;
}
.tobi>button:active,
.tobi>button:focus,
.tobi>button:hover {
opacity: 1;
-webkit-transform: scale(0.84);
transform: scale(0.84);
}
@media screen and (prefers-reduced-motion: reduce){
.tobi>button:active,
.tobi>button:focus,
.tobi>button:hover {
-webkit-transform: none;
transform: none;
}
}
.tobi>button.tobi__prev,
.tobi>button.tobi__next {
top: 50%;
top: calc(50% - 2.22222em);
}
.tobi>button.tobi__prev svg,
.tobi>button.tobi__next svg {
height: 3.88889em;
width: 3.88889em;
}
.tobi>button.tobi__prev {
left: 0;
}
.tobi>button.tobi__next {
right: 0;
}
.tobi>button.tobi__close {
right: .27778em;
top: 1em;
}
.tobi>button.tobi__close svg {
height: 3.33333em;
width: 3.33333em;
}
.tobi>button:disabled,
.tobi>button[aria-hidden="true"] {
display: none;
}
.tobi__counter {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(0,0,0,0);
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 1.11111em;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 1em;
line-height: 1;
position: absolute;
top: 2.22222em;
}
.tobi__counter[aria-hidden="true"] {
display: none;
}
.tobi-loader {
display: inline-block;
height: 5.55556em;
left: calc(50% - 2.77778em);
position: absolute;
top: calc(50% - 2.77778em);
width: 5.55556em;
}
.tobi-loader::before {
-webkit-animation: spin 1s infinite;
animation: spin 1s infinite;
border-radius: 100%;
border: .22222em solid #949ba3;
border-top-color: #fff;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
@-webkit-keyframes spin{
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin{
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}