﻿.demo-gallery > ul {
    margin-bottom: 0;
    text-align: left;
    border-bottom: 0;
}

    .demo-gallery > ul > li {
        /*! float: left; */
        margin-bottom: 10px;
        width: 31.5%;
        overflow: hidden;
        height: 180px;
        margin-right: 1%;
    }

        .demo-gallery > ul > li a {
            display: block;
            overflow: hidden;
            position: relative;
            float: left;
        }

            .demo-gallery > ul > li a > img {
                -webkit-transition: -webkit-transform .15s ease 0s;
                -moz-transition: -moz-transform .15s ease 0s;
                -o-transition: -o-transform .15s ease 0s;
                transition: transform .15s ease 0s;
                -webkit-transform: scale3d(1,1,1);
                transform: scale3d(1,1,1);
                height: 100%;
                width: 100%;
            }

            .demo-gallery > ul > li a:hover > img {
                -webkit-transform: scale3d(1.1,1.1,1.1);
                transform: scale3d(1.1,1.1,1.1);
            }

            .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
                opacity: 1;
            }

            .demo-gallery > ul > li a .demo-gallery-poster {
                background-color: rgba(0,0,0,.1);
                bottom: 0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                -webkit-transition: background-color .15s ease 0s;
                -o-transition: background-color .15s ease 0s;
                transition: background-color .15s ease 0s;
            }

                .demo-gallery > ul > li a .demo-gallery-poster > img {
                    left: 50%;
                    margin-left: -10px;
                    margin-top: -10px;
                    opacity: 0;
                    position: absolute;
                    top: 50%;
                    -webkit-transition: opacity .3s ease 0s;
                    -o-transition: opacity .3s ease 0s;
                    transition: opacity .3s ease 0s;
                }

            .demo-gallery > ul > li a:hover .demo-gallery-poster {
                background-color: rgba(0,0,0,.5);
            }

.demo-gallery .justified-gallery > a > img {
    -webkit-transition: -webkit-transform .15s ease 0s;
    -moz-transition: -moz-transform .15s ease 0s;
    -o-transition: -o-transform .15s ease 0s;
    transition: transform .15s ease 0s;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    height: 100%;
    width: 100%;
}

.demo-gallery .justified-gallery > a:hover > img {
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
}

.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
    opacity: 1;
}

.demo-gallery .justified-gallery > a .demo-gallery-poster {
    background-color: rgba(0,0,0,.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color .15s ease 0s;
    -o-transition: background-color .15s ease 0s;
    transition: background-color .15s ease 0s;
}

    .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        opacity: 0;
        position: absolute;
        top: 50%;
        -webkit-transition: opacity .3s ease 0s;
        -o-transition: opacity .3s ease 0s;
        transition: opacity .3s ease 0s;
    }

.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
    background-color: rgba(0,0,0,.5);
}

.demo-gallery .video .demo-gallery-poster img {
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    opacity: .8;
    width: 48px;
}

.demo-gallery.dark > ul > li a {
    border: 3px solid #04070a;
}




@media only screen and (max-width:1200px) {
    .demo-gallery > ul > li {
        height: 180px;
    }
}


@media only screen and (max-width:768px) {
    .demo-gallery > ul > li {
        margin-bottom: 15px;
        width: 48%;
        height: 135px;
    }
}


@media only screen and (max-width:420px) {
    .demo-gallery > ul > li {
        margin-bottom: 10px;
        width: 48%;
        height: 100px;
    }
}

.lg-outer .lg-start-zoom .lg-use-css3 .lg-css3 .lg-slide .lg-grab .lg-show-after-load .lg-thumb-open .lg-pull-caption-up .lg-has-thumb .lg-can-toggle .lg-visible .lg-hide-items {
    direction: ltr !important;
}

.lg-outer.lg-visible {
    direction: ltr !important;
}
