/* gallery setup */
.gallery ol {
padding-left: 0;
}

.flickity-viewport {
height: 100%;
}

.flickity-button:disabled {
display: none;
}

.flex-width .flickity-button-icon {
fill: #000;
}

.flex-width .flickity-page-dots .dot {
background-color: #000;
}

.loading .gallery-frame,
.resizing .gallery-frame {
overflow: hidden;
opacity: 0;
}

/* caption */
.gallery .caption {
position: absolute;
bottom: 0;
left: 0;
width: auto;
float: left;
padding: 0.5em 1em;
background-color: rgba(255,255,255,0.5);
}

.gallery .caption:hover {
white-space: normal;
}

/* flex width (image width) */
.flex-width .gallery-frame {
position: relative;
width: 100%;
float: left;
padding-bottom: 50%;
}

.flex-width .carousel,
.flex-width .gallery {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
}

.flex-width .gallery .item {
height: 100%;
margin-right: 2em;
width: auto;
}

.flex-width .gallery .item img {
position: relative;
height: 100%;
width: auto;
max-width: 1000%;
min-width: 100px;
float: none;
}

.flex-width .gallery .caption {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.flex-width .gallery .caption:hover {
white-space: normal;
}


/* fullscreen (image frame) */
.gallery-wrapper.fullscreen  {
position: relative;
width: 100%;
height: 100vh;
float: left;
}

.fullscreen .gallery-frame {
position: relative;
top: 0;
left: 0;
width: 100.1%;
height: 100vh;
margin-left: 50%;
transform: translateX(-50.05%);
float: left;
}

.fullscreen .carousel,
.fullscreen .gallery {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
}

.fullscreen .gallery .item {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin-right: 2em;
background-color: #000;
float: left;
}

.fullscreen .gallery .item img {
position: absolute;
top: 50%;
left: 50%;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
min-width: 100px;
float: none;
transform: translateX(-50%) translateY(-50%);
font-size: 100%;
border: 4em solid rgba(0,0,0,0);
border-top: 2em solid rgba(0,0,0,0);
}

.fullscreen .gallery .caption {
left: 50%;
bottom: 4em;
transform: translateX(-50%);
background-color: transparent;
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.75);
padding: 0;
}

.fullscreen .flickity-page-dots {
bottom: 2em;
}

.fullscreen .flickity-page-dots .dot {
background-color: #fff;
}