/*
    Responsive 

*/
@mobile: ~"only screen and (max-width: 768px)";

.modal-header{
    @media @mobile{
        .viewOriginal{
            display:none;
        }
    }
}
.swiper-container {
    width: 100%;

    &.gallery-top{
        position:relative;
        margin-bottom:2.5px;
        &.ratio-16-9{
            &:before {
                content: "";
                display: block;
                padding-top: 56.25%;
            }
            .swiper-wrapper{
                position: absolute;
                top: 0px;
                left: 0px;
                bottom: 0px;
                right: 0px;
            }
        }
    }
    &.gallery-thumbs {
        height: 100px;
        cursor:pointer;
        @media @mobile{
            display:none;
        }
        .swiper-slide{
            width:100px;
        }
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        width: auto;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        .gallery-top&{
            opacity: .5;
            max-width: 100%;

            &.swiper-slide-prev img{
                cursor:w-resize;
            }
            &.swiper-slide-active{
                opacity: 1;
                img{
                    cursor:pointer;
                }
            }
            &.swiper-slide-next img{
                cursor:e-resize;
            }
        }

        img{
            max-height: 100%;
            max-width: 100%;
            width: auto;
            height: 100%;
        }
    }
    .swiper-button-next, .swiper-button-prev{
        position: absolute;
        top: 50%;
        font-size: 35px;
        color: #fff;
        z-index: 10;
        cursor: pointer;
        margin-top: -1.09982em;
        pointer-events: auto;
        -moz-background-size: 27px 44px;
        -webkit-background-size: 27px 44px;
        background-size: 27px 44px;
        background-position: center;
        background-repeat: no-repeat;
        background: rgb(75,75,75);
        -webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
        transition: visibility 0.2s linear, opacity 0.2s linear;
        &:hover {
            background: rgb(35,35,35);
        }
        &.swiper-button-disabled {
            opacity: 0.35;
            cursor: auto;
        }
        >i{
            display:block;
            height:auto;
            width:auto;
            font-size: inherit;
        }
        @media @mobile{
            display:none;
        }
    }
    .swiper-button-prev{
        left: 0px;
        right: auto;
        border-radius: 0 2px 2px 0;
        padding: .6em .3em .6em .22em;
    }
    .swiper-button-next{
        right: 0px;
        left: auto;
        border-radius: 2px 0 0 2px;
        padding: .6em .22em .6em .3em;
    }
    .count-progress {
        display: none;
        position: absolute;
        left: 10px;
        bottom: 10px;
        background-color: rgba(0,0,0,0.6);
        z-index: 1;
        padding: 0.4em 0.8em 0.4em;
        border-radius: 2px;
        font-size: 12px;
        color: #fff;
        @media @mobile{
            display: block;
        }
    }
}

/*
    Styles for grid layout.
*/

.property-resp-slideshow{
    &.slider-type-12mosaic, &.slider-type-12grid{
        .gallery-top{
            .swiper-slide{
                height:auto;
                opacity:1;
            }
            .swiper-wrapper{
                .swiper-slide{
                    //border:1px solid;
                    //box-sizing: border-box;
                    img{
                        cursor: pointer;
                    }
                }
            }
        }
    }
    &.slider-type-12grid{
        .gallery-top{
            .swiper-wrapper{
                .swiper-slide{
                    overflow:hidden;
                    img{
                        max-height: none;
                        max-width: none;
                    }
                }
            }
        }
    }
}