@charset "utf-8";


/* This contains all the pages and the counter. */
.allPagesWithCounter{
	max-width: 100%;
	background: #ffffff;
	text-align: center;
	overflow: hidden;
}

/* These contain the individual pages. */
.pageWithCounter{
	display: none;
	animation: fadein 2s;
	max-width: 100%;
}

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

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

/* This class is applied on click to make the page fade in from the left. */
.movePageLeft{
	position: relative;
	animation: animateLeft 0.4s;
}
@keyframes animateLeft{
	from{
		left: -100%;
	}
	to{
		left: 0;
	}
}

/* This class is applied on click to make the page fade in from the right. */
.movePageRight{
	position: relative;
	animation: animateRight 0.4s;
}
@keyframes animateRight{
	from{
		right: -100%;
	}
	to{
		right: 0;
	}
}

/* This contains the counter and back and next buttons. */
.counterDashboard{
	display: block;
	width: 170px;
	margin: 10px auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 45px;
	font-weight: bold;
	color: #696969;
	line-height: 1;
	/* 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 counter. */
#counter{
	width: 50%;
	text-align: center;
	display: inline-block;
	padding: 0px;
}

/* These contain the back and next buttons. */
#pageBack, #pageNext{
	cursor: pointer;
	display: inline-block;
	color: #696969;
}

/* The left button must be hidden on page load. */
#pageBack{
	visibility: hidden;
}

#pageBack:hover, #pageNext:hover{
	opacity: 0.5;
}