@charset "UTF-8";
/* CSS Document */

       

.accordion-toggle {cursor: pointer; margin:5px;border-bottom: 1px solid lightgrey;}
.accordion-toggle:hover {cursor: pointer; margin:5px;border-bottom: 1px solid black;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}
.accordion1-toggle {cursor: pointer; margin:5px;border-bottom: 1px solid #EEEEEE; color:#aaaaaa;}
.accordion1-toggle:hover {cursor: pointer; margin:5px;border-bottom: 1px solid black;}
.accordion1-content {display: none;}
.accordion1-content.default {display: block;}

#titelbild {display: block;}
#mtbild {display: none;}
#tbbild {display: none;}
#fobild {display: none;}
#rhbild {display: none;}
		
		
		
#accordion {
		  position: fixed;
		  width: 500px;
		  margin-top:270px;
		  top:25px;
		  left:12%;
		  bottom:100px;	
		  border: 0px solid blue;
		  z-index:500;
		  overflow-x:hidden;
		  overflow-y:auto;
                 -webkit-overflow-scrolling: touch;
		  border: solid 0px blue;
	       }


	      
#motto{
	       position: fixed;
		   width: 520px;
		   margin-top:200px;
		   top:25px;
		   left:12%;
  	       z-index:2000;
	       font-size: 273%;
  	       color:white;
	       font-style: italic;
	       margin-bottom:40px;
	       }

#motto2{
	       position: fixed;
		   width: 520px;
		   margin-top:200px;
		   top:25px;
		   left:12%;
  	       z-index:2000;
	       font-size: 273%;
  	       color:white;
	       font-style: italic;
	       margin-bottom:40px;
	       }
	       
	       
	    /* Mobile - landscape
	----------------------------*/				
@media screen and (max-device-width: 768px) and (orientation: landscape) {

#accordion {
				position:fixed;
				top:0px;
				margin-top:135px;
				margin-bottom:50px;
				width:auto;
				max-width:500px;
				left:105px;
				right:105px;
				bottom:0px;	
				border: 0px solid blue;
				}


				
#motto{
    margin-top:20px;
    left:12%;
    font-size:200%;
    z-index:600;
    }

#motto2{
    margin-top:20px;
    left:12%;
    font-size:200%;
    z-index:600;
    }

}


	/* iPad 1 & 2 in landscape
	----------------------------*/	
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {

#accordion {
				position:fixed;
				top:0px;
				margin-top:135px;
				margin-bottom:50px;
				width:auto;
				max-width:500px;
				left:105px;
				right:105px;
				bottom:0px;	
				border: 0px solid blue;
				z-index:500;
				}



#motto{
    
    font-size:200%;
    z-index:600;
    }

#motto2{
    top:130px;
margin-top:0px;
    font-size:200%;
    z-index:600;
    }
				
}



	/* Mobile - portrait
	----------------------------*/					
@media screen and (max-width: 500px) and (orientation: portrait), screen and (max-device-width: 500px) and (orientation: portrait) {	

#accordion {
			position:fixed;
			top:300px;
			margin-top:20px;
			width:auto;
			height:auto;
			left:105px;
			right:105px;
			border: 0px solid blue;
			}




#accordion h3{
            font-size:120%;}

#accordion p{
            font-size:120%;}
            
#motto{
    width:auto;
    left:105px;
	right:105px;
    font-size:370%;
    }	

#motto2{
    width:auto;
    left:105px;
margin-top:200px;

	right:105px;
    font-size:370%;
    }	

}


	/* iPad 1 & 2 in portrait
	----------------------------*/	
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {

#accordion {
			position:fixed;
			top:170px;
			margin-top:20px;
			width:auto;
			height:auto;
			left:105px;
			right:105px;
			border: 0px solid blue;
			}



#accordion h3{
            font-size:100%;}

#accordion p{
            font-size:100%;}
            
#motto{
    width:auto;
    left:115px;
    top:120px;
	right:105px;
    font-size:370%;
    }	

#motto2{
    width:auto;
    left:115px;
    top:10px;
	right:105px;
    font-size:370%;
    }	
}		
}