.fslightbox-container {
font-family: Roboto, sans-serif;
opacity: 0;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(rgba(30, 30, 30, 0.9), #000 1810%);
z-index: 9999999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
animation: fslightbox-fade-in-complete 0.25s forwards;
}
.fslightbox-fade-in {
animation: fslightbox-fade-in 0.25s cubic-bezier(0, 0, 0.7, 1) forwards;
}
.fslightbox-fade-out {
animation: fslightbox-fade-out 0.25s ease forwards;
}
.fslightbox-fade-in-complete {
animation: fslightbox-fade-in-complete 0.25s cubic-bezier(0, 0, 0.7, 1)
forwards;
}
.fslightbox-fade-out-complete {
animation: fslightbox-fade-out-complete 0.25s ease !important;
}
@keyframes fslightbox-fade-in-complete {
from {
opacity: 0.3;
}
to {
opacity: 1;
}
}
@keyframes fslightbox-fade-out-complete {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fslightbox-fade-in {
from {
opacity: 0.65;
}
to {
opacity: 1;
}
}
@keyframes fslightbox-fade-out {
from {
opacity: 0.35;
}
to {
opacity: 0;
}
}
.fslightbox-cursor-grabbing {
cursor: grabbing;
}
.fslightbox-full-dimension {
width: 100%;
height: 100%;
}
.fslightbox-open {
overflow: hidden;
height: 100%;
}
.fslightbox-flex-centered {
display: flex;
justify-content: center;
align-items: center;
}
.fslightbox-transform-transition {
transition: transform 0.3s;
}
.fslightbox-svg-path {
transition: fill 0.15s ease;
fill: #ddd;
}
.fslightbox-svg-icon {
display: flex;
justify-content: center;
align-items: center;
}
.fslightbox-media-holder {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fslightbox-nav {
height: 45px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.fslightbox-slide-number-container {
height: 100%;
font-size: 14px;
color: #d7d7d7;
z-index: 0;
max-width: 55px;
}
.fslightbox-slide-number-container div {
padding: 0 1.5px;
}
.fslightbox-slash {
font-size: 16px;
margin-top: -1.5px;
}
.fslightbox-toolbar {
position: absolute;
z-index: 3;
right: 0;
top: 0;
height: 100%;
display: flex;
background: rgba(35, 35, 35, 0.65);
}
.fslightbox-toolbar-button {
height: 100%;
width: 45px;
cursor: pointer;
}
.fslightbox-toolbar-button:hover .fslightbox-svg-path {
fill: #fff;
}
.fslightbox-slide-btn-container {
display: flex;
align-items: center;
padding: 12px 12px 12px 6px;
position: absolute;
top: 50%;
cursor: pointer;
z-index: 3;
transform: translateY(-50%);
}
@media (min-width: 476px) {
.fslightbox-slide-btn-container {
padding: 22px 22px 22px 6px;
}
}
@media (min-width: 768px) {
.fslightbox-slide-btn-container {
padding: 30px 30px 30px 6px;
}
}
.fslightbox-slide-btn-container:hover .fslightbox-svg-path {
fill: #f1f1f1;
}
.fslightbox-slide-btn {
padding: 8px;
font-size: 26px;
background: rgba(35, 35, 35, 0.65);
}
@media (min-width: 476px) {
.fslightbox-slide-btn {
padding: 9px;
}
}
.fslightbox-slide-btn-left-container {
left: 0;
}
@media (max-width: 475.99px) {
.fslightbox-slide-btn-left-container {
padding-left: 3px;
}
}
.fslightbox-slide-btn-right-container {
right: 0;
padding-left: 12px;
padding-right: 3px;
}
@media (min-width: 476px) {
.fslightbox-slide-btn-right-container {
padding-left: 22px;
}
}
@media (min-width: 768px) {
.fslightbox-slide-btn-right-container {
padding-left: 30px;
}
}
@media (min-width: 476px) {
.fslightbox-slide-btn-right-container {
padding-right: 6px;
}
}
.fslightbox-down-event-detector {
position: absolute;
z-index: 1;
}
.fslightbox-swiping-invisible-hover {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.fslightbox-invalid-file-wrapper {
font-size: 22px;
color: #eaebeb;
margin: auto;
}
.fslightbox-video {
object-fit: cover;
}
.fslightbox-loader {
display: block;
margin: auto;
position: relative;
width: 67px;
height: 67px;
}
.fslightbox-loader div {
box-sizing: border-box;
display: block;
position: absolute;
width: 54px;
height: 54px;
margin: 6px;
border: 5px solid #999;
border-radius: 50%;
animation: fslightbox-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #999 transparent transparent transparent;
}
.fslightbox-loader div:nth-child(1) {
animation-delay: -0.45s;
}
.fslightbox-loader div:nth-child(2) {
animation-delay: -0.3s;
}
.fslightbox-loader div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes fslightbox-loader {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.fslightbox-source {
margin: auto;
display: block;
backface-visibility: hidden;
transform: translateZ(0);
}
.fslightbox-source-holder {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
}