@charset "utf-8";
/* CSS Document */

	html,	body,	div, span, h1, h2,	h3,	h4,	h5,	h6,	p, a, em, img, sub, sup, b, u, i, center, ol, ul, li, table, tbody, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		transition: all 0.4s ease-out;
		-moz-transition: all 0.4s ease-out;
  	-o-transition: all 0.4s ease-out;
  	-webkit-transition: all 0.4s ease-out;
	}
	
	@-ms-viewport { width: device-width; }
	
	body {
		font-family: 'Roboto', Arial, Helvetica, sans-serif;
		background-color: #ffffff;
		line-height: 1.5em;
		font-size: 14px;
		color: #8b8888;
		margin: 0;
		padding: 0;
		font-weight: 400;
		background: linear-gradient(to top, white 0%, transparent), url(cbs-consulting1c.png);
	}

	div { box-sizing: border-box; }
	
	.clear { clear: both; }
	
	p { margin: 0px; }
	
	.strong { font-weight:700;}
	
	strong { font-weight:700;}

	.vollebreite{ max-width: 100%!important; }


	/* ---------- MEDIA QUERIES ---------- */
	@media screen and (max-width: 768px) {
		.mobilvollebreite{ max-width: 100%!important; }
	}
	/* -------- MEDIA QUERIES ENDE -------- */


	a {
		color: inherit;
		opacity: 1;
		text-decoration: none!important;
	}
	
	a:hover { opacity: 0.8; }
	.logo a:hover { opacity: 1; }


/* =========================== Allgemeine Formatierung ============================== */

/* ===================== Hyphens ===================== */

	body, h1, h2, h3, h4, h5, h6, ul, li{
		-moz-hyphens: manual;
		-o-hyphens: manual;
		-webkit-hyphens: manual;
		-ms-hyphens: manual;
		hyphens: manual;
	}

	a{
		-moz-hyphens: none!important;
		-o-hyphens: none!important;
		-webkit-hyphens: none!important;
		-ms-hyphens: none!important;
		hyphens: none!important;
	}
	
/* ---------- MEDIA QUERIES ---------- */

	@media screen and (max-width: 988px) {}
	@media screen and (max-width: 768px) {}
	@media screen and (max-width: 624px) {
		
		body {
			-moz-hyphens: auto;
			-o-hyphens: auto;
			-webkit-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
		}
		
	}
	
	@media screen and (max-width: 480px) {}

/* -------- MEDIA QUERIES ENDE -------- */

/* =================== Hyphens ENDE ================== */



/* ==================== Schriften ==================== */

	h1, h2, h3 { text-decoration: none; }
	.uppercase{ text-transform: uppercase; }

/* ================== Schriften ENDE ================== */


/* ===================== anordnen ===================== */

	.center{ text-align: center!important; }
	.alignleft{ text-align: left!important; }
	.alignright{ text-align: right!important; }

	.vcenter{	/* Vertikal zentriert */
		display: flex; 
  	flex-direction: column; 
  	justify-content:center;
	}

	.flexbox {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.left, .right {
		float: left;
		width: 48%;
	}
	.left {	margin-right: 4%; }
	

/* ---------- MEDIA QUERIES ---------- */

	@media screen and (max-width: 988px) {}
	@media screen and (max-width: 768px) {}
	@media screen and (max-width: 624px) {
		
		.left, .right {
			float: none;
			width: 100%;
		}
		.left { margin-right: 0%; }
		.right{ margin-top: 20px; }
		
		.mobilcenter {
			text-align: center!important;
		}
		
	}
	@media screen and (max-width: 480px) {}

/* -------- MEDIA QUERIES ENDE -------- */

/* =================== anordnen ENDE ================== */


/* ===================== Abstände ===================== */

	.padding{ padding: 30px; }
	.margin{ margin: 30px!important; }
	
	.ptop { padding-top: 30px; }
	.pbottom { padding-bottom: 30px; }
	.pleft { padding-left: 30px; }
	.pright {	padding-right: 30px; }
	
	.mtop { margin-top: 30px!important; }
	.mbottom { margin-bottom: 30px!important; }
	.mleft { margin-left: 30px!important; }
	.mright {	margin-right: 30px!important; }

	.gap{ padding-top: 10px; }

/* =================== Abstände ENDE ================== */
	

	.container {
		background-color: none;
		width: 850px;
		margin: 0px auto;
		max-width: calc(100% - 60px);
	}


/* ====================== Listen ====================== */

	/* Im Falle von Unterlisten diesen Code benutzen
		ul { padding-left: 15px; }
		li { padding-bottom: 3px; }
	*/

	ul { list-style: none; }
	
	ul li::before {
		margin-left: -1.5em; /* dieser Wert bestimmt den Abstand zwischen bullet und Text */
		position: absolute;
	}
	
	/*-------------- MORE ICONS --------------
	
		Square: \25A0
		Border-Square: \25A1
		Border-Square Soft Edge: \25A2
		Little Square: \25AA
		Little Border-Square: \25AB
		Triangle: \25B6
		Border-Triangle: \25B7
		Pointer: \25BA
		Border-Pointer: \25BB
		Karo: \25C6
		Bullet: \25CF
		Border-Bullet: \25CB
		Massig Sonderzeichen und HTML-Entities gibts hier:
		https://www.toptal.com/designers/htmlarrows/symbols/
		https://www.mediaevent.de/tutorial/sonderzeichen.html
	
	------------ MORE ICONS ENDE ------------*/
	
	li {
		padding-left: 20px; /* mit diesem Wert wird die Liste eingerückt */
		margin-left: 0px;
		padding-bottom: 6px;
		padding-right: 5px;
	}
		li:hover{
			margin-left: 5px;
			padding-right: 0px;
		}

/* ==================== Listen ENDE =================== */


/* ========================= Allgemeine Formatierung Ende ============================ */




/* =========================== Spezifische Formatierung ============================== */


/* ====================== Farben ====================== */

	.tuerkis{ color: #008f95; }
	.bgtuerkis{ background: rgb(0,143,149,1); }
	.weiss{ color: #FFF; }
	.schwarz{ color: #1f1918;; }
	.bgschwarz{ background: #1f1918; }

	.bgdunkelgrau{ background: #1f1918; }
	.orange{ color: #f07d00; }
	.bgorange{ background: #f07d00; }

/* ==================== Farben ENDE =================== */

/* ====================== Buttons ===================== */

	.button1{
		border: 1px solid #333;
		text-align: center;
		padding: 20px;
	}
		.button1:hover{	background: rgb(51,51,51,1);}
	
	.button2{ margin-top: 40px; }
		
		.button2 a{
			width: 210px;
			border: 2px solid #FFF;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-ms-border-radius: 15px;
			-webkit-border-radius: 15px;
			padding: 10px 25px;
			text-transform: uppercase;
		}
		.button2 a:hover{ background: #333; opacity: 1; }

/* =================== Buttons ENDE =================== */



/* ======================================= VORLAGE 01 =========================================== */

	.v1c2{ 
		background: url(cbs-consulting1d.jpg) no-repeat;
		background-attachment: fixed;
		background-size: contain;
		line-height: 0px;
	}
	.v1c2 img{ 	
		height: 100%!important; 
		margin: 0!important;
		padding: 0!important;
	}

	.v1 ul li::before {
		content: "\25CF";
		color: #FFF;
		font-weight: bold;
	}
	.v1c6 ul li::before { color: #000; }

	.v1 h1 {
		font-size: 30px;
		font-weight: 500;
		line-height: normal;
	}	
	.v1 h2 {
		font-size: 17px;
		padding-bottom: 15px;
		font-weight: 600;
	}

	.v1c1 img{ width: 150px; }
	.v1c2 img{ width: 100%; }

	.v1c4 .left a:hover>.einblenden{
		margin-left: 0px;
		display: none;
	}
	.v1c4 img{
		max-width: 100%;
	}

	.v1c4 .left, .v1c4 .right{
		position: relative;
		overflow: hidden;
	}

.pfeil1{ 
	font-size: 25px;
	float: left;
	position: relative;
	z-index: 10;
}

.pfeil2{ 
	font-size: 25px;
	float: left;
	position: relative;
	z-index: 10;
}

.einblenden{
	float: left;
	overflow: hidden;
	margin-left: 20px;
	width: 200px;
	display: inline-block;
}
.einblenden p{
	margin-left: -40px;
}

.v1c4 a:hover>.test2 { margin-left: 0px; }

.test2{
	position: absolute;
	bottom: 30px;
	left: 90px;
	z-index: 5;
	margin-left: -170px;
	font-size: 18px
}

.einblenden:hover>.einblenden p{ margin-left: 0px; }

#bild img{ width: 100%;}

/* ===================================== VORLAGE 01 ENDE ======================================== */







/* ---------- MEDIA QUERIES ---------- */

	@media screen and (max-width: 988px) {
		.v1c2{ 
		background-size: 108% auto;
	}
}
	@media screen and (max-width: 768px) {
		
		.v1c2{ 
		background: url(cbs-consulting1d.jpg) no-repeat;
		background-attachment:local;
		background-size: cover;
		line-height: 0px;
	}
		.test2{
	margin-left: -0px;
}
}
	@media screen and (max-width: 480px) {}

/* -------- MEDIA QUERIES ENDE -------- */