﻿/* Mobile-only Slider */
.mobile-only-slider {
    width: 100%;
    /*max-height: 375px;*/
}

    .mobile-only-slider img {
        /*height: 375px;
        object-fit: cover;*/
    }

    .mobile-only-slider video {
        width: 100%;
        max-height: 491px;
        object-fit: cover;
        height: 100%;
    }

    .mobile-only-slider .details-video {
        position: relative;
        height: 100%;
        object-fit: cover;
    }

        .mobile-only-slider .details-video .play-pause-icon {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid white;
            margin: 24px;
            bottom: 0;
            cursor: pointer;
        }

            .mobile-only-slider .details-video .play-pause-icon svg {
                width: 22px !important;
                height: 22px;
                margin: 13px;
                fill: white;
            }

            .mobile-only-slider .details-video .play-pause-icon:hover {
                border-color: #c30000;
            }

                .mobile-only-slider .details-video .play-pause-icon:hover svg {
                    fill: #c30000;
                }

            .mobile-only-slider .details-video .play-pause-icon svg.play {
                margin-left: 15px;
            }

            .mobile-only-slider .details-video .play-pause-icon svg.pause {
                margin-left: 13px;
            }

            .mobile-only-slider .details-video .play-pause-icon svg.disabled {
                display: none;
            }

    .mobile-only-slider .swiper {
        padding-top: 126%;
    }

        .mobile-only-slider .swiper .swiper-wrapper {
            position: absolute;
            top: 0;
        }

            .mobile-only-slider .swiper .swiper-wrapper .swiper-slide {
                display: block;
                place-items: center;
                background-color: #F4F4F4;
            }

    .mobile-only-slider .swiper-pagination {
        width: unset;
        bottom: 20px;
        left: unset;
        right: 15px;
    }

        .mobile-only-slider .swiper-pagination .swiper-pagination-bullet {
            width: 2px;
            height: 10px;
            margin: 0 !important;
            margin-right: 10px !important;
            border-radius: unset !important;
            background-color: white;
            box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
            opacity: 0.35;
        }

            .mobile-only-slider .swiper-pagination .swiper-pagination-bullet:last-of-type {
                margin-right: 0px !important;
            }

        .mobile-only-slider .swiper-pagination .swiper-pagination-bullet-active {
            height: 15px;
            width: 2px;
            opacity: 1;
        }
    /* END of Mobile-only Slider */

    .mobile-only-slider .desktop-only .masonry-gallery {
        display: none;
    }

@media(min-width: 768px) {
    /* Mobile-only Slider */
    .mobile-only-slider {
        max-height: unset;
    }

        .mobile-only-slider img {
            height: auto;
            max-height: 491px;
            width: 100%;
            object-fit: cover;
            object-position: left 15%;
        }
        /* END of Mobile-only Slider */


        /* Masonry */
        .mobile-only-slider .desktop-only .masonry-gallery {
            display: block;
            padding-top: 20px;
            overflow: hidden;
        }

            .mobile-only-slider .desktop-only .masonry-gallery .grid-sizer,
            .mobile-only-slider .desktop-only .masonry-gallery .item {
                width: calc((424 / 872) * 100%);
            }

            .mobile-only-slider .desktop-only .masonry-gallery .gutter-sizer {
                width: calc((24 / 872) * 100%);
            }

            .mobile-only-slider .desktop-only .masonry-gallery .item {
                margin-bottom: 20px;
            }

                .mobile-only-slider .desktop-only .masonry-gallery .item img {
                    width: 100%;
                    max-height: initial;
                }
    /* Masonry */
}
