/* 
layout 
klima-umwelt-luftverkehr_v2
 
mike lang
02.2020

von heiko:
hellblau 	{ background-color: rgb(65,157,212); }
grün			{ background-color: rgb(190,198,100); }
hell grün 	{ background-color: rgb(230,233,194);



alt:
sand	{ background-color: rgb(191,171,152);}
hell 	{ background-color: rgb(242,242,242);}

*/


div,
span { 
-moz-box-sizing: border-box;
box-sizing: border-box; 

}

html { overflow-y: scroll; }

html,
body { margin: 0; padding: 0; width: 100%;  }
#home { background: transparent; /*background-color: rgb(171,163,153);*/ background-color: rgb(168, 177, 58); }


#page { margin: 0 auto 0 auto; }

#wrapper { margin: 0 auto 0 auto; min-height: 200px; }

#header_wrapper { position: fixed; top: 0; left: 0; right: 0; z-index: 10; width: 100%; border: solid; border-width:0; /*border-bottom-width: 1px; border-color: #cccccc;*/ }


/* header on scroll hide & show */
#header_wrapper.headroom {
-webkit-transition: -webkit-transform 0.2s ease-in-out;
   -moz-transition:    -moz-transform 0.2s ease-in-out;
     -o-transition:      -o-transform 0.2s ease-in-out;
        transition:         transform 0.2s ease-in-out;

       will-change: transform;/* https://developer.mozilla.org/de/docs/Web/CSS/will-change */
}

#header_wrapper.headroom--pinned { 
  -webkit-transform: translateY(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateY(0); /* IE 9 */
       -o-transform: translateY(0);
          transform: translateY(0); /* IE 10, Fx 16+, Op 12.1+ */
}

#header_wrapper.headroom--unpinned { 
  -webkit-transform: translateY(-100%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateY(-100%); /* IE 9 */
       -o-transform: translateY(-100%);
          transform: translateY(-100%); /* IE 10, Fx 16+, Op 12.1+ */
 }


#header { margin: 0 auto 0 auto; height: auto; position: relative; /*background-color: white;*/ }


#header_bg {  /*background-color: rgb(65,157,212)*/;background-color: rgb(0,112,179);  }




#ie_warning { color: black; background-color: #f1f1f1; width: 100%; margin-top: 40px; padding: 10px; border: solid 1px #e64e28; }

noscript h3 { color: rgb(241,95,30); font-size: 17px; line-height: 1.5em; position: absolute; z-index: 200; margin-top: 150px; margin-left: 30px; padding: 5px; }

#logo { /*position: relative; text-align: left; display: block; float: left;*/ display: inline-block; }

#logo a { display: inline-block; 
/* background-color: rgba(255,255,255,0.6);*/ }

.logo_img 	{ display: inline-block; background-image: url(../images/logo.png); background-size: contain; }

#nav_meta { display: inline-block; float: right;  }

#content { min-height: 400px; }

#center 	 { margin: 0 auto 0 auto; }





#footer { width: 100%; margin: 50px 0 0 0; line-height: 140%; }

#footer_pop_center,
#footer_pop_detail_center { position: fixed; bottom: 0; width: 100%; color:#fff; }

#footer_pop_center { z-index: 1;}
#footer_pop_detail_center { z-index: 10;}


#footer_pop { 
	cursor: pointer; 
	background-color: rgb(190,198,100);
	text-align: center;
	margin: 0 auto; 
	width: 150px; 
	padding:5px 0 15px 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

#footer_pop:hover { background-color: rgba(190,198,100,.7);}
#footer_pop .fa.fa-comments { font-size: 20px; position:relative; top:2px; }

#footer_pop_detail {
text-align: center;
display: none;
height: 200px;
position: relative; 
margin: 0 auto; 
padding: 10px 20px 40px 20px; 
width: 320px; 
background-color: rgb(190,198,100);
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

#footer_pop_detail_close { 
height: 20px; 
margin: 0 -10px 0 0; 
background-image: url(../images/ic-acc--close_white.svg); background-size: contain; background-position: right center; 
cursor: pointer;
}

#footer_pop_detail .fa.fa-comments { font-size: 40px; position:relative; top:2px; display: block; margin: 0 0 20px 0; }

#footer #footer_pop_detail span, 
#footer #footer_pop span,
#footer #footer_pop_detail span a {color: white; font-weight: 700; }


#footer_bild { margin: 0 auto 0 auto; height: 170px; background-image: url(../images/footer_airlineroutes_v5.png); background-size: contain; background-position: center bottom; background-repeat: repeat-x;}


#home #footer_bild { background-image: url(../images/footer_airlineroutes_v4_white.png); }


#footer_icons { background-color: /*rgb(65,157,212)*/ rgb(0,112,179); }

#footer_icons #footer_color { background-color: rgba(255,255,255,.2); padding: 10px; }
#footer_icons .col3 { margin: 0 0 10px 10px; width: calc(33% - 10px); font-size: 1.6em; vertical-align:bottom; }
#footer_icons .col3 span { margin: 0 0 0 15px; font-size: 16px;  vertical-align:bottom;  }
#footer_icons .col3 span a { color: white; }

#footer_icons .container { display: table; }
.footer_icons_row { display: table-row; }
#footer_icons .container .col3 { display: table-cell; width: 33%;  font-size:1.6em; text-align: center; }
#footer_icons .container .col3 .fab span { margin: 0 0 0 15px; font-size:16px; font-weight: 400; vertical-align: middle; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;}



#footer_end {  /*background-color: rgb(65,157,212);*/ background-color: rgb(0,112,179); padding: 40px 0 100px 0;}
#footer_content { font-size: .8em;  }
#footer_content::after { font-size: 8px; margin: 0 10px 0 0;  text-align: right; } /* die angaben zum device: desktop, ipad, iphone */



.footer_table { display: table; width: 100%; /*border-spacing: 10px; border-collapse: separate; */}
.footer_row { display: table-row;}
.footer_row .col3 { display: table-cell; vertical-align: top; width: 30%; background-color: rgba(255,255,255, .2); padding: 10px;border-right:10px solid /*rgb(65,157,212)*/ rgb(0,112,179); }



#footer_copywrite { margin: 30px 10px 0 0; text-align: right; }
#footer a,
#footer_firma,
#footer_str,
#footer_ort,
#footer_copywrite { color: white; }
#footer .rex-navi1 ul { margin: 0 0 0 10px; }





/* Newsletter */

/* 800px */
@media only screen and (max-width: 800px){ 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w15], td[class=w15], img[class=w15] 	{ width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] 	{ width:10px !important; }
table[class=w158], td[class=w158], img[class=w158], div[class=w158] 	{ width:90px !important; height:30px !important; }
table[class=w255], td[class=w255] 	{ width:185px !important; }
table[class=w325], td[class=w325], img[class=w325] 	{ width:95px !important; }
table[class=w580], td[class=w580], img[class=w580] 	{ width:315px !important; }
table[class=w610], td[class=w610], img[class=w610] 	{ width:320px !important; }
table[class=w640], td[class=w640], img[class=w640] 	{ width:340px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide],div[class=hide], .hide { display:none !important; }
table[class=show], td[class=show], img[class=show], p[class=show], span[class=show], .show { display:block !important; }
span.active320 { display:none; }
span.active480 { display:none; }
span.active800 { display:block; }
span.infolight { font-size: 25px !important; line-height: 50px !important; }
span#infolight3 { font-size: 14px !important; }
h2#infolight4 { margin-left: 10px !important; }
.infolight_td { vertical-align: middle !important; }
.abstand30 { margin-left: 10px !important; }
.date {margin-right: 10px !important; }
}


/* 480px  */
@media only screen and (max-width: 480px){ 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w15], td[class=w15], img[class=w15] 	{ width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] 	{ width:10px !important; }
table[class=w158], td[class=w158], img[class=w158], div[class=w158] 	{ width:90px !important; height:30px !important; }
table[class=w255], td[class=w255] 	{ width:185px !important; }
table[class=w325], td[class=w325], img[class=w325] 	{ width:95px !important; }
table[class=w580], td[class=w580], img[class=w580] 	{ width:305px !important; }
table[class=w610], td[class=w610], img[class=w610] 	{ width:315px !important; }
table[class=w640], td[class=w640], img[class=w640] 	{ width:325px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide],div[class=hide], .hide { display:none !important; }
table[class=show], td[class=show], img[class=show], p[class=show], span[class=show], .show { display:block !important; }
span.active320 { display:none; }
span.active480 { display:block; }
span.active800 { display:none; }
span.infolight { font-size: 25px !important; line-height: 50px !important; }
span#infolight3 { font-size: 14px !important; }
h2#infolight4 { margin-left: 10px !important; }
.infolight_td { vertical-align: middle !important; }
.abstand30 { margin-left: 10px !important; }
.date { margin-right: 10px !important; }


}

/* 320px */
@media only screen and (max-width: 320px){ 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w15], td[class=w15], img[class=w15] 	{ width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] 	{ width:5px !important; }
table[class=w158], td[class=w158], img[class=w158], div[class=w158] 	{ width:90px !important; height:30px !important; }
table[class=w255], td[class=w255] 	{ width:185px !important; }
table[class=w325], td[class=w325], img[class=w325] 	{ width:95px !important; }
table[class=w580], td[class=w580], img[class=w580] 	{ width:295px !important; }
table[class=w610], td[class=w610], img[class=w610] 	{ width:300px !important; }
table[class=w640], td[class=w640], img[class=w640] 	{ width:305px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide],div[class=hide], .hide { display:none !important; }
table[class=show], td[class=show], img[class=show], p[class=show], span[class=show], .show { display:block !important; }
span.active320 { display:block; }
span.active480 { display:none; }
span.active800 { display:none; }
span.infolight { font-size: 25px !important; line-height: 50px !important; }
span#infolight3 { font-size: 14px !important; }
h2#infolight4 { margin-left: 10px !important; }
.infolight_td { vertical-align: middle !important; }
.abstand30 { margin-left: 10px !important; }
.date { margin-right: 10px !important; }

}


#background-table { background-color: white; }
/* Webkit Elements */
#top-bar a { font-weight: normal; color: #959595; text-decoration: none; }

/* Fonts and Content */

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content, #footer, .footertext { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.header-content { font-size: 12px; color: #b7b7b7; }
.header-content a { color: #959595; text-decoration: none; }

img[class=w580] { height: auto !important; }
/* ENDE Newsletter */






/* Smartphones */
@media only screen and (min-width: 320px) { 
	
	#logo 	{ width: auto; }
	.logo_img 	{ width: 200px; height: 55px; margin: 20px 0 15px 15px;}
	#header #logo a { padding: 0; }

	#wrapper, #header, #footer_content { width: 100%; }

	#wrapper {/* header_wrapper height */padding: 120px 10px 0 10px;  }
	
	#content { width: 100%; }
	
	#footer_content 				{ width: 100%; margin-top:0; padding: 0 10px 30px 10px; }
	#footer_content .txt-img 	{ margin-left:0; display: inline; }
	
	/* nur hier, denn: slideshow safari läuft stockend wenn blur u unblur nicht zurückgesetzt, bzw: verwendet werden */
	.unblur { 
		-webkit-filter: blur(0); 
		filter: blur(0); 
		transition: 0.1s filter linear;
		-webkit-transition: 0.1s -webkit-filter linear;
	}

	.blur { 
		-webkit-filter: blur(5px); 
		filter: blur(5px); 
		transition: 0.1s filter linear;
		-webkit-transition: 0.1s -webkit-filter linear;
	}
	.cc-revoke, .cc-window {min-height: 124px;}
	.footer_row .col3 { display: block; width: 100%; margin-bottom: 10px; }


	#footer_content:after	{ content: 'Smartphone small > 320px'; }
	
	#footer_icons .col3 { margin: 0 0 10px 10px; width: calc(100% - 10px); font-size: 1.2em;  }
	#footer_icons .col3 span { margin: 0 0 0 10px; font-size: 12px; }
	#footer_icons .container .col3 { display: inline-block; width: 100%; text-align: left;}
	

}



/* Smartphones (large z.B iphone 6 quer od ipad portrait) */
@media only screen and (min-width:667px) {

	
	#logo 	{ /*width: auto; display: block; float:left;*/  }
	.logo_img 	{ width: 250px; height: 50px; margin: 20px 0 20px 30px; }
	#header #logo a { padding: 0; }
	#wrapper { width: 100%; /* header_wrapper height */padding: 120px 20px 0 20px; }
	#content { width: 100%; }
	
	#footer_content,
	.container 				{ width: 100%; padding: 0 20px 0 20px;}
	
	
	#footer_content .txt-img 	{ margin-right: 10px; margin-top:0; display: inline-block;  vertical-align: middle; }
	#karte 							{ width: 200px; height: 200px; margin-left:0; margin-top:0; display: inline-block; vertical-align: middle; }
	.cc-revoke, .cc-window {min-height: 125px;}

	.footer_row .col3 { display: table-cell; width: 30%; }
	#footer_icons .container .col3 { display: inline-block; width: 30%; text-align: center; }

	#footer_content:after { content: 'Smartphones large > 667px & ipad portrait'; }
}
	
	
/*styles for 1024px and up, u.A. ipad landscape */
@media only screen and (min-width: 1024px){

	body.grey { background: linear-gradient(90deg, rgb(243,242,242) 50%, rgb(243,242,242) 50%); }


	#logo 	{ /*width: auto; float: none; */}
	.logo_img 	{ width: 380px; height: 90px; margin: 20px 0 0 0;}
	#header #logo a { padding: 30px 0 20px 30px; }

	#wrapper, #header, #header_logo_meta { width: 100%; }
	#wrapper { margin-top: 140px; /* header_wrapper height */ padding: 110px 20px 0 20px; }
	
	#content { width: 100%; }
	#footer_content,
	.container 	 { width: 100%; margin: 0 auto 0 auto;  }
	
	
	#footer_content { width: 100%; margin-top:0; padding: 0 20px 0 20px; }
	.cc-revoke, .cc-window {min-height: 123px;}
	#footer_icons .container .col3 { display: table-cell; width: 33%;  }
	
	#footer_icons .col3 { margin: 0 0 10px 10px; width: calc(33% - 10px); font-size: 1.6em; }
	#footer_icons .col3 span { margin: 0 0 0 15px; font-size: 16px;  }
	
	#footer_content:after { content: 'desktop > 1024px oder ipad landscape'; }
}
	
	
/*styles for 1200px and up */
@media only screen and (min-width: 1200px){

	body.grey { background: linear-gradient(90deg, rgb(243,242,242) 50%, #FFFFFF 50%);}


	#header_logo_meta 	{ width: 70%; margin: 0 auto 0 auto; display: block; }	
	.logo_img 	{ width: 350px; height: 100px; margin: 20px 0 15px 0;}
	#header #logo a { padding: 0; }

	#header { display: block; }
		
	#wrapper, #header { width: 100%; }	
	#wrapper { margin-top: 159px; padding: 50px 0 0 0;}

	#content { width: 100%; }
	.txt-img,
	#footer_content,
	.container 	 { width: 70%; margin: 0 auto 0 auto;  }
	#footer_content { padding: 0 0 0 0;}
	.col { width: 50%; display: inline-block; vertical-align: top; } 



	.cc-revoke, .cc-window {min-height: 133px;}
	
	#footer_content:after	{ content: 'desktop > 1280px'; }
	

}

@media only screen and (min-width: 1600px){
	#header_logo_meta 	{ width: 60%; margin: 0 auto 0 auto;  }
	
	.logo_img 	{ width: 350px; height: 100px; margin: 20px 0 15px 0; }
	#header #logo a { padding: 0; }
	#wrapper { margin-top: 176px; padding-top: 50px;  }

	.txt-img,
	#footer_content,
	.container { width: 60%; margin: 0 auto 0 auto;  }

	#footer_content { padding: 0 0 0 0;}
	.cc-revoke, .cc-window {min-height: 148px; }
	
	.col { width: 50%; display: inline-block; vertical-align: top; } 

	#footer_content:after	{ content: 'desktop > 1600px'; }	
	

}


@media only screen and (min-width: 2000px){
	#header_logo_meta 	{ width: 50%; margin: 0 auto 0 auto;  }

	.txt-img,
	#footer_content,
	.container { width: 50%; margin: 0 auto 0 auto;  }

	
	.col { width: 50%; display: inline-block; vertical-align: top; } 

	#footer_content:after	{ content: 'desktop > 2000px'; }	
	
}