html { 
	
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 16pt;
	margin: 0;
	padding: 0;
	height:100%
}

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

.bg {
    /* The image used */
    background-image: url("atbg1.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

header {
	height: 30vh;
	display: flex;
  flex-direction: column;
  justify-content: center;
}
#logo {
	text-align:center;
	margin: auto;
}
#logo img {
	width: 50%;
	
}

a {
	color:#fff;
	text-decoration:none;
}
a:hover {
	text-decoration:none;
	color:#ede8db;
}
b {
	font-weight:900;
}

.message {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: auto;
	text-align: center;
	margin: 0 auto;
	max-width: 800px;
	padding: 20px;
	background: rgba(0,0,0,0.2);
}	

#teaser a {
	display: block;
	font-size: 32pt;
	width: 100%;
	text-align: center;
	color: #ffffff;
	text-shadow: 0px 0px 3px #333333;
}

#teaser a:hover { color:#ede8db; }

section.toggle {
	display: none;
	position: absolute;
	bottom: 40px;
	margin: 0 auto;
	width: 100%;
	padding: 0 0 30px 0;
	text-align:center;
	box-sizing:border-box;
	text-shadow: 0px 0px 3px #333333;
}
section h1 {
	font-weight: normal;
	font-size: 24pt;
	color: #fbfbfb;
}


footer {
	position:fixed;
	bottom: 0;
	width: 100%;
	background: rgba(255,255,255,0.2);
	box-sizing: border-box;
}

footer nav {
	
	display:flex;
	justify-content: center;
	padding: 6px 3px;
	width: 100%;
	box-sizing: border-box;
}

footer nav a {
	display:block;
	flex-grow: 1;
	background: rgba(0,0,0,0.2);
	font-size: 10pt;
	padding: 5px 20px;
	margin: 0 3px;
	text-align:center;
}

footer nav a:hover {

	background: rgba(0,0,0,0.6);
	text-decoration:none;
}

@media only screen and (max-width: 1048px) {
	
		html { font-size: 14pt; }
	
    #logo img {
			width: 70%;		
		}
		
		#teaser a { font-size:26pt;}
		section h1 { font-size:20pt;}
}

@media only screen and (max-width: 762px) {
    
		html { font-size: 12pt; }
		
		#logo img {
			width: 80%;		
		}
		#teaser a { font-size:22pt;}
		section h1 { font-size:16pt;}
}

@media only screen and (max-width: 640px) {
    
		html { font-size: 10pt; }
		
		#logo img {
			width: 90%;		
		}
		
		#teaser a { font-size:22pt;}
		section h1 { font-size:16pt;}
}