/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
#gallery {
    position: absolute;
    bottom: 27vh;
    height: 48vh;
    width: calc(100% - 8vw);
    z-index: 10;
}



.click {
    width: 2.79vw;
    height: 2.79vw;
}

.butprev {
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
    padding: 0.93vw 0.93vw 0 0.93vw;
    position: absolute;
    top: calc((6*(0.93vw - 1vh)) + 50%);
    left: 1.4vw;
    transform: translate(-50%, -50%);
    z-index: 190;
    background-color: #EF6449;
    cursor: pointer;
}


.butnext {
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
    padding: 0.93vw 0.93vw 0 0.93vw;
    position: absolute;
    top: calc((6*(0.93vw - 1vh)) + 50%);
    right: -1.4vw;
    transform: translate(-50%, -50%);
    z-index: 190;
    background-color: #EF6449;
    cursor: pointer;
}

.butprev:hover {
    left: 1.4vw;
    transform: translate(calc(-50% + 0.47vw), -50%);
    width: 3.72vw;
}


.butnext:hover {
    right: -1.4vw;
    transform: translate(calc(-50% + 0.47vw), -50%);
    width: 3.72vw;
}

.click svg {
    -webkit-transition: transform 0.3s ease, stroke 0.2s ease;
    -moz-transition: transform 0.3s ease, stroke 0.2s ease;
    -ms-transition: transform 0.3s ease, stroke 0.2s ease;
    -o-transition: transform 0.3s ease, stroke 0.2s ease;
    transition: transform 0.3s ease, stroke 0.2s ease;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.93vw;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.butprev.click svg {
    right: 0.47vw;
}

.butnext.click svg {
    left: 1.4vw;
}




.carousel-cell {
    transform: translate(calc((-46vw + 18vh) + 27.4vw), 0);
}

.carousel img {
    object-fit: cover;
    object-position: center;
    height: 36vh;
    display: flex;
    /* set min-width, allow images to set cell width */
    min-width: 37vh;
    width: 37vh;
    margin-right: 1.86vw;
    /* vertically center */

}


.caption {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    position: relative;
    line-height: 1.77vw;
    z-index: 100;
    top: 0;
    left: 0pt;
    height: 5.58vw;
    opacity: 0;
}


.carousel-cell {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    opacity: .35;
}

.carousel-cell.is-selected {
    opacity: 1;
}



.carousel-cell.is-selected img {
    box-sizing: border-box;
    cursor: pointer;
}


.carousel-cell.is-selected .caption {
    opacity: 1;
}




.flickity-enabled {
    position: relative;
}

.flickity-enabled:focus {
    outline: none;
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* ---- flickity-button ---- */


.flickity-page-dots,
.flickity-button,
.flickity-fullscreen-button {
    display: none;
}



.flickity-enabled.is-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #343333;
    z-index: 1;
    padding: 4vw 4vw 4.5vw 4vw;
}

.carousel.is-fullscreen .carousel-cell {
    transform: translate(0 , 0);
    width: 100%;
    height: 100%;
    display: inline-flex;
    cursor: default;
    align-items: center;
}

.carousel.is-fullscreen .carousel-cell .center{
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    width: auto;
    max-width: calc((100% - 300px));
    margin: 0;
    height: 100%;
    position: absolute;
    left: calc(50% + 150px);
    transform: translateX(calc( -50% ));
}

.carousel.is-fullscreen .carousel-cell .caption{
    position: static;
    width: 300px;
    height: auto;
    padding-left: 2.79vw;
}

.carousel.is-fullscreen .carousel-cell img{
    height: 100%;
    object-fit: contain;
    width: auto;
    transform: translateX(0%);
    margin: 0;
}


#exit-full {
    display: none;
    position: fixed;
    z-index: 900;
    top: 4vw;
    right: 4vw;
    cursor: pointer;
    height: 2.79vw;
    width: 2.79vw;
}

#exit-full svg {
    -webkit-transition: transform 0.3s ease, stroke 0.2s ease;
    -moz-transition: transform 0.3s ease, stroke 0.2s ease;
    -ms-transition: transform 0.3s ease, stroke 0.2s ease;
    -o-transition: transform 0.3s ease, stroke 0.2s ease;
    transition: transform 0.3s ease, stroke 0.2s ease;
    position: absolute;
    top: 50%;
    left: 1.4vw;
    transform: translate(-50%, -50%);
    width: 1.49vw;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}


#exit-full:hover svg {
    stroke: #EF6449;
}

.carousel.is-fullscreen .caption {
    position: relative;
    z-index: 100;
    height: 10vh;
    color: #fff;
}

.butprev.full {
    padding: 0.93vw 0.93vw 0 0.93vw;
    position: absolute;
    top: 50%;
    left: 1.4vw;
    transform: translate(-50%, -50%);
    z-index: 190;
    cursor: pointer;
    background: none;
}

.butnext.full {
    padding: 0.93vw 0.93vw 0 0.93vw;
    position: absolute;
    top: 50%;
    right: -1.4vw;
    transform: translate(-50%, -50%);
    z-index: 191;
    cursor: pointer;
    background: none;
}

.butprev.full:hover,
.butnext.full:hover{
    width: 2.79vw;
    transform: translate(-50%, -50%);
}


.click.full svg {
    -webkit-transition: transform 0.3s ease, stroke 0.2s ease;
    -moz-transition: transform 0.3s ease, stroke 0.2s ease;
    -ms-transition: transform 0.3s ease, stroke 0.2s ease;
    -o-transition: transform 0.3s ease, stroke 0.2s ease;
    transition: transform 0.3s ease, stroke 0.2s ease;
    position: absolute;
    top: 50%;
    left: 1.4vw;
    transform: translate(-50%, -50%);
    width: 0.93vw;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}


.click.full:hover svg{
    stroke: #EF6449;
}

.carousel.is-fullscreen img {
    object-fit: cover;
    height: 70vh;
    display: flex;
    width: auto;
    margin-right: 1.86vw;
    /* vertically center */
    border: none;

}