﻿.gallery-slider {
    background: rgba(0,0,0,.07);
    margin: 40px auto;
    padding: 20px;
    width: 900px;
}

    .gallery-slider .slick-list {
        z-index: 8;
    }

    /* General arrows styling */
    .gallery-slider .arrow {
        color: #999;
        cursor: pointer;
        left: -25px;
        padding: 10px;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 9;
    }

        .gallery-slider .arrow:hover, .gallery-slider .arrow:focus {
            color: #333;
        }

        .gallery-slider .arrow.arrow-next {
            left: auto;
            right: -25px;
        }

    .gallery-slider .slideshow-for .arrow {
        background: #fff;
        left: -20px;
    }

        .gallery-slider .slideshow-for .arrow.arrow-next {
            left: auto;
            right: -21px;
        }

@media only screen and (min-width : 600px) {
    .gallery-slider .slideshow-for .arrow {
        font-size: 32px;
    }
}

/* Slideshow Slide */
.slideshow-for {
    margin: 0 0 20px;
}

.slideshow-for {
    text-align: center;
}

    .slideshow-for img {
        display: inline-block;
        margin: auto;
    }

.slideshow-nav .slick-slide {
    cursor: pointer;
    margin: 5px;
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
    width: 100px;
}

    .slideshow-nav .slick-slide:hover, .slideshow-nav .slick-slide:focus {
        opacity: .7;
    }

/************************* Page Gallery *************************/
.page-gallery {
    margin: auto;
    text-align: center;
}

    .page-gallery img {
        display: block;
    }

    .page-gallery ul {
        margin: 40px auto;
        text-align: center;
    }

    .page-gallery:not(.masonry) li {
        margin: 0 5px 10px;
        width: 100%;
        -webkit-transition: max-width .1s;
        transition: max-width .1s;
    }

@media only screen and (min-width : 350px) {
    .page-gallery:not(.masonry) {
        text-align: left;
    }

        .page-gallery:not(.masonry) li {
            display: inline-block;
            vertical-align: top;
            max-width: calc(100% / 2 - 14px);
        }
}

@media only screen and (min-width : 500px) {
    .page-gallery:not(.masonry) li {
        max-width: calc(100% / 3 - 14px);
    }
}

@media only screen and (min-width : 700px) {
    .page-gallery:not(.masonry) li {
        max-width: calc(100% / 4 - 14px);
    }
}

@media only screen and (min-width : 900px) {
    .page-gallery:not(.masonry) li {
        max-width: calc(100% / 5 - 14px);
    }
}

/* Masonry */
.sizer {
    width: 225px;
}

.page-gallery.masonry li {
    margin: 0 0 10px;
}
