#shadowbox {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: left;
  visibility: hidden;
  display: none;
}

#shadowbox img {
  border: none;
}

#shadowbox * {
  outline: 0; 
}

#sb-overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

#sb-wrapper {
  position: absolute;
  display: block;
  visibility: hidden;
  left: 50%;
  top: 50%;
}

#sb-body,
#sb-content,
#sb-cover {
  position: absolute;
  width: 100%;
  height: 100%;
}

#sb-body {}

#sb-content { 
  background: black;
  background: hsla(0,0%,0%,0.6);
}
  z-index: 999;
}

#sb-cover {
  background: black;
  background: hsla(0,0%,0%,0.6);
}

#sb-close,
#sb-next,
#sb-prev {
  position: absolute;
  background: url("404.png") no-repeat;
  cursor: pointer;
}

#sb-next,
#sb-prev {
  display: none;
}

#shadowbox.active #sb-close,
#shadowbox.has-next #sb-next,
#shadowbox.has-prev #sb-prev {
  display: block;
}

#sb-close {
    display: none;
}

#sb-next {
  right: 0;
  top: 50%;
  width: 60px;
  height: 46px;
  background-position: 50% -40px;
  margin: -20px -40px 0 0;
}

#sb-prev {
  left: 0;
  top: 50%;
  width: 60px;
  height: 46px;
  background-position: 50% -86px;
  margin: -20px 0 0 -37px;
}

#sb-content > img {
  vertical-align: super !important;
  animation: fadeIn 0.5s;
}

#sb-body {
    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.5), 0 15px 30px hsla(0, 0%, 0%, 0.5);
}

@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

#sb-prev:before {
  content: '\f053';
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  text-align: left;
  opacity: 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
#sb-next:before {
  content: '\f054';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  text-align: right;
  opacity: 0;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
.has-prev #sb-prev:before {
  opacity: 1;
}
.has-next #sb-next:before {
  opacity: 1;
}
#sb-next:before,#sb-prev:before {
  color: #fff;
  display: block;
  font-size: 24px;
}