/*+++++++++++++++++| Laptops |++++++++++++++++*/
@media only screen and (max-width: 1370px)  {
.centered { width: auto; padding-left: 5%; padding-right: 5%;}
.centered2 { width: auto; padding-left: 5%; padding-right: 5%;}
.bspContent { padding-left: 20px; }
.scriptArea { width: 1100px; }
}

/*+++++++++++++++++| TABLETS |++++++++++++++++*/
@media only screen and (max-width: 1200px)  {

	.bspContent { padding-left: 71px; width: 85%; }
	
	#reiter { 
		float: left;
	    padding-bottom: 0;
	    padding-left: 1px;
	    padding-top: 10px;
	    width: 65px;
	}
	
	#reiterUl { text-align: right; }
	
	#reiterUl li {
		float: none;
		margin: 3px 12px 0px 0px;
	}
	
	#reiterUl div {	
		padding: 4px 14px 8px 8px;
		float: none;
		border-radius: 10px 0px 0px 0px;
		width: 40px;
	}
	
	
	#reiterUl div:focus {
		outline: 0;
	}
	
	
	
	#reiterUl div:after {
		display: none;
	}
	
	#examples {
		border-width: 1px 0px 0px 1px;
		border-top-color: transparent;
	} 

	.span1 { font-size: 50px;}	
	.span1a { font-size: 35px;}
	.span3 { padding-top: 50px;	}

	
	.centered { width: 85%; margin-left:5%; }
	.centered2 { width: 85%; margin-left:5%; }
	
	#language {	font-size: 25px;   }

	.logo { width: 450px; padding: 15px; margin-left: 50px; }
	
	.innerBorder hr { width: 433px; }
	
	.learning {font-size: 20px; }
	
	.innerBorder { font-size: 35px; }
	
	.sticker { 
		width: 150px; 
		left: 582px; 
		font-size: 23px; 
		height: 150px; 
		padding: 34px 20px 20px; 
		top: -258px;
		margin-bottom: -200px; 
	}
	
	.navi { font-size: 30px; width: auto; }
	
	
	
	.spacer { margin-left: 5px; }
	
	.preface { font-size: 25px; margin-left: 5%; width: auto;}
	
	.scriptArea { width: 90%; background-size: 700px 610px; height: 350px; }
	
	.scriptBox { margin-left: 5%; width: auto; padding-bottom: 0px; }
	
	.zeichnungenText { margin-left: 5%; width: auto; }

	.jonash1 { font-size: 70px;}
	
	.jonash2 { font-size: 40px;}
	
	.newsLetterh2 { font-size: 25px;  }
	
	.newsLetter30 { font-size: 20px; }
		
	.newsLetter20 { font-size: 16px; }
	
	.newsLetter25 { font-size: 20px; }
	
	.jonas60 { font-size: 40px; line-height: 2em; }
	
	.jonas72 { font-size: 40px; line-height: 2em; }
	
	.fontDown { margin-left: 5%; width: auto; }
	
	#nutzungsBedingung { width: 80%; top:1445px; }

	#beispiele { width: auto; font-size: 40px; margin-top: 50px; }
	
	


	#affe { font-size: 80px; padding-left: 250px; 	}

	

	
	.footerContent { width: auto; margin-left: 5%;  }
	
	.topMain { padding-right: 0px; width: 95%; margin-left: 0px;}
	
	.top { margin-left: 0px; }
	
	.azWoerterTop { padding-right: 40px;}
	
		
	.bullet { background: rgba(0, 0, 0, 0) url("../images/punkt.png") no-repeat scroll -4px 22px / 87% auto; }
}

/*+++++++++++++++++| bis 760px Breite |++++++++++++++++*/
@media only screen and (max-width: 880px)  {
	.span1 { 
	 	font-size:72px; 
	 	height: 185px; 
	 	text-align: left;
	 	width: 90%;
	 	padding-top: 40px;
	 }
	
	.span1a { font-size:50px;}
	
	.span3 { 
		width: 90%;
		left: 0%;
		height: 185px;
		font-size: 72px;
		padding-left: 5%;
		padding-top: 5%;
		margin-top: -50px;
	}

	.span4 { 
		border: solid 1px rgb(229,0,125);
		background-image: url("../images/heftgelb.jpg");
		background-repeat: repeat;
		background-size: contain;	
		width:280px;
		margin-left: 5%;
		height: 150px;
		font-size: 70px;
		text-align: left;
		padding: 10px 0px 0px 10px;
		margin-top: 20px;
	}	
	
	.sticker { display:none;  }
	
	
		#naviMain { display: none; }
	
	.header { padding-top: 0px; }
	
	#burgerNavi { 
		background: rgb(255,255,255);
		padding: 5px 0px 5px 20px; 
		font-size: 1.2em;
		position: fixed;
		z-index:99;
		box-shadow: 0 1px 12px -6px rgba(0, 0, 0, 0.75);
		display:block; 
		width: 100%;
		top: 0px;
	}
	
	#burger2 { 
		display:none; 
		margin-top: 5px;	
		line-height: 30px; 
	}
	
	#burger2 li { list-style-type: none; }
	
	#burger2 li a::before { content: ">"; margin-right: 10px; }
	
	#burger2 li a { text-decoration: none; margin-left: 30px;}
	
	
	#mobilNavi { 
		font-size: 1.0em;
		position: fixed;
		z-index:99;
		box-shadow: 0 1px 12px -6px rgba(0, 0, 0, 0.75);
		padding-left: 5%;
		height: 79px;
	
	}

}

/*+++++++++++++++++| MobilTelefon |++++++++++++++++*/
@media only screen and (max-width: 580px)  {

	.newsLetterh2 { line-height: 1.5em; padding-top: 30px; padding-bottom: 10px;}
	
	.langSelect { display: none; }
	
	.mobilTop { padding-top: 50px; padding-bottom: 0px; }
	
	.logo { 
		width: 80%; 
		margin-left: 5%; 
	}
	
	.innerBorder hr { width: 94%; }
	
	.learning {font-size: 90%; }
	
	.innerBorder { font-size: 110%; }
		
	.jonash1 { font-size:50px; }
	
	.preface { margin-left:5%; }

	.scriptBox { margin-left: 5%; padding-top: 0px; }
	
	.top { padding-bottom: 0px; }
	
	.jonash2 { font-size: 30px; letter-spacing: 0.3em;  }
	
	.jonas60 { font-size: 35px; line-height: 1.6em; }
	
	.scriptArea { width: 90%; height: 250px; background-size: 700px 415px;}
	
	.newsLetter25 { font-size: 15px; }
	
	.fontDown { margin-left: 5%; }
	
	#nutzungsBedingung { width: 70%;  }
	
	#kreuz { font-size: 1.5em; padding-bottom: 5%; }
	
	#affe { padding-left: 5%; }
	
	.zeichnungenText { margin-left: 5%; width: 85%; }
	
	.footerContent { margin-left: 5%; }
	
	.branding { left: 5%; width: auto; }

	#affe { font-size: 60px; padding-left: 5%; 	}	
	
	.azWoerterTop { padding-top: 10px; padding-right: 10px; }
	
	.azWoerter { margin-top: -30px; }

	.bspContent { padding-left: 5%; }
	
	#beispiele { margin-left: 0px; width: 95%; margin-top: 0px; }
	
	#beispiele p { display: block;}
	
	.span1 { font-size:30px; height: 70px; text-align: left; }
	
	.span1a { font-size:20px;}
	
	.centered2 { width: 75%; margin-left: 63px; }
	
	.span4 {font-size:40px; width:180px;}
	
	.bullet { background: rgba(0, 0, 0, 0) url("../images/punkt.png") no-repeat scroll -4px 3px / 87% auto; }
}