@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(255, 255, 255) no-repeat;
  color:rgba(80,80,80,1.0);
  font:14px "OpenSans", Arial, Verdana, Helvetica, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
  font-weight: 400;
  height: 100%;
}

/* menu */

header nav {display: none;}

.weiss {position: relative; max-width: 960px;  top:0px; margin-bottom: 0px; z-index: 1;}

/* Hervorhebung der aktuellen Seite */
#projekt #navprojekt a, #bild #navbild a, #klang #navklang a, #bewegung #navbewegung a, #licht #navlicht a, #kontakt #navkontakt a, #imp #navimp a
{color:rgba(80,80,80,1.0); }

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

/* Bild & Video */
img {height: auto; max-width: 100%;}
.video {text-align: center; max-width:100%; padding: 6px 0px 2px 0px;}
figure {position: relative; margin: 15px 0px}
figcaption {position: absolute; text-align: right; right:0px; bottom:10px; width: 100%; color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.2); text-shadow:1px 1px 1px rgb(85, 85, 85);}
figure:hover figcaption {position: absolute; padding-top: 20px; bottom:0px; height: 99%; color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.0); }

.wrap { margin: 0 auto 0 auto; padding: 0;}
.max2200 { max-width: 2200px; }

footer nav {display: none;}

/* ** ** Common Addative Classes ** ** */
.left, .float_left  { float:left; }
.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;}

a {	color:rgba(0, 100, 160, 0.6); text-decoration:none;  font-family:'open_sansregular'; font-weight: 400;}
a:hover, a:focus { text-decoration:none; color:rgba(80,80,80,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:active, a:visited {}

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, h2, h3, h4, h5 {}
h1 {font-family: 'open_sanssemibold_italic'; font-size: 3.30em; color:rgb(240, 250, 255); text-shadow: 1px 1px 3px rgba(196, 196, 196, 0.9); margin-left: 5px;}
a
h1:hover { text-decoration:none; color:rgba(80,80,80,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;}
h2 {	font-size:1.6em; color:rgb(100, 100, 100); margin:10px 10px 10px 10px; font-family:'open_sansregular'; font-weight: 400;} 
h3 {	font-size:1.25em; color:#555; margin:10px 10px 5px 10px; font-family:'open_sansregular'; font-weight: 400;} 
h4 {	font-size:1.15em; color:#444; margin:5px 10px 10px 10px; font-family:'open_sansregular'; font-weight: 400;} 
h5 {	font-size:1.1em; color:rgb(70, 70, 70); margin:5px 10px 10px 10px; font-family: 'open_sansregular'; 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;
}

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: rgba(70,70,70,1.0); margin:0.3em 10px 1.52em 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 'andale mono', '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 #fff;  margin:10px 40% 10px 40%; }

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;}

/* Breakpoint < 480px*/
@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
        
header, nav, section, article, footer, .weiss, .ueber, .projekte {position:relative; max-width:480px; min-height:50px;}
        
.projekte {font-size: 1.5em;}
        
h1, h2, h3, h4, h5 {}
        
img {max-width:30%;}
        
.fenster {width="25%"}
    
    }

/* Breakpoint < 720px*/
@media only screen 
    and (min-device-width : 480px) 
    and (max-device-width : 720px) {
        
header, section, footer, .projekte {position:relative; max-width:720px; min-height:50px;}
         
header nav ul li a {padding:0px 10px 0px 10px;}
        
.projekte {font-size: 1.5em;}
    
        
h1, h2, h3, h4, h5 {}
        
img {max-width:100%;}
        
.fenster {width="25%"}
    
    }



/* Breakpoint < 1024px*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    
@viewport {
width: device-width;
   zoom:1;
}
    
body {-webkit-background-size: cover; -moz-background-size: cover; background-size: cover;}
    
header, section, footer, .projekte {max-width:960px;}
    
    }