html, body											{ margin: 0; padding: 0; }
body 												{ font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.4em; }

*, *:before, *:after 								{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* clear */
.clear:before, 
.clear:after 										{ display: table; content: ""; }
.clear,
.clear:after 										{ clear: both; }

a 													{ color: #2593de; }
a:hover 											{ color: #0b2c42; }


h2 													{ font-family: 'Roboto Condensed', sans-serif; font-weight: 300; margin: 0; padding: 0; line-height: 1; }
h3 													{ font-family: 'Roboto Condensed', sans-serif; font-weight: 400; margin: 0;   }



section.akant										{ display: block; height: 100vw; min-height: 450px; background: url("../images/bg_03.jpg") no-repeat top center; background-size: cover; }
section.akant::before								{ content: " ";  height: 100vw; min-height: 450px; width: 100%; display: block; position: absolute; top: 0; left: 0; background: rgba(37,147,222, 0.5); }

section.akant header								{ display: inline-block; background: #2593de; padding: 5vh 5vw; position: relative; z-index: 1; width: 100%; }
header h1    										{ color: #fff; text-transform: uppercase; font-size:10vw; font-weight: 900; margin: 0; padding: 0; line-height: 0.9; } 	
header h2 											{ color: #000; text-transform: uppercase; font-size: 6vw;  }	
header h2 small										{ display: inline-block; line-height: 1; font-size: 2.5vw; }
header h3 											{ color: #000; text-transform: uppercase; font-size: 24px; padding: 4vh 0; line-height: 1; }										

nav 												{  }
nav ul 												{ margin: 0; padding: 0; list-style: none;}
nav ul li 											{ display: inline-block; border-left: 1px solid rgba(255,255,255,0.5); padding: 0 5px; line-height: 1;  }
nav ul li:first-child								{ border: none; }
nav ul li a 										{ text-decoration: none; color: #fff; text-transform: uppercase; font-weight: 300; font-family: 'Roboto Condensed', sans-serif;}
nav ul li a:hover 									{ color: #0b2c42; }

section.bkant 										{ display: block; min-height: 85vw; position: relative; padding: 5vh 5vw; }
.bkantcolumn										{ width: 29vw; float: left; padding: 1vh 1vw; } 	
section.bkant h2 									{ text-transform: uppercase; padding-top: 4vh; color: #000; font-size: 26px; }
section.bkant h3 									{ color: #0b2c42; font-weight: 700; font-size: 15px; text-transform: uppercase; }
section.bkant p 									{ margin: 0; padding: 0.5em 0;} 

.wieiswie 											{ clear: both; padding: 1em 0; }
.wieiswie h3 										{ height: 80px; float: left; padding: 22px 0 0 1em; line-height: 1.1; }
.wieiswie h3 small 									{ font-weight: 300; display: block; }
.foto 												{ width: 80px; height: 80px; float: left; border-radius: 50%; }

.wieiswie:hover h3									{ color: #2593de;}

ul 													{ margin: 0; padding: 0 0 0 1.2em; color: #0b2c42; font-weight: 700; }
ul li 												{ }

dl.logo												{ position: absolute; right: 5vw; bottom: 2vw; font-family: 'Roboto Condensed', sans-serif; margin: 0; padding: 0; line-height: 1; text-align: right;  }
dl.logo dt 											{ text-transform: uppercase; font-size:40px; font-weight: 900; margin: 0; padding: 0; line-height: 0.9; color: #0b2c42; }
dl.logo dd 											{ color: #2593de; text-transform: uppercase; font-size: 24px; margin: 0; padding: 0;  }

div.label											{ border-radius: 50%; width: 26vw; height: 26vw; min-width: 200px; min-height: 200px; background: #2593de; position: absolute; left: 50%; top: 50vw; margin: -13vw -13vw; overflow: hidden; 
	-webkit-animation:spin 4s linear infinite;
	-moz-animation:spin 4s linear infinite;
	animation:spin 4s linear infinite;
 }
@-moz-keyframes spin 		{ 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin 	{ 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin 			{ 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

div.label:hover 			{ -webkit-animation:none; -moz-animation:none; animation:none; }

div.sticker 										{ text-align: center; width: 26vw; height: 26vw; min-width: 200px; min-height: 200px; border-bottom: 60px solid rgba(0,0,0,0.7); padding: 4vw 0 0 0; position: relative; }
a.sociallink										{ width: 40px; height: 40px; line-height: 40px; display: inline-block; border-radius: 50%; border: 1px solid rgba(0,0,0,0.6); color: rgba(0,0,0,0.6); font-size: 30px; }
a.sociallink:hover									{ color: #fff; }
div.sticker h2 										{ text-transform: uppercase; color: #000; opacity: 0.7; font-weight: 900; padding: 0.5vw; font-size: 30px; }
div.sticker p    									{ line-height: 1.2em; color: #fff; position: absolute; bottom: 0; display: block; width:100%;  border-top: 1px solid  rgba(255,255,255,0.7); margin: 0; padding: 1vw 0;}
div.sticker p a 									{ color: #fff; font-size: 15px; }
div.sticker p a:hover 								{ text-decoration: none; }
div.pinhole											{ border-radius: 50%; width: 20px; height: 20px; background: #fff; position: absolute; left: 50%; top: 50%; margin: -10px -10px; } 

span.plus											{ display: inline-block; background: #2593de; padding: 3px 8px 2px 3px; font-weight: bold; font-style: italic; line-height: 1; color: #fff; font-size: 14px; -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
span.detoffegasten									{ font-family: 'Damion', cursive; font-size: 22px;}

section.media 										{ display: block; min-height: 20vw; background: #0b2c42; }
.mediacolumn 										{ width: 25%; height: 20vw; background: #2593de; float: left; position: relative; }
.mediacolumn img 									{ width: 100%; height: 100%; object-fit: cover; } 

.mediacolumn::before								{ content: " "; height: 100%; width: 100%; display: block; position: absolute; top: 0; left: 0; background: rgba(37,147,222, 0.7);  transition: all 0.2s ease-in-out; }
.mediacolumn:hover::before							{ background: rgba(37,147,222, 0); }

.mediacolumn .mediacolumn-text 						{ position: absolute; bottom: 2vh; left: 2vw; right: 2vw; color:#fff; font-family: 'Roboto Condensed', sans-serif;  }
.mediacolumn .mediacolumn-text .mediacolumn-date    { font-weight: 300; }
.mediacolumn .mediacolumn-text .mediacolumn-event   { font-weight: 700; text-transform: uppercase; }
.mediacolumn .mediacolumn-text .mediacolumn-location { font-weight: 500; } 

.mediacolumn .mediacolumn-gasten   					{ position: absolute; top: 2vh; left: 2vw; right: 2vw; color: #fff; } 

footer 												{ text-align: center; color: #fff; background-color: #0b2c42; padding: 1vh; font-family: 'Roboto Condensed', sans-serif; font-style: italic; font-size: 14px;   }

.bbb 												{ width: 320px; height: auto; position: absolute; z-index: 3; transform: rotate(7deg); right: 40px; top:-420px; border: 4px solid #fff;  }
 
@media (max-width: 960px) {
	div.label	 									{ position: relative; left: 0; top: 0; margin: 3vh auto; min-width: 280px; min-height: 280px; }
	div.sticker										{ min-width: 280px; min-height: 280px; padding: 2vw 0 0 0; border-bottom: 50px solid rgba(0,0,0,0.7);}
	.bkantcolumn   									{ width: auto; max-width: 700px; float: none; }
	.mediacolumn 									{ width: 50%;  height: 40vw; }
	dl.logo	 										{ position: relative; padding: 5vw 0vw 0 5vw; }
	
	.bbb 											{ width: 200px; top: -260px; }
	
}

@media (max-width: 460px) {
	.mediacolumn 									{ width: 100%;  height: 60vw; }
	.bbb 											{ width: 120px; top: -160px; }
}