@charset "utf-8";
/* ----- Reset Style ----- */
* { border:0; margin:0; padding:0; background:transparent; vertical-align:baseline; font-size:100%; }
/* inherit (z.B. font-style:inherit;) funktioniert nicht mit IE7-, daher erstmal nicht nutzen */

@font-face {
    font-family: "theMix5";
    src: url("../fonts/TheMixB-W5Plain.otf");
}
@font-face {
    font-family: "theMix5i";
    src: url("../fonts/TheMixB-W7Bold.otf");
}

/*
@font-face {
    font-family: "theMix5";
    src: url('../fonts/TheMixB-W5Plain-webfont.eot');
    src: url('../fonts/TheMixB-W5Plain-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TheMixB-W5Plain-webfont.woff2') format('woff2'),
         url('../fonts/TheMixB-W5Plain-webfont.woff') format('woff'),
         url('../fonts/TheMixB-W5Plain-webfont.ttf') format('truetype'),
         url('../fonts/TheMixB-W5Plain-webfont.svg#themixbw5_plain') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "theMix5i";
    src: url('../fonts/TheMixB-W7Bold-webfont.eot');
    src: url('../fonts/TheMixB-W7Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TheMixB-W7Bold-webfont.woff2') format('woff2'),
         url('../fonts/TheMixB-W7Bold-webfont.woff') format('woff'),
         url('../fonts/TheMixB-W7Bold-webfont.ttf') format('truetype'),
         url('../fonts/TheMixB-W7Bold-webfont.svg#themixbw7_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/


/*
==================================================
Grundeinstellungen
==================================================
*/

html 	{ background: #53534c; font-size: 13px; overflow-y:scroll; overflow-x:hidden;}
body 	{ position:relative; width:100%; min-height:100%; margin: 0; background: #fff; color:#53534c; text-align:left; font:1em/1.5em theMix5, Helvetica, sans-serif; overflow: hidden; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}


/* ----- Standardelemente ----- */
h1, h2, p, table, dl, ul, ol, blockquote, form {margin-bottom:10px;}
/*b, strong, h1, h2, h3, h4, h5, dt, th, caption {text-transform:uppercase;}*/
b, strong, h1, h2, h3, h4, h5, h6, dt, th, caption {font-weight:normal;}
em, q {font-style:italic;}

.text-left 	{ text-align: left; }
.text-right 	{ text-align: right; }
.text-center { text-align: center; }

h1, h2, h3, h4, h5, h6 { margin: 10px 0; font-family: inherit; font-weight: normal; line-height: 20px; color: inherit; text-rendering: optimizelegibility; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; line-height: 1; color: #999999; }

h1, h2, h3 { line-height: 40px; }
h1 { font-size: 38.5px; }
h2 { font-size: 31.5px; }
h3 { font-size: 24.5px; }
h4 { font-size: 17.5px; }
h5 { font-size: 14px; }
h6 { font-size: 11.9px; }

h1 small { font-size: 24.5px; }
h2 small { font-size: 17.5px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }

sup {font-size:10px; position:relative; bottom:0.5em; }
sub {font-size:10px; position:relative; top:0.25em; }

ul {list-style:square outside;}
ol {list-style:decimal outside;}

li  { margin:0 0 0 42px; }
ul > li  { margin: 0 0 0 38px; padding-left:4px; }

/* Placeholder-Text heller */
	:-ms-input-placeholder {color:#999;}
	::-webkit-input-placeholder {color:#999;}
	:-moz-placeholder {color:#999;}
	::placeholder {color:#999;}

/* Hintergrundfarbe von ausgewähltem Text vorgeben*/
	::-moz-selection {background:#000; color:#fff;}
	::selection {background:#000; color:#fff;}

img, object, embed, video {max-width:100%; display:block;}

a { text-decoration: none; color:#53534c; }
a:link, a:visited {} 
a:hover {}

/*Skip-Menü*/
	.for-accessibility { position:absolute; left:-3000px; top:-3000px; width:1px; height:1px;}
	.for-accessibility:focus {left:5px; top:0; width:auto; height:auto; padding:0; z-index:2000;}
	del.schutz {text-decoration:none;} /*Für Standard E-Mail-Adressen-Spamschutz*/



/* ----- Tabellen ----- */
table { border-collapse:collapse; text-align:left;}
td, th { padding: 6px 10px 10px; border:1px solid #d7d7d7; vertical-align: top; }
table p { margin: 0 0 8px; }
table p:last-child { margin: 0;}
caption { padding:0 0 3px; color:#aaaaaa; font-size: 18px; line-height:22px;}


/* ----- Formulare ----- */
input, select, textarea {border:1px solid #aaa; color:#666; background-color:#fff; padding:1px 3px; float:left; font-family:Arial, Helvetica, sans-serif; width:200px;}
select { width:208px; padding: 0; }
textarea { width:300px; height: 10em; }
label { width:160px; float: left; margin: 1px 6px -1px 0; border-bottom: 1px dotted #ccc; }
label[for] { cursor:pointer; }

.input-text { }
input[type="file"] {width:350px; padding:5px;}

form {overflow:hidden; clear: both; }
fieldset { float:left; clear: both; width:100%; margin-bottom:20px; }
form div { float:left; clear: both; width:100%; padding-bottom:5px; position:relative;}

form p { width:100%; margin-top: 12px; float:left; }
form h2 + p, form h2 + div p, form p + div p { margin-top:0; }
input[type="checkbox"], input[type="radio"] { position:absolute; left:166px; top:3px; width:13px; height:13px; border:0; background:transparent;}
input.btn, input[type="submit"] { width:208px; padding: 3px 0; margin: 10px 0 0 166px; clear: both; font-weight: bold;}


/*
==================================================
Klassen
==================================================
*/

/* ... */

/*
==================================================
Fixes
==================================================
*/

#js #site-cover { display: none; }


/*
==================================================
Header, Footer, Seiteninhalte
==================================================
*/

/*
#headerWrapper 				{ padding: 3em 0 0 15.5em; }
#headerWrapper			+ * { clear: both; }

#headerWrapper				{ padding: 3em 0 0 15.5em; }

#footer, footer 			{ clear:both; padding: 10px 30px; background: #53534c; color: #ffffff; overflow: hidden;}
#footer a , footer a 		{ color: #ffffff; text-decoration: none; border-bottom: 1px solid #fff; }

#logo {position: absolute; float:left; width: 70px; left: 2.5em; }
#logo img {display:block; width:100%; height: auto;}

#menu-toggle 	{ display: none;  }

/*footer a, #footer a		{ text-decoration:none; }
#footer-link	{ padding: 2.5em; }
#ie-warning		{ display: none; }

#header-wrapper + * { clear: both; }
header p a, #header-wrapper p a { /* display: inline-block; border-bottom: 2px solid #666; margin-bottom: 4px;   text-decoration: underline; }

article p,
header p { width: 76%; }

#advice { padding: 3em 2em 3em 15.5em; clear: both; width: 100%; background: #eeeeee /*#53534c;
	-webkit-box-sizing:border-box; 
		-moz-box-sizing:border-box; 
			box-sizing:border-box;
}



#back-to-references {
	position: absolute;
	top: 3em;
	right: 150px;
	text-align: left;
	width: 232px;
}
*/


/* 7.61em */



/* ============================================================================ */
/*										Header									*/
/* ============================================================================ */
/* li.act = ist in Rootline (= aktueller Bereich)
/* li.cur = ist genau die aktuelle Seite
*/

/*  */
#headerWrapper						{ padding: 3em 0 3.46em 2.5em; }
#logo								{ width: 70px; height: auto; float: left; }


/* menue */
nav.mainmenuWrapper					{ margin: 0 0 0 7.61em; display: inline-block; overflow: hidden; }
ul.mainmenu							{ margin: 0; }
ul.mainmenu li 						{ margin: 0; margin-right: 20px; padding: 0; float: left; list-style-type: none;}
ul.mainmenu li a 					{ font-size: 19px; }

.menuBreadcrumbsWrapper							{ padding-top: 45px; padding-left: 13em; display: block; overflow: hidden; }
.menuBreadcrumbsWrapper > ol					{ margin: 0;}
.menuBreadcrumbsWrapper li 						{ margin: 0; padding: 0; float: left; list-style-type: none; }
.menuBreadcrumbsWrapper li:after 				{ content: ">" }
.menuBreadcrumbsWrapper li:last-child a		 	{ margin-right: 0; }
.menuBreadcrumbsWrapper li:last-child:after 	{ display: none; }
.menuBreadcrumbsWrapper li a 					{ margin-right: 7px; }
.menuBreadcrumbsWrapper li + li					{ padding-left: 7px; }



/* zurueck button */
#backTo								{ position: absolute; top: 3em; right: 150px; text-align: left; }



/* ============================================================================ */
/*									Contentbereich								*/
/* ============================================================================ */

/* inhaltsbox und ein Teil footer */
.content 							{ margin-bottom: 4.5em; padding-left: 15.5em; overflow: hidden; }
.content div						{ float: left; }
.content + *						{ clear: both;}
.content p							{ width: 76%; }

#mainFooter a,
.contentBox a						{ text-decoration: underline; }

/* seitenmenue */

.sitemenu 							{ margin-right: 150px; float: right !important; width: auto !important; }
.sitemenu li 						{ margin: 0; padding: 0; list-style-type: none; }
.sitemenu li:last-child				{ padding-top: 1em; }

.sitemenu li:nth-child(1):hover a	{ color: #33FF00; }
.sitemenu li:nth-child(2):hover a	{ color: #00FFFF; }
.sitemenu li:nth-child(3):hover a	{ color: #FF00CC; }
.sitemenu li:nth-child(4):hover a	{ color: #B7DE00; }
.sitemenu li:nth-child(5):hover a	{ color: #FF761B; }
.sitemenu li:nth-child(6):hover a	{ color: #0033CC; }


/* Untermenupunkte vom Content */
.submenu							{ margin-bottom: 10px; width: 76%; }
.submenu li							{ position: relative; padding: 0; padding-right: 9.5px; margin: 0; text-decoration: underline; float: left; list-style-type: none;}
.submenu li:after					{ content: "|"; position: absolute; right: 3px;}
.submenu li:last-child:after		{ display: none;}


/* ============================================================================ */
/*									Scrollslider								*/
/* ============================================================================ */

.scroll-slider .advice 					{ width: 100%; }
.scroll-slider .advice > div 			{ padding: 3em 2em 3em 15.5em; }
.advice *, #advice * 					{ line-height: 1.8em; }
.advice h4, #advice h4 					{ font-size: 1em; }
.advice p, #advice p 					{ margin: 0px; font-size: 1em; width: 80%; margin-right: 10px; line-height: 2.4em; }
.advice a, #advice a 					{ display: inline-block; }
.advice a, #advice a, #searchform #s 	{ margin: 0px; border: 3px solid #53534c; padding: 5px 10px; margin-top: 10px;}
.advice a:hover, #advice a:hover 		{ background: #53534c; color: #ffffff;}
.advice.img-wrapper 					{ display: table;}
.advice.img-wrapper div 				{ display: table-cell; vertical-align: middle; }


.scroll-slider-wrap 					{ overflow: hidden; width: 100%;  }
.scroll-slider							{ position: relative; width: 100%; list-style: none; padding: 0; margin: 0;
	background-color: #eee;
	
	
}

.scroll-slider > * { display: block; width: 100%; background-color: #eee; padding: 0; margin: 0; overflow: hidden; top: 0;
	-moz-box-shadow:    0 1px 1px 1px rgba(33,33,33,0.4);
	-webkit-box-shadow: 0 1px 1px 1px rgba(33,33,33,0.4);
	box-shadow:         0 1px 1px 1px rgba(33,33,33,0.4);
 }
 
 .scroll-slider > *.color-overlay {
	-moz-box-shadow:    none;
	-webkit-box-shadow: none;
	box-shadow:         none;
 }
 
 .scroll-slider > *.color-overlay 			{ display: none; }
 .js .scroll-slider > *.color-overlay 		{ display: block; }
 
 
.scroll-slider > *.color-overlay .overlay 				{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.4; }

.scroll-slider > * img									{ display: block; height: auto; margin: 0 auto; max-width: 100%; }
.scroll-slider > * div.full img							{ display: block; width: 100%; height: auto; margin: 0 auto; max-width: none; }

.scroll-slider-wrap.swipe 								{ overflow: hidden; position: relative; }
.scroll-slider-wrap.swipe > * 							{ overflow: hidden; position: relative; }
.scroll-slider-wrap.swipe > * > * 						{ float:left; width:100%; position: relative; }

.scroll-slider-wrap > ul.indicator 						{ position: absolute; z-index: 999; top: 10px; right: 10px; overflow: hidden; list-style: none; }
.scroll-slider-wrap > ul.indicator > li 				{ float: left; margin: 1px; padding: 0; width: auto; }
.scroll-slider-wrap > ul.indicator > li > span 			{ display: block; width: 10px; height: 10px; border: 1px solid #bbb; background: #fff; }
.scroll-slider-wrap > ul.indicator > li.active > span 	{ background: #53534c; border-color: #53534c; }


/* Bilder in Bereich Kompetenzen auf initial stellen */
#skills + .scroll-slider div.full > img 				{ width: initial !important; }

/* ============================================================================ */
/*										Teaser									*/
/* ============================================================================ */

.teaser * 						{
	-ms-transition:		 	all 300ms ease-in-out; 
	-webkit-transition: 	all 300ms ease-in-out; 
	-moz-transition: 		all 300ms ease-in-out;
	-o-transition: 			all 300ms ease-in-out;
	transition: 			all 300ms ease-in-out;
}

.teaser 						{ margin-bottom: 0px; overflow: hidden; background-color: #e5e5e5; }
.teaser > *						{ margin:0; padding:0; overflow:hidden; position:relative; width:20%; float:left; list-style:none; }
/*.teaser > * p 					{ opacity:0; position:absolute; z-index:3; top:10%; left:10%; width: 80%; text-transform:uppercase; color:#fff; font-size: 21px; font-weight: bold;}*/
.teaser > * h3 					{ margin: 0; top:10%; left:10%; width: 80%; z-index:3; opacity:0; color:#fff; text-transform:uppercase; line-height: inherit; font-size: 21px; font-weight: bold;}
.newsTeaser .teaser > * h3		{ color: #53534c; }
.teaser > * span.date 			{ margin-top: 0.5em; display: block; }
.teaser > * span.description 	{ margin-top: 0.5em; display: block; font-size: 13px; font-weight: normal; }
.teaser > *:hover p 			{ opacity:1;}
.teaser > *:hover h3 			{ opacity:1;}
.teaser > * .overlay 			{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; opacity: 0.4;
	-ms-transition:		 	all 300ms ease-in-out; 
	-webkit-transition: 	all 300ms ease-in-out; 
	-moz-transition: 		all 300ms ease-in-out;
	-o-transition: 			all 300ms ease-in-out;
	transition: 			all 300ms ease-in-out;
}

.teaser > * img:not(.cssda) { position:relative; z-index:1; height: auto; opacity: 0.7;
	-ms-transform:		 scale(1.0) translateZ(0);
	-webkit-transform: scale(1.0) translateZ(0);
	-moz-transform: scale(1.0) translateZ(0);
    -o-transform: scale(1.0) translateZ(0);
    transform: scale(1.0) translateZ(0);
}

.teaser > *:hover .overlay { opacity: 0.8; }

.teaser > *:hover img:not(.cssda) {
	-ms-transform:		 scale(1.0) translateZ(0);
	-webkit-transform: scale(1.5) translateZ(0);
    -moz-transform: scale(1.5) translateZ(0);
    -o-transform: scale(1.5) translateZ(0);
}

.teaser > * img,
/*.teaser > * p				{
	-ms-transition:		 	all 300ms ease-in-out; 
	-webkit-transition: all 300ms ease-in-out; 
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}*/
.teaser > * h3				{
	-ms-transition:		 	all 300ms ease-in-out; 
	-webkit-transition: all 300ms ease-in-out; 
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.teaser .caption > h3 > p {   display: block; font-size: 13px; margin-top: 0.5em; }


.caption 					{ position: absolute; top: 10%; left: 10%; width: 80%; z-index: 3; }
.caption > h3				{ opacity: 0; text-transform: uppercase; font-size: 21px; font-weight: 500; line-height: inherit; }
.caption > p 				{ margin-top: 0.5em; opacity: 0; text-transform: uppercase; font-size: 13px; font-weight: 100; color: #fff; }


/* ============================================================================ */
/*									Footer										*/
/* ============================================================================ */

#mainFooter p + p				{ margin: 0; padding: 2.5em; background-color: #53534c; color: #fff; }
#mainFooter p + p * 			{ padding: 0 2px; color: #fff !important; }

#mainFooter p:first-child		{ margin: 0; padding: 3em 2em 3em 15.5em; background-color: #eeeeee; line-height: 3.8em;}
#mainFooter p:first-child a		{ margin: 10px 0 0 20px; padding: 5px 10px; text-decoration: none; border: 2px solid #53534c; white-space: nowrap;}

/*
#mainFooter 					{ background-color: #53534c; }
#mainFooter  					{ padding: 2.5em; }
#mainFooter * 					{ padding: 0 2px; color: #fff !important; }
#mainFooter p 					{ margin: 0; }
.innerFooter > div				{ padding: 2.5em; }
*/


/*

#mainFooter p + p				{ margin: 0; padding: 2.5em; background-color: #53534c; color: white;}
#mainFooter p + p * 			{ padding: 0 2px; color: #fff !important; }
#mainFooter p + p p 			{ margin: 0; }

#mainFooter p:first-child		{ margin: 0; padding: 2.5em; text-align: left; width: 80%; font-size: 1em; line-height: 2.4em;}
#mainFooter p:first-child a		{ margin: 0; margin-top: 10px; padding: 5px 10px; border: 3px solid #53534c; text-decoration: none;}



#mainFooter p + p				{ padding: 2.5em; background-color: #53534c; }
#mainFooter p + p * 			{ padding: 0 2px; color: #fff !important; }
#mainFooter p + p p 			{ margin: 0; }

#mainFooter p:first-child		{ margin: 0; padding: 2.5em; text-align: left; width: 80%; font-size: 1em; line-height: 2.4em;}
#mainFooter p:first-child a		{ margin: 0; margin-top: 10px; padding: 5px 10px; text-decoration: none; border: 3px solid #53534c; }
*/




#to-top { position: absolute; right: 0; bottom: 0; text-decoration: none !important; font-size: 48px; line-height: 40px;	padding: 30px 30px 14px 30px !important; font-family: Trebuchet; font-weight: bold; border: 0 none; 
	/*border-radius: 50%;*/
	-moz-transition: 0.2s ease-out;
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}

#to-top:hover 				{ color: #8A8A82; }


/* ============================================================================ */
/*									Farbklassen									*/
/* ============================================================================ */


li.cat-item-4  a:hover 	{color: #33FF00; }
li.cat-item-5  a:hover 	{color: #00FFFF; }
li.cat-item-6  a:hover 	{color: #FF00CC; }
li.cat-item-7  a:hover 	{color: #B7DE00; }
li.cat-item-9  a:hover 	{color: #FF761B; }
li.cat-item-11 a:hover 	{color: #0033CC; }


.scroll-slider.cat-empty div.overlay			{ background-color: #53534c; -webkit-transform: translateZ(0px); zoom: 1;}
.scroll-slider.cat-40 div.overlay				{ background-color: #33FF00; }
.scroll-slider.cat-35 div.overlay 				{ background-color: #00FFFF; }
.scroll-slider.cat-36 div.overlay				{ background-color: #FF00CC; }
.scroll-slider.cat-37 div.overlay			 	{ background-color: #B7DE00; }
.scroll-slider.cat-38 div.overlay				{ background-color: #E7F906; }
.scroll-slider.cat-39 div.overlay				{ background-color: #0033CC; }

.teaser > * .overlay 							{ background-color: #E7F906; } /* rgb(83,83,76);	*/
.teaser > *.cat-40 .overlay 					{ background-color: #33FF00; } /* rgb(85,96,32);	*/ 
.teaser > *.cat-35 .overlay 					{ background-color: #00FFFF; } /* rgb(102,51,102);	*/ 
.teaser > *.cat-36 .overlay 					{ background-color: #FF00CC; } /* rgb(0,133,202); 	*/ 
.teaser > *.cat-37 .overlay 					{ background-color: #B7DE00; } /* rgb(183,222,0); 	*/ 
.teaser > *.cat-38 .overlay 					{ background-color: #FF761B; } /* rgb(255,118,27); 	*/ 
.teaser > *.cat-39 .overlay 					{ background-color: #0033CC; } /* rgb(0,218,149); 	*/ 

.teaser > *.cat-38 h3							{ color: #53534c; } 


/* ============================================================================ */
/*										Grids									*/
/* ============================================================================ */

.col-1 		{ width: 8.33%;  }
.col-2		{ width: 16.66%; }
.col-3		{ width: 25%; 	 }
.col-4		{ width: 33.33%; }
.col-5		{ width: 41.66%; }
.col-6		{ width: 50%; 	 }
.col-7		{ width: 58.33%; }
.col-8		{ width: 66.66%; }
.col-9		{ width: 75%; 	 }
.col-10		{ width: 83.33%; }
.col-11		{ width: 91.66%; }
.col-12		{ width: 100%; 	 }


/* +++ */
.colWidth-1 	{ width: 10%; }
.colWidth-2 	{ width: 20%; }
.colWidth-3 	{ width: 30%; }
.colWidth-4 	{ width: 40%; }
.colWidth-5 	{ width: 50%; }
.colWidth-6 	{ width: 60%; }
.colWidth-7 	{ width: 70%; }
.colWidth-8 	{ width: 80%; }
.colWidth-9 	{ width: 90%; }
.colWidth-10 	{ width: 100%; }











/*
==================================================
Inhalte .col-content
==================================================
*/

/* für et.slider */
.slider-outer 					{ position:relative;}
.slider-mask 					{ overflow:hidden; position:relative;}
.layer img 						{ display:block;}
.layer-counter 					{ display:none;}
.slider-controls 				{ position:absolute; top:100%; width:100%; left:0; height:1%;}
.slider-controls a 				{ position:absolute; top:-5000%; left:0; text-decoration:none; width:20px; height:30px; margin:-15px 0 0; overflow:hidden; text-indent:-100em; background:#000;}
.slider-controls a.btn-forward 	{ left:auto; right:0;}
.slider-controls .menu 			{ margin:-30px auto; float:none;}
.slider-controls li 			{ width:15px; height:15px; background:#e8e6e2; border-radius:50%; cursor:pointer; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 0 3px rgba(0,0,0,0.8); }
.slider-controls li + li 		{ margin-left:10px;}
.slider-controls .act 			{ background:#53534c;}

/* Sorgt für übergangsfreien Wechsel zur Slider-Darstellung.
Anpassen, wenn mehrere layer gleichzeitig zu sehen sein sollen: */

.js .slider-outer > .layer + .layer {display:none;}





.layer 		{ float:left; margin: 0; }

.slider-controls 				{ overflow: initial; background-color: initial; }
.slider-controls ol.menu li 	{ float: left; margin: 0; padding: 0; list-style: none; }


.slider-controls .btn-back,
.slider-controls .btn-forward					{ position: absolute; padding: 10px; height: auto; width: auto; text-indent: 0; font-size: 35px; font-weight: 400; background-color: rgba(255, 255, 255, 0.7); border-radius: 19px;}

.slider-controls .btn-back						{ left: 10px; }
.slider-controls .btn-forward					{ right: 10px !important; }

/*
==================================================
Responsive Gridsystem
==================================================
Funktioniert ähnlich wie Twitter Bootstrap:
row = row
col-X = spanX
*/
.row {clear:both; margin:0 auto; }
.row:after, form:after, .layer-container:after, .slider-outer:after {content:''; line-height:0; clear:both; display:table;}
.row-12 {max-width:1200px;}

.col-9 .row {margin-left:-15px; margin-right:-15px; width:auto;}
body .no-padding {padding:0;}

.row-over {margin: 40px -3000em; padding:40px 3000em; float:left;}
.col-headline {padding-top:40px; padding-bottom:40px; text-align:center;}
.row-over + .row-over, .col-headline + .row-over {margin-top:-40px;}
.row-over + .col-headline, .col-headline + .col-headline, .col-headline + div >  .col-headline:first-child {padding-top:0;}
.col-headline + .row-over {margin-top:0;}
.row-over > *:first-child {padding-top:0;}
#main > .row-over:last-child {margin-bottom:-40px;}

.bg-dark {background:#686868; color:#fff;}








/* Anpassungen - Alex Bassov 10.06.2015 */

#main .contentBox .date { color: #BEBEBE; }

/* Anpassungen - Alexander Bassov 08.07.2015 */
#main .contentBox,
#main .contentBox > div { width: 100%; }

/* Anpassungen - Alexander Bassov 15.07.2015 */
.articleTeaserAll li img { width: 100%; }


/* Anpassungen - Alexander Bassov 22.10.2015 */
.tx-etagenjobs-pi1 div.job-list-item { padding: 10px 0; overflow: hidden; width: 100%; float: none; border-top: 1px solid #eeeeee; }
.tx-etagenjobs-pi1 div.job-list-item h4 { padding: 0 30% 0 0; }

/* Anpassungen - Alexander Bassov 22.10.2015 */
.tx-etagenjobs-pi1 { font-family: theMix5; }

.tx-etagenjobs-pi1 > span { float: left; }
.tx-etagenjobs-pi1 .date { margin: 0 0 20px; padding-right: 10px; display: block; float: left; }
.tx-etagenjobs-pi1 .abstract { margin-bottom: 10px; padding-bottom: 10px; clear: both; float: none; border-bottom: 1px solid #eeeeee; }
.tx-etagenjobs-pi1 .description{ margin-bottom: 20px; }

.tx-etagenjobs-pi1 .btn-row { clear: both; }
.tx-etagenjobs-pi1 .btn-pseudo span,
.tx-etagenjobs-pi1 .btn-row span { display: none; }
.tx-etagenjobs-pi1 .btn-row > a { padding: 5px 10px; display: block; border: 2px solid #53534c }

.tx-etagenjobs-pi1 .job-list-item p { font-size: 16px; }
.tx-etagenjobs-pi1 .btn-pseudo { padding: 5px 10px; display: block; border: 2px solid #53534c }





.video-js .vjs-tech { max-width: 100% !important;}
.scroll-slider div.csc-media object, .scroll-slider .html5videoplayer .video-js-box .video-js {background-color: transparent !important;}

/**
 * Fix Startseite
 * 2015-06-04
 * Andy
 */
	#page-1 #main .content > .col-6:first-child {width:70%;}
	#page-1 #c321 {width:76%; overflow:hidden; padding-bottom:50px;}
	#page-1 #c321 p {float:left; width:50%; padding-right:50px;
		-webkit-box-sizing:border-box; 
		-moz-box-sizing:border-box; 
		box-sizing:border-box;
	}
	#page-1 #c321 p:nth-child(2n) {clear:left;}
	#page-1 #c323 {clear:both; float:none;}
	
	@media screen and (max-width: 1290px) {
		#page-1 #c321,
		#page-1 #main .content > .col-6:first-child {width:100%;}
	}
	
	@media screen and (max-width: 770px) {
		#page-1 #c321 p {width:80%; float:none; clear:both; padding-right:0;}
	}
	
/* =========================================================================== */




/**
 * Fix Videos
 * 2015-06-18
 * Roman
 */

 .scroll-slider div.csc-media {width:100%; float:left; clear:both; height:auto !important;}
 
 .scroll-slider div.csc-media object,
 .scroll-slider .html5videoplayer .video-js-box .video-js{width:100% !important; float:left; height:1024px !important;}
 
 .contentBox .html5videoplayer div { max-width: 100%; }
 
 
 .scroll-slider div.csc-media:last-child,
 .scroll-slider .html5videoplayer:last-child {margin-bottom:80px;}
 
 @media screen and (max-width: 1400px) {
	.scroll-slider div.csc-media object,
	.scroll-slider .html5videoplayer .video-js-box .video-js {height:800px !important;}
 }
 
 @media screen and (max-width: 1200px) {
	.scroll-slider div.csc-media object,
	.scroll-slider .html5videoplayer .video-js-box .video-js {height:640px !important;}
 }
 
 @media screen and (max-width: 800px) {
	.scroll-slider div.csc-media object,
	.scroll-slider .html5videoplayer .video-js-box .video-js {height:400px !important;}
 } 
 
 @media screen and (max-width: 400px) {
	.scroll-slider div.csc-media object,
	.scroll-slider .html5videoplayer .video-js-box .video-js {height:300px !important;}
 }  
 
 /* Mobile Slider Fix*/
 #skills + .scroll-slider .slider-mask div.full > img {width: 100% !important;}
 #skills + .scroll-slider .slider-mask {padding-bottom:30px;}




 
 /* Korrekturen 29.07.2015 Alex Bassov */
 @media screen and (max-width: 1516px) {
 
	.scroll-slider .layer div > img { margin-top: 0 !important; }
 }
 
 
 



 
 /* =========================================================================== */
/*



*

*

*

*

*

*
/* ============================================================================ */
/*									Media Queries								*/


@media screen and (max-width: 1290px) {
	html {min-width:100%;}
	.teaser > * {width:25%;}
	
	#kompetenzen { margin-right: 50px; }
	
	#categorypage + .grid-cell-text {clear: both;}
	
	iframe { max-width: 800px; max-height: 500px; }
	
}

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

	.content > div { width: 76%; }
	article p,
	header p { width: 100%;
		-webkit-box-sizing:border-box; 
		-moz-box-sizing:border-box; 
		box-sizing:border-box;
	}

	.teaser > * {width:33.33%;}
	
	iframe { max-width: 600px; max-height: 400px; }
	
	.sitemenu { clear: left; float: none !important; margin-left: 0px;}
	
	#backTo { right: 50px; max-width: 200px;}
	
	#advice {padding: 2.5em; }
	
	#mainFooter p:first-child { line-height: 2.2em; }
	
}

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

	#backTo { display: none; }
}

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

	#headerWrapper ul.mainmenu a { font-size: 12px}
}

@media screen and (max-width: 650px) {
	a#to-top {display:none;}
}

@media screen and (max-width: 628px) {
#searchform #searchsubmit {margin: 10px 0 0 0px;}
}

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

	h1, h2, h3 { line-height: 32px; }
	h1 { font-size: 30px; }
	h2 { font-size: 26px; }
	

	
	#headerWrapper 						{ overflow: hidden; padding: 22px 10px 2em 10px; }
	#siteWrapper,
	.second-header,
	.second-header .kompetenzen 		{ padding: 0px; width: 100%; }	
	#menu-toggle						{ display: block; float: left; position: absolute; top: 0px; right: 10px; width: 40px; height: 40px; background: url(../layout/menu-toggle.png) center center no-repeat #8D8D81; background-size: 30px 30px; /*border-radius: 4px;*/ padding: 0px 6px; }
	
	.contentBox p { width: 100% }
	.content 							{ padding: 0 10px; }
	.submenu,
	.content > div 						{ width: 100%; }
	
	
	nav.mainmenuWrapper					{ margin: 0; padding: 0; width: 100%; clear: both; float: left; }
	
	nav									{ margin-top: 63px; padding: 0px 10px;}
	ul.mainmenu 						{ padding-top: 19px; display: none; overflow: hidden; }
	ul.mainmenu > li					{ float: none; border-bottom: 1px solid #ccc; margin-right: 0; }
	ul.mainmenu > li:first-child		{ border-top: 1px solid #ccc; }	
	ul.mainmenu > li > a				{ display: block; padding: 10px 0px; font-size: 1.2em !important; }
	
	.menuBreadcrumbsWrapper				{ padding-top: 45px; padding-left: 0; display: inline-block; margin: 0 auto; text-align: center; width: 100%; }
	.menuBreadcrumbs					{ display: inline-block; overflow: hidden; }
	
	article.double-grid-cell,
	header.double-grid-cell 				{ width: 100%; }
	.second-header h5						{ padding: 0px 10px; }
	.second-header p						{ display: block; padding: 5px 10px; }
	.big-bottom-margin						{ padding-bottom: 2em; }
	
	iframe 									{ max-width: 100%;  max-height: 300px; }
	
	.sitemenu 								{ width: 100%; margin: 0; padding: 0}
	.sitemenu ul 							{ display: block; padding: 10px 0; }
	.sitemenu li							{ display: block; margin: 5px 0; border-bottom: 1px solid #ccc; }
	.sitemenu li:last-child					{ padding-top: 0; }
	.sitemenu li a		 					{ display: block; padding: 12px 0; }

	.scroll-slider > * {
		-moz-box-shadow:    none;
		-webkit-box-shadow: none;
		box-shadow:         none;
	}
			
	.scroll-slider .advice { margin-top: 0px; padding: 10px; width: auto; }
	.scroll-slider .advice > div { padding: 0; }
	.advice p, #advice p { font-size: 14px; width: 80%; margin-right: 10px;}
	.advice a, #advice a { display: inline-block; border: 2px solid #53534c; padding: 3px; margin-top: 10px; }
	
	.teaser > * {width:50%;}
	.teaser > * p { font-size: 16px; }
	
	#footer-link					{ padding: 2.5em 2.5em 2.5em 2.5em; }
	#mainFooter p:first-child		{padding-left: 2em}
	a#to-top						{ display: none; position: absolute; left: 50%; bottom: 10px; margin-left: -30px; text-indent: -9999px; width: 60px; height: 60px; border: 2px solid #eee; background: url(../layout/to-top-mobile.png) center center no-repeat #53534c; background-size: 40px 40px; } 
	
	
	#searchform #s {clear:both;}
	#searchform #searchsubmit {clear:none; margin-left:2%;}


	/* -Alex Bassov 25.11.2014 */
	.cssda {width: 26.5%;}
}

@media screen and (max-width: 496px) {
#searchform #searchsubmit {margin-left:0%; clear:both;}
#searchform label {width:226px;}
}

/* error404 */
#post-0.error404 {padding: 5px 10px;}
#searchform input {font: 1em/1.5em theMix5,Helvetica,sans-serif;}
#searchform .screen-reader-text {margin-top:10px; padding: 5px 0;}
#searchform #searchsubmit {height:34px; width: 226px; background:#53534C; border-radius:0 0 0 0px; text-shadow:0 0 0 0; box-shadow:0 0 0 0; text-shadow:0 0 0 0;  }
#searchform input:hover#searchsubmit {background: #000; text-shadow: 0 0 0 0;}

/* CSSDESIGNAWARDS */
.cssdesignawards {position:absolute; top:50px; right:0; background: url("../layout/cssda_ribbon_ws.png") no-repeat transparent; background-size:100%; text-indent: -99999px; width:90px; height:180px; z-index:500;}


@media screen and (max-width: 600px) {
	.cssdesignawards {width:10%;}
}

@media screen and (max-width: 450px) {
	.cssdesignawards {width:13%;}
}

span.entry-date {font-size:12px; display:block; padding-top:10px; color:#aaa;}

.tag.links {}
.tag.links span:last-child {display:none;}
#categorypage {float:left;}
#categorypage + .grid-cell-text li {list-style:none; margin: 0; padding: 0;}


.cssda, .cssda-report {
    bottom: 20px;
    display: block;
    height: auto;
    position: absolute !important;
    right: 0;
    width: 80px;
    z-index: 10 !important;
}

.cssda-report {
    bottom: auto;
    top: 100px;
}


/* as 20150731 */

#main .contentBox .submenu,
#main .contentBox .csc-textpic.text-only {width:80%;}
#main .content p {width:100%;}
#main .contentBox .csc-textpic.text-only + p.date {clear:both;}
article.content .width-7 {width:70%;}
article.content .width-7 .csc-textpic.text-only * {max-width:760px;}
article.content .width-3 {width:30% !important; margin-right:0 !important;}
article.content .width-7 + .sitemenu {padding-top:12px;}

.teaser a img {width:100%;}
.teaser a + a img {width:auto;}

@media screen and (max-width: 1020px) {
	article.content .width-7,
	article.content .width-3 {width:100% !important;}
}


/* rb 20151202 */
/* Social Icons */
.socialicons {position:fixed; right:0; top:6.5%; z-index:5000;}
.socialicons ul, .socialicons li {float:left; clear:both; list-style:none; margin:0; padding:0;}
.socialicons li { margin-bottom:2px;}
.socialicons a {
	background: #53534c; background:#8d8d81; color: #fff; display: block; font-size: 30px; padding: 16px 10px 15px; height: 60px; width: 60px;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-align:center; opacity: 0.7; position:relative;
}
.socialicons a:hover {background: #757570; opacity: 1;}
.socialicons span.title {display:none;}
.socialicons a {font-size:24px; height: 45px; width: 45px; padding: 10px 10px 9px;}
.socialicons a:before {display:none; content:""; width:10px; height:100%; position:absolute; left:-10px; top:0; background:#fff;}


@media screen and (max-width: 600px) {
	.socialicons {right: 10px; top: 42px; position:absolute;}
	.socialicons a {opacity:1; width:52px; height: 39px; padding: 7px 10px 9px;}
	.socialicons a:before {display:block;}
}