/* Style Template 1 */

@media only screen and (max-width: 1200px) {
	
	/* Banner Vermessungstechnik oder Kita */
.vermessung h2.white { font-size: 5em;}
p.blau {font-size: 2.6em; top: -0.3em}
#sublinevermessung {top: -0.6em;}

/* Banner IT  */
.it h2.white { font-size: 5em;}
p.gruen {font-size: 2.6em; top: -0.3em}
#sublineit {top: -0.6em;}
	
	
	/* neue Banner*/ 
h2.white {font-size: 5em; top: 3.7em;  }
p.rotebox {top5.2em;}
#hauptinhalt
{padding: 0 0 0 0;}
div.schongwusst
{ padding: 0; width: 100%; margin: 0 auto; } 
#schongewusst
{padding: 1em 0 0 0; width: 97%; margin: 1em 1.5% 0 1.5%; } 
#sublinebottom {
	margin: 1.2em 0em 0em 7em;
}

}


@media only screen and (max-width: 1024px) {

div.textboxlinks { width: 100%; margin: 0 0 1em 0;}
section.slideContainer {
  width: 100%;
  margin: 0 0 1em 0;
}

h2.xl {display: none;}
h2.sm {display: block;}

h2 {
	line-height: 1em;
}
/* Banner Vermessungstechnik */
.vermessung h2.white { font-size: 4em;}
p.blau {font-size: 2.6em; top: -0.3em;}
#sublinevermessung { top: -0.65em;}

/* Banner IT */
.it h2.white { font-size: 4em;}
p.gruen {font-size: 2.6em; top: -0.3em;}
#sublineit { top: -0.65em;}

/* neue Banner*/ 
h2.white {font-size: 4.5em; top: 4.5em;  }
p.rotebox {top:	6.2em; font-size: 3.25em;}

#hauptinhalt
{padding: 0 0 0 0;}

div.schongwusst
{ padding: 0; width: 100%; margin: 0 auto; } 

#schongewusst
{padding: 1em 0 0 0; width: 97%; margin: 1em 1.5% 0 1.5%; } 

#sublinebottom {
	margin: 1.2em 0em 0em 7em;
}

}

@media only screen and (max-width: 960px) {

.width960  { max-width: 960px; margin: 0 auto; box-sizing:border-box; padding: 0 2%;}	

div.quadTeaser { width:48%;}	
article.socialIcons { padding: 2%;}
p.flex-caption {font-size:130%;}
nav#scrollNav ul li a:link, nav#scrollNav ul li a:focus, nav#scrollNav ul li a:visited {padding: 4px;}
div.darkOverlay  {opacity: 1;}
a.button {display: block;}
.owl-carousel.owl-loaded {margin-bottom: 2em;}
section.parallax { height: 25vh;}
section#impressions img.example-image { max-width: 250px;}
#sublinebottom { margin: 1.2em 0em 0em 5.2em;}

/* ----------------------neue Banner ----------------------------------------------*/ 

.vermessung h2.white {font-size: 4em; margin-top: -0.2em; margin-bottom: 0.2em;}
p.blau {font-size: 2.2em; top: -0.7em;}
#sublinevermessung { top: -1.7em; font-size: 0.9em;}
div.vermessung {margin: 20px 0 -15px 0;}
#sublineinv2 {font-size: 2.5em;}


.it h2.white {font-size: 4em; margin-top: -0.2em; margin-bottom: 0.2em;}
p.gruen {font-size: 2.2em; top: -0.7em;}
#sublineveit { top: -1.7em; font-size: 0.9em;}
div.it {margin: 20px 0 -15px 0;}
#sublineit {font-size: 0.9em; top: -1.85em;}

div.azubiordnung {width: 100%; height: 472px; background-position: center; margin: 0 0 20px 0;}
div.ordnung {width: 100%; height: 472px; background-position: center; margin: 0 0 20px 0;}
p.rotebox {top:	3.2em; font-size: 4.25em;}
}

@media only screen and (max-width: 768px) { 
#sublinebottom {
	font-size: 2.8em;
	margin: 1em 0 0 3.5em;
}
#footerspalte {
    width: 100%;
	padding: 0;
	margin: 0 auto;
	float: none;
	text-align: left;
	
}

#footerspalte2 {
	width: 100%;
	padding: 0;
	margin: 0.9em auto;
	float: none;
	text-align: left;
}

.footer {
    color: #FFFFFF;
    padding: 1.5em;
	margin-bottom: 1em;
}

/* Banner Vermessungstechnik */
.vermessung h2.white {font-size: 3em; top: -0em;}
p.blau {font-size: 1.6em; top: -0.6em;}
#sublinevermessung { font-size: 0.75em; top: -1.5em;}

.it h2.white {font-size: 3em; top: -0em;}
p.gruen {font-size: 1.6em; top: -0.6em;}
#sublineit { font-size: 0.75em; top: -1.5em;}

/* ----------------------neue Banner ----------------------------------------------*/ 

div.azubiordnung {width: 100%; height: 472px; background-position: center; margin: 0 0 20px 0;}
div.ordnung {width: 100%; height: 472px; background-position: center; margin: 0 0 20px 0;}
#sublineinv2 {font-size: 2em;}
h2.white {font-size: 6em; top: 2.5em;  }
p.rotebox {top:	3.2em; font-size: 4.25em;}
}

@media only screen and (max-width: 640px) {

	/* Banner Köln hilft */	
	p.roteboxhilf {font-size: 1.75em;}
	.hilf h2.white {font-size: 5.1em;}

	/* Banner Vermessungstechnik */
	div.vermessung {margin: 10px 0 0px 0}
	.vermessung h2.white { font-size: 3.54em; top: 0.125em;}
	p.blau {font-size: 2em; top: -0em;}
	#sublinevermessung { font-size: 0.8em; top: -0.25em;}

	div.it {margin: 10px 0 0px 0}
	.it h2.white { font-size: 3.54em; top: 0.125em;}
	p.gruen {font-size: 2em; top: -0em;}
	#sublineit { font-size: 0.8em; top: -0.25em;}
	
	body {font-size: 90%; padding: 0;}
	nav#scrollNav { position:fixed; bottom: 0; left: 25%;}
	nav#scrollNav ul {margin: 0 auto;}
	nav#scrollNav ul li{ float: left;margin-bottom: 0;}
	nav#scrollNav ul li a img {margin-bottom: -4px;}
	div.quadTeaser, div.tripleTeaser { width:48%; height: 9em; margin: 0 1% 2% 1%;}
	div.darkOverlay { padding-top: 5%;}
	article div.socialLinks {padding-bottom: 0.5em;}
	section#bibliothek, .contentSimple {padding: 5% 2% 2% 5%; height: auto; }
	.imgTeaser {padding: 0 1%;}
	section.parallax {height: auto; padding-bottom: 8%;}
	.aside {margin-top: 0.5em;}
	nav#scrollNav ul li img { max-width: 19px;}
	nav#mainNav ul li {width: 50%; border-bottom: 1px solid white;}
	nav#mainNav ul li a:link, nav#mainNav ul li a:focus, nav#mainNav ul li a:visited {padding: 12px 0;}
	a#topLink img {width: 15px; height: 15px;} 
	.accordion h3 {font-size: 1.2em;}
	section#anmeldung, div.myiframe { width: 100%;}
	.chart {display: none;}
	form .formLeft, form .formRight {width: 100%;margin-right: 0;}
	#sublineinv {
	font-size: 1.5em; }
	
	
	/*----------------------------- neue Banner-------------------------*/ 
div.azubiordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
div.ordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
p.rotebox {top:	4em; font-size: 4.25em;}
	
/*Navigationspfeile ausblenden auf mobil*/
	.flex-direction-nav {
    color: rgba(255, 255, 255, 1);
	visibility: hidden;
}
/*fix für background ansicht in der mobilen version*/
	main {
    background-repeat: initial; 
    background-attachment: initial;
}


h1 {
	line-height: 1.2;
}

h2 {
	line-height: 1.2;
	font-size: 2em;
}

#someicons {
    width: 100%;
    float: left;
	
}
h3 { 
font-size: 1.1em;
}
p #subline {
top: 0.2em; margin-bottom: 1%; }

div.schongwusst
{ width: 98.5%; margin: 0; } 

#schongewusst
{width: 97%; } 


section.slideContainer {
width: 100%;
padding: 0 1em 0em 1em;
}

.flexslider {
	zoom: 0;
	
}
div.schongewusst
{ padding: 0em; width: 98.5%; margin: 0; } 

#schongewusst
{padding: 4em 0 0 0; width: 97%; margin: 1em 1.5% 0 1.5%; } 

#sublinebottom {
margin: 0em 0em 0em 15%;
font-size: 2.5em;
}

p.flex-caption {font-size:120%;}
}

@media only screen and (max-width: 580px) {
h3 { 
font-size: 1.1em;
}

#sublinebottom {
	font-size: 2em;
	margin: 1em 0 0.5em 13%;
}

p.flex-caption {
font-size: 1.5em;
overflow: hidden;
font-size: 0.9em;
padding: 0;
margin: 0;
}
#schongewusst {
    padding: 0em 0 0 0;
    width: 97%;
    margin: 1em 1.5% 0 13%;
}
	/*----------------------------- neue Banner-------------------------*/ 

/* Banner Vermessungstechnik */
div.vermessung {margin: 10px 0 -10px 0}
.vermessung h2.white { font-size: 2.5em; top: 0.1em;}
p.blau {font-size: 1.4em; top: -0.3em;}
#sublinevermessung { font-size: 0.65em; top: -1.5em;}

div.it {margin: -25px 0 -20px 0}
.it h2.white { font-size: 2.5em; top: 0.1em;}
p.gruen {font-size: 1.4em; top: -0.3em;}
#sublineit { font-size: 0.65em; top: -1.5em;}


div.azubiordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
div.ordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
h2.white {font-size: 4.5em; top: 4.25em;  }
p.rotebox {top:	4.5em; font-size: 4.25em; padding: 0 0.5em 0em 0.5em;}
#sublineinvgreen {font-size: 1em;}
.hilf .h2white {font-size: 3em;}
.flex-direction-nav {
	visibility:hidden;
}
}

@media only screen and (max-width: 400px) {

div.quadTeaser, div.tripleTeaser { width:48%; height: 9em; margin: 0 1% 2% 1%; padding: 0%;}

#sublinebottom {
	font-size: 1.9em;
	margin: 1.2em 0 0 15%;
}

p.flex-caption {
overflow: hidden;
font-size: 1em;
padding: 0.5em;
}
#schongewusst {
    padding: 0em 0 0 0;
    width: 97%;
    margin: 1em 1.5% 0 1.5%;
}
h3 { 
font-size: 1.1em;
padding-left: 0.5em;
}

h2 {
	font-size: 2em;

}

img.some {
width: 10%!important;
}


p#subline {
font-size: 0.8em;
}
	/*----------------------------- neue Banner-------------------------*/ 
div.vermessung {margin: 0;}
.vermessung h2.white { font-size: 1.5em; top: 0.1em;}
p.blau {font-size: 1em; top: -0.2em;}
#sublinevermessung { font-size: 0.65em; top: -1em;}

div.it {margin: 0px;}
.it h2.white { font-size: 1.5em; top: 0.1em;}
p.gruen {font-size: 1em; top: -0.2em;}
#sublineit { font-size: 0.65em; top: -1em;}

p.roteboxhilf {font-size: 1em;}
div.azubiordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
div.ordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
h2.white {font-size: 3.75em; top: 6em;  }
p.rotebox {top:	7.75em; font-size: 3em; padding: 0 0.25em 0em 0.25em;}
.hilf h2.white {font-size: 3em; top: -0.5em;}
.flex-direction-nav {
	visibility:hidden;
}
}

@media only screen and (max-width: 320px) {
	/*----------------------------- neue Banner-------------------------*/ 

div.vermessung {margin: 10px 0 -25px 0}
.vermessung h2.white { font-size: 1.5em; top: -0.1em;}
p.blau {font-size: 1em; top: -0.5em;}
#sublinevermessung { font-size: 0.5em; top: -2em;}

div.azubiordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
div.ordnung {width: 100%; height: 460px; background-position: center; margin: 0 0 20px 0;}
h2.white {font-size: 3.25em; top: 7.3em;  }
#sublineinvgreen {top: -0.9em; font-size: 1.1em;}
p.rotebox {top:	7.75em; font-size: 3em; padding: 0 0.25em 0em 0.25em;}
.hilf h2.white {font-size: 3em; top: -0.5em;}
p.roteboxhilf {top: -0.5em;}	
}


/*

.width800  { max-width: 800px; margin: 0 auto;}

.width1400  { max-width: 1400px; margin: 0 auto; }
.width1200  { max-width: 1200px;  margin: 0 auto;}


div.tripleTeaser { background-color: #f0f0f0; margin:0 auto;
    width:33.33%; height:280px; float: left; font-size: 0.9em;
}

*/
/*---NAVIGATION---
nav#mainNav {	
	display: block; width: 100%;
}

nav#mainNav ul {
	padding: 0; margin: 0; background: #FF0000;
}

nav#mainNav ul li {
	float: left; width: 33.33%; box-sizing: border-box;
	text-align: center; background: #FF0000; color: white;
	border-right: 1px solid #FFF;
}

nav#mainNav ul li a:link , nav#mainNav ul li a:focus, nav#mainNav ul li a:visited{ color: #FFFFFF;  margin: 0; padding: 22px 0; display: block;}
nav#mainNav ul li a:hover { background-color: #B8312F; }

nav#scrollNav {	
	display: block;
	position: fixed;
	top: 45%;
	left: 0;
	z-index: 999;
}

nav#scrollNav ul {
	padding: 0; margin: 0;
}

nav#scrollNav ul li {
	background: #b00001; color: white;
	margin-bottom: 8px;
	display: block;
}

nav#scrollNav ul li a:link , nav#scrollNav ul li a:focus, nav#scrollNav ul li a:visited{ color: #FFFFFF;  margin: 0; padding: 12px; display: block;}
nav#scrollNav ul li a:hover { background-color: #B8312F; }
*/

@media only screen and (min-width: 1024px) {
	hs.xl {display: block;}
	h2.sm {display: none;}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
	/* CSS */
	h2.xl {display: none;}
	h2.sm {display: block;}
}