html {
	background: url(background.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
}

.flex{
    display: flex;           /* establish flex container */
	height: 100%;
}

.flex-center{
	width:70%;
	height:70%;
	align-self: center;
    margin: 0 auto;
	padding: 0 160px;
}

iframe{
	border: none;
	width: 100%;
	height: calc(100% - 10px - 43px);
	border-top: 0px;
	border-bottom: 10px solid #002248;
	border-left: 10px solid #002248;
	border-right: 10px solid #002248;
	border-radius: 0 0 10px 10px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 10px 0;
    overflow: hidden;
	background: #002248;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	border-left: 10px solid #002248;
	border-right: 10px solid #002248;
	border-radius: 10px 10px 0 0;
	width:100%;
	display: flex;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px 0;
	text-decoration: none;
	color: white;
	text-align: center;
}
li {
	flex-grow: 1;
}

li.a1{
	background: #002248;
}

li.a2{
	background: #1e4677;
}

li.a3{
	background: #395f8e;
}

li.a4{
	background: #5b7ca5;
}

li.a5{
	background: #839ebc;
}

li.a6{
	background: #c2d1e4;
}

.logo{
	position: absolute;
    top: 1em;
    left: 1em;
}