#lgcontent {
  display:block;
  width:100%;
  margin:0 auto;
  max-width:900px
}
p.lightgal {
  display:block;
  width:100%;
  margin:5px auto;
  background:0 0;
  transition:opacity 2s,background 2s;
  opacity:1
}
p.lightgal img {
  box-shadow:0 0 2px #999;
  transition:opacity .5s 1s;
  opacity:1
}
p.lightgal a img {
  box-shadow:0 0 4px #333
}
p.lightgal a:hover img {
  box-shadow:0 0 6px #000
}
p.lightgal img.lgload {
  animation-duration:2s;
  animation-name:loading;
  opacity:.7;
  animation-iteration-count:infinite;
  box-shadow:0 0 3px #aaa
}
p.lightgal img.lgloaded {
  animation-duration:1s;
  animation-name:loaded;
  transition:opacity .5s 0s
}
@keyframes loading {
  0% {
    background:#f0f0f0
  }
  50% {
    background:#ddd
  }
  100% {
    background:#f0f0f0
  }
}
@keyframes loaded {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
p.lightgal.forLazyLoad {
  opacity:.8;
  background:#ddd;
  transition:none
}
p.lightgal.forLazyLoad img,
p.lightgal.forLazyLoad img.lgload {
  opacity:0;
  animation-name:none;
  transition:none
}
#lightbox-elm,
#lightbox-elm.loading,
#lightbox-elm.visible {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(255,255,255,.9);
  opacity:1;
  transition:opacity 1s 0s,top 0s 0s;
  z-index:10000;
  overflow:hidden
}
#lightbox-elm.hidden {
  opacity:0;
  top:100%;
  transition:opacity .5s 0s,top 0s .5s
}
#lightbox-elm #lightbox-close {
  position:fixed;
  top:-50px;
  right:1%;
  width:32px;
  height:32px;
  background:#000;
  border-radius:0;
  text-align:center;
  border-radius:16px;
  cursor:pointer;
  opacity:.5;
  z-index:10001;
  font-size:0;
  color:#000
}
#lightbox-elm.loading #lightbox-close,
#lightbox-elm.visible #lightbox-close {
  top:1%
}
#lightbox-elm #lightbox-close:hover {
  opacity:1
}
#lightbox-elm #lightbox-close:after,
#lightbox-elm #lightbox-close:before {
  background:#fff;
  content:"";
  height:22px;
  left:14px;
  position:absolute;
  top:5px;
  width:4px;
  transform:rotate(45deg)
}
#lightbox-elm #lightbox-close:after {
  transform:rotate(-45deg)
}
@keyframes loader {
  from {
    opacity:.3
  }
  to {
    opacity:1
  }
}
#lightbox-elm #lightbox-content:after,
#lightbox-elm.loaded #lightbox-content:after,
#lightbox-elm.visible #lightbox-content:after {
  content:"CHARGEMENT";
  font-family:tahoma,arial,helvetica,sans-serif;
  font-size:10px;
  color:#999;
  text-shadow:0 0 2px #fff;
  text-align:center;
  height:0;
  padding-top:100px;
  width:100%;
  margin:-60px auto;
  display:block;
  top:50%;
  position:fixed;
  transform:scale(0);
  transition:transform .5s
}
#lightbox-elm #lightbox-content:before,
#lightbox-elm.loaded #lightbox-content:before,
#lightbox-elm.visible #lightbox-content:before {
  background:url(loading.svg) no-repeat center;
  content:"";
  position:fixed;
  display:block;
  height:0;
  width:50px;
  height:50px;
  top:50%;
  left:50%;
  margin:-25px;
  display:block;
  animation-name:rotation;
  animation-duration:1.25s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  opacity:0;
  transition:opacity .25s
}
#lightbox-elm.loading #lightbox-content:before,
#lightbox-elm.loadingNext #lightbox-content:before {
  opacity:1
}
#lightbox-elm.loadingNext #lightbox-content:before {
  opacity:1;
  transition:opacity .25s .55s
}
@keyframes rotation {
  from {
    transform:rotate(360deg)
  }
  to {
    transform:rotate(0)
  }
}
#lightbox-elm.loading #lightbox-content:after,
#lightbox-elm.loadingNext #lightbox-content:after {
  transform:scale(1);
  animation-name:loader;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-direction:alternate
}
#lightbox-elm.loadingNext #lightbox-content:after {
  transition:transform .35s .5s
}
#lightbox-content-loaded {
  position:absolute;
  top:50%;
  bottom:50%;
  left:0;
  right:0;
  transition:top .3s,bottom .3s;
  overflow:hidden
}
.visible #lightbox-content-loaded {
  top:0;
  bottom:0
}
#lightbox-content-loaded h3 {
  position:absolute;
  text-align:center;
  top:94%;
  margin:0;
  padding:0;
  width:100%;
  transition:opacity .25s
}
.loading #lightbox-content-loaded h3,
.loadingNext #lightbox-content-loaded h3 {
  opacity:0;
  transition:opacity .25s
}
#lightbox-content-loaded .img {
  position:absolute;
  display:block;
  top:3%;
  left:2%;
  right:2%;
  bottom:8%;
  text-align:center;
  transition:opacity .25s
}
#lightbox-content-loaded .img iframe {
  height:100%;
  max-width:calc(100% - 120px);
  aspect-ratio: 16/9;
}
.loadingNext #lightbox-content-loaded .img {
  opacity:0
}
.loaded #lightbox-content-loaded .img {
  opacity:1
}
#lightbox-content-loaded .img img {
  max-height:100%;
  max-width:100%;
  box-shadow:0 0 10px rgba(0,0,0,.3)
}
#lightbox-elm #lightbox-next,
#lightbox-elm #lightbox-prev {
  position:fixed;
  top:50%;
  left:2%;
  margin-top:-50px;
  background:0 0;
  display:block;
  height:70px;
  width:70px;
  line-height:70px;
  text-align:center;
  border-radius:50%;
  cursor:pointer;
  font-size:0;
  opacity:.5;
  transition:all .25s
}
#lightbox-elm #lightbox-next:hover,
#lightbox-elm #lightbox-prev:hover {
  opacity:1;
  background:rgba(255,255,255,.5)
}
#lightbox-elm #lightbox-next {
  left:auto;
  right:2%
}
#lightbox-elm #lightbox-prev:before {
  content:"";
  width:0;
  height:0;
  margin-left:-8px;
  border-top:15px solid transparent;
  border-right:18px solid #000;
  border-bottom:15px solid transparent
}
#lightbox-elm #lightbox-next:before {
  content:"";
  width:0;
  height:0;
  margin-right:-8px;
  border-top:15px solid transparent;
  border-left:18px solid #000;
  border-bottom:15px solid transparent
}