.lightboxpreview {
    transition: all .3s linear;
    padding-top:60%;
    cursor:pointer;
    background-size:cover;
}

.lightbox-content {
    max-height:75vh;
    height:75vh;
    width:100%;
    max-width: 1000px;}

.lightbox-close {
    cursor:pointer;
    margin-left: auto;
    position:absolute;
    right:-30px;
    top:-30px;
    color:white;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;}
.modal_inner_image {
    min-height: 400px;
    z-index: 1000;}
.modal-content {
    width: 100%;}


.modalscale {transform:scale(0);
    opacity:0;}



.lightbox-container, .lightbox-btn, .lightbox-image-wrapper, .lightbox-enabled{transition:all .4s ease-in-out;}
.lightbox_img_wrap {padding-top:65%;
    position:relative;
    overflow:hidden;
}
.lightbox-enabled:hover {
    transform:scale(1.1)
}
.lightbox-enabled {width:100%;
    height:100%;
    position:absolute;
    top:0;
    object-fit:cover;
    cursor:pointer;}

.lightbox-container {width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:rgba(0,0,0,.6);
    z-index:9999;
    opacity:0;
    pointer-events:none;
}

.lightbox-container.active {
    opacity:1;
    pointer-events:all;
}
.lightbox-image-wrapper {
    display:flex;
    transform:scale(0);
    align-items:center;
    justify-content:center;
    max-width:90vw;
    max-height:90vh;
    position:relative;
}
.lightbox-container.active .lightbox-image-wrapper {transform:scale(1);}
.lightbox-btn, #close {
    color:white;
    z-index:9999999;
    cursor:pointer;
    position:absolute;

    font-size:50px;
}

.lightbox-btn:focus {
    outline:none;
}

.left {left:50px;}
.right {right:50px;}
#close {top:50px;
    right:50px;}

.lightbox-image {
    width:100%;
    -webkit-box-shadow: 5px 5px 20px 2px rgba(0,0,0,0.19);
    box-shadow: 5px 5px 20px 2px rgba(0,0,0,0.19);
    max-height:95vh;
    object-fit:cover;
}

@keyframes slideleft {
    33% {transform:translateX(-300px);
        opacity:0;
    }
    66% {transform:translateX(300px);
        opacity:0;
    }
}


.slideleft {
    animation-name: slideleft;
    animation-duration: .5s;
    animation-timing-function: ease;
}
@keyframes slideright {
    33% {transform:translateX(300px);
        opacity:0;}
    66% {transform:translateX(-300px);
        opacity:0;}
}


.slideright{
    animation-name: slideright;
    animation-duration: .5s;
    animation-timing-function: ease;
}



.responsive-table {
    width: 100%;
    margin-bottom: 1.5em;
    border-spacing: 0;

    @media (min-width: $bp-bart) {
        font-size: .9em;
    }

    @media (min-width: $bp-marge) {
        font-size: 1em;
    }

    thead {
    // Accessibly hide <thead> on narrow viewports
    position: absolute;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;

        @media (min-width: $bp-bart) {
        // Unhide <thead> on wide viewports
        position: relative;
            clip: auto;
            height: auto;
            width: auto;
            overflow: auto;
        }

        th {
            background-color: #125875;
            border: 1px solid #1eb4e9;
            font-weight: normal;
            text-align: center;
            color: white;

            &:first-of-type {
                text-align: left;
            }
        }
    }

// Set these items to display: block for narrow viewports
tbody,
tr,
th,
td {
    display: block;
    padding: 0;
    text-align: left;
    white-space: normal;
}

    tr {
        @media (min-width: $bp-bart) {
        // Undo display: block
        display: table-row;
        }
    }

    th,
    td {
        padding: .5em;
        vertical-align: middle;

        @media (min-width: $bp-lisa) {
            padding: .75em .5em;
        }

        @media (min-width: $bp-bart) {
        // Undo display: block
        display: table-cell;
            padding: .5em;
        }

        @media (min-width: $bp-marge) {
            padding: .75em .5em;
        }

        @media (min-width: $bp-homer) {
            padding: .75em;
        }
    }

    caption {
        margin-bottom: 1em;
        font-size: 1em;
        font-weight: bold;
        text-align: center;

        @media (min-width: $bp-bart) {
            font-size: 1.5em;
        }
    }

    tfoot {
        font-size: .8em;
        font-style: italic;

        @media (min-width: $bp-marge) {
            font-size: .9em;
        }
    }

    tbody {
        @media (min-width: $bp-bart) {
        // Undo display: block
        display: table-row-group;
        }

        tr {
            margin-bottom: 1em;

            @media (min-width: $bp-bart) {
            // Undo display: block
            display: table-row;
                border-width: 1px;
            }

            &:last-of-type {
                margin-bottom: 0;
            }

            &:nth-of-type(even) {
                @media (min-width: $bp-bart) {
                    background-color: rgba(0,0,0,.12);
                }
            }
        }

        th[scope="row"] {
            background-color: #125875;
            color: white;

            @media (min-width: $bp-lisa) {
                border-left: 1px solid #1eb4e9;
                border-bottom: 1px solid #1eb4e9;
            }

            @media (min-width: $bp-bart) {
                background-color: transparent;
                color: rgba(0,0,0.87);
                text-align: left;
            }
        }

        td {
            text-align: right;

            @media (min-width: $bp-bart) {
                border-left: 1px solid #1eb4e9;
                border-bottom: 1px solid #1eb4e9;
                text-align: center;
            }

            &:last-of-type {
                @media (min-width: $bp-bart) {
                    border-right: 1px solid #1eb4e9;
                }
            }
        }

        td[data-type=currency] {
            text-align: right;
        }

        td[data-title]:before {
            content: attr(data-title);
            float: left;
            font-size: .8em;
            color: rgba(0,0,0,.54);

            @media (min-width: $bp-lisa) {
                font-size: .9em;
            }

            @media (min-width: $bp-bart) {
            // Don’t show data-title labels
            content: none;
            }
        }
    }
}