.lg-backdrop {
    background-color: #fff !important;
}

.lg-outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-bottom: 60px;
}

.lg-item.lg-current .lg-img-wrap, .lg-item .lg-img-wrap {
    max-height: calc(100% - 80px) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lg-item.lg-current img.lg-object {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lg-outer .lg-thumb-outer {
    background-color: #fff !important;
    max-height: fit-content;
    padding-bottom: 36px;
}

.lg-components .lg-thumb {
    background-color: #fff !important;
    padding: 0!important;
}

.lg-thumb-item {
    border: none !important;
    border-radius: 0 !important;
    height:100px;
    width:100px;
}
.lg-thumb.lg-group {
    padding: 0;
    margin: 0 auto;
}

.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item, 
.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
    display: flex;
    justify-content: center;
}

.lg-outer .lg-thumb-item img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .lg-thumb-item {
    opacity: 0.5!important;
}

.lg-thumb-item.active {
    opacity: 1 !important;
}

.lg-thumb-item:hover {
    opacity: 1 !important;
}

.lg-sub-html {
    position: relative;
    background: #fff !important;
    color: var(--grey)!important;
    text-align: center;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    margin-top: auto;
}

.lg-toolbar .lg-icon { 
    padding: 18px 0 0 0!important;
    position: absolute!important;
    right: 0!important;
    top: 0!important;
}

.lg-next, .lg-prev, .lg-close, .lg-download {
    background: none !important;
    color: var(--grey) !important;
}

.lg-icon {
    font-size: 20px !important;
    opacity: 1 !important;
}

.lg-next:hover, .lg-prev:hover, .lg-close:hover, .lg-download:hover {
    background: none !important;
    color: var(--grey) !important;
}

.lg-components {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lg-components .lg-thumb {
    padding-top: 10px;
}

.lg-sub-html {
    margin: 0;
    padding: 18px 0 36px;
}

.lg-sub-html h2, .lg-sub-html p {
    font-size: 1.4rem!important;
    margin: 0!important
}



/* @media screen and (max-width: 680px) {
    .lg-prev , .lg-next {
        display: none!important;
    }
}*/