/* Poptrox */

.poptrox-popup {

@include vendor('box-sizing', 'content-box');
background: #fff;
padding-bottom: 3em;

.loader {
    width: 48px;
    height: 48px;
    background: url('images/loader.gif');
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -24px 0 0 -24px;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 3em;
    line-height: 3em;
    text-align: center;
    cursor: default;
    z-index: 1;
}

.nav-next,
.nav-previous {
    @include vendor('transition', 'opacity 0.5s ease-in-out');
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.01);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    &:before {
        content: '';
        position: absolute;
        width: 96px;
        height: 64px;
        background: url('images/poptrox-nav.svg');
        top: calc(50% - 1.5em);
        margin: -32px 0 0 0;
    }
}

&:hover {
    .nav-next,
    .nav-previous {
        opacity: 0.5;

        &:hover {
            opacity: 1.0;
        }
    }
}

.nav-next {
    right: 0;

    &:before {
        right: 0;
    }
}

.nav-previous {
    left: 0;

    &:before {
        @include vendor('transform', 'scaleX(-1)');
        left: 0;
        -ms-filter: "FlipH";
        filter: FlipH;
    }
}

.closer {
    @include vendor('transition', 'opacity 0.5s ease-in-out');
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    text-indent: -9999px;
    z-index: 2;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    &:before {
        @include vendor('transition', 'background-color 0.5s ease-in-out');
        content: '';
        display: block;
        position: absolute;
        right: 16px;
        top: 16px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        box-shadow: inset 0 0 0 1px #fff;
        background: rgba(255, 255, 255, 0.1) url('images/poptrox-closer.svg') center center;
        color: #fff !important;
    }
}

&:hover {
    .closer {
        opacity: 0.5;

        &:hover {
            opacity: 1.0;
        }
    }
}

}