/*###################################################################################################################
/*###################################################################################################################
THEME:			theme2
Stylesheet:		theme2-03_GALERIE.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   ##########################################################################################*/
  
  
/*##########################################################################################################
###########################                                                   ##############################
###########################               GRUPPIERTE CONTAINER                ##############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/


/*##########################################################################################################
###########################                                                   ##############################
########################### flexmodell 2 - aus der mediaSign-Entwicklung 2015 ##############################
###########################         VERTIKALER LAYOUTAUFBAU MIT FLEXBOX       ##############################
###########################   NEUE LAYOUTANORDNUNG MIT FLEXBOX - 29-09-2018   ##############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/

/*####################   Achtung benötigt in den Seiten die Klasse .flexmodell	##########################*/

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

   



/*##########################################################################################################
###########################                                                   ##############################
###########################                   ANIMATIONEN                     ##############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT     ##############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/

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




/*##########################################################################################################
###########################                                                   ##############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE      ###############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT         ###############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/
#main .inside {
    margin: 5rem 0 3rem 0;
}
.desco_logo {
    text-align: center;
    margin-bottom: 5rem;
}


.mod_article h1, .mod_article h2, .mod_article h3, .mod_article h4 {
    margin: 0 0 1rem 0;
    font-family: Open Sans Condensed, sans-serif;
    line-height: 120%;
    font-weight: 400;
    color: #333333;
    letter-spacing: 0.045rem;
    word-spacing: 0.045rem;
}
.mod_article.last.block h3 {
    color: #5A5A5A;
 }
 .mod_article h2 {
    font-size: 2rem;
    line-height: 3rem;
    margin: -1rem 0 4rem 0;
}


.zweispaltig {
    width: 50%;
    float: left;
    margin-right: 0%;
    padding-bottom: 0;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
}
.mod_article.last.block {
    padding: 0rem 0 0 0;
    width: 100%;
}
.mod_article.first.block, .mod_article {
    padding: 0;
    margin-bottom: 0;
}



.image_container {
    min-height: 10rem;
   /* border: 1px solid rgba(74, 74, 74, 0.6);
    box-sizing: border-box;*/
}

#copyright p {
    font-size: 1.25rem;
    width: 100%;
    color: #fff;
    text-align: center;
}
p {
    margin: 2rem 0 1rem 0;
}



a {
    /*text-decoration: none;*/
    color: #222;
    font-size: 1.75rem;
    letter-spacing: 0.045rem;
    word-spacing: 0.045rem;
   /* -webkit-box-shadow: 3px 3px 9px 1px rgba(135,135,135,0.68);
	-moz-box-shadow: 3px 3px 9px 1px rgba(135,135,135,0.68);
	box-shadow: 3px 3px 9px 1px rgba(135,135,135,0.68);*/
}
a:hover {
    text-decoration: underline;
    color: #fff;
}
p, ul, ol, li, h1, h2, h3, h4, h5, h6 {
    color: #fff;
}



.markenzeile {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0 15% 0 15%;
    }

    /*
    .mod_article.first.block, .ce_text.block, .ce_image, .markenzeile, .mittellinie {           /* Kontrollinien 
        border: 1px solid rgb(95, 95, 95);
        box-sizing: border-box;
    }*/
    
.mittellinie {                                                                                  /* Mittlerer Kasten in Markenzeile */
        border-right: 2px solid rgba(255, 255, 255, 0.6);
        border-left: 1px solid rgb(180, 180, 180);
        box-sizing: border-box;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
        align-self: stretch;
        width:4px;
        margin-left: -3%;
    }


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









/*##########################################################################################################
###########################                                                   ##############################
###########################              LAYOUT MAIN - CONTAINER              ##############################
###########################                                                   ##############################
###########################                                                   ##############################
@media 2560px   ##########################################################################################*/



/*##########################################################################################################
###########################                                                   ##############################
/*#########################                   CONTAO GALERIE                  ##############################
###########################                                                   ##############################
##########################################################################################################*/


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





/*##########################################################################################################
###########################                                                   ##############################
###########################              LAYOUT MAIN - SCHRIFTEN              ##############################
###########################                                                   ##############################
@media 2560px   ############################################################################################






/*##########################################################################################################
###########################                                                   ##############################
###########################                   LAYOUT FOOTER                   ##############################
###########################                                                   ##############################
###########################                                                   ##############################
##########################################################################################################*/

/*##########################################################################################################
###########################      HORIZONTALER FLEXAUFBAU FOOTER 3 BOXEN       ##############################
########################### item1=#oeffnung  item2=#adresse  item3=#copyright ##############################
###########################          gilt für alle 3er-Anordnungen            ##############################
###########################                                                   ##############################
##########################################################################################################*/

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






/*##########################################################################################################
###########################                                                   ##############################
###########################        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 +++++++++++++++++++++++++++++++++++++++++++++++++*/
/*@media 2560px ++++++++++++++++++++++++++ Schriften und Bilder+++++++++++++++++++++++++++++++++++++++++++*/
/*@media 2560px ++++++++++++++++++++++++++ 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"
}

.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      ################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*###############################################################################################################################*/



















/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                  TREKSTOR = 1920 x 1200             ############################
###########################                                                     ############################
/*@media 1920px   ########################################################################################*/
@media screen and (max-width: 1920px) {
/*##########################################################################################################
  @media 1920px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 1920px   ########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 1920px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1920px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1920px   ########################################################################################*/


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




















/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1680 px                       ############################
###########################                DESCO = 1600 x 900 px                ############################
  @media 1680px   ########################################################################################*/
@media only screen and (max-width: 1680px) and (orientation: landscape) {
/*##########################################################################################################
  @media 1680px   ########################################################################################*/
.desco_logo {
    text-align: center;
    margin-bottom: 2rem;
}

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

/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 1680px   ########################################################################################*/
  
  
/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 1680px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1680px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1680px   ########################################################################################*/


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




















/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1440 px                       ############################
###########################                                                     ############################
  @media 1440px   ########################################################################################*/
@media only screen and (max-width: 1440px) and (orientation: landscape) {
/*##########################################################################################################
  @media 1440px   ########################################################################################*/
.desco_logo {
    text-align: center;
    margin-bottom: 2rem;
}

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

/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 1440px   ########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 1440px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1440px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1440px   ########################################################################################*/

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



















/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1366 px                       ############################
###########################                                                     ############################
  @media 1366px   ########################################################################################*/
@media screen and (max-width: 1366px) {
/*##########################################################################################################
  @media 1366px   ########################################################################################*/


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

/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 1366px   ########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 1366px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1366px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1366px   ########################################################################################*/


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




















/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1280 px                       ############################
###########################                                                     ############################
  @media 1280px   ########################################################################################*/
@media only screen and (max-width: 1280px) and (orientation: landscape) {
/*##########################################################################################################
  @media 1280px   ########################################################################################*/
.desco_logo {
    text-align: center;
    margin-bottom: 2rem;
}

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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 1280px   ########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 1280px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1280px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1280px   ########################################################################################*/


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




















/*##########################################################################################################
###########################      LAYOUTÄNDERUNG KLEINE SCREENS TABLETS          ############################
############################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       1024 px                       ############################
###########################                                                     ############################
  @media 1024px   ########################################################################################*/
@media only screen and (max-width: 1024px) and (orientation: landscape) {
/*##########################################################################################################
  @media 1024px   ########################################################################################*/
.desco_logo {
    /* text-align: center; */
    margin-bottom: 1rem;
}

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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 1024px   ########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 1024px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1024px   ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 1024px   ########################################################################################*/

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








/*##################################################################################################################################*/
/*##################################################################################################################################*/
/*##################################################################################################################################*/
/*##################################################################################################################################*/
/*###################################    START SMARTPHONE 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
/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################           HCT & HUAWEI 800 x 480 px                 ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/
@media only screen and (max-width: 800px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 800px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 800px    ########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 800px    ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 800px    ########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 800px    ########################################################################################*/

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








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   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 773px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 773px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 773px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @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 736 x 414 px                ############################
###########################                                                     ############################
  @media 736px   #########################################################################################*/
@media only screen and (max-width: 736px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 736px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 736px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 736px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 736px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @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 667px   #########################################################################################*/
@media only screen and (max-width: 667px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 667px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 667px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 667px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 667px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 667px   #########################################################################################*/


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






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                 ############################
###########################           KLEINSTE SMARTPHONE-BREITE                ############################
  @media 480px   #########################################################################################*/
@media only screen and (max-width: 480px) and (orientation: landscape){   /*############ iPHONE 6 ########*/
/*##########################################################################################################
   @media 480px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/


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






























/*##################################################################################################################################*/
/*########################################    START PORTRAIT-TABLET-FORMATE       ####################################################

???				900 x ???
???				800 x )))
Alle iPad's 	768 x 1024
Microsoft Surface 		720 x 1280
HTC&HUAWEI		480 x 800
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
/*##########################################################################################################
###########################      LAYOUTÄNDERUNG KLEINE SCREENS TABLETS          ############################
############################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                      900 px                         ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/
@media screen and (max-width: 900px) and (orientation: portrait) {
/*##########################################################################################################
  @media 900px   #########################################################################################*/
/*##########################################################################################################
###########################                                                   ##############################
###########################                    GALERIEMODUL                   ##############################
###########################                  BILDANIMATIONEN                  ##############################
###########################                                                   ##############################
##########################################################################################################*/
/*@media 900px ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#wrapper {
    display: table;
    /* height: 100%; */
    /* width: 100%; */
    /* box-sizing: border-box; */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.07) 30%, rgba(0, 0, 0, 0.62) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.07) 30%, rgba(0, 0, 0, 0.62) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.07) 30%, rgba(0, 0, 0, 0.62) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b000000', endColorstr='#e6000000',GradientType=0);
}
.ce_image.first {
    margin-left: 0;
    width: 100%;
}
/*##########################################################################################################
###########################                                                     ############################
###########################               GRUPPIERTE CONTAINER                  ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 900px   #########################################################################################*/


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







???					900 x ???
???					800 x )))
Alle iPad's 		768 x 1024
Microsoft Surface 	720 x 1280 - Breakpoint
HTC&HUAWEI			480 x 800 - Breakpoint
Nexus 6p			435 x 773
iPhone 6Plus		414 x 736 - Breakpoint
Nexus 5X			411 x 731
iPhone 6			375 x 667 - Breakpoint
HTC One				360	x 640
Galaxy S5			360 x 640
iPhone 5			320 x 568 - Breakpoint
iPhone G3			320 x 480
/*##########################################################################################################
###########################      LAYOUTÄNDERUNG KLEINE SCREENS TABLETS          ############################
############################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                      800 px                         ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/
@media screen and (max-width: 800px) and (orientation: portrait) { /*############ IPAD HOCHFORMAT ########*/
/*##########################################################################################################
  @media 800px   #########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 800px   #########################################################################################*/


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






???					900 x ???
???					800 x )))
Alle iPad's 		768 x 1024
Microsoft Surface 	720 x 1280 - Breakpoint
HTC&HUAWEI			480 x 800 - Breakpoint
Nexus 6p			435 x 773
iPhone 6Plus		414 x 736 - Breakpoint
Nexus 5X			411 x 731
iPhone 6			375 x 667 - Breakpoint
HTC One				360	x 640
Galaxy S5			360 x 640
iPhone 5			320 x 568 - Breakpoint
iPhone G3			320 x 480
/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       768 px                        ############################
###########################                                                     ############################
  @media 768px   #########################################################################################*/
@media screen and (max-width: 768px) and (orientation: portrait) { /*# ALLE KLEINEREN ALS IPAD HOCHFORMAT */
/*##########################################################################################################
  @media 768px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 768px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 768px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 768px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 768px   #########################################################################################*/


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







???					900 x ???
???					800 x )))
Alle iPad's 		768 x 1024
Microsoft Surface 	720 x 1280 - Breakpoint
HTC&HUAWEI			480 x 800 - Breakpoint
Nexus 6p			435 x 773
iPhone 6Plus		414 x 736 - Breakpoint
Nexus 5X			411 x 731
iPhone 6			375 x 667 - Breakpoint
HTC One				360	x 640
Galaxy S5			360 x 640
iPhone 5			320 x 568 - Breakpoint
iPhone G3			320 x 480
/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                       600 px                        ############################
###########################                                                     ############################
  @media 600px   #########################################################################################*/
@media screen and (max-width: 600px) and (orientation: portrait) {
/*##########################################################################################################
  @media 600px   #########################################################################################*/
#main .inside {
    margin: 3rem 0 2rem 0;
}
.desco_logo {
    /* text-align: center; */
    margin-bottom: 0rem;
}
p {
    margin: 0rem 0 2rem 0;
}
.zweispaltig {
    width: 100%;
    float: none;
    /* margin-right: 0%; */
    /* padding-bottom: 0; */
    border-right: none;
    /* box-sizing: border-box; */
}

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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 600px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 600px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 600px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 600px   #########################################################################################*/


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
































/*##################################################################################################################################*/
/*##################################################################################################################################*/
/*##################################################################################################################################*/
/*##################################################################################################################################*/
/*################################     START PORTRAIT-FORMATE SMARTPHONES       ######################################################
???					900 x ???
???					800 x )))
Alle iPad's 		768 x 1024
Microsoft Surface 	720 x 1280 - Breakpoint
HTC&HUAWEI			480 x 800 - Breakpoint
Nexus 6p			435 x 773
iPhone 6Plus		414 x 736 - Breakpoint
Nexus 5X			411 x 731
iPhone 6			375 x 667 - Breakpoint
HTC One				360	x 640
Galaxy S5			360 x 640
iPhone 5			320 x 568 - Breakpoint
iPhone G3			320 x 480
/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                    480 x 320                       ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/
@media only screen and (max-width: 480px) and (orientation: portrait) {
/*##########################################################################################################
   @media 480px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 480px   #########################################################################################*/


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





???					900 x ???
???					800 x )))
Alle iPad's 		768 x 1024
Microsoft Surface 	720 x 1280 - Breakpoint
HTC&HUAWEI			480 x 800 - Breakpoint
Nexus 6p			435 x 773
iPhone 6Plus		414 x 736 - Breakpoint
Nexus 5X			411 x 731
iPhone 6			375 x 667 - Breakpoint
HTC One				360	x 640
Galaxy S5			360 x 640
iPhone 5			320 x 568 - Breakpoint
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   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 414px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 414px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 414px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 414px   #########################################################################################*/


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





???					900 x ???
???					800 x )))
Alle iPad's 		768 x 1024
Microsoft Surface 	720 x 1280 - Breakpoint
HTC&HUAWEI			480 x 800 - Breakpoint
Nexus 6p			435 x 773
iPhone 6Plus		414 x 736 - Breakpoint
Nexus 5X			411 x 731
iPhone 6			375 x 667 - Breakpoint
HTC One				360	x 640
Galaxy S5			360 x 640
iPhone 5			320 x 568 - Breakpoint
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   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 375px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 375px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 375px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @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   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 320px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 320px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 320px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 320px   #########################################################################################*/


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





???					900 x ???
???					800 x )))
Alle iPad's 		768 x 1024
Microsoft Surface 	720 x 1280 - Breakpoint
HTC&HUAWEI			480 x 800 - Breakpoint
Nexus 6p			435 x 773
iPhone 6Plus		414 x 736 - Breakpoint
Nexus 5X			411 x 731
iPhone 6			375 x 667 - Breakpoint
HTC One				360	x 640
Galaxy S5			360 x 640
iPhone 5			320 x 568 - Breakpoint
iPhone G3			320 x 480
/*##########################################################################################################
############################################################################################################
############################################################################################################
###########################                                                     ############################
###########################                      280px                          ############################
###########################                                                     ############################
  @media 280px   #########################################################################################*/
@media only screen and (max-width: 280px) and (orientation: portrait) {
/*##########################################################################################################
   @media 280px   ########################################################################################*/


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


/*##########################################################################################################
###########################                                                     ############################
###########################                   ANIMATIONEN                       ############################
###########################     HEADER VERKLEINERN  MIT STICKY JAVASCRIPT       ############################
###########################                                                     ############################
  @media 280px   #########################################################################################*/
  

/*##########################################################################################################
###########################                                                     ############################
###########################     HORIZONTALER FLEXAUFBAU HEADER_ELEMENTE         ############################
###########################          NAVILEFT  |  LOGO  |  NAVIRIGHT            ############################
###########################                                                     ############################
  @media 280px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################              LAYOUT MAIN - CONTAINER                ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 280px   #########################################################################################*/


/*##########################################################################################################
###########################                                                     ############################
###########################                   LAYOUT FOOTER                     ############################
###########################                                                     ############################
###########################                                                     ############################
  @media 280px   #########################################################################################*/


   /*@media 280px   ########################################################################################*/
} /*Ende @media 280px*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*########################################################################################################*/
/*##################################################################################################################################*/
/*####################################    ENDE SMARTPHONE-HOCHFORMATE       ########################################################*/
/*##################################################################################################################################*/