@charset "utf-8";


/* This contains all the hidden pages, and the left and right buttons. */
.allPagesContainer{
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #696969;
	border-bottom: 1px solid #696969;
	width: 100%;
	text-align: center;
	display: block;
	background-color: #ffffff;
	position: relative;
	overflow: hidden;
}

/* These contain the individual pages. */
.fullPage{
	display: none;
	margin: 8px;
	padding: 0px;
	max-width: 100%;
}

/* This applies to only the first fullPage to make it visible on load. */
.fullPage:first-of-type{
	display: block;
}

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

/* This class is added on click to move images in from the left. */
.moveFullPageLeft{
	position: relative;
	animation: animateLeft 0.5s;
}
@keyframes animateLeft{
	from{
		left: -100%;
	}
	to{
		left: 0;
	}
}

/* This class is added on click to move images in from the right. */
.moveFullPageRight{
	position: relative;
	animation: animateRight 0.5s;
}
@keyframes animateRight{
	from{
		right: -100%;
	}
	to{
		right: 0;
	}
}

/* These contain the left and right buttons. */
#goBack, #goNext{
	cursor: pointer;
	display: inline-block;
	position: absolute;
	color: #696969;
	z-index: 10;
	font-size: 40px;
	font-weight: bold;
	opacity: 0.5;
	/* 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 */
}

/* This is the left button. */
#goBack{
	visibility: hidden;
	top: 8px;
	left: 4px;
}

/* This is the right button. */
#goNext{
	top: 8px;
	right: 4px;
}

#goBack:hover, #goNext:hover{
	opacity: 1;
}