/* Reference colors: */
	/* main med blue = #2258c3 = hsl(220, 70%, 45%) */
	/* logo background med blue = #195ee6 = hsl(220, 80%, 50%) */
	/* logo pencil tip pale green = #a3f5a3 = hsl(120, 80%, 80%) */
	/* logo gray = #b3b3b3 = hsl(0, 0,%, 70%) */

body {
	background-color: White;
	font-family: "Calibri", sans-serif;
	margin: 0;
	text-align: center;
}

table, th, td {
	border: 1px solid hsl(0, 0%, 90%);
}

table {
	border-collapse: collapse;
	box-sizing: border-box;
}

th, td {
	padding: 5px;
	vertical-align: middle;
	text-align: center;
}

a:link {
	color: hsl(220, 70%, 45%);
	text-decoration: none;
}

a:visited {
	color: hsl(220, 70%, 45%);
	text-decoration: none;
}

.header {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 30px;
	line-height: 30px;
	width: 100%;
	padding: 0px;
	margin: 0px;
	text-align: center;
	background-color: hsl(220, 70%, 45%);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.header-offset {
	position: static;
	height: 30px;
}

.main {
	position: static;
	font-size: 18px;
	width: 100%;
	background-color: White;
}

.footer {
	position: static;
	font-size: 12px;
	text-align: center;
	background-color: inherit;
}

.centered-in-container {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.left-aligned-and-vertically-centered-in-container {
	position: absolute;
	left: 0%;
	top: 50%;
	transform: translate(0%, -50%);
}

/* Grids */
.row {
	padding: 0px;
	margin: 0px;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

.grid-container {
	display: inline-grid;
}

[class*=".grid-column-width-"] { /* For mobile */
	box-sizing: border-box;
	float: left;
	width: 100%;
}

@media only screen and (min-width: 768px) { /* For desktop */
	.grid-column-width-1of5 {box-sizing: border-box; float: left; width: 20%;}
	.grid-column-width-2of5 {box-sizing: border-box; float: left; width: 40%;}
	.grid-column-width-3of5 {box-sizing: border-box; float: left; width: 60%;}
	.grid-column-width-4of5 {box-sizing: border-box; float: left; width: 80%;}
	.grid-column-width-5of5 {box-sizing: border-box; float: left; width: 100%;}
}

/* Top Menu (part of the header) */
.top-menu-container {
	display: block;
	position: fixed;
	top: 30px;
	left: 0px;
	height: 20px;
	line-height: 20px;
	width: 100%;
	padding: 0px;
	margin: 0px;
	background-color: hsl(0, 0%, 90%);
	color: hsl(220, 70%, 45%);
	font-size: 12px;
	text-align: center;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.top-menu-container-offset {
	position: static;
	height: 20px;
}

.top-menu {
	display: block;
	/* display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;*/
}

.top-menu-item-position1of2 {position: absolute; left: 33%; margin-left: -50px;}
.top-menu-item-position2of2 {position: absolute; left: 67%; margin-left: -50px;}

.top-menu-item-position1of3 {position: absolute; left: 25%; margin-left: -50px;}
.top-menu-item-position2of3 {position: absolute; left: 50%; margin-left: -50px;}
.top-menu-item-position3of3 {position: absolute; left: 75%; margin-left: -50px;}

.top-menu-item-position1of4 {position: absolute; left: 20%; margin-left: -50px;}
.top-menu-item-position2of4 {position: absolute; left: 40%; margin-left: -50px;}
.top-menu-item-position3of4 {position: absolute; left: 60%; margin-left: -50px;}
.top-menu-item-position4of4 {position: absolute; left: 80%; margin-left: -50px;}

.top-menu-item-position1of5 {position: absolute; left: 20%; margin-left: -50px;}
.top-menu-item-position2of5 {position: absolute; left: 35%; margin-left: -50px;}
.top-menu-item-position3of5 {position: absolute; left: 50%; margin-left: -50px;}
.top-menu-item-position4of5 {position: absolute; left: 65%; margin-left: -50px;}
.top-menu-item-position5of5 {position: absolute; left: 80%; margin-left: -50px;}

[class*="top-menu-item-"] {
	width: 100px;
}

.header:hover .top-menu-container {
	background-color: White;
}

/*.header:hover .top-menu {
}*/

[class*="top-menu-item-"]:hover {
	background-color: hsl(120, 57%, 85%);
}

/* Big Menu */
.middle-menu-container {
	position: static;
	width: 100%;
}

.middle-menu-item-position1of3 {position: absolute; left: 50%; margin-top: -90px; margin-left: -40px;}
.middle-menu-item-position2of3 {position: absolute; left: 50%; margin-top: 0px; margin-left: -40px;}
.middle-menu-item-position3of3 {position: absolute; left: 50%; margin-top: 90px; margin-left: -40px;}

.middle-menu-item-position1of4 {position: absolute; left: 50%; margin-top: -75px; margin-left: -40px;}
.middle-menu-item-position2of4 {position: absolute; left: 35%; margin-top: 0px; margin-left: -40px;}
.middle-menu-item-position3of4 {position: absolute; left: 65%; margin-top: 0px; margin-left: -40px;}
.middle-menu-item-position4of4 {position: absolute; left: 50%; margin-top: 75px;  margin-left: -40px;}

.middle-menu-item img { /* For mobile */
	height: 80px;
	width: 80px;
}

@media only screen and (min-width: 768px) { /* For desktop */
	.middle-menu-container {
		position: static;
		width: 100%;
	}
	
	.middle-menu-item-position1of3 {position: absolute; left: 35%; margin-top: 0px; margin-left: -50px;}
	.middle-menu-item-position2of3 {position: absolute; left: 50%; margin-top: 0px; margin-left: -50px;}
	.middle-menu-item-position3of3 {position: absolute; left: 65%; margin-top: 0px; margin-left: -50px;}

	.middle-menu-item-position1of4 {position: absolute; left: 50%; margin-top: -75px; margin-left: -50px;}
	.middle-menu-item-position2of4 {position: absolute; left: 40%; margin-top: 0px; margin-left: -50px;}
	.middle-menu-item-position3of4 {position: absolute; left: 60%; margin-top: 0px; margin-left: -50px;}
	.middle-menu-item-position4of4 {position: absolute; left: 50%; margin-top: 75px;  margin-left: -50px;}
	
	.middle-menu-item img {
		height: 100px;
		width: 100px;
	}
}

/* Switchable element */
.switchable-element img {
	position: inherit;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.switchable-element img.without-mouse {
	opacity: 1;
	/* border-radius: 50px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
}

.switchable-element img.without-mouse:hover {
	opacity: 0;
	/* border-radius: 50px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
}

.switchable-element img.with-mouse {
	opacity: 0;
	/* border-radius: 50px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
}

.switchable-element img.with-mouse:hover {
	opacity: 1;
	/* border-radius: 50px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
}

/* Buttons */
.button-circle-background {
	background-color: Gray;
	opacity: 1;
	height: 200px;
	width: 200px;
	padding: 0px;
	border-radius: 50px;
	border-width: 0;
	cursor: pointer;
 	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}

.button-circle-background:hover {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.button-circle-blue {
	background-color: hsl(220, 70%, 45%);
	color: White;
	opacity: 0.5;
	/*margin-top: 20px;
	margin-left: auto;
	margin-bottom: 20px;
	margin-right: auto;*/
	height: 100px;
	width: 100px;
	font-size: 14px;
	text-align: center;
	line-height: 100px; /* Vertically aligns text (set equal to object height) */
	border-radius: 50px;
	border-width: 0;
	cursor: pointer;
 	-webkit-transition: opacity 0.2s, color 0.2s, box-shadow 0.2s;
	-moz-transition: opacity 0.2s, color 0.2s, box-shadow 0.2s;
    transition: opacity 0.2s, color 0.2s, box-shadow 0.2s;
}

.button-circle-blue:hover {
	opacity: 1;
	color: White;	
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}