@font-face { font-family: 'scifly'; src: url('fonts/SciFly-Sans.ttf') format('truetype'); }

@font-face {
    font-family: 'kglifeismessy';
    src: url('../fonts/kglifeismessy-webfont.woff2') format('woff2'),
         url('../fonts/kglifeismessy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	
}

@font-face {
    font-family: 'DTL Argo T Regular';
    src: url('../fonts/DTL Argo T Regular/DTL Argo T Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
	
}

@font-face {
    font-family: 'DTL Argo T Light';
    src: url('../fonts/DTL Argo T Regular/DTL Argo T Light.otf') format('opentype');
    font-weight: lighter;
    font-style: normal;
	
}

@font-face {
    font-family: 'DTL Argo T Medium';
    src: url('../fonts/DTL Argo T Regular/DTL Argo T Medium.otf') format('opentype');
    font-weight: medium;
    font-style: normal;
	
}

@font-face {
    font-family: 'DTL Argo T Regular';
    src: url('../fonts/DTL Argo T Regular/DTL Argo T Regular.otf') format('opentype');
    font-weight: Regular;
    font-style: normal;
	
}

@font-face {
    font-family: 'DTL Argo T Ultra Heavy';ß
    src: url('../fonts/DTL Argo T Regular/DTL Argo T Ultra Heavy.otf') format('opentype');
    font-weight: Ultra Heavy;
    font-style: normal;
	
}

body {
	font-family: "Source Sans Pro", "Open Sans", Verdana, sans-serif;
	font-weight: 300;
	font-size: 1em;
	padding: 1% 5% 0 5%; margin: 0;
	color: #666;
}
header, main, footer, section, div, article, aside { box-sizing: border-box; width: 100%; padding: 1em;}
/*h1,h2,h3, h5{ text-align:center; font-family: "DTL Argo T Medium", "Source Sans Pro", "Open Sans", Verdana, sans-serif; font-weight: 600; font-size: 1.8em;}*/
h1 {font-family: "kglifeismessy", "Source Sans Pro", "Open Sans", "Verdana, sans-serif"; font-size: 6.5em; padding: 0 0 0 0; margin: 0; color: #FFFFFF; font-weight: 50; opacity: 1;}
h2 {font-family: "kglifeismessy", "Source Sans Pro", "Open Sans", "Verdana, sans-serif"; font-size: 4.5em; padding: .278em 0 .278em 0; margin: 0 0 0 0;; color: #E62252; font-weight: 100; line-height: 1em;}
h2.white {position: relative; top: 2.7em; font-family: "kglifeismessy", "Source Sans Pro", "Open Sans", "Verdana, sans-serif"; font-size: 6em; padding: 0em 0 0 0; margin: 0; color: #FFFFFF; font-weight: 100; transform: rotate(-2deg)}
.vermessung h2.white {position: relative; top: 0; text-align: center; font-family: "kglifeismessy", "Source Sans Pro", "Open Sans", "Verdana, sans-serif"; font-size: 6em; padding: 0em 0 0 0; margin: 0; color: rgb(255, 255, 255); font-weight: 100; transform: rotate(-2deg)}
.hilf h2.white {position: relative; top: 0.225em; text-align: center; font-family: "kglifeismessy", "Source Sans Pro", "Open Sans", "Verdana, sans-serif"; font-size: 8em; padding: 0em 0 0 0; margin: 0; color: rgb(255, 255, 255); font-weight: 100; transform: rotate(-2deg)}
h3 {display: table-cell; vertical-align: middle; font-famil	y: "DTL Argo T Light", "Source Sans Pro", "Open Sans", "Verdana, sans-serif" ; font-size: 1.5em; padding: 1em 0 1em 0;margin: 0;}
h4 {margin: 0 0 0 0; font-size: 2.5em; font-weight: normal;}
h5 {color: white; margin-top: 0.5em;}
p {font-size:1.2em; margin-top: 0.4em; font-family: "DTL Argo T Regular", "Source Sans Pro", "Open Sans", "Verdana, sans-serif"; font-weight: 100;}
ul { list-style: none; margin: 0; padding: 0;}
//ul li { float:left; }
ul:after {clear: both;}
a:link, a:visited, a:active  { text-decoration: none; color: white;}
a:focus {outline-style: double; outline-color: blue;}
main {background-image: url("../../img/Stadtkarte_1024px_png.png"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed;}
/*.slideContainer:focus-within {border-style: solid; border-color: blue;}*/

/*--- Texthervorhebung Schon gewusst? ---*/
.leicht	{
font-size: 1.3em; font-weight: 600;}
.mittel {
font-size: 1.6em; font-weight: 600;}
.schwer {
font-size: 2em; font-weight: 600;}

/*--- Spezialüberschriften--- */

.it h2.white {position: relative; top: 0; text-align: center; font-family: "kglifeismessy", "Source Sans Pro", "Open Sans", "Verdana, sans-serif"; font-size: 6em; padding: 0em 0 0 0; margin: 0; color: rgb(255, 255, 255); font-weight: 100; transform: rotate(-2deg)}
#sublineit {
	position: relative; top: 0; bottom: 0em; left: 0; display: inline-block; font-family: "DTL Argo T Medium"; font-size: 1.25em; font-weight: normal; background-color: none; color: #ffffff; padding: 0.15em 0.4em 0.1em 0.4em;
}

div.it {background: 
	url(../../img/it-fachkraft.jpg) no-repeat;  background-size: 100% auto;
	width: 100%; height:auto; font-size: 0.9em; margin: 20px 0 15px 0%; color: white; padding: 0.75em; float: none;	}

#schongewusst
{background-color: rgba(230, 50, 141, 0.8); padding: 0em; margin: 1.5%; width: 97%;} 
#hauptinhalt
{padding: 0;}
#header {padding: 0;}
p
#subline {
position: relative; top: -0.4em; display: inline-block; font-family: "DTL Argo T Medium"; font-size: 1.5em; font-weight: normal; background-color: #E62252; color: #ffffff; padding: 0.15em 0.4em 0.1em 0.4em; margin: -0.9em; transform: rotate(-2deg);
	}
	
#sublineinv {
position: relative; top: 0em; display: inline-block; font-family: "DTL Argo T Medium"; font-size: 1.8em; font-weight: normal; background-color: #FFFFFF; color: #E62252; padding: 0.15em 0.4em 0.1em 0.4em; margin: -0.9em; transform: rotate(-2deg);
	}

#sublineinv2 {
		position: relative; top: 0em; display: inline-block; font-family: "DTL Argo T Medium"; font-size: 3em; font-weight: normal; background-color: #FFFFFF; color: #E62252; padding: 0.15em 0.4em 0.1em 0.4em; margin: 0.6em 0 0 0em; transform: rotate(-2deg);
			}
	
#sublineinvgreen {
position: relative; top: 1em; bottom: 0.5em; display: inline-block; font-family: "DTL Argo T Medium"; font-size: 1.5em; font-weight: normal; background-color: none; color: #ffffff; padding: 0.15em 0.4em 0.1em 0.4em;
	}
#sublinebottom {
display: inline-block; font-family: "DTL Argo T Medium"; font-size: 2.6em; font-weight: normal; background-color: #FFFFFF; color: #E62252; padding: 0.15em 0.4em 0.1em 0.4em; margin: 2.5em 2em 2.5em 2em; transform: rotate(-2deg);
	}

#sublinevermessung {
	position: relative; top: 0; bottom: 0em; left: 0; display: inline-block; font-family: "DTL Argo T Medium"; font-size: 1.25em; font-weight: normal; background-color: none; color: #ffffff; padding: 0.15em 0.4em 0.1em 0.4em;
}

/*--- Logo ---*/
img {max-width: 100%; height: auto; }
#logo {height: 3em; width: auto; padding: 0; margin: 0 0 0.5% 0;}


/*--- spezielle Klassen ---*/
a.button {color: white; background-color: #E62252; padding: 8px 12px; margin-bottom: 0.8em; font-size: 1.5em;}
a.playbutton {color: white; background-color: #E62252; padding: 8px 12px; margin-bottom: 0.8em; font-size: 1em; font-weight: bold;}
a.button:hover {background-color: #c75b6b;}
a.borderButton { color: black; background-color: #DFDFDF; padding: 8px 12px; border: 2px black; margin-right: 8px; display: inline-block;}
a.borderButton:hover {background-color:#EFEEEC ; color: black; }
.width375 { max-width: 375px; margin: 0 auto;}
.width800  { max-width: 800px; margin: 0 auto;}
.width960  { max-width: 960px; margin: 0 auto;}
.width1400  { max-width: 1400px; margin: 0 auto;} 
.width1200  { max-width: 1200px;  margin: 0 auto;}
.maxwidth50 { max-width: 50%;}
.maxwidth33 { max-width: 33%;}
.maxwidth25 { max-width: 25%;}
.container {padding-bottom: 1em; }
.padBot {padding-bottom: 1em; }
.padTop {padding-top: 1em;}
div.schongwusst {width: 49%; font-size: 0.9em; padding: 0.5em; float:left; margin: 0; display: table;}
div.hauptinhalt { padding: 0}
div.quadTeaser { display:table; background-color: #E62252; width: 23%; height: 8em; float: left; font-size: 0.9em; margin: 0 1% 20px 1%; color: white; padding: 0.75em; }
div.quadTeaser:hover { background-color: #6C655F; opacity: 0.8; }
div.quadTeaser:active { background-color: #FFFFFF; opacity: 0.8; color: #E62252; }
div.quadTeaser.quadTeaseryellow {background-color: #f6a033;}
div.quadTeaser.quadTeaseryellow:hover {background-color: #6C655F; opacity: 0.8; }
div.quadTeaser.quadTeaseryellow:active { background-color: #FFFFFF; opacity: 0.8; color: #f6a033; }
div.singleTeaser { background-color: #E62252; width: 98%; height: 8em; float: left; font-size: 0.9em; margin: 1%; color: white; padding: 0.75em; display:table;}
div.singleTeaser:hover { background-color: #6C655F; opacity: 0.8; }
div.singleTeaser:active { background-color: #FFFFFF; opacity: 0.8; color: #f6a033; }
div.singleTeaseryellow { background-color: #f6a033; width: 98%; height: 8em; float: left; font-size: 0.9em; margin: 1%; color: white; padding: 0.75em; display:table;}
div.singleTeaseryellow:hover { background-color: #6C655F; opacity: 0.8; }
div.singleTeaseryellow:active { background-color: #FFFFFF; opacity: 0.8; color: #f6a033; }
div.textboxlinks {width: 100%; float: left; font-size: 1em; padding: 1em; margin: 0 1% 20px 0%; background: rgba(255, 255, 255, 0.9);}
div.nurtextbox {width: 98%; float: left; font-size: 1em; padding: 1em; margin: 0 2% 0px 0%; background: rgba(255, 255, 255, 0.9);}
div.imageboxright {width: 48%; float: left; font-size: 0.9em; padding: 0; margin: 0 1% 20px 0%; text-align: left;}
div.tripleTeaser { background-color: #c75b6b; margin:0 auto;width:33.33%; height:280px; float: left; font-size: 0.9em;}
div.linkbox { background-color: white; padding: 0px; border: 1px solid grey;margin-bottom: 0.8em;}
	div.linkbox h4 { background-color: grey; color: white; padding: 0.5em 0 0.5em 0.5em; margin: 0;}
	div.linkbox a { color: #b71445; display: block; padding: 8px 0 8px 8px; border-bottom: 1px solid grey;} 
	div.linkbox a:last-of-type {border: none;}
	div.linkbox a:hover {color: white; background-color: #c75b6b; }
div.contentTeaser { border: 1px solid #b71445; max-width:320px;width:100%;}
div.contentTeaser a {width: 100%; color: #000; display: block;}
div.contentTeaser a:hover {background-color: #c75b6b;}
div.contentTeaser a h4{margin: 0 0 0 10px; padding: 0.5em 0.5em 0.5em 12px; background: url("/img/linkextern.png") no-repeat center left;}
div.contentTeaser a p {padding: 0 0.5em 0.5em 0.5em; margin: 0; font-size: 0.8em;}	
.center { text-align: center; padding: 6px;}
.weiss {background-color: #FFFFFF; }
.schwarz{background-color: #000000;}
.hellgrau {background-color: #EFEEEC;}
.mittelgrau {background-color: #DFDFDF;}
.dunkelgrau {background-color: #6C655F;}
.hellrot {background-color: #ED1C24;}
.rot { background-color: #B00000;}
.dunkelrot {background-color: #651012;}
.blau { background-color: #306A9A;}
.mittelblau { background-color: #234C6F;}
.dunkelblau { background-color: #152F44;}
.tuerkis {background-color: #378D9B;}
.mitteltuerkis {background-color: #286670;}
.dunkeltuerkis {background-color: #183E44;}
.lila {background-color: #9C4E9A;}
.mittellila {background-color: #71386F;}
.dunkellila {background-color: #452244;}
.fontWhite { color: #FFFFFF;}
.pink {background-color: rgba(230, 50, 141, 0.8)}
div.clear { clear: both; padding:0; }
div.links {float: left}
div.recht {float: right}
p.rotebox { position: relative; top: 4.2em; background-color: rgba(230, 35, 85, 0.8); display: inline-table; font-family: "DTL Argo T Medium"; font-size: 3.5em; font-weight: normal; color: #ffffff; padding: 0 1em 0em 1em; margin: 0em; transform: rotate(-2deg);}
p.roteboxhilf { position: relative; top: 0em; background-color: #ffffff; display: inline-table; font-family: "DTL Argo T Medium"; font-size: 2.5em; font-weight: normal; color: #2D4E91; padding: 0.12em .38em 0.12em .38em; margin: 0em; transform: rotate(-2deg);}
p.blau { position: relative; top: 0em; left: 0em; background-color: rgba(50, 83, 150, 0.8); c1c3; display: inline-table; font-family: "DTL Argo T Medium"; font-size: 3.6em; font-weight: normal; color: #ffffff; padding: 0 0.5em 0.1em 0.5em; margin: 0em; transform: rotate(-2deg);}
p.gruen { position: relative; top: 0em; left: 0em; background-color: rgba(101, 194, 199, 0.8); c1c3; display: inline-table; font-family: "DTL Argo T Medium"; font-size: 3.6em; font-weight: normal; color: #ffffff; padding: 0 0.5em 0.1em 0.5em; margin: 0em; transform: rotate(-2deg);}
p#subline {
	font-size: 1em;
	text-align: left;
	padding: 0px;
	margin: 0px;
	line-height: 1.45em;
	min-height: 4.5em;

}
div.videoTeaser {
	padding: 0.1em;
	margin: 0px;
}


/*--- HEADER ---*/
header {
	position: absolute;
	text-align:center;	
	z-index: 999;
	}

/*--- Footer ---*/
.footer {color: #FFFFFF; padding: 3em;}


#someiconslinks {
width: 50%;
float: left;
}

#someicons {
width: 50%;
float: right;
align: right;
}
img.some {
margin: 0.5em;
float: right;
}

#footerspalte {
	width: 50%;
	float: left;
	text-align: left;
}
#footerspalte2 {
	width: 50%;
	float: left;
	text-align: right;
}

section#machkoeln { 
background: rgba(255, 255, 255, 0.7); }

section#videos { 
background: rgba(255, 255, 255, 0.7); margin: 0 1% 20px 0%;}
	

/*IMAGE TEASER */
section.imgTeaser {
	background-color:#007095;
	background-image: url("../../img/smartcity.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: //fixed;
	height: 35vh;
	color: black;
	padding: 5% 0 0 0 ;
 } 
 section.imgTeaser {position: relative;margin-bottom: 20px;}
 section.imgTeaser div.respImgCaption {position: absolute; top: 40%; }
 section.imgTeaser2 {position: relative;margin-bottom: 20px;}
 section.imgTeaser2 div.respImgCaption {position: absolute; top: 40%; }


/* RESPONSIVE IMAGE*/
section#hilfkoeln {background: rgba(45, 78, 145, 0.9); width: 100%; height:auto; font-size: 0.9em; margin: 0 0 20px 0%; color: white; padding: 0.75em;}
section.respImg {background: rgba(230, 35, 85, 0.8); width: 100%; height:auto; float: left; font-size: 0.9em; margin: 0 0 20px 0; color: white; padding: 0.75em;}
section.respImg div.respImgCaption {position: absolute; top: 40%; }
section.respImg div.respImgCaption h2{display: inline-block;}
section.respImg div.respImgCaption p {display: inline;}
section#neuebanner {padding: 0px;}

/* RESPONSIVE IMAGE*/
div.azubiordnung {background: 
url(../../img/Ordnung_Frau.png) no-repeat,
url(../../img/Ordnung_BG.png) no-repeat;  background-position: center bottom;
width: 49%; height:500px; font-size: 0.9em; margin: 0 1% 20px 0%; color: white; padding: 0.75em; float: left}
	
div.ordnung {background: 
url(../../img/Verkehr_Mann.png) no-repeat,
url(../../img/Verkehr_BG.png) no-repeat;  background-position: center bottom;
width: 49%; height:500px; font-size: 0.9em; margin: 0 0 20px 1%; color: white; padding: 0.75em; float: left;	}

div.vermessung {background: 
	url(../../img/ingenieur_innen.jpg) no-repeat;  background-size: 100% auto;
	width: 100%; height:auto; font-size: 0.9em; margin: 20px 0 15px 0%; color: white; padding: 0.75em; float: none;	}

section.respImg {background: rgba(230, 34, 82, 0.8); width: 100%; height:auto; float: left; font-size: 0.9em; margin: 20px 0 20px 0%; color: white; padding: 0.75em;}
section.respImg div.respImgCaption {position: absolute; top: 40%; } 
section.respImg div.respImgCaption h2{display: inline-block;}
section.respImg div.respImgCaption p {display: inline;}

/*TRIPLETEASER NO MARGINS*/ 
div.tripleTeaser.tt1 {background-image: url("../../img/jugendliche_bibliothek_original.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.tripleTeaser.tt2{ background-image: url("../../img//buecherbus.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.tripleTeaser.tt3 { background-image: url("../../img/makerbot.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}

/* FIGURE IMAGES */
figure {margin: 0;}
figure.figLeft {float: left; margin-right: 0.8em;}
figure.figRight {float: right; margin-left: 0.8em;}
figure figcaption { font-size: 0.7em;}

/*SOCIAL ICONS*/
article div.socialLinks {padding-top: 0.5em;}
article.socialIcons { padding: 3em; text-align: center;}
article.socialIcons h3 {display: inline; margin-right: 1em; }
article.socialIcons a {margin-right: 1em; }
article.socialIcons img { margin-bottom: 1.5em; margin-left: 1.2em; max-width: 300px; height: auto; }
#videos div.quadTeaser { background-color: unset;}	

h3.video {
	padding: 0;
	margin: 0;
}

div.quadTeaser.kachel
{
}

#bitv {
	color: #0000FF;
	text-decoration: underline;
}