@charset "utf-8";

* {margin: 0px auto 0px auto; padding: 0px; border: 0px;}

article, section, aside, hgroup, nav, header, footer, figure, figcaption {display: block;}

body {background: url(../img/) rgb(0, 0, 0) no-repeat;
  color:rgba(80,80,80,1.0);
  font-family: "OpenSans", Arial, Verdana, Helvetica, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
  font-weight: 400;
  height: 100%;}

/* menu */
header {min-width:480px; font-family:'open_sansregular';  z-index: 2;}
header nav {background: url(../img/) no-repeat rgba(30, 30, 30, 0.7); position:fixed; width:100%; left: 0px; height: 35px; text-align:center; margin: 0px 0px 0px 0px; z-index:2;}
header nav ul li { position:relative; top:1px; display:inline; z-index:1; border-right: 0px solid; }
header nav ul li a { padding:0px 2% 0px 2%; font-size:1.2em; text-decoration:none;}
header nav ul li a:hover {position: relative; text-decoration:none;}

.mobile {display: none;}
#overlay {display: contents;}

.headline {position: relative; max-width: 960px;  top:85px; margin-bottom: 100px; z-index: 1;}

/* Hervorhebung der aktuellen Seite */
#projekt #navprojekt a, #veranstaltungen #navveranstaltungen a, #geschichte #navgeschichte a, #kontakt #navkontakt a, #imp #navimp a
{color:rgb(255, 0, 0); }

article { min-width:480px; max-width:960px;}

/* Bild & Video */
img {height: auto; max-width: 100%;}
.video {text-align: center;
position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    margin: 15px 0px;}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure {position: relative;}
figcaption {position: absolute; text-align: right; right:0px; bottom:10px; width: 100%; color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.0); text-shadow:1px 1px 1px rgb(85, 85, 85);}
figure:hover figcaption {font-size: 0%; position: absolute; padding-top: 20px; bottom:0px; height: 99%; color: rgb(255, 255, 255, 0.0); background-color: rgba(255, 255, 255, 0.0); }

.wrap { margin: 0 auto 0 auto; padding: 0;}
.max2200 { max-width: 2200px; }
 
footer {position:relative; min-width:480px; max-width:960px; height:80px; top: 20px; z-index:1; font-family:'open_sansregular'; font-weight: 400; text-align:center; line-height:25px; clear: both;}
footer nav ul li {display:inline; z-index:2;}
footer nav ul li a { padding:0px 10px 2px 10px; font-size:0.9em; text-decoration:none;}
footer nav ul li a:hover {text-decoration:none;}

/* Common Addative Classes */
.left, .float_left  { float:left; padding: 0px 12px;}
.right, .float_right { float:right; }
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
.clear-left, .clear_left { clear:left; } .clear-right, .clear_right { clear:right; }
.hide  { display:none	} .block {display:block !important;} .inline {display:inline !important;}

.align_right    { text-align:right;	  }
.align_left     { text-align:left;	  }
.align_center   { text-align:center;  }
.align_justify  { text-align:justify; }
.align_vertical { vertical-align: middle }

.bold {font-weight:600;}
.italic {font-family: 'open_sanssemibold_italic';}

.fl:first-letter {font-size: 1.28em; text-shadow:1px 1px 1px #CCFF00;}

.t {color:rgba(100, 150, 200, 1.0);}

a {	color:rgba(100, 150, 200, 1.0); text-decoration:none;  font-family:'open_sansregular'; font-weight: 400;}
a:hover { text-decoration:none; color:rgba(250,11,0,1.0); text-shadow:1px 1px 0px rgb(150, 200, 250);
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;}
a:visited { color:rgba(100, 150, 200, 1.0); text-decoration:none;  font-family:'open_sansregular'; font-weight: 400;}


blockquote {
		font-family: 'open_sansregular'; font-weight: 400; 
		margin:5px; 
		padding:10px;
		font-size:1.52em; 
		color:#999; 
		font-style:italic; 
		line-height:1.3em; 
		width:100%; 
		quotes:none;
	}
	blockquote.left {border-right:1px dashed #ccc; width:35%;} /* float blockquote left, and set width */
	blockquote.right {border-left:1px dashed #ccc; width:35%;} /* float blockquote right and set a width */

/* ** ** Header Styles ** ** */

h1 {font-family: 'open_sanssemibold_italic'; font-size: 3.30em; color:rgb(100, 150, 200); text-shadow: 1px 1px 3px rgba(196, 196, 196, 0.9); margin-left: 5px;}
h1:hover { text-decoration:none; color:rgba(80,80,80,1.0); text-shadow:1px 1px 0px rgb(178, 216, 255);
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;}
.unter {font-family: 'open_sanssemibold_italic'; color:rgb(100, 150, 200); margin-top: -20px;}
h2 {	font-size:1.8em; color:rgb(255, 0, 0); margin:20px 10px 10px 20px; font-family:'open_sansregular'; font-weight: bold;} 
h3 {	font-size:1.4em; color:rgb(130, 130, 130); margin:20px 10px 5px 10px; font-family:'open_sanssemibold_italic'; font-weight: normal;} 
h4 {	font-size:1.15em; color:rgb(140, 140, 140); margin:17px 10px 5px 10px; font-family:'open_sansregular'; font-weight: 400;} 
h5 {	font-size:1.1em; color:rgb(160, 160, 160); margin:5px 10px 10px 10px; font-family: 'open_sanssemibold_italic'; font-weight: 400;} 
h6 {	font-size:1.0em; margin:5px 10px 10px 10px; font-family: 'open_sansregular'; font-weight: 400;} 

/* ** ** ul li's ** ** */
ul{list-style:outside disc;}

ul,ol{padding:0; margin:0px 0px 0px 0px;}

li ul,li ol{padding:0; margin:0px 0px 0px 0px;}

.liste {margin: 0px 30px; line-height: 30px; color: rgb(150, 150, 150);}

iframe {border: none;}

/* ** ** custom select color ** ** */
::selection {background: rgba(0, 100, 160, 0.6); /* Safari */color:#fff;}
::-moz-selection {background: rgba(0, 100, 160, 0.6); /* Firefox */color:#fff;}

/* ** ** paragraph styling ** ** */
p {font-family: 'open_sansregular'; font-weight: 400; color: rgb(150, 150, 150); margin:0px 10px 10px 10px;}
.pm {margin:5px 0px 1.52em 10px;}
	p img.left {float:left;margin:0.3em 1.0em 1.0em;}
	p img.right {float:right;margin:0.3em 1.0em 1.0em;}

strong   		{	font-weight:600;}
em, dfn  		{	font-style:italic;}
dfn 	 		{   font-weight:600;}
sup, sub 		{   line-height:0;}
abbr, acronym   {	border-bottom:1px dashed #ccc;}
address 		{	margin:0 0 1.5em;font-style:italic;}
del 			{	color:#666;}
pre, code, tt   {	font:1em 'open_sansregular', 'lucida console', monospace;line-height:1.5; display:block;}
code 			{	background-color:#eee; display:inline; padding:0px 2px 1px 2px; line-height:1.1em;}
pre 			{margin:1.5em 0;white-space:pre;}

hr {border:1px solid rgb(100, 150, 200);  margin:40px 65% 40px 1%; }
.hr {border:1px dotted rgb(100, 150, 200);  margin:40px 65% 40px 1%; }

table, th, td {
margin-left: 10px;
padding: 10px 10px 0px 10px;
border-bottom: 1px solid rgba(0, 32, 70, 1.0);
border-collapse: collapse;}

.nowrap {white-space: nowrap;}

/* Efekte */
.box_shadow {
	-webkit-box-shadow: 2px 1px 10px 2px rgba(50, 50, 50, 0.5);
	-moz-box-shadow: 2px 1px 10px 2px rgba(50, 50, 50, 0.5);
	box-shadow: 2px 1px 10px 2px rgba(50, 50, 50, 0.5);}

.trans {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;}


/* MOBIL */

/* Breakpoint < 640px ohne device*/
@media only screen 
    and (max-width : 640px) {
        
header, nav, section, article, footer, .weiss, .ueber, .projekte { min-width: 320px; max-width:640px;}

/* menu mobile */
header nav {height: 35px;}
header nav ul li { position:relative; top:3px; display:block; z-index:1; border-right: 0px solid; }
header nav > ul > li { float: left; margin-left: 10px;}
header nav > ul > li > ul { display: none;}
header nav > ul a { display: block; white-space: nowrap; padding:10px;}
header nav ul > li > ul > li a { background: rgb(20, 20, 20, 0.9); margin-left: -10px; padding: 5px 20px;}
header nav > ul > li:hover > ul { display: block; position: absolute;}
header nav > ul > li > ul > li { position: relative;}
.mobile {display: block;}

#overlay { position: fixed; display: none;
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */}
        
.weiss {top:50px;  margin-bottom: 65px;}        
     
article p{ font-size: 0.7em;}
        
h1 { font-size: 2.50em;}
h3 { font-size:1.1em}
        
figcaption {font-size: 0.7em;}
        
footer nav ul li a { padding:0px 10px 2px 10px; font-size:0.9em; text-decoration:none; display: inline;}
.nav {display: none;}
.mobile {display: block;}   
    }

/* Breakpoint < 320px ohne device*/
@media only screen 
    and (max-width : 320px) {
         
header, nav, section, article, footer, .weiss, .ueber, .projekte { max-width:320px;}

/* menu mobile */
header nav {height: 32px;}
header nav ul li { position:relative; top:5px; display:block; z-index:1; border-right: 0px solid; }
header nav > ul > li { float: left; margin-left: 10px;}
header nav > ul > li > ul { display: none;}
header nav > ul a { display: block; white-space: nowrap; padding:10px;}
header nav ul > li > ul > li a { background: rgb(255, 255, 255); padding: 4px;}
header nav > ul > li:hover > ul { display: block; position: absolute;}
header nav > ul > li > ul > li { position: relative;}

article p{ font-size: 0.9em;}
        
h1 { font-size: 2.50em;}
h3 { font-size:1.0em}
figcaption {font-size: 0.6em;}
        
footer nav ul li a {position: relative; padding:5px 0px 2px 5px; font-size:0.9em; text-decoration:none; text-align: center;}
.nav {display: none;}
.mobile {display: block;}   
    }