.imageDisplay {display:none}
img {vertical-align: middle}
.slideshow-container {max-width: 1000px;position: relative;margin: auto}
.prevImage, .nextImage {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: #22598f;text-decoration:none;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none}
.nextImage {right: 0;border-radius: 3px 0 0 3px}
.prevImage:hover, .nextImage:hover {color: #ccc}
.imageSelector {cursor: pointer;height: 15px;width: 16px;margin: 0 3px;background-color: #ccc;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease}
.activeImage, .imageSelector:hover {background-color: #22598f}

div.carouselImageContainer {width:96%;max-width: 1000px;margin: 15px auto;padding: 15px 5px;background:white;height: 42vw;max-height: 500px;border:solid 1px var(--contentBoxBorders);border-radius:8px;box-shadow:5px 6px 3px #ccc}

@media (max-width:575px) {
	div.carouselImageContainer {width:96%;margin: 15px auto 5px auto;padding: 15px 2px;background:white;height: 72vw;max-height: 500px;border:solid 1px var(--contentBoxBorders);border-radius:8px;box-shadow:5px 6px 3px #ccc}
	.prevImage,.nextImage,.text {background:#ccc;font-size: 14px;padding:4px 6px}
	.prevImage:hover,.nextImage:hover {color: #333;background:#eee}
}