/*
**********************************************
***      created by Boris Schmakowski      ***
***          www.schmakowski.de            ***
**********************************************
*/

/*----------- reset -----------*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section, summary, time, mark, audio, video { background: transparent; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; margin: 0; padding: 0; }

html { background: #004684; font: normal 1em/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; color: #333; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; -webkit-overflow-scrolling: touch; }

article, figure, figcaption, footer, header, main, nav, section { display: block; }
aside { display: block; }


/*---- lets go ----*/

#wrapper-a,
#wrapper-b,
#wrapper-c,
#wrapper-d,
#foot_container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 30px;
}

section:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

section#content {
	padding: 4% 0 5% 0;
	text-align: left;
	background-color: #fcfcfc;
}

body#bos-118 section#content {
/* 	background-color: #004684; */
}

#leftcolumn {
	width: 29%;
	float: left;
}
#rightcolumn {
    width: 29%;
	float: right;
	padding: 5px 0 0 0;
}
#content_out {

}
#content_outleft {
	float:right;
	width: 65%;
}
#content_outmiddle {
	float:left;
	width: 40%;
	margin: 0 1%;
}
#content_outright {
	float:left;
	width: 65%;
}

@media all and (max-width: 799px)
{
	div#content_outleft, div#content_outright, div#content_outright {
		float:none;
		width: 100%;
	}
	div#leftcolumn, div#rightcolumn {
		width: 100%;
		float: none;
		padding: 10% 0 0 0;
	}
}

.cols-1	{
        display: block;
        float: none;
        margin: 0;
}

.cols-2 .column-1 {
        width:44%;
        float:left;
}
.cols-2 .column-2 {
        width:44%;
        float:right;
        margin:0
}

.cols-3 .column-1 {
        float:left;
        width:27%;
        margin-right:3%
}
.cols-3 .column-2 {
        float:left;
        width:27%;
        margin-left:0;
}
.cols-3 .column-3 {
        float:right;
        width:27%;
}

.column-2 {
        width:55%;
        margin-left:40%;
}
.column-3 {
        width:30%
}

.items-row,
.category-desc {
	margin-bottom: 5%;
}

/* SVG einbinden - Padding-Hack */


div.svg100 div,
div.svg090 div,
div.svg080 div,
div.svg075 div,
div.svg050 div
{										/* padding kommt inline entsprechend dem SVG -> höhe / breite * 100 = xx% */
    position: relative;
    height: 0;
	padding: 0;	
}
div.svg100 		{ width: 100%; }
div.svg090 		{ width:  90%; }
div.svg080 		{ width:  80%; }
div.svg075 		{ width:  75%; }
div.svg050 		{ width:  50%; }
div.svgcenter 	{ margin: 0 auto;}

div.svg100 svg,
div.svg090 svg,
div.svg080 svg,
div.svg075 svg,
div.svg050 svg {
	position: absolute;
	width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


/* Header mit Claim */

.head-vision header {
	background-image: url('../images/header/h-vision.jpg');
}
.head-profil header {
	background-image: url('../images/header/h-profil.jpg');
}
.head-netzwerk header {
	background-image: url('../images/header/h-netzwerk.jpg');
}


.head-einkaufsberatung header {
	background-image: url('../images/header/h-einkaufsberatung.jpg');
}
.head-einkaufsnetzwerk header {
	background-image: url('../images/header/h-einkaufsnetzwerk.jpg');
}
.head-interim header {
	background-image: url('../images/header/h-interim.jpg');
}
.head-star header {
	background-image: url('../images/header/h-netzwerk.jpg');
}
.head-strategie header {
	background-image: url('../images/header/h-sparring.jpg');
}

.head-aktuell header {
	background-image: url('../images/header/h-aktuell.jpg');
}

.head-kontakt header {
	background-image: url('../images/header/h-kontakt.jpg');
}
.head-impressum header {
	background-image: url('../images/header/h-impressum.jpg');
}


header {
	background-color: #004684;
	background-image: url('../images/header/h-netzwerk.jpg');
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	color: #ffffff;
    width: 100%;
    min-height: 370px;
    position: relative;
}

header::after {		/* Hintergrund drehen ohne Text zu drehen*/
	content: '';
	display: block;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: inherit;
    -ms-transform-origin: right bottom;
    -ms-transform: skewY(-1.4deg);
    -webkit-transform-origin: right bottom;
    -webkit-transform: skewY(-1.4deg);
    transform-origin: right bottom;
    transform: skewY(-1.4deg);
    z-index: 0;
}


#headtop123 {

}
#headtop1 custom {
	position: relative;
}
#headtop1 h1,
#headtop1 p {
	margin: 0;
	padding: 0;
	
	position: absolute;
	z-index: 1;
	top: 65%;
	transform: translateY(-50%);

	text-rendering: optimizeLegibility;
	font-weight: 400;
	color: #ffffff;
	font-size: 2.5em;
	line-height: 1.3em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: 0px 0px 10px rgba(0, 70, 132, 0.7) ; /* #004684 - #002c53 */  /* 0px 0px 10px #004684b3 */
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}

@media all and (max-width: 1024px)
{
	header {
	    min-height: 350px;
	}
}
@media all and (max-width: 800px)
{
	header {
	    min-height: 300px;
	}
}
@media all and (max-width: 640px)
{
	header {
	    min-height: 250px;
	}
	#headtop1 h1,
	#headtop1 p {
		font-size: 1.6em;
		line-height: 1.3em;
		letter-spacing: 0.01em;
/* 		text-shadow: 0px 0px 20px #000000; */ /* #004684 */
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
}
@media all and (max-width: 400px)
{
	header {
	    min-height: 200px;
	}
	#headtop1 h1,
	#headtop1 p {
		font-size: 1.2em;
		line-height: 1.2em;
		letter-spacing: 0em;
	}
}

#maincontent {
	padding-top: 5%;
	/*-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;*/
}


/* Skew Box */

div.skew-box-wrap {
	padding: 1% 0 2% 0;
}

div.skew-box {
	font-size: 0;
	line-height: 0;
	text-align: center;
}
div.skew-box > div {
    font-size: 18px;
	line-height: 1.6em;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

div.skew-box.box3 > div {
    width: 31.33%;
    min-width: 120px;
    padding: 1.8em 0 1.2em 0;
    margin: 1.5% 1% 1.5% 1%;
    vertical-align: top;
}
div.skew-box.box3 > div:first-child {
	margin-left: 0;
	margin-right: 2%;
}
div.skew-box.box3 > div:last-child {
	margin-left: 2%;
	margin-right: 0;
}


div.skew-box.box2 > div {
    width: 48%;
    min-width: 180px;
    padding: 1.8em 0 1.2em 0;
    margin: 2% 1% 2% 1%;
    vertical-align: top;
}
div.skew-box.box2 > div:first-child {
	margin-left: 0;
	margin-right: 2%;
}
div.skew-box.box2 > div:last-child {
	margin-left: 2%;
	margin-right: 0;
}

div.skew-box.box2.startbox2 > div {
	width: 48%;
	min-width: 180px;
	padding: 1.8em 0 1.2em 0;
	margin: 2% 1% 0% 1%;
	vertical-align: top;
}
div.skew-box.box2.startbox2 > div:first-child {
	margin: 2% 1% 0% 1%;
}
div.skew-box.box2.startbox2 > div:last-child {
	margin: 2% 1% 0% 1%;
}
@media all and (max-width: 780px)
{
	div.skew-box.box2.startbox2 > div {
		width: 100%;
		min-width: 180px;
		padding: 1.8em 0 1.2em 0;
		margin: 2% 0% 0% 0%;
		vertical-align: top;
	}
	div.skew-box.box2.startbox2 > div:first-child {
		margin: 2% 0% 0% 0%;
	}
	div.skew-box.box2.startbox2 > div:last-child {
		margin: 2% 0% 0% 0%;
	}
}

div.skew-box.box1 > div {
    width: 100%;
    padding: 1.8em 0 1.2em 0;
    margin: 1.5% 0 1.5% 0;
}


div.skew-box > div::after {		/* Hintergrund drehen ohne Text zu drehen*/
	content: '';
	display: block;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;    
    
    background-color: rgba(0, 71, 133, 1);
/*     border: 1px solid rgba(0, 71, 133, 1); */
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004684+0,2773b0+100 */
	background: -moz-linear-gradient(top,  rgba(0,70,132,1) 0%, rgba(39,115,176,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,70,132,1) 0%,rgba(39,115,176,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,70,132,1) 0%,rgba(39,115,176,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004684', endColorstr='#2773b0',GradientType=0 ); /* IE6-9 */
    
    -ms-transform-origin: center center;
    -ms-transform: skewY(-1.4deg);
    -webkit-transform-origin: center center;
    -webkit-transform: skewY(-1.4deg);
    transform-origin: center center;
    transform: skewY(-1.4deg);
    
/*     background-position:0px; */

/*
	-webkit-transition: background 1s ease;
       -moz-transition: background 1s ease;
        -ms-transition: background 1s ease;
         -o-transition: background 1s ease;
            transition: background 1s ease;
*/

}
div.skew-box div.skew-content {
	color: #ffffff;
}

div.skew-box.box3 div.skew-content {
	padding: 0 0 0 15%;
}
div.skew-box.box2 div.skew-content {
	padding: 0 0 0 20%;
}
div.skew-box.box1 div.skew-content {
	padding: 0 0 0 5%;
}
div.skew-box div.skew-content.skew-center {
	padding: 0 5% 0 5%;
	text-align: center;
}

div.skew-box h3 {
	color: #ffffff;
	font-size: 1.2em;
}
div.skew-box p {
	padding: 0 0 0.6em 0;
	margin: 0;
	color: #ffffff;
}
div.skew-box strong {
	font-size: 1.1em;
	color: #ffffff;
}
div.skew-box ul {
	color: #ffffff;
}
div.skew-box ul li {
	padding: 0;
	margin: 0;
	color: #ffffff;
}

div.skew-link a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}


div.skew-box.skew-link > div:hover::after {
/*
	background: -moz-linear-gradient(top, rgba(39,115,176,1)  0%, rgba(0,70,132,1) 100%); 
	background: -webkit-linear-gradient(top,  rgba(39,115,176,1)  0%, rgba(0,70,132,1) 100%); 
	background: linear-gradient(to bottom,  rgba(39,115,176,1) 0%, rgba(0,70,132,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2773b0',endColorstr='#004684',GradientType=0 );
*/
/* 	background-position: 1000px; */
	
/*
	-webkit-transition: background 1s ease;
       -moz-transition: background 1s ease;
        -ms-transition: background 1s ease;
         -o-transition: background 1s ease;
            transition: background 1s ease;
*/
}


/* Start-Teaserboxen */

.head-start div.skew-box.box3 > div {
    min-height: 300px;
}
@media all and (max-width: 1070px)
{
	.head-start div.skew-box.box3 > div {
	    min-height: 333px;
	}
}
@media all and (max-width: 800px)
{
	.head-start div.skew-box.box3 > div {
	    min-height: 290px;
	}
}
.head-start div.skew-box h3 {
	color: #ffffff;
	margin: 0.7em 0 1em 0;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}
.head-start div.skew-box p {
	padding: 0 0 0.6em 0;
	margin: 0;
	color: #ffffff;
	font-size: 17px;
	line-height: 1.5em;
/*
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
*/
}
.head-start div.skew-box div.skew-content.skew-center {
	padding: 0 12% 0 12%;
	text-align: center;
}

@media all and (max-width: 800px)		/* 2 + 1*/
{
	div.skew-box.box3 > div {
	       width: 48%;
		   padding: 1.8em 0 1.2em 0;
		   margin: 2% 1% 2% 1%;
		   vertical-align: top;
	}
	div.skew-box.box3 > div:first-child {
		margin: 2% 1% 2% 1%;
	}
	div.skew-box.box3 > div:last-child {
		margin: 2% 1% 2% 1%;
	}
}
@media all and (max-width: 600px)		/* 3 x 1 */
{
	div.skew-box.box3 > div {
	       width: 98%;
		   padding: 1.8em 0 1.2em 0;
		   margin: 2% 1% 2% 1%;
		   vertical-align: top;
		   min-height: auto !important;
	}
	div.skew-box.box3 > div:first-child {
		margin: 2% 1% 2% 1%;
	}
	div.skew-box.box3 > div:last-child {
		margin: 2% 1% 2% 1%;
	}
}



/* Seitenmodule Standards */

div#rightcolumn {
	
}
div#rightcolumn aside {
	padding-top: 5%;
}
div#rightcolumn aside > div {
	margin-bottom: 60px;
	font-size: 0.95em;
	line-height: 1.45em;
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
div#rightcolumn h3 {
	text-align: right;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
	font-size: 20px;
	margin: 0em 0 0.6em 0;
}


/* Logo oder Pic right col */

div#rightcolumn div.pic100 {
	text-align: right;
}
div#rightcolumn div.pic100 img {
	width: 100%;
	max-width: 350px;
	height: auto;
}


/* Social-Icons */

div.custom.social-icons {
	font-size: 0;
	line-height: 0;
	text-align: right;
	padding: 2% 0 0 0;
}
div.custom.social-icons div {
	display: inline-block;
	padding-left: 15%;
}
div.custom.social-icons div:first-child {
	padding-left: 0;
}
div.custom.social-icons div img {
	width: auto;
	height: 80px;
	font-size: 16px;
	line-height: 20px;
	
	-moz-transform-origin: 		50% 50%;
	-ms-transform-origin: 		50% 50%;
	-o-transform-origin: 		50% 50%;
	-webkit-transform-origin:	50% 50%;
	transform-origin: 			50% 50%;
	
	-moz-transition: 	all 0.2s linear 0s;
	-ms-transition: 	all 0.2s linear 0s;
	-o-transition: 		all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    transition: 		all 0.2s linear 0s;
}
div.custom.social-icons div img:hover {
	
	-moz-transform: 	scale(1.1);
	-ms-transform: 		scale(1.1);
	-o-transform: 		scale(1.1);
    -webkit-transform: 	scale(1.1);
    transform: 			scale(1.1);
    
    -moz-transition: 	all 0.4s ease 0s;
    -ms-transition: 	all 0.4s ease 0s;
    -o-transition: 		all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    transition: 		all 0.4s ease 0s;
}

/* Aktuell */

ul.latestnews.aktuell {
    list-style: none;
    margin-left: 0em;
}
ul.latestnews.aktuell li { 
	position: relative;
	padding-right: 1.3em;
	text-align: right;
}
ul.latestnews.aktuell li:before {
	position: absolute;
	/*right: 2px;
	top: 1px;
    content: '\25C0';
    color: #004684;
    font-size: 0.7em;*/
    
    font-family: "IcoMoon";
    font-style: normal;
    content: "";
    font-size: 24px;
    color: #004684;
    right: -5px;
	top: 1px;
}


/* Footer */

footer {
	background: #004684;
	color: #ffffff;
	position: relative;
	padding: 3% 0 2% 0;
	text-shadow: 0px 0px 8px rgba(0, 71, 133, 0.9);
}
footer::after {		/* Hintergrund drehen ohne Text zu drehen*/
	content: '';
	display: block;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
	background: inherit;
    -ms-transform-origin: left top;
    -ms-transform: skewY(-1.4deg);
    -webkit-transform-origin: left top;
    -webkit-transform: skewY(-1.4deg);
    transform-origin: left top;
    transform: skewY(-1.4deg);
    z-index: 0;

	background-color: #004684;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2773b0+0,004684+100 */
	background: rgb(39,115,176); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(39,115,176,1) 0%, rgba(0,70,132,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(39,115,176,1) 0%,rgba(0,70,132,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(39,115,176,1) 0%,rgba(0,70,132,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2773b0', endColorstr='#004684',GradientType=0 ); /* IE6-9 */
}

body#bos-118 footer::after {
/* 	background: #004684; */
}

body#bos-118 footer {		/* startseite* */
	text-align: center;
}

#foot_container {
	position: relative;
	z-index: 1;
}
footer a 			{ color: #ffffff; text-decoration: none; }
footer a:visited 	{ color: #ffffff; text-decoration: none; }
footer a:hover 		{ color: #ffffff; text-decoration: underline; }
footer a:active 	{ color: #ffffff; text-decoration: underline; }

footer .keywords h4 {
	color: #ffffff;
	margin: 1em 0 1em 0;
	font-size: 1.6em;
	letter-spacing: 0.1em;
	line-height: 1.6em;
}
@media all and (max-width: 500px)
{
	footer .keywords h4 {
		font-size: 1.1em;
		letter-spacing: 0.05em;
	}
}

footer .copyright {
	font-size: 0.9em;
	letter-spacing: 0.01em;
}


/*----pagenav ----*/

ul.pagenav {
	list-style-type: none;
	display: block;
	margin:20px 0 0 0;
	width:100%;
}
ul.pagenav::after {
	content: " ";
	font-size: 0px;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
ul.pagenav li {
	display:inline-block;
	padding: 0;
	margin:	0;
}
ul.pagenav li {
	line-height:2em
}
ul.pagenav li.previous {
	padding: 0;
}
ul.pagenav li.next {
	float: right;
}
ul.pagenav li a {
	text-decoration: none;
}
ul.pagenav li i {
	display: inline-block;
    height: auto;
    line-height: auto;
    width: auto;
}
/*---- pagination ----*/

#maincontent div.pagination {
}
#maincontent div.pagination ul {
    list-style-type: none;
    margin: 50px 0 0 0;
    padding: 0;
    text-align:left;
}
#maincontent div.pagination li {
    display: inline-block;
    padding: 0 25px 0 0;
    margin:	0;
    font-size: 20px;
}
#maincontent div.pagination li.disabled a {
	color: #bbbbbb;
}
#maincontent div.pagination li.active a {
	text-decoration: none;
	font-weight: bold;
}
#maincontent div.pagination li.active a:hover {
	text-decoration: none;
	font-weight: bold;
}

p.counter {
	font-weight:bold;
	text-align:right;
	clear:both;
}

p.readmore:before {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

.icon-chevron-right::before,
.icon-rightarrow::before,
.icon-arrow-right::before,
.icon-chevron-left::before,
.icon-leftarrow::before,
.icon-arrow-left::before {
    font-size: 0.8em;
}

/*---- j-tooltipp wech ----*/

body div.easy-tooltip-wrapper { display: none !important; }
body div.tooltip.fade.top { display: none !important; }