/* gallery.css */
/* ALL */
.gallery {
    position: relative;
}

/* sm-viewport.css */
@media only screen and (max-width: 767px) {

    .gallery-pop-image {
        position: absolute;
        top: 20%;
        left: 30%;
    }
}


/* md-viewport.css */
@media only screen and (min-width: 768px) {

    .gallery-pop-image {
        position: absolute;
        top: 20%;
        left: 18%;
    }

    .gallery-close-icon {
        position: absolute;
        top: 5%;
        left: 87%;
        height: 32px;
        width: 55px;
        z-index: 1000;
    }

    .gallery-prev-icon {
        position: absolute;
        top: 35%;
        left: 2%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }

    .gallery-next-icon {
        position: absolute;
        top: 35%;
        left: 82%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }
}

/* lg-viewport.css */
@media only screen and (min-width: 992px) {
    .gallery-close-icon {
        position: absolute;
        top: -25%;
        left: 80%;
        height: 32px;
        width: 55px;
        z-index: 1000;
    }


    .gallery-prev-icon {
        position: absolute;
        top: 91%;
        left: 19%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }

    .gallery-next-icon {
        position: absolute;
        top: 91%;
        left: 77.5%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }

    .gallery-pop-image {
        position: absolute;
        top: 20%;
        left: 30%;
    }
}

@media only screen and (min-width: 1024px) {

    .gallery-close-icon {
        position: absolute;
        top: -30%;
        left: 83%;
        height: 32px;
        width: 55px;
        z-index: 1000;
    }

    .gallery-prev-icon {
        position: absolute;
        top: 91%;
        left: 18%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }

    .gallery-next-icon {
        position: absolute;
        top: 91%;
        left: 78%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }
}

/* xl-viewport.css */
@media only screen and (min-width: 1200px) {

    .gallery-vertical-space {
        margin-top: -4rem;
    }

    .gallery-pop-image {
        position: absolute;
        top: 20%;
        left: 31%;
    }

    .gallery-close-icon {
        position: absolute;
        top: -33%;
        left: 66%;
        height: 32px;
        width: 55px;
        z-index: 1000;
    }

    .gallery-next-icon {
        position: absolute;
        top: 115%;
        left: 64%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }

    .gallery-prev-icon {
        position: absolute;
        top: 115%;
        left: 23%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }
}

/* xxl-viewport.css */
@media only screen and (min-width: 1920px) {
    .gallery-close-icon {
        position: absolute;
        top: -18%;
        left: 56%;
        height: 32px;
        width: 55px;
        z-index: 1000;
    }

    .gallery-next-icon {
        position: absolute;
        top: 100%;
        left: 54%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }

    .gallery-prev-icon {
        position: absolute;
        top: 100%;
        left: 25.5%;
        height: 55px;
        width: 75px;
        z-index: 1000;
    }
}