body.lg-on {
  overflow: hidden;
}

.lg-toolbar {
  background-color: transparent;
}

.lg-toolbar .lg-close {
  color: #8c8b89;
}

.lg-outer .lg-thumb-outer {
  background-color: #000;
  border-top: 0;
}

.lg-outer.lg-thumb-open .lg-thumb-outer {
  padding: 0 10px;
}

.lg-actions .lg-next,
.lg-actions .lg-prev {
  color: #8c8b89;
  background-color: transparent;
  font-family: 'FontAwesome';
}

.lg-actions .lg-next {
  right: 15px;
}

.lg-actions .lg-prev {
  left: 15px;
}

.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {
  color: #d2d3d3;
}

.lg-actions .lg-next:before {
  content: '\f105';
}

.lg-actions .lg-prev:after {
  content: '\f104';
}

.lg-outer .lg-item {
  background: url(../images/loading.gif) center center no-repeat;
  display: none !important;

  margin-top: 20px;
  height: calc(100vh - 40px);
}

.lg-outer.lg-thumb-open .lg-item {
  height: calc(100vh - 130px);
}

.lg-outer .lg-thumb-item {
    border: 1px solid transparent;
    border-radius: 0px;
}

.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
  border-color: #fff;
}

.lg-outer .lg-toogle-thumb {
  border: 0;
  background-color: transparent;
  color: #8c8b89;
  right: 2px;
}

.lg-outer .lg-toogle-thumb:hover {
  color: #fff;
}

:focus {
  outline: none;
}

@media only screen and (max-width : 768px) {
    .lg-actions .lg-next {
        right: 40%;
    }
    .lg-actions .lg-prev {
        left: 40%;
    }

    .lg-actions .lg-next,
    .lg-actions .lg-prev {
        top: auto;
        bottom: 0px;
    }

    .lg-thumb-open .lg-actions .lg-next,
    .lg-thumb-open .lg-actions .lg-prev {
        bottom: 100px;
    }
}