html{ width: 100%; height: 100%; scroll-behavior: smooth;}

body {height: 100%; margin: 0px; font-family: Ubuntu Mono, Helvetica, sans-serif; background-color: #200103; background-image: url("media/wand_exgelb.jpg");
	   background-repeat: repeat-y; background-position: bottom; background-size: cover; background-attachment: fixed; text-align: justify;
	   color: #f1e2c4; overflow-y: scroll; overflow-x: hidden;}
	   
a  { font-size: 13px; display:block; color:#f6a20f; width:90%;text-decoration: none;}
a:hover { color:#facc13; text-decoration: none;} 	
	
#alert {font-size:17px; display: inline; color: red; text-decoration: none;}
.alert { width: 100%; padding: 20px; background-color: rgba(170,0,0,0.4); color: white; position: fixed; bottom:0px; z-index:8; font-size:17px;}

.lock { position:relative; top:0px; float:right;}

.sidenav { height: 100%; width: 0; position: fixed; z-index: 8; top: 0; left: 0; background-color: black; overflow-x: hidden; 
           transition: 0.6s; padding-top: 60px;}
.sidenav a { padding: 8px 11px 8px 20px;  text-decoration: none; text-align: center; font-size: 21px; color: #66584b; display: block; transition: 0.3s;}
.sidenav a:hover {color: #f1e2c4;}
.sidenav .closebtn { position: absolute; top: 0px; left: 0px; font-size: 36px;}
.nosidenav { display: none;}

.dropbtn { position:fixed; top: 0px; left: 5px; background-color:transparent; color: #8b7b6b; padding:8px;
           border:none; cursor: pointer; z-index:7; display: block;}
.dropbtn1 { position:fixed; top: 0px; left: 5px; background-color:transparent; color: #8b7b6b; padding:8px; font-size: 37px;
           border:none; cursor: pointer; z-index:7; display: none;}
.dropbtn2 { position:fixed; top: 0px; left: 5px; background-color:transparent; color: #8b7b6b; padding:8px; font-size: 37px;
           border:none; cursor: pointer; z-index:7; display: none;}
.dropbtn3 { position:fixed; top: 0px; left: 5px; background-color:transparent; color: #8b7b6b; padding:8px; font-size: 37px;
           border:none; cursor: pointer; z-index:7; display: none;}                      
   
#main { transition: margin-left .9s;}

.closebtna { margin-right: 5px; margin-right:30px; color: red; font-weight: bold; float: left; font-size: 20px; line-height: 20px;
            cursor: pointer; transition: 0.3s;}
.closebtna:hover { color: #f6a20f;}

#myBtn { display: none;position: fixed;bottom: 20px;right: 30px; z-index: 99; border: none;
         outline: none; background-color: #333; color: white;cursor: pointer; padding: 10px; border-radius: 30px;}
#myBtn:hover { background-color: #555;}

.container { position: relative; top: 0px; width: 100%;}
.innencontainer { position: relative; top: 220px; width: 100%;}

.mainpic { position:relative; max-width: 768px; height: auto; display:block; top:0px; padding:0px 3px 0 3px;}
.mainpic1 { position:relative; max-width:590px; height: auto; display:none; bottom:0px;  padding:0px 3px 0 3px;}
.mainpic2 { position:relative; max-width: 590px; height: auto; display:none; top:0px;  padding:0px 3px 0 3px;}   
   
.name {position: relative; top:35px; font-size:19px; text-align: center;}
.namerec { position: relative; top:50px; font-size:17px;text-align: center; z-index: 7;}

.nametitlebox { position: relative; float: left; width: 100%; top: 50px; font-size:17px; text-align: center;}

.title { position:relative; top:100px; text-align:center;}
.titlerec { position:relative; top:70px; text-align:center; z-index:7;}
	
.iframescroll { position:relative; max-width:768px; height:auto; margin:80px 3px 30px 3px; display:block;}
.pyjama  {position: relative; top: 0px;  bottom:0px;
                border-style: none; border-radius: 5px;} 

.behaelter {  position: relative; top: 0; width: 100%; height: auto;}
.container1 { position:relative; top:250px;}
.projektbox { position: relative;  top:100px;  font-size:12px; width: 95%;  height: auto; padding: 5px; margin: 20px 0 0 5%;
                border: 1px  #f1e2c4; border-style: none none solid none; text-align: center; z-index: 3;}
.projektimg { width:100%; height: auto; }     
/* Tooltip container */
.tooltip {  position: relative; display: block; border-bottom: none;}
/* Tooltip text */
.tooltip .tooltiptext {  visibility: hidden;  background-color: black;  color: #fff;  font-size: 17px;  text-align: center;  padding: 5px 0;  border-radius: 0px; 
  /* Position the tooltip text - see examples below! */
  position: absolute;  z-index: 1;  width: 90.5%;  bottom: 5px;  left: 3px;  right: 0px;}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext { visibility: visible;}           
	

.text { position: relative; text-align: center; margin: 30px 10px 0px 10px;}
.newstext { width:95%; height:auto; font-size: 13px; text-align: center; margin:40px 2px 0 2px;}	
.newspic { border-style: none; width:100%; height:auto; margin:5px; font-size: 13px;}
  
.persopic {position: relative; max-width:590px; height:auto; display:block; margin:10px; padding:3px 3px 0 3px; border-style:none;} 



#top {position:fixed;}
#title { float: left; font-size: 23px; padding: 30px 0 0 0; text-align: center;}
#titel { font-size: 36px; padding: 30px 0 20px 0; text-align: center; color: whitesmoke;}




.recbox { position: relative; float:left; width:100%; height:auto; top: 20px;}
.prbox { position: relative; float: left; width: 92%; height: auto; left:4%;}

#prboxborder { padding: 0 0 20px 0; border-style: none none dashed none; }



.floating-box { position:relative; top:150px; font-size:12px; float: left; width: 100%; height: auto; padding: 5px; margin: 20px 10px;
                border: 1px  #f1e2c4; border-style: none none solid none; text-align:center; z-index:3;} 
img { width:100%; height:auto; margin:5px;}

.media-box { position:relative; top:20px; font-size:12px; float:none; width: 100%; height: auto;  padding: 0px;  margin: 1px 5px;
             border: 1px; border-color: #ffffff; border-style:  none none solid none; text-align:center;} 
             
             
.iframe { position: relative;}  
.prbox { position: relative; float: left; width: 92%; height: auto; left:4%;} 
.vibox  { position: relative; float: left; width: 92%; height: auto; left:4%;}    
.videotext { position: relative; float: left; width: 100%; padding: 20px 0 0px 0; text-align: center; }        
.centered { position: absolute; top: 40%; left: 40%; color: #eedfc1; }
.centered a { font-size: 15px;  color: #f6a20f; text-decoration: none;}
.centered a:hover { color: #facc13;}             

.press {max-width:350px; height:auto; position:relative; font-size:15px;margin: 120px 10px 0 10px;z-index:6;}
.presspic {width:300px;height:auto;display:block;margin:20px 10px 0 10px ;z-index:20;}
.bass {position:fixed; float:right;z-index:5;}
.bhudda {position:fixed; float:right;z-index:5;}

.foot { position: relative; float: left; top: 0;  width: 100%; font-size: 17px; text-align: center; padding: 23px 0 23px 0; background-color: black; }
.foot a { width: 100%;  text-decoration: none; color: #f1e2c4; font-size: 17px; }  
.foot a:hover { color: #f1e2c4; font-style: oblique;}





@media only screen and (min-width: 500px){

.behaelter { width: 93%; height: auto; margin: 0 0 0 7%; }
.projektbox { position: relative;  top: 100px;  font-size:12px; border: 0;
                          float: left; width: 40%; height: auto;  padding: 0; margin: 15px 10px 15px 20px; border-style: solid;  z-index: 3;}
.projektimg { width: 112%; height: auto;} 
.tooltip .tooltiptext { font-size: 13px;  left: 4px; width: 101%;}
.foot  { top: 120px;}
}
	                 	
	

@media only screen and (min-width: 768px){
	
.sidenav a 	{ text-align: left;}
.sidenav .closebtn { text-align: right;}
	
.container { position: fixed; left:0; width:47%;} 
.innencontainer { top:0px; left:47%;  width:53%; margin:0;}
    
.dropbtn { display: none;}    
.dropbtn1 { display: block;}

#main {transition: margin-left .9s;}
    	  
.mainpic { display: none;}  
.mainpic1 { display: block;}
   
.name {position: fixed; display: block; top: 205px; left: 8%; width: 200px;}
.namerec {position: relative; display: block; top: 155px; left: 13%; width: 200px;}

.nametitlebox {  position:relative; top: 70px; width: 50%; height: 70px;}
#title { text-align: left;}

.title {position:fixed; top:300px; left:15%;}
.titlerec {position:relative; top:200px; left: -5%;}

.iframe { width: 300px; left:5%;} 
.pyjama {float:left; position: relative; top: 170px; width: 400px; margin: 5px ;
                border-style: none;}   

.behaelter { width: 93%; height: auto; margin: 0 0 0 7%;}
.projektbox { position:relative;  top:150px;  font-size:12px;
               float: left; width: 25%; height: auto;  padding: 0; margin: 15px 20px; border-style: none;  z-index:3;}
.projektimg { width: 112%; height: auto;}       
.tooltip .tooltiptext { width: 101%; left: 0px;}        

.media-box { position:relative; top:50px; font-size:15px; float: left; width: 80%;height: auto; margin:10px 20px 10px 0px; 
               border-style: none;}
 .text { float:left; width: 300px; left:4%;}
.newstext { float:left; top:200px; font-size: 15px; width:95%; height:auto; margin:10px 40px;} 
.newspic { position:relative; display:block; width: 400px; float: left; top:70px; margin-top:20px; margin-right:30px;}

.floating-box { position:relative; top:300px; font-size:12px;
               float: left; width: 200px;height: 400px; margin:10px 20px;border-style:none none solid none; z-index:3;}
img {width:195px; height:185px; padding-top: 5px;margin:0;}

.persopic { float:left; width:300px; height: auto; left: -4%; top:40px;  margin-bottom: 40px;} 

.press { float:left; top:300px; font-size:15px;
      width: 35%; height: auto; margin:0px 50px 30px 10%; padding: 0px;} 
.presspic { float: left; max-width:400px; top: 120px; margin:200px 0 0 -50px;}



#title { display: none;}
#titel { display: none;}
.recbox { width: 40%; padding: 0 5% 0 0;}
.textbox { width: 45%;padding: 0 0 0 5%;}
.prbox { width: 90%; left: 5%; right: 5%; margin-top:30px;}
.vibox { width: 40%; padding: 0 5% 0 0;}
.copy {bottom:10px;}

.foot { top: 170px; }
   
 }
 
 
 
@media only screen and (min-width: 968px){ 
 
.container { position: fixed; left:0; width:47%;} 
.innencontainer { top:0px; left:47%;  width:53%; margin:0 30px 0 0;}    

.dropbtn1 { display:none;}
.dropbtn2 { display: block;}

.nametitlebox {  position:relative; top: 90px; width: 50%; height: 70px;}
       
.mainpic1 { display:none;} 
.mainpic2{ display: block;}	

.iframe { width:360px; left: 9%;}
.pyjama { top: 180px; width: 500px;}

.behaelter { width: 93%; height: auto; margin: 0 0 0 7%;}
.projektbox { position:relative;  top:200px;  font-size:12px;
               float: left; width: 20%; height: auto;  margin: 15px 15px; border-style: none;  z-index:3;}
.projektimg { width: 113%; height: auto;}    
.tooltip .tooltiptext { width: 102%;}   

.newspic { width:470px;}
.newstext { font-size: 17px;}
   
.text { width: 360px; left: 8%;}
   
.persopic { width: 360px; top: 0;}

.press { top:300px ; font-size:15px; width: 45%; height: auto; margin:0px 15% 30px 10%; padding: 0px;}



.prbox { width: 86%; left: 7%; right:7%;}
.vibox { width:30%;}
.recbox { width: 35%;}
.textbox { width: 55%;}

.foot { top: 230px; }
     
} 

@media only screen and (min-width: 1300px){
	
.dropbtn2 { display: none;}	
.dropbtn3 { display: block;}

.iframe { width:450px; left: 1%;}
.pyjama { top: 200px; width: 550px;}

.behaelter { width: 93%; height: auto; margin: 0 0 0 7%;}
.projektbox { position:relative;  top:210px;  font-size:12px;
            float: left;  width: 20%; auto;  margin: 23px 20px; border-style: none;  z-index:3;}
.projektimg { width: 110%; height: auto;}       
.tooltip .tooltiptext { width: 99%;}

.projectpic { float: left; width: 370px; height:auto; margin: 10px 20px 0 0;}
.newspic { width: 550px;}
   
.text { width:450px; left:0%;}
	
.persopic { width: 200px; margin: 0 10px 1px 2px; left: 1%;}	



.prbox { width: 70%; left: 15%; right 15%;}
.recbox { width: 30%;}
.textbox { width:60%;}


.foot { top: 270px; }

}