@charset "utf-8";

/* This contains the entire widget including the slider elements and back and next buttons. This does not move. You should not have to adjust the width here. */
.sliderContainer{
	overflow: hidden;
	border-top: 1px solid #696969;
	border-bottom: 1px solid #696969;
	width: 100%;
	text-align: center;
	position: relative;
}

/* This is the slider, which contains the individual slider items, and moves left and right in the sliderContainer. You should not have to adjust the width here. */
.slider{
	padding: 8px;
	display: inline-block;
	position: relative;
	white-space: nowrap;
	background-color: #ffffff;
	border-left: 2px solid #696969;
	border-right: 2px solid #696969;
	text-align: center;
}

/* This contains an individual item within the slider. This si where you adjust the width for each item in the slider. Everything else will respond. */
.sliderContent{
	display: inline-block;
	width: 150px;
	margin: 0px 10px;
	vertical-align: top;
	white-space: normal;
	overflow-y: auto;
	cursor: pointer;
}

.sliderContent img{
	max-width: 100%;
}

/* These contain the back and next buttons. */
.slideBack, .slideForward{
	cursor: pointer;
	position: absolute;
	z-index: 10;
	font-size: 60px;
	font-weight: bold;
	color: #696969;
	line-height: 1;
	opacity: 0.7;
	/* The styles below prevent the back and next characters from highlighting when clicked. */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.slideBack:hover, .slideForward:hover{
	opacity: 1;
}

.slideBack{
	margin-left: 4px;
	visibility: hidden;
}

.slideForward{
	margin-right: 4px;
	right: 0px;	
}

/* This is the optional big window which displays content when called by a click on sliderContent. */
.sliderViewport{
	max-width: 100%;
	margin: 8px auto;
	padding: 8px;
	text-align: center;
	border: 1px solid #696969;
}

.sliderViewport img{
	max-width: 95%;
}


/* These are the contents which can be displayed in the sliderViewport. */
.frameContent{
	display: none;
	animation: frameContentFadeIn 0.25s;
}
@keyframes frameContentFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}