.box-active {
    z-index: 100
}

.slide {
    left: auto
}

    .slide:not(.slide-detail) {
        cursor: -webkit-zoom-in;
        cursor: zoom-in
    }

.has-bg {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center
}

    .has-bg img {
        opacity: 0
    }

.slide-positioned, .slide-detail, .slide-carousel, .box-carousel .slide, .slide-box-carousel .slide {
    position: absolute
}

.slide-box.box-zoomed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: white;
    overflow-x: hidden
}

.slide-detail {
    z-index: 0;
    top: 10%;
    width: 86.6666666667%;
    height: 80%;
    margin: 0;
    pointer-events: none;
    opacity: 0
}

.slide-active, .slide-prev, .prev-out, .next-to-prev, .slide-next, .prev-to-next {
    display: block;
    -webkit-transition-property: left, opacity;
    transition-property: left, opacity;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    opacity: 1
}

.slide-active {
    left: 0;
    pointer-events: auto
}

.slide-prev, .prev-out, .next-to-prev {
    left: -100%
}

.slide-prev-prev {
    left: -200%
}

.slide-next, .prev-to-next {
    left: 100%
}

.slide-next-next {
    left: 200%
}

.prev-out {
    -webkit-animation: prev-out 500ms;
    animation: prev-out 500ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes prev-out {
    0% {
        left: -100%;
        opacity: 1
    }

    100% {
        left: -200%;
        opacity: 1
    }
}

@keyframes prev-out {
    0% {
        left: -100%;
        opacity: 1
    }

    100% {
        left: -200%;
        opacity: 1
    }
}

.prev-to-next {
    -webkit-animation: prev-next 500ms;
    animation: prev-next 500ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

.next-to-prev {
    -webkit-animation: next-prev 500ms;
    animation: next-prev 500ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes prev-next {
    0% {
        left: -100%;
        opacity: 1
    }

    25% {
        left: -150%;
        opacity: 0
    }

    50% {
        left: 150%;
        opacity: 0
    }

    100% {
        left: 100%;
        opacity: 1
    }
}

@keyframes prev-next {
    0% {
        left: -100%;
        opacity: 1
    }

    25% {
        left: -150%;
        opacity: 0
    }

    50% {
        left: 150%;
        opacity: 0
    }

    100% {
        left: 100%;
        opacity: 1
    }
}

@-webkit-keyframes next-prev {
    0% {
        left: 100%;
        opacity: 1
    }

    25% {
        left: 150%;
        opacity: 0
    }

    50% {
        left: -150%;
        opacity: 0
    }

    100% {
        left: -100%;
        opacity: 1
    }
}

@keyframes next-prev {
    0% {
        left: 100%;
        opacity: 1
    }

    25% {
        left: 150%;
        opacity: 0
    }

    50% {
        left: -150%;
        opacity: 0
    }

    100% {
        left: -100%;
        opacity: 1
    }
}

.box-zoomed .slide-active {
    left: 6.6666666667%;
    cursor: -webkit-zoom-out;
    cursor: zoom-out
}

.box-fade .slide-active, .box-fade .slide-prev, .box-fade .prev-out, .box-fade .next-to-prev, .box-fade .slide-next, .box-fade .prev-to-next {
    left: 0
}

.box-fade .slide-prev, .box-fade .prev-out, .box-fade .next-to-prev, .box-fade .slide-next, .box-fade .prev-to-next {
    opacity: 0
}

.loading {
    background-image: url("../images/spiffygif_30x30.gif") !important;
    background-size: auto
}

@media only screen and (max-width: 768px) {
    .box-zoomed {
        min-height: 100%;
        margin: 0
    }

    .expanded.allow-scroll {
        position: static
    }

    .close {
        background-color: transparent
    }

    .prev, .next {
        width: 30%
    }
}

@media only screen and (max-width: 640px) {
    .slide-detail {
        top: 1.6666666667%;
        height: 90%
    }
}

.slide-detail video {
    opacity: 1
}

.video-wrap {
    z-index: 325;
    cursor: pointer
}

video {
    width: 100%;
    height: auto
}

.slide.playing {
    cursor: url("../images/player-pause.svg") 18 18,url("../images/player-pause.svg") 18 18,pointer
}

.video-wrap {
    position: relative
}

.video-embed:not(.slide-detail) {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.video-normal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video-normal {
    border: none
}

.slide-caption {
    margin-top: 12px;
    margin-bottom: 0
}

.slide-detail .slide-caption {
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    overflow: auto;
    opacity: 0
}

.slide-active .slide-caption {
    opacity: 1
}

.hide-caption .caption {
    display: none
}

.controls {
    z-index: 300;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    pointer-events: none;
    -webkit-transition: all 250ms ease-in;
    transition: all 250ms ease-in
}

.box-carousel:not(.box-zoomed) .controls, .slide-box-carousel:not(.box-zoomed) .controls {
    position: absolute
}

.widget, .close, .arrow, .prev, .next {
    pointer-events: auto
}

.widget-show {
    opacity: 1;
    pointer-events: auto
}

.widget-hide, .slide-box:not(.box-zoomed) .close, .slide-box:not(.box-zoomed):not(.box-carousel):not(.slide-box-carousel) .arrow, .slide-box:not(.box-zoomed):not(.box-carousel):not(.slide-box-carousel) .prev, .slide-box:not(.box-zoomed):not(.box-carousel):not(.slide-box-carousel) .next, .disabled, .disabled:hover, .widget-hide:hover, .slide-box:not(.box-zoomed) .close:hover, .slide-box:not(.box-zoomed):not(.box-carousel):not(.slide-box-carousel) .arrow:hover, .slide-box:not(.box-zoomed):not(.box-carousel):not(.slide-box-carousel) .prev:hover, .slide-box:not(.box-zoomed):not(.box-carousel):not(.slide-box-carousel) .next:hover, .disabled:hover {
    opacity: 0;
    pointer-events: none
}

.controls a {
    line-height: 16px;
    text-align: center
}

    .controls a:link, .controls a:visited {
        color: #222;
        text-decoration: none
    }

    .controls a:hover {
        color: #0033eb
    }

.close {
    position: absolute;
    left: 0;
    width: 36px;
    height: 36px;
    padding: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 36px 36px;
    font-size: 0
}

    .close:link, .close:visited {
        background-image: url("../images/widget-close.svg")
    }

    .close:hover {
        background-image: url("../images/widget-close-over.svg")
    }

a.disabled:link, a.disabled:visited, a.disabled:hover {
    color: transparent;
    cursor: default
}

.arrow, .prev, .next {
    position: absolute;
    top: 10%;
    height: 24px;
    width: 24px;
    width: 30%;
    height: 80%;
    text-decoration: none;
    font-size: 0;
    line-height: 27.6px
}

.carousel .arrow, .carousel .prev, .carousel .next {
    width: 50%
}

.arrow.disabled, .disabled.prev, .disabled.next {
    cursor: default
}

.prev {
    left: 0;
    text-align: right
}

.next {
    right: 0
}

.arrow.prev, .prev {
    cursor: url("../images/arrow-long-left.svg"),url("../images/arrow-long-left.svg"),pointer
}

.arrow.next, .next {
    cursor: url("../images/arrow-long-right.svg"),url("../images/arrow-long-right.svg"),pointer
}

.play, .entry .play {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 24px solid white;
    border-radius: 36px;
    width: 0;
    height: 0;
    background: white;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    opacity: 1;
    pointer-events: all
}

.play-triangle {
    z-index: 10;
    display: block;
    position: absolute;
    top: -8px;
    left: -4px;
    border-color: transparent transparent transparent #000;
    border-style: solid;
    border-width: 8px 12px
}

.play:hover {
    border-width: 26.4px
}

    .play:hover .play-triangle {
        border-left-color: #0033eb
    }

.entry .play:link, .entry .play:visited {
    border-color: white
}

.entry .play:hover {
    border-color: #0033eb
}

    .entry .play:hover .play-triangle {
        border-left-color: white
    }

.playing .play {
    opacity: 0;
    pointer-events: none
}

@media only screen and (max-width: 640px) {
    .play, .entry .play {
        opacity: 0
    }
}

.box-carousel, .slide-box-carousel {
    position: relative;
    width: 50%;
    height: 48px;
    padding-bottom: 37.5%;
    overflow: hidden
}

    .slide-carousel:not(.slide-detail), .box-carousel .slide:not(.slide-detail), .slide-box-carousel .slide:not(.slide-detail) {
        top: 0;
        width: 100%;
        height: 0;
        padding-bottom: 75%;
        background-size: cover;
        cursor: inherit
    }

    .slide-carousel:not(.slide-active):not(.slide-next):not(.prev-to-next):not(.slide-prev):not(.prev-out):not(.next-to-prev), .box-carousel .slide:not(.slide-active):not(.slide-next):not(.prev-to-next):not(.slide-prev):not(.prev-out):not(.next-to-prev), .slide-box-carousel .slide:not(.slide-active):not(.slide-next):not(.prev-to-next):not(.slide-prev):not(.prev-out):not(.next-to-prev) {
        pointer-events: none;
        opacity: 0
    }

.pager {
    z-index: 300;
    position: absolute;
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    text-align: center
}

.box-zoomed .pager {
    bottom: 12px
}

.pager li {
    display: inline-block
}

.pg-item, .pager .number {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 12px;
    line-height: 12px;
    width: 6px;
    height: 6px;
    margin: 5px 4px;
    padding: 0;
    background-color: #222;
    border: 1px solid #222;
    border-radius: 3px;
    font-size: 0
}

    .pg-item:hover, .pager .number:hover {
        border-color: #0033eb
    }

.pg-item-active, .pager .active {
    border-color: black
}

    .pg-item-active:link, .pager .active:link, .pg-item-active:visited, .pager .active:visited, .pg-item-active:hover, .pager .active:hover {
        background-color: white;
        border-color: #222;
        cursor: default;
        pointer-events: none
    }
/*# sourceMappingURL=slidebox.css.map */