html { height: 100%; overflow: hidden; }
	body { height: 100%; overflow: hidden; }
	
	* { font-family: verdana; font-size: 10pt; }
	b { font-weight: bold; }
	
	img { width: auto; height: 100px; }
	
	.header { color: crimson; text-align: left; }
	.header h1 { font-size: 3.7em; }
	.header h2 { font-size: 2em; }
	
	.menu { vertical-align: top; }
	.menu a:link, a:hover, a:visited, a:active { text-decoration: none; color: crimson; font-size: 2em; }
 	.main { display: block; height: 80vh; width: 70vw; overflow-y: scroll; padding: 25px; text-align: center; } 
 	.main a:link, a:hover, a:visited, a:active { color: crimson; text-decoration: underline; font-size: 1em; }
 	.main h3 {font-size: 1.2em; }
 	
 	.maintable { padding: 10px; background-image: url(bg_large2.jpg); background-repeat: no-repeat; background-size: cover }
 	
 	.slides img { height: 70vh; }
		.slides { display: none; background-color: black; }	/* Hide the slides by default */

		.row, .column, .column-modal { padding: 0px 0px; }
		.row:after { content: ""; display: table; clear: both; }
	
		.column { float: left; width: 17vw; height: 17vw; } /* Create four equal columns that float next to eachother */
		.column-modal { float: left; width: 20vw; height: 20vw; } /* Create four equal columns that float next to eachother */
		/*.column.img { height: 20px; } /*width: 95%; }*/
		/*.column.main { float: left; } /* Create four equal columns that float next to eachother */

		.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* The Modal (background) */
		.modal-content { position: relative;	background-color: #fefefe; margin: auto;	padding: 0;	width: 85%; vertical-align: text-bottom; } /* Modal Content */
		/*.modal-content img { max-width: 85%; }*/
	
		.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } /* The Close Button */
		.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }

		.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-right: 20px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Next & previous buttons */
		.prev, .next a:link, a:hover, a:visited, a:active { color: white; text-decoration: none; font-size: 20px; }
		.prev { left: 0; border-radius: 3px 0 0 3px; } 	/* Position the "previous button" to the left */
		.next { right: 0; border-radius: 3px 0 0 3px; }
		.prev:hover, .next:hover {	background-color: rgba(0, 0, 0, 0.6); } /* On hover, add a black background color with a little bit see-through */

	
		.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Number text (1/3 etc) */

		.caption-container { position: absolute; top: 60vh; left: 10px; text-align: center; background-color: black; color: white; padding: 5px 10px; } /* Caption text */

		img.demo { opacity: 0.6; max-width: 85%;  }	
		.active, .demo:hover { opacity: 1; }

		img.hover-shadow { transition: 0.3s; max-width: 80%; }
		.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }