/* custom styling of the directional arrows */
    .ekko-lightbox-container {
        position:relative;
    }
    .ekko-lightbox-nav-overlay {
        z-index:100;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .ekko-lightbox-nav-overlay a {
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;
        color:#fff;
        font-size:30px;
        height: 100%;
        width:49%;
        display:block;
        padding-top:45%;
        text-shadow: 2px 2px 4px #000;
        filter: dropshadow(color=#000, offx=2, offy=2);
        z-index:100;
    }
    .ekko-lightbox-nav-overlay a:empty {
        width:49%; /* removes glyphicons :empty { width:1em } */
    }
    .ekko-lightbox a:hover {
        opacity: 1;
        text-decoration: none;
    }
    .ekko-lightbox .glyphicon-chevron-left {
        padding-left:15px;
        float:left;
        left:0;
        text-align: left;
    }
    .ekko-lightbox .glyphicon-chevron-right {
        padding-right:15px;
        float:right;
        right:0;
        text-align: right;
    }

    /* use this to get your footer text left aligned - bootstraps modal default aligns them right */
    .ekko-lightbox .modal-footer {
        text-align: left;
    }

    /* the rest of this css is custom styling for this page, you can ignore it */
    /* i like padding */
    div.row > div > div.row {
        margin-bottom: 15px;
    }

    body {
        padding-bottom: 50px;
    }

    div.top-header {
        margin-bottom:100px;
    }

    h3.page-header {
        margin-top: 50px;
    }

    figure {
        position: relative;
    }

    figure figcaption {
        font-size: 22px;
        color: #fff;
        text-decoration: none;
        bottom: 10px;
        right: 20px;
        position: absolute;
        background-color: #000;
    }