.filo__overlay {

    // transparent image (1x1)
    $base64-pixel: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QURCQjMxMjdFRDJDMTFFMUJBOUJDRDU5NUJEQjg1NEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QURCQjMxMjhFRDJDMTFFMUJBOUJDRDU5NUJEQjg1NEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBREJCMzEyNUVEMkMxMUUxQkE5QkNENTk1QkRCODU0QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBREJCMzEyNkVEMkMxMUUxQkE5QkNENTk1QkRCODU0QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');

    color: #999;
    font-family: arial;
    position:fixed;
    width:100%;
    height:100%;
    z-index:996;
    top:0;
    left:0; 

    &__background{
        background: #333;
        opacity: .75;
        position: absolute;
        width:100%;
        height:100%;
        z-index:997;
        top:0;
        left:0; 
    }

    &__container {
        position: relative;
        left:50%;   
        top:50%;
        border-style:solid;
        border-width: 0px;
        border-color:#fff;
        background:#fff;
        box-shadow: 0px 0px 11px 0px #222222;
        display: none;
        z-index: 998;

        &__left {
            background: $base64-pixel; // IE10 fix
            width: 50%;
            height: 100%;
            overflow: hidden;
            position:absolute;
            left:0px;
            top:0;
            cursor:pointer;
            z-index: 999;

            &:hover {
                
            }

            .arrow-left {
                background: url(./img/arrow-left.png) no-repeat;
                content: '';
                display: block;
                @include fadeIn;
                height: 106px;
                opacity: 0;
                position: absolute;
                top: 50%;
                margin-top: -53px;
                left: -55px;
                width: 55px;
            }

            &:hover .arrow-left {
                left: 10px;
                opacity: 0.9;
            }
        }

        &__right {
            background: $base64-pixel; // IE10 fix
            width: 50%;
            height: 100%;
            overflow: hidden;
            position:absolute;
            right:0px;
            top:0;
            cursor:pointer;
            z-index: 999;

            &:hover {

            }

            .arrow-right {
                background: url(./img/arrow-right.png) no-repeat;
                content: '';
                display: block;
                @include fadeIn;
                height: 106px;
                opacity: 0;
                position: absolute;
                top: 50%;
                margin-top: -53px;
                right: -55px;
                width: 55px;
            }

            &:hover .arrow-right {
                right: 10px;
                opacity: 0.9;
            }
        }

        &__close {
            opacity: 1;
            position:absolute;
            right:0;
            top:0;
            cursor:pointer;
            display:none;
            z-index: 999;
        }

        
        &__meta {
            background: rgba(0,0,0,0.6);
            bottom: 0;
            box-sizing: border-box;
            font-size: 14px;
            opacity: 0.1;
            padding: 7px;
            position: absolute;
            width: 100%;
            @include fadeIn;
            
            &__count {
                display: inline-block;
                margin-left: 10px;
            }

            &__album{
                color: #fff;
                display: inline-block;
            }
        } 

        &__full {
            background: url(./img/full-screen-white.png) top left no-repeat;
            background-size: cover;
            cursor: pointer;
            @include fadeIn(0.1s);
            height: 26px;
            position: absolute;
            right: 12px;
            top: 12px;
            width: 26px;
            z-index: 1000;

            &:hover {
                height: 32px;
                right: 10px;
                top: 10px;
                width: 32px;
            }
        }

        &:hover &__meta {
            opacity: 1;
        }
    }

    img.filo__full__picture {
        z-index: 998;   
        width: 100%;
        height: 100%;   
    }
}