html {
    heigth: 100%;
    min-height: 100vh;
}
body {
   height: 100%;
   min-height: 100vh;
   margin: 0;
   padding: 0;
   font-family: "Big Shoulders Text";
   background-color: #000000;
}
#header {
   width: 100%; 
   height: 60px;
   line-height: 60px;
   background-color: rgba(0, 0, 0, 1);
   color: #ffffff;
}

#header h1 {
   display: inline;
   margin: 0;
   font-family: "Staatliches";
}


#header .menu {
   position: fixed;
   top: 0;
   right: 0;
   margin-right: 2%;
}

#header .active{
   color: rgb(192,192,192);
}

#header a {
   color: #ffffff;
   margin-right: 15px;
   font-size: 23px;
   text-decoration: none;
}
#content { 
   position: fixed;
   top: 60px;
   bottom: 60px;
   color: #ffffff;
   background-color: rgba(0, 0, 0, 0);
   margin: 0 10%;
   overflow: none;
}

#content h1 {
   text-align: center;
}

#content div.scrollable {
	position: fixed;
	top: 140px;
	bottom: 80px;
	margin-right: calc(10% - 20px);
	padding-right: 20px;
	overflow-y: auto;
}

#content p, #content ol {
   font-size: 20px;
}

#footer {
   position: fixed;
   bottom: 0;
   width: 100%; 
   height: 40px;
   color: #ffffff;
}

#footer span {
   font-size: 20px;
   height: 40px;
   line-height: 40px;
}

#footer span.copyright {
   position: absolute;
   right: 2%;
}

#footer span.title {
   margin-left: 2%;
}

body {
   width: 100vw;
   height: 100vh; 
}

.bg-image {
   background-image:url("img/Website_whale.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;  
}

.bg-content {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   opacity: 0.3;
}

body.home #header, body.home #footer {
   background-color: rgba(0, 0, 0, 0.5);
}

body.home #header h1 {
   position: fixed;
   width: 100vw;
   height: 100vh;
   text-align: center;
   font-size: 6vw;
   margin-top: calc(50vh - 6vw);
   line-height: 6vw;
}	

body.home #intro {
   position: fixed;
   background-color: rgba(0, 0, 0, 0.5);
   color: #ffffff;
   width: 100%;
   bottom: 40px;
   font-size: 20px;
   margin: 0;
   text-align: center;   
}

#content .ac .ac-trigger, #content .ac .ac-panel .ac-text {
   font-family: "Big Shoulders Text";
   font-size: 20px;
   color: #FFFFFF;
   background-color: rgb(0, 0, 0, 0.625);
}

#content .ac .ac-panel {
   background-color: rgb(0, 0, 0, 0.575);
}

#content ol {
	margin: 0;
	counter-reset: list;
}

#content div.ac ol {
	background-color: rgb(0, 0, 0, 0.625);
}

#content ol > li {
	position: relative;
	padding-bottom: 10px;
	padding-right: 20px;
	list-style: none;
}

#content ol > li.letter:before {
	display: inline-block;
	width: 10px;
	position: absolute;
	left: -20px;
	content: counter(list, lower-alpha) ") ";
	counter-increment: list;
}

#content ol > li.roman:before {
	display: inline-block;
	width: 10px;
	position: absolute;
	left: -40px;
	content: counter(list, lower-roman) ". ";
	counter-increment: list;
}

#content ol > li a {
	color: inherit;
	text-decoration: none;
}

#content ol > li a:hover {
	color: #cfe2f3;
}

p.rap a {
	color: inherit;
}

p.rap a:hover {
	color: #cfe2f3;
}

#metype-container {
	width: 80vw;
}

.metype-iframe {
	background-color: rgb(0, 0, 0, 0.625) !important;
}