html, body {
 margin:	0px;
 padding:	0px;
 height:	100%;
}
body {
 font-family:	calibri,helvetica,arial,sans-serif;
 font-size:	1em;
 line-height:	120%;
}
header {
 width:	100%;
 height:	100vh;
 background-repeat:	no-repeat;
 background-position:	50% 50%;
 background-size:	cover;
 font-size:	2em;
}

/* navigation */
nav.top {
 position:	fixed;
 width:	100%;
 background-color:	rgba(0,0,0,0.7);
 color:	white;
 font-weight:	bold;
 z-index:	100;
}
nav.top ul {
 list-style:	none;
 overflow:	hidden;
 margin:	0px;
 padding:	0px;
 transition:	1s;
}
nav.top li {
 display:	inline-block;
}
nav.top a {
 display:	block;
 padding:	0.5em 1em;
 text-decoration:	none;
 color:	white;
}
nav.top a:hover {
 background-color:	orange;
}

.scrollTopButton {
 position:	fixed;
 display:	block;
 width:	5em;
 height:	5em;
 right:	1em;
 bottom:	1em;
 padding:	0em;
 margin:	0.5em;
 z-index:	1;
 
 background:	#072f61 url(res/w_top.svg) center center no-repeat;
 border-radius:	2em;
 opacity:	0;
 transition:	all ease 500ms;
 visibility:	hidden;
 cursor:	pointer;
}
.scrollTopButton.show {
 visibility:	visible;
 opacity:	0.3;
}
.useMouseEvents .scrollTopButton.show:hover {
 opacity:	0.6;
}
/* ------------------------------------------- */
img.logo {
 display:	block;
 position:	absolute;
 top:	2.6em;
 right:	1em;
}

div.button {
 position:	absolute;
 bottom:	0.5em;
 left:	50%;
 width:	3em;
 height:	2em;
 cursor:	pointer;
 background-repeat:	no-repeat;
 background-position:	center center;
 /*background-color:	rgba(0,0,0,0.3);/**/
 /*border:	2px solid white;/**/
 border-radius:	50%;/**/
 transition:	all ease 0.2s;
 background-image:	url(res/w_down.svg);
}
div.button:hover {
 background-color:	rgba(0,0,0,0.3);
}

footer {
 margin:	0px;
 padding:	1em;
 background-color:	orange;/**/
}
/*------------------------------------------------*/
main {
 display:	block;
}

div.wrapper {
 width:	70%;
 margin:	0em auto;
 padding:	2em;
}

.clear {
 clear:	both;
}

.hyphens {
 -moz-hyphens:	auto;
 -o-hyphens:	auto;
 -webkit-hyphens:	auto;
 -ms-hyphens:	auto;
 hyphens:	auto;
}
.ellipsis {
 white-space:	nowrap;/**/
 overflow:	hidden;
 text-overflow:	ellipsis;
}
.nowrap {
 white-space:	nowrap;
}

/* TEXT */
.text {
 font-size:	2em;
 line-height:	140%;	
}
.text h1 {
}
.text h2 {
 line-height:	120%;
}
.text h3 {
}
.text h4 {
}
.text p {
 
}
.text a {
 color:	#f0e68c;
}
.text q {
 color:	orange;
 color:	#afeeee;
 color:	#f0e68c;
}
.intro {
 font-style:	italic;
}
.text time {
 font-style:	italic;
}
.author {
 font-size:	0.85em;
}

/* IMAGEBOX */
div.imagebox {
 clear:	both;
 font-family:	serif;
 font-style:	italic;
 font-size:	0.85em;
 line-height:	1.2em;
 padding:	0em;
 margin:	0.5em 0em 0.1em 0em;
}
div.imagebox.left {
 margin-right:	1.5em;
 float:	left;
}
div.imagebox.right {
 margin-left:	1.5em;
 float:	right;
}
div.imagebox div.imageholder {
 position:	relative;
 width:	100%;
 overflow:	hidden;
}
div.imagebox img {
 display:	block;
 width:	100%;
 transition:	all ease 500ms;
}
div.imagebox div.legende {
 width:	100%;
 margin:	0px;
 padding:	2px 0px;
 color:	#aaaaaa;
}
div.imagebox.right div.legende {
 text-align:	right;
}