/* You can add your stylesheets for frontend here. */
body .modal-dialog { /* Width */
    max-width: 70%;
    width: auto !important;
}

.modal-open .modal {
    display: flex !important;
    justify-content: center;
    align-items: center;
	z-index: 999999;
}

section[id^="custom-gallery-carousel"] {
    width: 100%;
}

section[id^="custom-gallery-carousel"] .left-panel {
    width: 100%;
	float: left;
	margin-bottom: 20px;
}

section[id^="custom-gallery-carousel"] .left-panel .carousel-item {
	height: 450px;
}

section[id^="custom-gallery-carousel"] .left-panel img {
    width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

section[id^="custom-gallery-carousel"] .left-panel .carousel-control-next, section[id^="custom-gallery-carousel"] .left-panel .carousel-control-prev {
    top: 42%;
    height: 17%;
    background-color: #f9a636;
    width: 12%;
    font-size: 30px;
	opacity: 1;
	color: #FFF;
}

.elementor-widget-video-image-gallery.stockport section[id^="custom-gallery-carousel"] .left-panel .carousel-control-next, .elementor-widget-video-image-gallery.stockport section[id^="custom-gallery-carousel"] .left-panel .carousel-control-prev {
	background-color: #4a63b7;
}

[id^="custCarousel1"] .carousel-control-next,
[id^="custCarousel1"] .carousel-control-prev {
    top: 42%;
    height: 17%;
    background-color: #f9a636;
    width: 12%;
    font-size: 30px;
	opacity: 1;
	color: #FFF;
}

.elementor-widget-video-image-gallery.stockport[id^="custCarousel1"] .carousel-control-next, .elementor-widget-video-image-gallery.stockport[id^="custCarousel1"] .carousel-control-prev {
	background-color: #4a63b7;
}

section[id^="custom-gallery-carousel"] .left-panel .carousel-control-prev .carousel-control-prev-icon,
[id^="custCarousel1"] .carousel-control-prev .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23454545' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

section[id^="custom-gallery-carousel"] .left-panel .carousel-control-next .carousel-control-next-icon,
[id^="custCarousel1"] .carousel-control-next .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23454545' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

section[id^="custom-gallery-carousel"] .left-panel i.eicon-play, [id^="custCarousel1"] i.eicon-play {
    background: url(https://api.iconify.design/mdi-play-circle-outline.svg?color=%23FFF) no-repeat center center / contain;
    width: 1.2em;
    height: 1.2em;
}

section[id^="custom-gallery-carousel"] .right-panel i.eicon-play {
    background: url(https://api.iconify.design/mdi-play-circle-outline.svg?color=%23FFF) no-repeat center center / contain;
    width: .6em;
    height: .6em;
}

section[id^="custom-gallery-carousel"] .left-panel i.eicon-play:before, section[id^="custom-gallery-carousel"] .right-panel i.eicon-play:before, [id^="custCarousel1"] i.eicon-play:before {
    content: '';
}

section[id^="custom-gallery-carousel"] .right-panel {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail {
    flex: 0 0 20%;
	height: 110px;
	margin-bottom: 10px;
	margin-right: 10px;
	border: 0;
	padding: 0;
	flex: 0 0 calc(20% - 8px);
	position: relative;
}

section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail:nth-child(5n+5) {
    margin-right: 0;
}

section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media only screen and (max-width: 1024px) {
    section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail {
        width: 100%;
    }
}

@media only screen and (min-width: 476px) and (max-width: 600px) {
    section[id^="custom-gallery-carousel"] .right-panel {
        width: 100%;
        height: auto;
    }

    section[id^="custom-gallery-carousel"] .left-panel {
        width: 100%;
        margin-bottom: 20px;
    }

    section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail {
        width: calc(100% - 68.32%);
    }
}

@media only screen and (min-width: 415px) and (max-width: 475px) {
    section[id^="custom-gallery-carousel"] .right-panel {
        width: 100%;
        height: auto;
    }

    section[id^="custom-gallery-carousel"] .left-panel {
        width: 100%;
        margin-bottom: 20px;
    }

	section[id^="custom-gallery-carousel"] .left-panel .carousel-item {
		height: 350px;
	}

    section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail {
        width: calc(100% - 68.32%);
		flex: 0 0 calc(34% - 10px);
    }

	section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail:nth-child(3n+3) {
		margin-right: 0;
	}

	section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail:nth-child(5n+5) {
		margin-right: 10px;
	}

}

@media only screen and (min-width: 390px) and (max-width: 414px) {
    section[id^="custom-gallery-carousel"] .right-panel {
        width: 100%;
        height: auto;
    }

    section[id^="custom-gallery-carousel"] .left-panel {
        width: 100%;
        margin-bottom: 20px;
    }

	section[id^="custom-gallery-carousel"] .left-panel .carousel-item {
		height: 350px;
	}

    section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail {
        width: calc(100% - 68.32%);
		flex: 0 0 calc(34.2% - 10px);
    }
}

@media only screen and (max-width: 390px) {
    section[id^="custom-gallery-carousel"] .right-panel {
        width: 100%;
        height: auto;
    }

    section[id^="custom-gallery-carousel"] .left-panel {
        width: 100%;
        margin-bottom: 20px;
    }

	section[id^="custom-gallery-carousel"] .left-panel .carousel-item {
		height: 350px;
	}
}

@media only screen and (min-width: 376px) and (max-width: 390px) {
    section[id^="custom-gallery-carousel"] .right-panel .img-thumbnail {
        width: calc(100% - 68.32%);
    }

	section[id^="custom-gallery-carousel"] .left-panel .carousel-item {
		height: 350px;
	}
}