body {
	margin: auto;
	width: 70%;
	padding: 10px;
	background-color: #2f3d4c;
	border: 1px solid #436b7f;
}


canvas {
	cursor: crosshair;	
}

canvas.gallery {
	width: 53.333vw;
	height: 40vw;
	border: 5px dotted #436b7f;
	box-shadow: 0 16px 18px 0 rgba(0,0,0,0.5), 0 17px 50px 0 rgba(0,0,0,0.3);
}


button {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	background-color: #3b5457;
	border: 3px solid #436b7f;
	border-radius: 8px;
	color: #d7ffff;
	font-family: verdana;
	cursor: pointer;
	transition: 300ms;
	
}

button:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3), 0 17px 50px 0 rgba(0,0,0,0.2);
	background-color: #3a4f58;
	border: 3px solid #436baf;
	border-radius: 5px;
	color: #aadfdf;
}

button:active {
	box-shadow: 0 8px 16px 0 rgba(0,0,1,0.1), 0 6px 20px 0 #2f3d4c;
	background-color: #436b7f;
	border: 3px solid #3b5457;
	color: #eeffff;
}

a:link  {
	color: #00b3ff;
}

a:visited {
	color: #007bff;
}

a:hover {
	color: burlywood;
}

a:active {
	color: #00e5ff;
}

.videoplayer {
	width: 55vw;
	height: 31vw;
	object-fit: fill;
	margin-left: auto;
    margin-right: auto;
    display: block;
}

.pdf {
	width: 100%;
	height: 60vw;
	margin-left: auto;
    margin-right: auto;
	display: block;
	object-fit: fill;
}

.regular {
	margin: auto;
	padding: 10px;
	color: #d7ffff;
	font-family: verdana;
	font-size: 1vw;
	font-style: bold;
	text-align: center;
}

.regular.left {
	text-align: left;
}

.section {
	margin: auto;
	width: 80%;
	text-align: left;
}

.horizontalLayout {
	position:relative;
	width: 100%;
  	height: 1000px;
	margin: auto;
	overflow: hidden;
	align-items: center;
	text-align: center;
	display: flex;
}

.layoutControl {
	position: relative;
	margin: auto;
	padding-top: 15%;
	height: 12%;
	cursor: pointer;
	mix-blend-mode: normal;
}

.layoutControl.left {
	margin-left: 0%;
}

.layoutControl.right {
	margin-right: 0%;
}

.layoutControl:hover {
	mix-blend-mode: screen;
}

.layoutControl:active {
	mix-blend-mode: color-dodge;
}

.layoutControl.disabled {
	filter: blur(1px) sepia(50%);
	mix-blend-mode: luminosity;
	cursor: default;
}

.slidepage {
	position: absolute;
	align-items: center;
	padding: auto;
	width: 60%;
	margin: 10%;
}

.textbox {
	position: relative;
	margin: auto;
	padding-bottom: 2%;
	width: 133%;
}

.title {
	color: #f5eaba;
	text-shadow: 2px 2px #035fff;
	font-family: verdana;
	font-style: normal;
}

.description {
	margin: auto;
	color:  #bad9f5;
	font-family: verdana;
	font-style: normal;
}

.slidepage.slideRight {
	animation: slideinR 1s ease 0s 1 forwards paused;
}

.slidepage.hideRight {
	animation: fadeoutR 1s linear 0s 1 forwards paused;
}

.slidepage.slideLeft {
	animation: slideinL 1s ease 0s 1 forwards paused;
}

.slidepage.hideLeft {
	animation: fadeoutL 1s linear 0s 1 forwards paused;
}

@keyframes slideinL {
	0% { padding-left: 100%; }
	100% { padding-left: 0%; }
}

@keyframes fadeoutR {
	0% { opacity: 100%; }
	100% { opacity: 0%; margin-left: 60%; }
}

@keyframes slideinR {
	0% { padding-right: 0%; margin-left: -100%;}
	100% { padding-right: 100%; }
}

@keyframes fadeoutL {
	0% { opacity: 100%; }
	100% { opacity: 0%; margin-left: -32%; }
}

.sectionTitle {
	margin: auto;
	padding: 2px;
	color:  #d7ffff;
	text-shadow: 2px 2px #03659e;
	font-family: verdana;
	font-style: normal;
	text-align: center;
}