@charset 'UTF-8';
/* Slider in Gallerys */

.gallery {

    .slick-loading .slick-list {
        background: #fff url('./img/ajax-loader.gif') center center no-repeat;
    }

    /* Arrows */
    .slick-prev,
    .slick-next {   
        line-height: 0;
        position: absolute;
        top: 50%;
        color: transparent;
        display: block;

        width: 50px;
        padding: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer;
        border: none;
        outline: none;
        background: transparent;
        z-index: 20;
    }
    .slick-prev:hover,
    .slick-prev:focus,
    .slick-next:hover,
    .slick-next:focus {
        color: transparent;
        outline: none;
        background: transparent;
    }
    .slick-prev:hover:before,
    .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
        opacity: 1;
    }
    .slick-prev.slick-disabled:before,
    .slick-next.slick-disabled:before {
        opacity: .25;
    }

    .slick-prev:before, 
    .slick-next:before {
        @extend .fa;
        @extend .fa-3x;
        line-height: 1;
        opacity: .75;
        color: $color-main;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .slick-prev {
        left: 30px;
    }
    [dir='rtl'] .slick-prev {
        right: 30px;
        left: auto;
    }
    .slick-prev:before {       
        @extend .fa-chevron-left;
    }
    [dir='rtl'] .slick-prev:before {
        @extend .fa-chevron-right;
    }

    .slick-next {
        right: 30px;
    }
    [dir='rtl'] .slick-next {
        right: auto;
        left: 30px;
    }
    .slick-next:before {
        @extend .fa;
        @extend .fa-chevron-right;
    }
    [dir='rtl'] .slick-next:before {
        @extend .fa;
        @extend .fa-chevron-left;
    }

    /* Dots */
    .slick-dotted.slick-slider {
        margin-bottom: 40px;
    }

    .slick-dots {
        position: absolute;
        display: block;
        width: 100%;
        padding: 0;
        margin:  0;
        list-style: none;
        text-align: center;
        
        li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;
            cursor: pointer;
            
            button {
                display: block;
                width: 20px;
                height: 20px;
                padding: 5px;
                cursor: pointer;
                border: 0;
                background: transparent;
                color: transparent;
                
                &:hover, 
                &:focus {
                    outline: none;
                }
                &:hover:before, 
                &:focus:before {
                   opacity: 0.75;
                   color: $color-main;
                }

          
                &:before {
                    position: absolute;
                    top: 0;
                    left: 0;

                    @extend .fa;
                    @extend .fa-circle;
                    opacity: 0.25;
                    text-align: center;
                    color: black;

                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
            }
            &:after {
                display: none;
            }
        }
        li.slick-active button:before {
            opacity: 1;
            color: $color-main;
        }
    } 

    .slider {
        img {
            margin: 0 auto;
        }
        li {
            &::before {
                content: inherit;
                display: none;
                margin: 0;
            }
        }
        .gallery-image-caption {
            text-align: center;
           @include px2rem($font-size-gallery-caption); 
        }
    }
}