@charset "utf-8";

/* ------------------ slider ------------------ */

.box {
 width: 900px;
 height: 640px;
 margin: 0 auto;
 padding: 100px 0 150px 0;
 position: relative;
 background-color: #fff;
}
.slider {
 position: relative;
 background-color: #fff;
 background-image: linear-gradient(to right, #000 , #111 , #000);
 margin: 0 auto;
 width: 800px;
 height: 640px;
 overflow: hidden;
 background-color: #fff;
}
.gallery {
 display: flex;
 position: relative;
 top: 0;
 left: -800px;
 width: 3200px;
 height: 640px;
 margin: 0 auto;
}
.gallery.shifting {
 transition: all 0.5s ease-out;
}
.group {
 display: flex;
 flex-wrap: wrap;
 transition: ease-out 1s;
 position: relative;
 width: 800px;
 height: 640px;
}
.gallery-item {
 height: 156px;
 width: 156px;
 border: solid 2px rgba(255, 255, 255, 100);
 position: relative;
 cursor: pointer;
 overflow: hidden;
 -webkit-transition: .15s ease-in-out;
 transition: .15s ease-in-out;
 margin: 0;
}
.gallery-item:hover {
 border: solid 2px #ff8400;
}
.gallery-item img {
 position: absolute;
 max-width: 100%;
 min-width: 100%;
 height: 100%;
 object-fit: cover;
 min-height: unset;
 text-align: center;
 background-color: #333;
}
.thumb {
 width: 200px;
 margin: auto;
 left: -50%;
 right: -50%;
 transition: filter .3s, transform .3s; 
 -webkit-transition: filter .3s, transform .3s;
}
.thumb:hover {
 transform: scale(1.2);
}

/* ------------------ slider controls ------------------ */

.control {
 position: absolute;
 top: 43%;
 color: rgba(0, 0, 0, .5);
 font-size: 75px;
 transition: .3s ease;
}
.control:hover {
 color: #ff8400;
}
.prev {
 cursor: pointer;
 left: 0;
}
.next {
 cursor: pointer;
 right: 0;
}
.front {
 z-index: 999;
}
.back {
 z-index: 0;
}

/* ------------------ lightbox ------------------ */

.lightbox-wrapper {
 display: none;
 background-color: #111;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9999;
}
.lightbox {
 display: flex;
 flex-direction: column;
 height: 100%;
 color: white;
}
.lightbox .lightbox-header {
 flex-shrink: 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: rgba(0, 0, 0, 0.5);
 padding: 1em;
 font-weight: 600;
 text-align: center;
}
.lightbox .lightbox-header > * {
 opacity: 0.75;
}
.lightbox .lightbox-close {
 position: relative;
 height: 1.85rem;
 width: 1.85rem;
 display: flex;
 align-items: center;
 justify-content: center;
 background: none;
 padding: 0;
 border: none;
 z-index: 9999;
 -webkit-transition: .15s ease-in-out;
 transition: .15s ease-in-out;
}
.lightbox .lightbox-close::before, .lightbox .lightbox-close::after {
 position: absolute;
 content: "";
 height: 4px;
 width: 80%;
 background-color: #fff;
}
.lightbox .lightbox-close::before {
 transform: rotate(-45deg);
}
.lightbox .lightbox-close::after {
 transform: rotate(45deg);
}
.lightbox .lightbox-close:hover {
 opacity: 1;
 cursor: pointer;
}
.lightbox .lightbox-slides-wrapper {
 flex-grow: 1;
 display: flex;
 overflow: hidden;
 position: relative;
}

/* ------------------ lightbox controls ------------------ */

.lightbox .lightbox-arrow {
 position: absolute;
 top: 0;
 width: 4rem;
 height: 4rem;
 padding-top: 50vh;
 padding-bottom: 50vh;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 1.5em;
 opacity: 0.75;
 cursor: pointer;
 filter: drop-shadow(0 0 7px #000);
 -webkit-transition: .1s ease-in-out;
 transition: .1s ease-in-out;
}
.lightbox .lightbox-arrow:hover {
 opacity: 1;
}
.lightbox .lightbox-arrow.arrow-left {
 background-image: url("data:image/svg+xml,%3Csvg width='40' height='100' viewBox='0 0 40 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 50 L37 0 L40 3 L20 50 L40 97 L37 100 L0 50 Z' fill='white'/%3E%3C/svg%3E");
 padding-right: 10vw;
 left: -5vw;
}
.lightbox .lightbox-arrow.arrow-right {
 background-image: url("data:image/svg+xml,%3Csvg width='40' height='100' viewBox='0 0 40 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M40 50 L5 100 L0 97 L20 50 L0 3 L5 0 L40 50  Z' fill='white'/%3E%3C/svg%3E");
 padding-left: 10vw;
 right: -5vw;
}
.lightbox .lightbox-slide {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-grow: 1;
 transition: all 0ms ease;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
.lightbox .lightbox-slide[data-state=prev] {
 transform: translateX(-100%);
 opacity: 0;
}
.lightbox .lightbox-slide[data-state=next] {
 transform: translateX(100%);
 opacity: 0;
}
.lightbox .lightbox-image {
 display: none;
 max-width: 100%;
 max-height: 100%;
}
.lightbox .spinner {
 display: none;
}