/*###################################################################################################################
/*###################################################################################################################
THEME:			theme2
Stylesheet:		theme2_WIREFRAME_01.scss	
Beschreibung:	Vertikale Flexbox #wrapper, #header, #container, #footer, Layout=horizontal, zentriert
Projekt:		CONTAO 4.4 - peter-hirschberger.de

Autor: 			Peter Hirschberger
Datum:			08.10.2018

RWD-KONZEPT:	1. WIREFRAME/SEITENLAYOUT				| 2. INSIDE-MODULE				| 3. ERWEITERUNGSMODULE
				––––––––––––––––––––––––				| ––––––––––––––––				| –––––––––––––––––––––
				PROJEKTABHÄNGIG							| SEITENABHÄNGIG				| Contao-Layoutabhängig
														|								| kann bei Bedarf zugeladen
														|								| z.B. formulare.css

Benennung:		theme-xx-wireframe-layout.scss			| theme-xx-inside.scss			| theme-xx-mod-event.scss
														| theme-xx-pages.scss			| theme-xx-desco-boxes.css
				
Inhalte:		- Grundstruktur des Seitenlayouts		| - Schriften p; h1; h2; h3		| .mod_event
				- sticky-Animationen - (javascript)		| - Schriftfarben				| .mod_news
				- Navigationspositionierungen			|								| .mod_galerie
					z.B. #footer-left					| - .mod_navigation				
						 #header-left					|	Grundpositionierung #...	| Eigene Module
						 #header-right					|	<ul> <li> a a:hover			| z.B. ein kleines Slider-
						 #header-einspaltig				|								| Modul oder eine
						 #footer #adresse				|								| Box-Animation
														|								| - boxenanimation-desco.css
														|								|
				
Anforderung:	soll möglichst für alle Projekte		| soll möglichst immer			| Die Entwicklung dieser
				gleich aufgebaut und gültig sein		| gleich aufgebaut sein			| css-Erweiterungen darf
				Sollte hier ein Fehler optimiert		| 								| die Basismodule 1 + 2
				werden, sollte, dieser möglichst		|								| nicht stören
				einfach auf andere Projekte über-
				tragen werden können

Inhalt:			- HTML - Browserkalibrierung			| - Gruppierte Elemente			| 
				- Gruppierte Elemente					|	color:
				- FLEXBOX-LAYOUT VERTIKAL 				|	margin:
					#wrapper							|	line-height:
					#header								|	usw.
					#container							| 
					#footer								| 
					
				- FLEXBOX #header.inside				| 
					.navi-left | #logo | .navi-right	|
				- FLEXBOX #footer.inside				| 
					.navi | #adresse | #telefon | usw.
				

Weiteres:		AB Contao-Version 4.4 automatische Kompression .scss.css

/*###################################################################################################################
/*#################################################################################################################*/





/* ############################  STRUKTUR UND REIHENFOLGE DER SEITENELEMENTE  ############################*/
/*+++++++++++++++++++++++++++++++++++++++++++++++ HTML +++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++ Layout Gruppierte Container ++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++ Layout #head +++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++ Layout #container ++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++ Layout #left +++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++ Layout #right ++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++ Layout #footer ++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++ SITE HOME ++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++ SITE NEWS ++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++ SITE DATENSCHUTZ +++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++ MOD_NAVIGATION ++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++  MOD_NEWS +++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++  MOD_EVENT +++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++ Schriften und Bilder+++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++ Browseranpassungen ++++++++++++++++++++++++++++++++++++++++++++*/





/*	Logoumrechnung  ########################################################################################						
								
B Viewport	B Main							Prozent von #main
2560		1180		100,00%		430	px		36,44%
1920		1036		87,80%		400	px		37,64%
1680		1008		85,42%		390	px		36,71%
1440		923			78,22%		370	px		37,92%
1366		902			76,44%		360	px		36,59%
1280		896			75,93%		340	px		35,71%
1024		820			69,49%		330	px		36,59%
800			640			54,24%		290	px		45,31%
767			614			52,03%		280	px		45,60%
600			480			40,68%		270	px		56,25%
480			480			40,68%		260	px		54,17%
414			414			35,08%		250	px		60,39%
375			375			31,78%		240	px		64,00%
320			320			27,12%		230	px		71,88%




/*	HEADLINE GROSS UMRECHNUNG  #############################################################################
.mod_article.first h1   {font-size: 9.6rem}		//1920px
.mod_article.first h1   {font-size: 9.216rem}	//1680px
.mod_article.first h1   {font-size: 8.847rem}	//1440px
.mod_article.first h1   {font-size: 8.493rem}	//1366px
.mod_article.first h1   {font-size: 8.153rem}	//1280px
.mod_article.first h1   {font-size: 7.827rem}	//1024px
.mod_article.first h1   {font-size: 7.514rem}	//900px
.mod_article.first h1   {font-size: 7.213rem}	//800px
.mod_article.first h1   {font-size: 6.925rem}	//767px
.mod_article.first h1   {font-size: 6.648rem}	//736px orientation: landscape
.mod_article.first h1   {font-size: 6.382rem}	//480px
.mod_article.first h1   {font-size: 6.127rem}	//414px
.mod_article.first h1   {font-size: 5.882rem}	//375px
.mod_article.first h1   {font-size: 5.646rem}	//320px
.mod_article.first h1   {font-size: 5.420rem}	//280px





/*Große Screens LAYOUT - 2560 px
############################################################################################################
###########################                                                   ##############################
###########################                      HTML BODY                    ##############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/
html {									/* Browserdefault, 16px */
	height: 100%;
    font-family: Open Sans Condensed, arial, sans-serif;
    font-size: 100%;
    font-weight: normal;
    letter-spacing:.04rem;
    word-spacing:.05rem;
}
body {
    width: 100%;
    height: 100%;						/* wegen sticky-Footer */
    margin: 0px;
    font-size: 1.4rem;
    line-height: 2.20rem;
}

  
/*##########################################################################################################
###########################                                                   ##############################
###########################               GRUPPIERTE CONTAINER                ##############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/

/*##########################################################################################################
  ##########################################################################################################
  
  

  
  

/*##########################################################################################################
###########################                                                   ##############################
###########################               LAYOUT STICKY-FOOTER                ##############################
###########################       FLEXBOX FUNKTIONIERT MIT iPHONE NICHT       ##############################
###########################                    12-10-2018                     ##############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/
#wrapper {
	display: table;				    /* wegen sticky-Footer */
	height: 100%;				      /* wegen sticky-Footer */
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(224, 224, 224, 0.4);
}
#wrapper {
  display: table;
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  background: rgb(251,251,251);
  background: -moz-linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(207,207,207,1) 55%, rgba(80,80,80,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(207,207,207,1) 55%, rgba(80,80,80,1) 100%);
  background: linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(207,207,207,1) 55%, rgba(80,80,80,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbfb",endColorstr="#505050",GradientType=1);

  background: rgb(255,255,255);
  background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(207,207,207,1) 50%, rgba(75,75,75,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(207,207,207,1) 50%, rgba(75,75,75,1) 100%);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(207,207,207,1) 50%, rgba(75,75,75,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#4b4b4b",GradientType=1);
}

#header {
	display: table-row;			  /* wegen sticky-Footer */
	width:100%;
}
#main {
	width: 100%;
	height:100%;				      /*Auch bei wenig Text muss die ganze Höhe ausgefüllt sein*/
    /*margin-top: 9rem;			/* Ausgleich Headerhöhe - jeweils im main-css */
	box-sizing: border-box;
}
#container {
    height: 100%;
    /*margin-top: 110px;		/* funktioniert in STICKY-FOOTER nicht */
    display: table-row;			/* ACHTUNG - KANN DURCH JAVASCRIPT USW: BEEINFLUSST WERDEN */
}
#footer {						        /* wegen sticky-Footer */
	display: table-row;
	width: 100%;
  background-color: #333;
	box-sizing: border-box;
	/*padding: 0 27% 0 27%;*/	/* padding greift bei Table-row nicht*/
}







/*##########################################################################################################
  ##########################################################################################################



/*##########################################################################################################
###########################                                                   ##############################
###########################        SEITENABHÄNGIGE LAYOUTANPASSUNGEN          ##############################
###########################                                                   ##############################
###########################                                                   ##############################
##########################################################################################################*/
/*@media 2560px +++++++++++++++++++++++++++++ SITE HOME ++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*@media 2560px +++++++++++++++++++++++++++++ SITE NEWS ++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*@media 2560px +++++++++++++++++++++++++++ SITE DATENSCHUTZ +++++++++++++++++++++++++++++++++++++++++++++*/

/*@media 2560px ++++++++++++++++++++++++++++ MOD_NAVIGATION ++++++++++++++++++++++++++++++++++++++++++++++*/

/*@media 2560px ++++++++++++++++++++++++++++++  MOD_NEWS +++++++++++++++++++++++++++++++++++++++++++++++++*/

/*@media 2560px +++++++++++++++++++++++++++++  MOD_EVENT +++++++++++++++++++++++++++++++++++++++++++++++++*/



/*##########################################################################################################
###########################                                                   ##############################
###########################               BROWSERANPASSUNGEN                  ##############################
###########################                                                   ##############################
###########################                                                   ##############################
##########################################################################################################*/
/*

/*
.mac.firefox #main:after{
	content: "Sie verwenden das Betriebssystem Macintosh mit Firefox"
}
.mac.safari #main:after{
	content: "Sie verwenden das Betriebssystem Macintosh mit Safari"
}
.mac.opera #main:after{
	content: "Sie verwenden das Betriebssystem Macintosh mit Opera"
}
.mac.chrome #main:after{
	content: "Sie verwenden das Betriebssystem Macintosh mit Chrome"
}*/

/*.mac.firefox #main:after{
	content: "Sie verwenden das Betriebssystem Macintosh mit Firefox";
	text-align:center;
}
.mac.firefox a {
	background: rgba(255, 255, 255, 0) !important;
	outline: none !important;
}

/*
.win.ie7 #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Internet Explorer 7.0 - Bitte beachten Sie, dass dieser Browser veraltet ist und unsere Website nicht mehr darstellen kann"
}
.win.ie8 #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Internet Explorer 8.0 - Bitte beachten Sie, dass dieser Browser veraltet ist und unsere Website nicht mehr darstellen kann"
}
.win.ie9 #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Internet Explorer 9.0 - Bitte beachten Sie, dass dieser Browser veraltet ist und unsere Website nicht mehr darstellen kann"
}
.win.ie10 #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Internet Explorer 10.0"
}
.win.ie11 #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Internet Explorer 11.0"
}
.win.firefox #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Firefox"
}
.win.safari #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Safari"
}
.win.opera #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Opera"
}
.win.chrome #main:after{
	content: "Sie verwenden das Betriebssystem Windows mit Chrome"
}
.safari.mobile #main:after{
	content: "Sie verwenden ein mobiles Endgerät mit safari"
}
.ios.phone #main:after{
	content: "Sie verwenden ein Smartphone mit ios"
}
.ios.tablet #main:after{
	content: "Sie verwenden ein Tablet mit ios"
}
.chrome.mobile #main:after{
	content: "Sie verwenden ein mobiles Endgerät mit einem Webkit-Browser"
}
/*Ende @media 2560px      ################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/













/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                     1920 x 1200                     ############################
###########################                                                     ############################
/*@media 1920px   ########################################################################################*/
@media screen and (max-width: 1920px) and (orientation: landscape) {
/*##########################################################################################################
  @media 1920px   ########################################################################################*/
html {font-size: 99%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 1920px   ########################################################################################*/

/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 1920px*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/













/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1680 px                       ############################
###########################                DESCO = 1600 x 900 px                ############################
  @media 1680px   ########################################################################################*/
@media screen and (max-width: 1680px) and (orientation: landscape) {
/*##########################################################################################################
  @media 1680px   ########################################################################################*/
html {font-size: 98%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 1680px   ########################################################################################*/

/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 1680px*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/













/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1440 px                       ############################
###########################                                                     ############################
  @media 1440px   ########################################################################################*/
@media screen and (max-width: 1440px) and (orientation: landscape){
/*##########################################################################################################
  @media 1440px   ########################################################################################*/
html {font-size: 97%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 1440px   ########################################################################################*/

/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 1440px*/
/*########################################################################################################*/
/*########################################################################################################*/













/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1366 px                       ############################
###########################                                                     ############################
  @media 1366px   ########################################################################################*/
@media screen and (max-width: 1366px) and (orientation: landscape){
/*##########################################################################################################
  @media 1366px   ########################################################################################*/
html {font-size: 96%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 1366px   ########################################################################################*/
  
/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 1366px*/
/*##########################################################################################################
/*########################################################################################################*/













/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1280 px                       ############################
###########################                                                     ############################
  @media 1280px   ########################################################################################*/
@media screen and (max-width: 1280px) and (orientation: landscape){
/*##########################################################################################################
  @media 1280px   ########################################################################################*/
html {font-size: 95%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 1280px   ########################################################################################*/

/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 1280px*/
/*##########################################################################################################
/*########################################################################################################*/













/*##########################################################################################################
###########################      LAYOUTÄNDERUNG KLEINE SCREENS TABLETS          ############################
############################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1024 px                       ############################
###########################                                                     ############################
  @media 1024px   ########################################################################################*/
@media screen and (max-width: 1024px) and (orientation: landscape){
/*##########################################################################################################
  @media 1280px   ########################################################################################*/
html {font-size: 94%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 1024px   ########################################################################################*/

/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 1024px*/
/*##########################################################################################################
/*########################################################################################################*
/*##################################################################################################################################*/
/*############################################    ENDE DESKTOP-FORMATE       #########################################################
/*##################################################################################################################################*/






















/*##################################################################################################################################*/
/*############################################    START TABLET-FORMATE       #########################################################
/*##################################################################################################################################*
???				900 x ???
???				800 x )))
Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 5Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
Galaxy S5		360 x 640
iPhone G3		320 x 480
iPhone 5		320 x 568

/*##########################################################################################################
###########################      LAYOUTÄNDERUNG KLEINE SCREENS TABLETS          ############################
############################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################          900 px x 1600 ja die gibt es               ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/
@media screen and (max-width: 900px) and (orientation: portrait) {
/*##########################################################################################################
  @media 900px   #########################################################################################*/
html {font-size:96%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 900px*/
/*##########################################################################################################
/*#########################################################################################################*


???				900 x ???
???				800 x )))
Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 5Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
Galaxy S5		360 x 640
iPhone G3		320 x 480
iPhone 5		320 x 568

/*##########################################################################################################
###########################      LAYOUTÄNDERUNG KLEINE SCREENS TABLETS          ############################
############################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                      800 px                         ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/
@media screen and (max-width: 800px) and (orientation: portrait) { /*############ IPAD HOCHFORMAT ########*/
/*##########################################################################################################
  @media 800px   #########################################################################################*/
html {font-size:96%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 800px*/
/*##########################################################################################################
/*#########################################################################################################*

???				900 x ???
???				800 x )))
Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 5Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
Galaxy S5		360 x 640
iPhone G3		320 x 480
iPhone 5		320 x 568

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       768 px                        ############################
###########################                                                     ############################
  @media 768px   #########################################################################################*/
@media screen and (max-width: 768px) and (orientation: portrait) {          /*############ ALLE KLEINEREN ALS IPAD HOCHFORMAT ########*/
/*##########################################################################################################
  @media 1280px   ########################################################################################*/
html {font-size:96%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 768px   #########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 768px*/
/*########################################################################################################*/
/*##########################################################################################################

???				900 x ???
???				800 x )))
Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 5Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
Galaxy S5		360 x 640
iPhone G3		320 x 480
iPhone 5		320 x 568

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       600 px                        ############################
###########################                                                     ############################
  @media 600px   #########################################################################################*/
@media screen and (max-width: 600px) and (orientation: portrait) {         
/*##########################################################################################################
  @media 1280px   ########################################################################################*/
html {font-size:96%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 600px   #########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 600px*/
/*########################################################################################################*/
/*##########################################################################################################
/*##################################################################################################################################*/
/*############################################    ENDE TABLET-FORMATE       ##########################################################
/*##################################################################################################################################*/




















































/*##################################################################################################################################*/
/*############################################    START LANDSCAPE-FORMATE       ######################################################
/*##################################################################################################################################*
Galaxy S5		360 x 640			Landscape-Breiten:	768	iPad
Nexus 5X		411 x 731			773	Nexus 6p
Nexus 6p		435 x 773			736	iPhone 6Plus
iPhone G3		320 x 480			731	Nexus 5X
iPhone 5		320 x 568			667	iPhone 6
iPhone 6		375 x 667			640	Galaxy S5
HTC One			360	x 640			640 HTC One
iPhone 6Plus	414 x 736			568 iPhone 5
Alle iPad's 	768 x 1024			480 iPhone G3

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################             iPhone XR 894 x 414 px                  ############################
###########################                                                     ############################
  @media 773px   #########################################################################################*/
@media only screen and (max-width: 900px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 773px   ########################################################################################*/
html {font-size:96%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 773px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 900px*/
/*########################################################################################################*/
/*##########################################################################################################


Galaxy S5		360 x 640			Landscape-Breiten:	768	iPad
Nexus 5X		411 x 731			773	Nexus 6p
Nexus 6p		435 x 773			736	iPhone 6Plus
iPhone G3		320 x 480			731	Nexus 5X
iPhone 5		320 x 568			667	iPhone 6
iPhone 6		375 x 667			640	Galaxy S5
HTC One			360	x 640			640 HTC One
iPhone 6Plus	414 x 736			568 iPhone 5
Alle iPad's 	768 x 1024			480 iPhone G3

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################              Nexus 6p 773 x 435 px                  ############################
###########################                                                     ############################
  @media 773px   #########################################################################################*/
@media only screen and (max-width: 773px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 773px   ########################################################################################*/
html {font-size:96%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 773px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 773px*/
/*########################################################################################################*/
/*##########################################################################################################


Galaxy S5		360 x 640			Landscape-Breiten:	768	iPad
Nexus 5X		411 x 731			773	Nexus 6p
Nexus 6p		435 x 773			736	iPhone 6Plus
iPhone G3		320 x 480			731	Nexus 5X
iPhone 5		320 x 568			667	iPhone 6
iPhone 6		375 x 667			640	Galaxy S5
HTC One			360	x 640			640 HTC One
iPhone 6Plus	414 x 736			568 iPhone 5
Alle iPad's 	768 x 1024			480 iPhone G3

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################           iPhone 6 Plus 414 x 736 px                ############################
###########################                                                     ############################
  @media 736px   #########################################################################################*/
@media only screen and (max-width: 736px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 736px   ########################################################################################*/
html {font-size:95%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 736px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 736px*/
/*########################################################################################################*/
/*##########################################################################################################

Galaxy S5		360 x 640			Landscape-Breiten:	768	iPad
Nexus 5X		411 x 731			773	Nexus 6p
Nexus 6p		435 x 773			736	iPhone 6Plus
iPhone G3		320 x 480			731	Nexus 5X
iPhone 5		320 x 568			667	iPhone 6
iPhone 6		375 x 667			640	Galaxy S5
HTC One			360	x 640			640 HTC One
iPhone 6Plus	414 x 736			568 iPhone 5
Alle iPad's 	768 x 1024			480 iPhone G3

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################              iPhone 6 667 x 375 px                  ############################
###########################                                                     ############################
  @media 736px   #########################################################################################*/
@media only screen and (max-width: 667px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 736px   ########################################################################################*/
html {font-size:94%;}
/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 736px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 736px*/
/*########################################################################################################*/
/*##########################################################################################################

Galaxy S5		360 x 640			Landscape-Breiten:	768	iPad
Nexus 5X		411 x 731			773	Nexus 6p
Nexus 6p		435 x 773			736	iPhone 6Plus
iPhone G3		320 x 480			731	Nexus 5X
iPhone 5		320 x 568			667	iPhone 6
iPhone 6		375 x 667			640	Galaxy S5
HTC One			360	x 640			640 HTC One
iPhone 6Plus	414 x 736			568 iPhone 5
Alle iPad's 	768 x 1024			480 iPhone G3

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################              iPhone G3 480 x 320 px                  ############################
###########################                                                     ############################
  @media 736px   #########################################################################################*/
@media only screen and (max-width: 480px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 736px   ########################################################################################*/
html {font-size:93%;}
/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 736px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 736px*/
/*########################################################################################################*/
/*##########################################################################################################
/*##################################################################################################################################*/
/*########################################     ENDE LANDSCAPE-FORMATE       ##########################################################
/*##################################################################################################################################*/






































/*##################################################################################################################################*/
/*########################################     START PORTRAIT-FORMATE       ##########################################################
/*##################################################################################################################################*
Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 6Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
HTC One			360	x 640
Galaxy S5		360 x 640
iPhone 5		320 x 568
iPhone G3		320 x 480

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                    480 x 320                       ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/
@media only screen and (max-width: 480px) and (orientation: portrait) {
/*@media only screen and (max-width: 480px) {*/
/*##########################################################################################################
   @media 480px   ########################################################################################*/
html {font-size:88%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 480px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 480px*/
/*########################################################################################################*/
/*##########################################################################################################



Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 6Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
HTC One			360	x 640
Galaxy S5		360 x 640
iPhone 5		320 x 568
iPhone G3		320 x 480

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                    414 x 320                       ############################
###########################                                                     ############################
  @media 414px   #########################################################################################*/
@media only screen and (max-width: 414px) and (orientation: portrait) {
/*@media only screen and (max-width: 414px) {*/
/*##########################################################################################################
   @media 414px   ########################################################################################*/
html {font-size:87%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 414px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 414px*/
/*########################################################################################################*/
/*##########################################################################################################



Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 6Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
HTC One			360	x 640
Galaxy S5		360 x 640
iPhone 5		320 x 568
iPhone G3		320 x 480

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                        375                          ############################
###########################                                                     ############################
  @media 375px   #########################################################################################*/
@media only screen and (max-width: 375px) and (orientation: portrait) {
/*@media only screen and (max-width: 375px) {*/
/*##########################################################################################################
   @media 375px   ########################################################################################*/
html {font-size:85%;}
/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 375px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 375px*/
/*########################################################################################################*/
/*##########################################################################################################



Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 6Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
HTC One			360	x 640
Galaxy S5		360 x 640
iPhone 5		320 x 568
iPhone G3		320 x 480

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                        320                          ############################
###########################                                                     ############################
  @media 320px   #########################################################################################*/
@media only screen and (max-width: 320px) and (orientation: portrait) {
/*##########################################################################################################
   @media 320px   ########################################################################################*/
html {font-size:84%;}
/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 320px   ########################################################################################*/


/*########################################################################################################*/
/*########################################################################################################*/
} 
/*Ende @media 320px*/
/*########################################################################################################*/
/*##########################################################################################################



Alle iPad's 	768 x 1024
Nexus 6p		435 x 773
iPhone 6Plus	414 x 736
Nexus 5X		411 x 731
iPhone 6		375 x 667
HTC One			360	x 640
Galaxy S5		360 x 640
iPhone 5		320 x 568
iPhone G3		320 x 480

/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                      280px                          ############################
###########################                                                     ############################
  @media 280px   #########################################################################################*/
@media only screen and (max-width: 280px) and (orientation: portrait) {
/*##########################################################################################################
   @media 280px   ########################################################################################*/
html {font-size:83%;}

/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
   @media 280px   ##########################################################################################


   @media 280px   ########################################################################################*/
} /*Ende @media 280px*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/