@include keyframes(bounce) {
	0%, 20%, 50%, 80%, 100% {
    @include transform(translateY(0));
  }
	40% {
    @include transform(translateY(-30px));
  }
	60% {
    @include transform(translateY(-15px));
  }
}

#editor-container {
    height: 500px;
}

* {
	margin : 0;
	padding : 0;
	}

html {
	margin : 0;
	padding : 0;
	height : 100%;
	width : 100%;
	}

body {
	margin : 0;
	padding : 0;
	padding-top: 86px;
	border : 0;
	width : 100%;
	min-height : 100%;
	position: relative;
	background : #f7f4f1;
	font-family : Rubik, sans-serif;
	font-weight : 300;
	font-size : 1.1rem;
	letter-spacing : 0.02rem;
	color : black;
	}

.wrapper {
	position : relative;
	min-height : 100%;
	flex-grow : 1;
	flex-shrink : 1;
	flex-basis : auto;
	}

a.anchor {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

/* HEADER & NAV ||||||||||||||||||||||||||||||||||||||*/

header {
	position : -webkit-sticky;
	position : fixed;
	top : 0;
	width : 100%;
	height : 86px;
	background : white;
	z-index : 2;
	line-height : 86px;
	vertical-align : middle;
	z-index : 100;
	}

header img {
	margin : 5px 2%;
	max-width : 85%;
	line-height : 86px;
	vertical-align : middle;
	}



nav {
	position : absolute;
	top : 0;
	right : 25px;
	text-align : right;
	z-index : 100;
	}

nav ul {
	list-style : none;
	}

nav ul li {
	display : inline-block;
	line-height : 76px;
	}

nav li a {
	display : inline-block;
	padding : 7px;
	color : #333;
	font-size : 0.8rem;
	font-weight : 500;
	line-height : 1.5;
	letter-spacing : 0.1rem;
	text-transform : uppercase;
	text-decoration : none;
	-webkit-transition : all 0.25s ease;
       -moz-transition : all 0.25s ease;
		 -o-transition : all 0.25s ease;
			transition : all 0.25s ease;
	}

nav li a:hover {
	color : #2c8cc8;
	}

nav .nav-icon {
	display : none;
	position : relative;
	right : 2vw;
	line-height : 80px;
	font-family : "Calibri Light";
	font-size : 25px;
	font-weight : light;
	-webkit-transition : all 0.15s ease;
       -moz-transition : all 0.15s ease;
		 -o-transition : all 0.15s ease;
			transition : all 0.15s ease;
	cursor : pointer;
	}

nav .nav-icon:hover {
	color : #2c8cc8;
	}

#nav-indicator {
    display: none;
}

nav .happ-mobile {
    display: none;
}

nav .happ-mobile img {
    max-width: 200px;
    margin: auto;
    margin-top: 20px;
}

nav .happ-desktop {
    display: inline;
}

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


    #nav-indicator {
        display: block;
    }

	nav{
	width : 100%;
	right : 0;
	z-index : 2;
	}

	nav .nav-icon {
	display : block;
	}

    nav .happ-mobile {
        display: block;
    }
    nav .happ-desktop {
        display: none;
    }

	nav ul {
	display : none;
	width : 100%;
	margin-top : 6px;
	background: -moz-linear-gradient(left, rgba(247,244,241,0) 0%, rgba(247,244,241,1) 75%, rgba(247,244,241,1) 100%);
	background: -webkit-linear-gradient(left, rgba(247,244,241,0) 0%,rgba(247,244,241,1) 75%,rgba(247,244,241,1) 100%);
	background: linear-gradient(to right, rgba(247,244,241,0) 0%,rgba(247,244,241,1) 75%,rgba(247,244,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f7f4f1', endColorstr='#f7f4f1',GradientType=1 );
	}

	nav ul li, nav ul li a {
	display : block;
	margin : 0;
	padding : 0;
	height : auto !important;
	line-height : 50px;
	-webkit-transition : all 0.25s ease;
       -moz-transition : all 0.25s ease;
		 -o-transition : all 0.25s ease;
			transition : all 0.25s ease;
	}

	nav ul li a {
	padding-right : 2vw;
	}

	nav ul li:hover {
	background : white;
	}

	.show {
	display : block;
	}

	.close {
	display : none;
	}

}



/* STARTBILD |||||||||||||||||||||||||||||||||||||| */

/*.slide {
	position: absolute;
	width: 100%;
	height: 100%;
}

.slides {
	position : relative;
	height : calc(100vh - 86px);
	background-size : cover;
	}
*/


/*.sliderMain {
	position:relative;
	margin:0 auto;
	top:0px;
	left:0px;
	width:100vw;
	height : calc(100vh - 86px);
	overflow:hidden;
	visibility:hidden;
}*/

/*.sliderSlides {
	position : absolute;
	background-size : cover;
	cursor:default;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	width:1300px;
	height:500px;
	overflow:hidden;
	}*/

.simpleslides {
	position : relative;
	height : calc(100vh - 86px);
	overflow : hidden;
	}

.startbild {
	position : relative;
	height : calc(100vh - 86px);
	background-size : cover;
	}

.bild1 {
	background-image : url('../../img/lehrlingsberatung1_quer.jpg');
	background-position : center center;
	/*background-size : cover;
	width: 100%;
	height: 100%;*/
	}

.bild2 {
	background-image : url('../img/lehrlingsberatung2_quer.jpg');
	background-position : center bottom;
	/*background-size : cover;
	width: 100%;
	height: 100%;*/
	}

.bild3 {
	background-image : url('../img/lehrlingsberatung3_quer.jpg');
	background-position : center right;
	/*background-size : cover;
	width: 100%;
	height: 100%;*/
	}

.startbild .textbox {
	display : inline-block;
	position : absolute;
	left : 2%;
	bottom : 30px;
	padding : 2.5%;
	max-width : 35vw;
	font-size : 2vw;
	color : white;
	text-align : left;
	background : #2c8cc8;
	}

.startbild .textbox-right {
	right : 2%;
	left : auto;
	}

.startbild .textbox strong {
	font-weight : 500;
	}



.arrows {
	display : inline-block;
	position : absolute;
	top : 50%;
	transform : translate(0, -50%);
	width : 26px;
	height : 26px;
	border-top : #2c8cc8 solid 3px;
	border-right : #2c8cc8 solid 3px;
	cursor : pointer;
	z-index : 2;
	-webkit-transition : all 0.25s ease;
       -moz-transition : all 0.25s ease;
		 -o-transition : all 0.25s ease;
			transition : all 0.25s ease;
	}

.arrows:hover {
	border-top : white solid 3px;
	border-right : white solid 3px;
	}

.arrow-left {
	left : 15px;
	-webkit-transform : scale(1,1.3) rotate(-135deg);
	   -moz-transform : scale(1,1.3) rotate(-135deg);
		-ms-transform : scale(1,1.3) rotate(-135deg);
		 -o-transform : scale(1,1.3) rotate(-135deg);
			transform : scale(1,1.3) rotate(-135deg);
	}

.arrow-right {
	right : 15px;
	-webkit-transform : scale(1,1.3) rotate(45deg);
	   -moz-transform : scale(1,1.3) rotate(45deg);
		-ms-transform : scale(1,1.3) rotate(45deg);
		 -o-transform : scale(1,1.3) rotate(45deg);
			transform : scale(1,1.3) rotate(45deg);
	}

@keyframes bounce {
  0%,
  100% {
    transform: translate(-50%, -30%) scale(1,1.3) rotate(135deg);
  }

  50% {
    transform: translate(-50%, -70%) scale(1,1.3) rotate(135deg);
  }
}

.arrow-down {
	animation: bounce 1s ease-in-out infinite;
	display : inline-block;
	position : absolute;
	width : 26px;
	height : 26px;
	bottom : 15px;
	left : 50%;
	z-index : 2;
	border-top : #2c8cc8 solid 3px;
	border-right : #2c8cc8 solid 3px;
	cursor : pointer;
	-webkit-transition : all 0.25s ease;
       -moz-transition : all 0.25s ease;
		 -o-transition : all 0.25s ease;
			transition : all 0.25s ease;

	-webkit-transform : translate(-50%, -50%) scale(1,1.3) rotate(135deg);
	   -moz-transform : translate(-50%, -50%) scale(1,1.3) rotate(135deg);
		-ms-transform : translate(-50%, -50%) scale(1,1.3) rotate(135deg);
		 -o-transform : translate(-50%, -50%) scale(1,1.3) rotate(135deg);
			transform : translate(-50%, -50%) scale(1,1.3) rotate(135deg);
}

.arrow-down:hover {
	border-top : white solid 3px;
	border-right : white solid 3px;
	}

.bullets {
	display : inline-block;
	position : absolute;
	bottom : 70px;
	left : 50%;
	transform : translate(-50%, 0);
	z-index : 2;
	}

.bullets li {
	display : inline-block;
	margin : 3px 10px;
	width : 15px;
	height : 15px;
	background : white;
	border-radius : 50%;
	box-shadow : 0 0 15px rgba(0,0,0,.1);
	cursor : pointer;
	-webkit-transition : all 0.25s ease;
       -moz-transition : all 0.25s ease;
		 -o-transition : all 0.25s ease;
			transition : all 0.25s ease;
	}

.bullets li:hover{
	background : #2c8cc8;
	}

.bullets li.bulletselected{
	background : #2c8cc8;
	}


.startbild-legende {
	margin : 2px 1%;
	float : right;
	font-size : 0.9rem;
	}



@media screen and (min-width: 2000px){

	.startbild .textbox {
	font-size : 40px;
	}
}

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

	.startbild .textbox {
	font-size : 20px;
	}

	.startbild .textbox {
	left : 2vw;
	right : 2vw;
	max-width : 96vw;
	bottom : auto;
	top : 2vw;
	}
}

@media (orientation: portrait) {

	.bild1 {
	background-image : url('../img/lehrlingsberatung1_hoch.jpg');
	}

	.bild2 {
	background-image : url('../img/lehrlingsberatung2_hoch.jpg');
	}

	.bild3 {
	background-image : url('../img/lehrlingsberatung3_hoch.jpg');
	background-position : top center;
	}
}



@media (orientation: landscape) and (max-width: 1000px){

	.bild1 {
	background-image : url('../img/lehrlingsberatung1_quer_smartphone.jpg');
	}

	.bild2 {
	background-image : url('../img/lehrlingsberatung2_quer_smartphone.jpg');
	}

	.bild3 {
	background-image : url('../img/lehrlingsberatung3_quer_smartphone.jpg');
	background-position : top center;
	}
}

@media (orientation: portrait) and (max-width: 1000px){

	.bild1 {
	background-image : url('../img/lehrlingsberatung1_hoch_smartphone.jpg');
	}

	.bild2 {
	background-image : url('../img/lehrlingsberatung2_hoch_smartphone.jpg');
	}

	.bild3 {
	background-image : url('../img/lehrlingsberatung3_hoch_smartphone.jpg');
	background-position : top center;
	}
}


.sectionworkshops {
    margin : 100px auto 100px auto;
    padding : 0 5%;
    max-width : 90%;
}

/* CONTENT ||||||||||||||||||||||||||||||||||||||*/

section {
	position : relative;
	margin : 100px auto 100px auto;
	padding : 0 5%;
	width : 700px;
	max-width : 90%;
	}

/* TEXT */


section h1 {
	margin-bottom : 2rem;
	font-size : 3rem;
	font-weight : 500;
	text-align : left;
	color : #333;
	}

section h1[data-fit-text],
section h1 span[data-fit-text] {
    display: inline-block;
    max-height: 1em;
    }

section h1 img.icon {
	margin-top : 0;
	margin-right : 15px;
	padding-bottom : 35px;
	width : 60px;
	height : 60px;
	float : left;
	}

#finden section h1 img.icon {
	padding-bottom : 0;
	}

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

section h2 {
	font-size : 1.5rem;
	padding-top : 2rem;
	padding-bottom : 0.6rem;
	}

section h3 {
	padding-top : 2rem;
	padding-bottom : 0.6rem;
	font-weight : 400;
	}

section h4 {
	padding-top : 1rem;
	font-weight : 500;
	}

section p {
	padding : 0.3em 0;
	line-height : 1.35;
	}

section p strong {
	font-weight : 500;
	}

section p small {
	display : block;
	font-size : 0.75em;
	}

section a {
	color : #2c8cc8;
	text-decoration : none;
	font-weight : 500;
	-webkit-transition : all 0.1s ease;
       -moz-transition : all 0.1s ease;
		 -o-transition : all 0.1s ease;
			transition : all 0.1s ease;
	}

section a:hover {
	color : #82b7df;
	}

section ul {
	padding : 0.3em 0;
	}

section ul {
	margin-left : 10px;
	list-style-type : none;
	}

section ul li {
	padding : 0.3em 0;
	list-style-type : none;
	}

section li::before {
	content : '· ';
	margin-left : -10px;
	}

section section ul.linkliste li {
    list-style-type : none;
	}

section img {
	margin : 0.5em 0;
	max-width : 100%;
	}

hr {
	height:0;
	border:0;
	border-bottom: #999 solid 1px;
	}

em {
	display : inline-block;
	margin-bottom : 25px;
	font-family : BPmono, "Trebuchet MS", serif;
	font-size : 1.4rem;
	color : #20638e;
	letter-spacing : -0.01rem;
	}

section img {
	max-width : 100%;
	}

/* Darstellung mit Anti-Aliasing in Internet Explorer */
img { -ms-interpolation-mode: nearest-neighbor; }

.drop-down {
	position : relative;
	margin : 25px auto;
	}

.drop-down h2 {
	display : flex;
	align-items : center;
	margin : 20px 66px 20px 0;
	padding : 0 0 0 25px;
	height : 60px;
	background : #2c8cc8;
	border-radius : 60px;
	text-transform : uppercase;
	color : white;
	font-size : 1.2rem;
	letter-spacing : 0.1rem;
	vertical-align : middle;
	cursor : pointer;
	-webkit-transition : all 0.3s ease;
       -moz-transition : all 0.3s ease;
		 -o-transition : all 0.3s ease;
			transition : all 0.3s ease;
	}

.drop-down h2:hover {
	color : black;
	}

.drop-down h2:before {
	content : '';
	display : block;
	position : absolute;
	right : 0;
	width : 60px;
	height : 60px;
	background : white;
	border-radius : 100px;
	box-shadow : 0 0 15px rgba(0,0,0,.1);
	}

.drop-down h2:after {
	content : '\25BC';
	display : block;
	position : absolute;
	top : 4px;
	right : 0;
	width : 60px;
	line-height : 60px;
	text-align : center;
	color : #2c8cc8;
	font-size : 22px;
	z-index : 2;
	-webkit-transform:scale(1.6,1);
	   -moz-transform:scale(1.6,1);
		-ms-transform:scale(1.6,1);
		 -o-transform:scale(1.6,1);
			transform:scale(1.6,1);
	-webkit-transition : all 0.3s ease;
       -moz-transition : all 0.3s ease;
		 -o-transition : all 0.3s ease;
			transition : all 0.3s ease;
	}

.drop-down h2:hover:after {
	top : 9px;
	font-size : 24px;
	}

.drop-down h2.open:after {
	content : '\25B2';
	top : 0;
	}

.drop-down h2.open:hover:after {
	top : -5px;
	}

.drop-down h2.rotate:after {
	top : 0;
	margin-right : 1px;
	-webkit-transform:scale(1.6,1) rotate(180deg);
	   -moz-transform:scale(1.6,1) rotate(180deg);
		-ms-transform:scale(1.6,1) rotate(180deg);
		 -o-transform:scale(1.6,1) rotate(180deg);
			transform:scale(1.6,1) rotate(180deg);
	}

.drop-down article {
	/*display : none;*/
	margin-top : 25px;
	margin-bottom : 100px;
	}

.icons {
	margin-top : 4rem;
	}


.icons a {
	width : 50%;
	display : block;
	float : left;
	text-align : center;
	text-transform : uppercase;
	letter-spacing : 0.1rem;
	background-image : url('../img/icon.png');
	background-repeat : no-repeat;
	background-size : 75% auto;
	background-position : top center;
	-webkit-transition : all 0.3s ease;
       -moz-transition : all 0.3s ease;
		 -o-transition : all 0.3s ease;
			transition : all 0.3s ease;
	}

.icons a:hover {
	color : black;
	}

.icons img {
	opacity : 0;
	width : 75%;
	margin : 0 0 2rem 0;
	display : inline-block;
	-webkit-transition : all 0.3s ease;
       -moz-transition : all 0.3s ease;
		 -o-transition : all 0.3s ease;
			transition : all 0.3s ease;
	}

.icons img:hover {
	opacity : 1;
	}

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



.kennenlernpaket table {
	margin : 25px 0;
	border-radius : 15px;
	border : 0;
	overflow : hidden;
	border-collapse : collapse;
    border-style : hidden;
	}

.kennenlernpaket table th {
	padding : 15px;
	color : white;
	background : #2c8cc8;
	font-weight : 500;
	text-transform : uppercase;
	letter-spacing : 0.1rem;
	}

.kennenlernpaket table td {
	padding : 25px;
	vertical-align : top;
	background : white;
	}

.kennenlernpaket table th, td {
	border : 3px solid #f7f4f1;
	width : 50%;
	}

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

	.kennenlernpaket table {
	font-size : 0.8em;
	}

}





#finden table {
	width : 100%;
	margin : 25px 0;
	border-radius : 100px;
	border-collapse : collapse;
	border-spacing : 0;
	overflow : hidden;
	}

#finden table thead th {
	position : relative;
	padding : 50px 0;
	color : white;
	background : #2c8cc8;
	text-transform : uppercase;
	letter-spacing : 0.1rem;
	text-align : center;
	}

#finden table thead th strong {
	display : block;
	position : absolute;
	bottom : 0;
	left : 50%;
	transform : translate(-50%, 50%);
	width : 70px;
	height : 70px;
	line-height : 70px;
	background : #f7f4f1;
	color : #2c8cc8;
	font-weight : 600;
	font-size : 2.5rem;
	border-radius : 500px;
	}

#finden table tbody td {
	padding : 70px 15px 10px 15px;
	background : white;
	}

#finden table tbody td > div {
	display : table;
	}

#finden table tbody td > div > ul, #finden table tbody td > div > div {
	display : table-cell;
	padding : 0 20px;
	width : 50%;
	}

#finden table tbody td > div > div > ul {
	display : block;
	}

#finden table th, #finden table td {
	border : 0;
	width : 33.333%;
	}

#finden table tfoot td {
	padding : 30px 0 70px 0;
	text-align : center;
	background : white;
	}

#finden table tfoot td strong {
	display : block;
	margin-top : 10px;
	color : #2c8cc8;
	font-weight : 500;
	font-size : 1.8rem;
	letter-spacing : 0.1rem;
	}

#finden table tfoot td strong small {
	display : block;
	font-size : 0.6em;
	font-weight : 600;
	}

#finden table thead th:nth-child(1) {
	background : #6fbef6;
	}

#finden table thead th:nth-child(1)  strong, #finden table tfoot td:nth-child(1) strong {
	color : #6fbef6;
	}

#finden table thead th:nth-child(3) {
	background : #20638e;
	}

#finden table thead th:nth-child(3)  strong, #finden table tfoot td:nth-child(3) strong {
	color : #20638e;
	}

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

	#finden table {
	font-size : 0.8em;
	}

	#finden table tfoot td {
	padding-bottom : 60px;
	}

	#finden table tfoot td strong {
	font-size : 1.5em;
	}

	#finden table tbody td {
	padding : 70px 0 10px 0;
	}

}



.portrait-peter-heiniger {
	margin-bottom: 1rem;
	width: 100%;
	padding-top: 150%;
	background-image: url('../img/portrait_peter-heiniger_hoch2.jpg');
	background-size: cover;
	background-position: center center;
}

.portrait-stefan-zender {
	margin-bottom: 1rem;
	width: 100%;
	padding-top: 150%;
	background-image: url('../img/Stefan.jpg');
	background-size: cover;
	background-position: center center;
}

.portrait-mauro-schwegler {
	margin-bottom: 1rem;
	width: 100%;
	padding-top: 150%;
	background-image: url('../img/portrait-mauro-schwegler-hoch.jpg');
	background-size: cover;
	background-position: center center;
}

.arbeitsplatz {
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/arbeit_arbeitsplatz_arme.jpg');
	background-size : cover;
	background-position : center center;
	}

.bildaktion {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/Bild zu Aktion.jpg');
	background-size : cover;
	background-position : center center;
	}

.rausausderkrise {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/workers-659883_1280.jpg');
	background-size : cover;
	background-position : center center;
	}

.technology {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/technology.jpg');
	background-size : cover;
	background-position : center center;
	}

.chemieextra {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/chemist-3014142_1920.jpg');
	background-size : cover;
	background-position : center center;
	}

.personalschweiz {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/samuel-zeller-699332-unsplash.jpg');
	background-size : cover;
	background-position : center center;
	}

.grouppeople {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/group-of-people-sitting-on-sofa-while-discussing-2962135.jpg');
	background-size : cover;
	background-position : center center;
	}

.chefreden {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/computerspielsucht-therapie-psychologen.jpg');
	background-size : cover;
	background-position : center center;
	}

.lernendefans {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/concert-768722_960_720.jpg');
	background-size : cover;
	background-position : center center;
	}

.wegeundchancen {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/csm_1025183224_239aecbafd.jpg');
	background-size : cover;
	background-position : center center;
	}

.lernendeimfokus {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/startup-1018514_960_720.png');
	background-size : cover;
	background-position : center center;
	}

.wettbewerb {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/wettbewerbumlernende.jpg');
	background-size : cover;
	background-position : center center;
	}

.gefragterlehrbetrieb {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/gefragterlehrbetrieb.jpg');
	background-size : cover;
	background-position : center center;
	}

.companygrowth {
	margin-top: 2rem;
	margin-bottom : 1rem;
	width : 100%;
	padding-top : 67%;
	background-image : url('../img/pexels-photo-1081228.jpg');
	background-size : cover;
	background-position : center center;
	}

/*
@media (orientation: portrait) and (max-width: 800px) {

	.portrait {
	padding-top : 150%;
	background-image : url('../img/portrait_peter-heiniger_hoch2.jpg');
	}
}
*/


.partner {
	text-align : justify;
	}

.partner a {
	width: 150px;
	display : inline-block;
	margin-top : 25px;
	text-align : center;
	font-weight : 400;
	color : black;
	}

.partner a img {
	width : 100px;
	}

.partner a small {
	display : block;
	}

.partner:after {
  content : "";
  display : inline-block;
  width : 100%;
}


/*
.kunden {
	text-align : justify;
}
*/

.kunden img {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
	width: 200px;
    height: 85px;
    object-fit: contain;
	display : inline-block;
	margin-top : 25px;
	text-align : center;
	font-weight : 400;
	color : black;
    vertical-align: middle;
    border: 1px solid black;
    mix-blend-mode: multiply;
    filter: grayscale(100%);
}

@media (max-width: 500px) {
    .kunden img {
        width: 100px;
        height: 42px;
        padding: 3px;
    }
}

.kunden small {
	display : block;
}

.kunden:after {
  content : "";
  display : inline-block;
  width : 100%;
}




ul.kontakt {
	margin : 0;
	padding-left : 0;
	font-size : 1.5rem;
	vertical-align : middle;
	}

ul.kontakt li {
	position : relative;
	margin : 2rem 0;
	}

ul.kontakt li strong{
	margin-left : 75px;
	vertical-align : middle;
	}

ul.kontakt li strong img {
	margin : 0;
	max-width : 80%;
	vertical-align : middle;
	}

ul.kontakt li:before {
	content : '?';
	display : block;
	position : absolute;
	top : -5px;
	left : 10px;
	width : 60px;
	line-height : 60px;
	color : white;
	text-align : center;
	vertical-align : middle;
	background : #2c8cc8;
	border-radius : 100px;
	}

.kontakt li.tel:before  {
	content : '\260E';
	}

.kontakt li.mobile:before  {
	content : '\2706';
	}

.kontakt li.email:before  {
    content : '\2709';
}

.kontakt li.linkedin:before  {
    content : 'in';
}

.kontakt .linkedinpre, .kontakt .linkedinmain {
    margin: 0px;
}


iframe.map {
	display : block;
	margin : 0;
	padding : 0;
	width : 100%;
	height : 600px;
	border : 0;
	}



/* FOOTER ||||||||||||||||||||||||||||||||||||||*/

footer {
	position : relative;
	flex-grow : 0;
	flex-shrink : 1;
	flex-basis : auto;
	width : 100%;
	padding-top : 35px;
	padding-bottom : 35px;
	min-height : 150px;
	color : white;
	text-align : center;
	background : #2c8cc8 url('../img/footer-bg.gif');
	background-position : center center;
	}

footer div.table {
	display : table;
	border-collapse : collapse;
	margin : 0 auto;
	}

footer div.table img {
    max-width: 100%;
}

footer div.tr {
	display : table-row;
	}

footer div.td {
	display : table-cell;
	vertical-align : top;
	padding-right : 5vw;
	text-align : left;

	vertical-align : bottom;
	}

footer div.td:last-child {
	padding-right : 0;
	}

footer p {
	display : inline-block;
	font-size : 0.9rem;
	vertical-align : top;
	}

footer p {
	margin-right : 25px;
	margin-top : 25px;
	}

footer strong {
	text-transform : uppercase;
	letter-spacing : 0.02rem;
	font-weight : 500;
	}

footer a {
	text-decoration : none;
	color : white;
	-webkit-transition : all 0.1s ease;
       -moz-transition : all 0.1s ease;
		 -o-transition : all 0.1s ease;
			transition : all 0.1s ease;
	}

footer a:hover {
	color : #20638e;
	}



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

	footer {
	text-align : center;
	}

	footer div.table {
	display : inline-block;
	padding-left : 5%;
	padding-right : 5%;
    width: 90%;
	text-align : left;
	}

	footer div.tr {
	display : block;
	}

	footer div.td {
	display : block;
	padding : 20px 0;
	}

    footer p {
        margin-right: 0;
    }

}

.slides {
  display: none;
  width: 100%;
}

.animate-right {
  position: relative;
  animation: animateright 1s
}

.animate-left {
  position: relative;
  animation: animateleft 1s
}

@keyframes animateright {
  from { right :-500px; opacity:0 } to { right:0; opacity:1 }
}

@keyframes animateleft {
  from { left :-500px; opacity:0 } to { left:0; opacity:1 }
}