:root {
	--main-background-color: #c4cedf;
	--alt-background-color: #80a5c2; 

	--main-accent-color: #415b89; 
	--second-accent-color: #9fa9da; 
	--third-accent-color: #7b8fb1; 
	--fourth-accent-color: #5b749d; 
	/*--fifth-accent-color: #5e86c4; */
}

body{
	background-color: var(--main-background-color);
	margin: 0px;
}



h1,h2,h3,h4,h5
{
	margin: auto;
	font-family: 'Almari', sans-serif;
}

h1{
	font-size: 40pt;
	/*padding-left: 1em;*/
	/*padding-right: 1em;*/
	padding-bottom:0.5em;
}
h1 em{
	color: var(--second-accent-color);
	/*text-shadow: 1px 1px #222222;*/
}

.factoid h1{
	padding-bottom: 0em;
}

.imageboxcontent .card{
	color: #f1f1f1;
	background-color: rgba(0,0,0,0.5);
}

.imageboxcontent{
	position:absolute;
	top:0;
	left:0;
	color: #f1f1f1;
	width:100%;
}

.column{
	width:50%;
	float:left;
	vertical-align: middle;
}

.columnleft{
	float:left;
	padding-left:0px;
	padding-right:5%;
}

.columnright{
	padding-left:5%;
	padding-right:0%;
}

#mytitle{
	position: fixed;
	top: 0;
	left: 0;
	width:100%;

	overflow: visible; /* so the logo can be seen */
	z-index: 90;

	margin: 0px;

	text-align: left;
	font-family: 'Almari', sans-serif;
	font-weight: bold;

	color: var(--main-accent-color);
	background-color: var(--main-background-color);

	outline-width: 5em;

	transition: 0.4s;
}

.content{
	position:relative;
	top: 320px;
	left: 0px;
	margin: 0px 0px 0px 0px;
	padding: 80px 10px 80px 10px;
	background: var(--main-background-color);
	font-family: 'Roboto', serif;
	/*width: 100%;*/
	z-index:50;

}


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

#logo{
	float: left;
	top: 0px;
	transition: 0.4s;
	z-index: 85;
	overflow: visible;
	background-color: var(--main-background-color);
	padding: 0px 80px 10px 20px;
	margin: 0px 30px 0px 0px;
	border-radius: 0px 0px 70px 0px;

}

#title{
	font-size: 48px;	
	color: var(--main-accent-color);
	box-sizing:border-box;
}
.factoid{
	height: 350px;
}

.card{
	float:left;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9);
	transition: 0.3s;
	width: 200px;
	padding: 20px;
	margin: 20px;
}

.service{
	width:100%;
	color:black;
	background-color: rgba(255,255,255,0.34);
}

.card:hover {
	box-shadow: 0 8px 16px 0 rgbda(0,0,0,0.2);
	background-color: rgba(0,0,0,0.8);
}


#menu{
	float: right;
	top: 0px;
	z-index:99;
}
.menu{
	box-sizing:border-box;
	float: right;
	text-align: center;
	margin: auto;
	padding-left: 1em;
	padding-right: 1em;
	font-family: 'Roboto', sans-serif;
	position: relative;
}

ul.menu{
	width=100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

li.menu{
	display:block;
	flex: 0 1 auto;
	text-align: center;
	float: left;
	font-size:large;
	padding: 0em;
	width:100%;
}

a.menu:hover{
	background-color: var(--main-accent-color);
	color: white;
	display:block;
	text-decoration: none;
	white-space: nowrap;
}
li.menu:hover{
	background-color: var(--main-accent-color);
	color: white;
}

a.menu {
	display: inline-block;
	flex: 0 1 auto;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: .5em;
	padding-bottom: .5em;
	font-size:small;
	color: var(--main-accent-color);
	width: 100%;
	text-decoration:none;
}

li.menu:last-child {
  border-right: none;
}