/*
 * This is the class for the wrapper around the element that
 * will have the slidshow background.
 */
.jquery-bg-slideshow-wrap-bg-element {
	position: relative;
	max-width: 100vw;
	height: 100vh;
	min-height: 350px;
	max-height: 1080px;
	overflow: hidden;
}

/*
 * This class is for the div that holds all of the small 'ball'
 * that can be used to traverse the images in the list control.
 */
.jquery-bg-slideshow-list-control-element {
	position: absolute;
	text-align: center;
	bottom: 0;
	width: 100%;
}

/*
 * This is the class that defines the small 'ball' on the bottom
 * of the image for the user to click to view different images.
 * This is used if the user has the 'listControls.enabled=true'.
 * NOTE: listControls.size, listControls.backgroundColor,
 * listControls.borderSize, listControls.spaceBetween, 
 * and listControls.borderColor will impact this class.
 */
.jquery-bg-slideshow-list-control-image-element {
	display: inline-block;
	border-radius: 5pt;
	height: 5pt;
	width: 5pt;
	margin-right: 5px;
	background: rgb(0, 0, 0);
	border: 2px rgb(255, 255, 255);
	box-shadow: 1px 1px 10px 1px white;
	cursor: pointer;
}

/*
 * This is the class that highlights which image is being displayed
 * within the list control.  That is, the small 'ball' on the bottom
 * of the page.
 */
.jquery-bg-slideshow-list-control-image-active-element {
	background-color: red;
	height: 10px;
	width: 10px;
	border-radius: 10px;
	transition: background-color 0.5s ease;
}

/*
 * This is the class used to  store the cloned element.  This
 * will be in the background as the other one fades out.
 */

.bg {
	z-index: 1;
	height: 100%;
	width: 100% !important;
	background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
	align-items: center;
	justify-content: center;
	display: flex;
	background-size: cover;
	background-position: 50% 50%;

}

.jquery-bg-slideshow-cloned {
	z-index: 0;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
	background-size: cover;
	background-position: 50% 50%;
}

@media screen and (min-width: 575px) and (max-width: 990px) {
	.jquery-bg-slideshow-wrap-bg-element {
		margin-top: 80px;
	}

	.jquery-bg-slideshow-wrap-bg-element, .bg {
		height: 75vh;
	}
}

@media screen and (max-width: 574px) {
	.jquery-bg-slideshow-wrap-bg-element {
		margin-top: 80px;
	}

	.jquery-bg-slideshow-wrap-bg-element, .bg {
		height: 50vh;
	}
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
	.jquery-bg-slideshow-wrap-bg-element, .bg {
		height: 100vh;
	}
}