.lightbox {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;

    @include respond-to(desktop) {
        top: $lightbox-top;
        margin: 0 auto;
        width: $lightbox-width;
        max-width: $lightbox-max-width;
        max-height: $lightbox-min-height;
        height: auto;
    }

    .lightbox-body {
        height: 100%;
        padding: $lightbox-padding;
        background: #fff;
        header {
            text-align: center;
            position: relative;
            button.close {
                font-family: $font-family-icons;
                position: absolute;
                top: 0px;
                right: 0px;
                display: block;
                border: none;
                background: none;
                padding: 0;
                margin: 0;
                color: $color-grey-dark;
                outline: none;
            }
            h2 {
                margin: 0;
                padding: 0;
                font-size: $font-size-bigger;
                font-weight: normal;
                line-height: 1em;
                color: $color-grey-dark;
            }
        }
        .content {
            overflow: hidden;
        }
    }
}

.lightbox-overlay.show .lightbox {
    visibility: visible;
}

.lightbox-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: $color-grey-dark-alpha;
    transition: all 0.3s;
}

.lightbox-overlay.show {
    opacity: 1;
    visibility: visible;
}

// effect
.lightbox-effect .lightbox-body {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s;
}

.lightbox-overlay.show .lightbox-effect .lightbox-body {
    transform: scale(1);
    opacity: 1;
}