@charset "utf-8";
/*
@media only screen and (max-width: 000px) {}
@media only screen and (max-height: 000px) {}
*/

/* temporär, kommt aus main-app.css und muss hier stehen, weil "neues" design deaktiviert wurde - sonst zeigt es karte nicht mehr an (18.07.23) */
#map_gps {
	height: 35vh;
}



/* CSS Document */

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

	box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

@font-face {
    font-family: 'akrobatblack';
    src: url('../font/akrobat/akrobat-black-webfont.eot');
    src: url('../font/akrobat/akrobat-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/akrobat/akrobat-black-webfont.woff2') format('woff2'),
         url('../font/akrobat/akrobat-black-webfont.woff') format('woff'),
         url('../font/akrobat/akrobat-black-webfont.ttf') format('truetype'),
         url('../font/akrobat/akrobat-black-webfont.svg#akrobatblack') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'akrobatsemibold';
    src: url('../font/akrobat/akrobat-semibold-webfont.eot');
    src: url('../font/akrobat/akrobat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/akrobat/akrobat-semibold-webfont.woff2') format('woff2'),
         url('../font/akrobat/akrobat-semibold-webfont.woff') format('woff'),
         url('../font/akrobat/akrobat-semibold-webfont.ttf') format('truetype'),
         url('../font/akrobat/akrobat-semibold-webfont.svg#akrobatsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight';
    src: url('../font/roboto/roboto_light_macroman/Roboto-Light-webfont.eot');
    src: url('../font/roboto/roboto_light_macroman/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto/roboto_light_macroman/Roboto-Light-webfont.woff') format('woff'),
         url('../font/roboto/roboto_light_macroman/Roboto-Light-webfont.ttf') format('truetype'),
         url('../font/roboto/roboto_light_macroman/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('../font/roboto/roboto_regular_macroman/Roboto-Regular-webfont.eot');
    src: url('../font/roboto/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto/roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
         url('../font/roboto/roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../font/roboto/roboto_regular_macroman/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


img { height: auto; max-width: 100%}

html, body {height: 100%;}
/* body {

	
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	color: #878787;
	background: #E6E6E6;
	
} */

h1 {
	font-family: 'akrobatblack', Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size: 45px;
	margin: 0 0 0 0;
	color: #f8bd2c;
}
h1.order {color: #fff; text-align: center;}
h1.order span { font-size: 64px}
h1.titel-next {font-size: 55px; color: #000;}
h1 span.grau {color: #000}
h1.space {margin-bottom: 10px;}
h1.white {
	color: #fff;
}

@media only screen and (max-width: 500px) {
	h1 { font-size: 35px !important}
}

h2, #f_suche, button.zeitdatum {
	font-family: 'robotoregular',Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight:normal;
	color: #000;
	margin: 0 0 0 0;
}

button.zeitdatum {
    cursor: pointer;
}

h2 span.zahlungsmittel {font-size: 14px;}

h2.text {
		width: 100%;
		float: left;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	color: #878787;
	margin: 0 0 0 0;
}

a {
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
	transition: all 0.1s linear;

	color: #878787;
	text-decoration: underline;
}

strong { font-weight: bold;}
cite { font-style: italic;}

a:hover {
	text-decoration: none;
}


#block {
	margin: 0px auto;
	width: 980px;
	height: 550px;
}


header {
	position: absolute;
	width: 100%;
	padding-top: 30px;
	z-index: 99;
	height: 10px;
}
header.shrink {padding-top: 0;}

header .lang {
	/*width: 100%;*/
	margin-left: 285px;
}


@media only screen and (max-width: 720px) {
	header .lang { margin-left: 225px;}
}
@media only screen and (max-width: 480px) {
	header .lang { margin-left: 170px;}
}
@media only screen and (max-width: 355px) {
	header .lang { margin-left: 140px;}
}

header .lang img { height: 20px;}

header .logo.shrink {height: 50px;}

header a .logo {
	background: rgba(0,0,0,0.8);
	padding-top: 100px;
	margin-top: -100px;
	float: left;
	margin-bottom: 20px;
	padding: 100px 10px 10px 10px;
}

header .tel, header .fontsize, header .words {
	font-family: 'akrobatblack', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 64px;
	color: #6f6f70;
	float: left;
}
header .tel a {
	text-decoration: none;
	color: #000;
	margin-left: 20px;
}
header .tel img { height: 44px; margin-right: 25px;}

header .tel.shrink { font-size: 32px; margin-top: 10px;}
header .tel.shrink img { height: 22px;}

header .fontsize {
	font-size: 30px;
	width: 50%;
	margin-bottom: -10px;
	margin-left: 20px;
	color: #000;
}




header .words {
    background: #e01f25;
    float: right;
    margin-top: -30px;
    color: #fff;
    position: relative;
    z-index: 999;
    font-size: 20px;
}

header .words.text {
    padding: 7px 10px 10px 10px;
}

header .words img {
    width: 80px;
}

@media only screen and (max-width: 570px) {
	header .words img {
        width: 60px;
    }

    header .words.text {
        font-size: 15px;
        margin-bottom: 20px;
    }
}




.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;

  margin-left: -500px;
  margin-top: 60px;

  font-size: 12px;
  font-family: 'robotoregular',Arial, Helvetica, sans-serif;
  padding: 5px 5px 10px 10px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}







nav {
	margin-top: 10px;
	width: 100%;
	float: left;
}

nav.bottomright {
	position: fixed;
	margin: 0;
	bottom: 0;
	right: 0;
	z-index: 999;
	width: 150px;

	-webkit-animation-duration: 1s;
	animation-duration: 1s;

	-webkit-animation-delay: 1s;
	animation-delay: 1s;

	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;

	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}

  to {opacity: 1; }
}

@keyframes fadeIn {
  from {opacity: 0; }

  to { opacity: 1;}
}

nav a {
	font-family: 'akrobatblack', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 30px;
	color: rgba(78,77,77,0.8);
	text-decoration: none;
	color: #000;
}

nav a.shrink {font-size: 20px;}

/*
@media only screen and (max-width: 720px) {
	header .logo {height: 70px;}
	header .tel { font-size: 45px; margin-top: 15px;}
	header .tel img { height: 32px; margin-right: 15px}
}
@media only screen and (max-width: 520px) {
	header .logo {height: 50px;}
	header .tel { font-size: 32px; margin-top: 10px;}
	header .tel img { height: 22px;}
}
@media only screen and (max-width: 380px) {
	header .logo {height: 50px;}
	header .tel { font-size: 27px; margin-top: 15px;}
	header .tel img { display: none;}
}
*/
@media only screen and (max-width: 720px) {
	header .fontsize { width: auto}
	header .tel { font-size: 40px}

	header img.logo {width: 205px;}
}
@media only screen and (max-width: 480px) {
	header .fontsize { font-size: 25px;}
	header .tel { font-size: 25px}

	header img.logo {width: 150px;}
}
@media only screen and (max-width: 355px) {
	header .fontsize { font-size: 20px;}
	header .tel { font-size: 20px}

	header img.logo {width: 120px;}
}

nav ul { list-style-type: none; text-align: justify; }
nav li:last-of-type::after { content: ''; padding-left: 100%; display: inline-block; }
nav li { list-style: none; display: inline; }

@media only screen and (max-width: 800px) {
	nav ul {text-align: center;}
	nav li {float:  left; width: 100%; margin-top: 10px;}

	nav li a {
		color: #000;
		background: #fff;
		padding: 0px 5px;
	}
}


.move-mobil {
		visibility: hidden;
}

@media only screen and (max-width: 910px) {
	.move {
			display: none;
	}
	.move-mobil {
			visibility: visible;
	}
}

/*NAV ANIMATION*/
@media only screen and (max-width: 910px) {
	.move-mobil {
		position: relative;

		-webkit-animation: diagonal 1s;
		-moz-animation: diagonal 1s;
		-o-animation: diagonal 1s;
		animation: diagonal 1s;

		animation-delay: 1s;
		animation-fill-mode: both;
	}

	/**/
	@-webkit-keyframes diagonal {
		0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(20vh) translatey(80vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}

	@-moz-keyframes diagonal {
	   0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(20vh) translatey(80vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}
	@-o-keyframes diagonal {
		0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(20vh) translatey(80vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}

	@keyframes diagonal {
		0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(20vh) translatey(80vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}
}

@media only screen and (min-width: 911px) {
	.move-mobil.shrink {
		position: relative;
		-webkit-animation: diagonal 1.5s;
		-moz-animation: diagonal 1.5s;
		-o-animation: diagonal 1.5s;
		animation: diagonal 1.5s;

		opacity: 0
	}

	/**/
	@-webkit-keyframes diagonal {
		0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}

	@-moz-keyframes diagonal {
	   0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}
	@-o-keyframes diagonal {
		0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}

	@keyframes diagonal {
		0% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;
		}
	}

	.move.top {
		position: relative;
		-webkit-animation: diagonaltop 1.5s;
		-moz-animation: diagonaltop 1.5s;
		-o-animation: diagonaltop 1.5s;
		animation: diagonaltop 1.5s;

		opacity: 1
	}

	@-webkit-keyframes diagonaltop {
		0% {

			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;

		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
	}

	@-moz-keyframes diagonaltop {
		0% {

			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;

		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
	}

	@-o-keyframes diagonaltop {
		0% {

			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;

		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
	}

	@keyframes diagonaltop {
		0% {

			transform: translatex(60vh) translatey(100vh) translateZ(-900px) scale(0.1);
			opacity: 0;

		}
		60% {
			opacity: 0.8;
		}
		100% {
			transform: translatex(0) translatey(0) scale(1);
			opacity: 1;
		}
	}
}


/*end NAV ANIMATION*/


.center-content {
	max-width: 1200px; /*anpassbar*/
	width: 100%;
	margin: 0 auto;
	padding: 0 2% 0 2%;
}

section.order, section.fahrtenrechner, section.cardblock, section.flotte, section.team, section.werbung, footer {float: left;}



/*ORDER*/

.w3w {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}



section.order {
	width: 100%;
	min-height: 100%;
	background-position: center center;
	-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	padding-top: 250px;
	float: left;
	overflow: hidden;

	background-color: pink;

}

@media only screen and (max-width: 910px) {
	section.order {
		padding-top: 200px;
	}
}

@media only screen and (max-width: 720px) {
	section.order {
		padding-top: 130px;
	}
}


section.order .trapez {
	width: 100%;
	padding-bottom: 250px;
}

section.order .app {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;

	position: relative;
	z-index: 99;
}


/* 
step3hidden hidden solang noch kein taxi geladen ist
step3load, hidden wenn taxi geladen ist - animiertes gif ausblenden

*/
/* section.order .app .step3search, section.order .app .step3load {
	
} */

section.order .app .step3active, section.order .app .step3activemaps {
	display: none;
}





section.order .notes {
		width: 100%;
		max-width: none;
}

section.order .logout {
	float: right;
	position: absolute;
	right: 0;
}


.zahlungsmittel-icon {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	margin-top: -84px;
	position: relative;
	z-index: 99

}

.zahlungsmittel-icon span {
	font-family: 'akrobatblack', Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size: 30px;
	color: #000;
	text-transform: uppercase;
}
.zahlungsmittel-icon img { margin-right: 20px;}


.zahlungsmittel-icon img.jubizahlungsmittel {
    height: 80px;
    transform: rotate(-10deg);
}

.button_order_step2 {
	float: left;
	margin-bottom: 100px;
	width: 100%;
}




/*JUBI*/
/*
@media only screen and (max-height: 850px), (max-width: 600px) {
    .zahlungsmittel-icon {
        position: relative;
        z-index: 9999;
        margin-top: 150px;
        float: left;
    }
}

JUBI*/

/*JUBILÄUM*/
/*
.jubipng {
    margin-top: 0;
    position: absolute;
    z-index: 1;
    transform: rotate(10deg);
    margin-left: 800px;
    height: 300px;
}

@media only screen and (max-width: 1090px) {
	.jubipng {
        margin-left: 600px;
    }
}

@media only screen and (max-width: 890px) {
	.jubipng {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 890px) {
	.jubipng {
        margin-top: 80px;
        margin-left: 20px;
    }
}


.app h2.text .jubi {
    font-family: 'akrobatblack',Arial, Helvetica, sans-serif;
    font-size: 30px;

}

.app h2.text .jubi2 {
    font-family: 'akrobatblack',Arial, Helvetica, sans-serif;
    font-size: 23px;

}

.app h2 span {
    font-family: 'akrobatblack',Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-size: 30px !important;
    background-color: transparent;
    color: #000 !important;
    line-height: 1.3;
    padding: 0;
}

.app h2.text .capa {
    color: #f8bd2c;
}

@media only screen and (max-width: 530px) {
	.app h2.text .jubi {
        font-size: 23px;
    }
}

JUBILÄUM*/

/*ladepunkte in 3. schritt order*/

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
}
.lds-ellipsis div {
  position: absolute;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f8bd2c;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}



/*FAHRTENRECHNER*/
section.fahrtenrechner {
	width: 100%;
	height: 100%;
}

section.fahrtenrechner iframe, #map_canvas {
	/*position: absolute;*/
	height: 100%;
	width: 100%;
}

section.fahrtenrechner .maps-fix {
	background:transparent;
	position:relative;
	z-index: 1;
	width:100%;
	height:100%;
}

@media only screen and (max-width: 800px) {
	section.fahrtenrechner, section.fahrtenrechner iframe, section.fahrtenrechner .maps-fix { height: 130%;}
}

section.fahrtenrechner .titel {
	position: absolute;
	z-index: 1;
	margin-top: 10%;
	padding-left: 10%;
	padding-right: 20px;
	background-color: rgba(255,255,255,0.8);
}
@media only screen and (max-width: 480px) {
	section.fahrtenrechner .titel h1 {
		font-size: 35px;
	}
}

section.fahrtenrechner h2 {
	color: #000;
	padding-bottom: 10px;
}
@media only screen and (max-width: 480px) {
	section.fahrtenrechner h2 {	width: 250px;}
	section.fahrtenrechner .ergebnis-out h2 {width: auto;}
}

section.fahrtenrechner .fahrtenrechner-app {
	position: absolute;
	z-index: 2;
	margin-top: 23%;
	margin-left: 10%;
}
@media only screen and (max-width: 1250px) {section.fahrtenrechner .fahrtenrechner-app {margin-top: 25%;}}
@media only screen and (max-width: 1090px) {section.fahrtenrechner .fahrtenrechner-app {margin-top: 30%;}}
@media only screen and (max-width: 800px) {section.fahrtenrechner .fahrtenrechner-app {margin-top: 35%;}}
@media only screen and (max-width: 630px) {section.fahrtenrechner .fahrtenrechner-app {margin-top: 40%;	}}
@media only screen and (max-width: 540px) {section.fahrtenrechner .fahrtenrechner-app {margin-top: 45%;	}}
@media only screen and (max-width: 480px) {section.fahrtenrechner .fahrtenrechner-app {margin-top: 60%;	}}
@media only screen and (max-width: 400px) {section.fahrtenrechner .fahrtenrechner-app {margin-top: 70%;	}}

section.fahrtenrechner input[type="text"] { width: 385px;}

section.fahrtenrechner .ausgabe-kosten, section.fahrtenrechner .ergebnis-out {
	background: rgba(255,255,255,0.8);
	padding: 5px;
}
section.fahrtenrechner .ausgabe-kosten h2 .bold {
	font-weight: 900;
	color: #000;
}

section.fahrtenrechner .ergebnis-out {
	max-width: 900px;
	width: 100%;
	float: left;
}
section.fahrtenrechner #f_ort, #f_fr, #f_euro, #f_km, #f_beschreibung {
	width: 25%;
	float: left;
	padding-bottom: 10px;
    height: 75px;
}

#f_fr, #f_km { width: 15%;}
#f_beschreibung {
    width: 45%;
    padding-right: 10px;
}

@media only screen and (max-width: 500px) {section.fahrtenrechner #f_ort, #f_fr, #f_euro, #f_km, #f_beschreibung { width: 100%;}}

/*
@media only screen and (max-width: 415px) {
	.zahlungsmittel-icon {
		width: 100%;
		float: left;
		text-align: center;
	}
	.zahlungsmittel-icon img {
		margin: 0;
		width: 50px !important;
		height: auto !important;
		text-align: center;
	}
}
*/

/*CAPA CARD*/
section.cardblock {
	/*background: url('../image/hg-order.jpg') no-repeat bottom center;*/
	background-position: bottom center;
	-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;

	width: 100%;
	min-height: 100%;
	padding-bottom: 50px;
}

section.cardblock .trapez {
	width: 100%;
	margin-top: 5%;

	float: left;
	/*
	background: url('../image/trapez-02.svg') no-repeat bottom center;
	-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	*/
}

section.cardblock .capacard-image { margin-top: 100px; width: 90%;}

@media only screen and (max-width: 600px) {
	section.cardblock .trapez {	margin-top: 25%;}
	section.cardblock .capacard-image {
		margin-top: -100px;
		width: 70%;
		margin-bottom: -100px;
	}
}

section.cardblock .card {
	width: 50%;
	padding-top: 10%;
	padding-bottom: 100px;
	position: relative;
	z-index: 1;
	float: right;
}

@media only screen and (max-width: 600px) {
	section.cardblock .card {
		width: 80%;
		margin: 0 10% 0 10%;
	}
}
@media only screen and (max-width: 450px) {
	section.cardblock .card {
		width: 100%;
		margin: 0;
	}
}

section.cardblock .card h2 {
	max-width: 400px;
	width: 100%;
	color: #fff;
}

section.cardblock .card span, .app span {
	background: #000;
	color: #000;
	padding: 2px 5px;
	line-height: 1.9;
}

section.cardblock .card span {
    background: #fff;
}

.app span {
    color: #f8bd2c;
}

.app h1 span {
    font-size: 30px;
}

.app h2.text span, .app h2 span.normal {
    color: #fff;
}
.app h2.text span.gelb, .app h2 span a {
    color: #f8bd2c;
}




.app form h2 span {
    color: red;
}
.app h2 a {
    color: #000;
}

.time {
    float: left;
}

.time span {
    float: left;
}

.timetext span {
	font-size: 16px;
}

h2.timetext {
	text-align: center;
	margin-bottom: -5px;
}

/* .timetext .gelb {
	
} */

#zeit, #datum {
	font-size: 30px;
	height: auto;
}

img.zeit {
    height: 25px;
    margin-bottom: 5px;
    /*margin-left: 10px;*/
    margin-right: 5px;
    /* float: left; */
}

section.cardblock .file-upload {
	font-family: 'robotolight',Arial, Helvetica, sans-serif;
	color: #000;
	font-weight: normal;
	font-size: 20px;
}

/*UNSERE FLOTTE*/
section.flotte {
	width: 100%;
	min-height: 100%;
	/*background: url('../image/flotte.svg') no-repeat bottom left #e6e6e6;*/
	-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	background: #fff;
}

section.flotte h1 {
	padding-top: 90px;
	margin-bottom: 50px;
}
@media only screen and (max-width: 830px) {section.flotte h1 { padding-top: 40px;}}

section.flotte .auto {
	width: 50%;
	float: left;
	margin-bottom: 120px;
}
section.flotte .auto:nth-child(2n) {
    clear: left;
}

section.flotte .auto img {
	float: left;
	margin-right: 6%;
	width: 44%;
}



@media only screen and (max-width: 830px) {
	section.flotte .auto {width: 100%;}
}
@media only screen and (max-width: 490px) {
	section.flotte .auto { margin-bottom: 50px;}
	section.flotte .auto img {width: 80%;}
}

section.flotte .auto div {
	float: right;
	width: 50%;
}
@media only screen and (max-width: 490px) {
	section.flotte .auto div {width: 100%; margin-top: 10px}
}

section.flotte .auto h2 {
	padding-right: 10px;
}

/*TEAM*/
section.team {
	background: url('../image/mitarbeiter-hg-glow.jpg') no-repeat top center;
	-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	min-height: 100%;
	width: 100%;
	/*padding-top: 50px;*/
}

section.team .trapez {
	width: 100%;
	float: left;

	background: url('../image/trapez-03.svg') no-repeat bottom center;
	-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}

section.team header {
	position: relative;
}
section.team header h1 {
	color: #fff;
	margin-bottom: 50px;
}
section.team .mitarbeiter {
	/*width: 40%;*/
	width: 100%;
	float: left;
	position: relative;
	z-index: 99;

	/*margin-right: 5%;*/
	/*margin-bottom: 80px;*/

}
section.team .mitarbeiter:nth-child(2n) { float: right;}

/*
@media only screen and (max-width: 970px) {
	section.team .mitarbeiter {	width: 45%;}
}
@media only screen and (max-width: 780px) {
	section.team .mitarbeiter {	width: 90%; float: right}
	section.team .mitarbeiter:nth-child(2n) { float: left;}
}
@media only screen and (max-width: 420px) {
	section.team .mitarbeiter {	width: 100%; float: right}
}
*/

section.team .mitarbeiter.grau {
	background: #fff;
	color: #FAFCFC;
}
section.team .mitarbeiter.grau h1, section.team .mitarbeiter.grau h2 {color: #6f6f70;;}
section.team .mitarbeiter.gelb {
	background: rgba(240,226,5,0.9);
}
section.team .mitarbeiter.gelb h1, section.team .mitarbeiter.gelb h2 {color: #333333;}

section.team .mitarbeiter.grau h1, section.team .mitarbeiter.gelb h1 {
	margin-top: 40px;
	font-size: 30px;
}
@media only screen and (max-width: 420px) {
	section.team .mitarbeiter.grau h1, section.team .mitarbeiter.gelb h1 {
		margin-top: 20px;
	}
}

section.team .mitarbeiter img {
	float: left;
	margin-right: 20px;
	max-width: 200px;
}

section.team .mitarbeiter h2 {
	padding-right: 10px;
}

/*NEU TEAM*/
/**/
section.team img {
	width: 100%;
	float: left;
}
/*WERBUNG*/
section.werbung {
	width: 100%;
	min-height: 100%;
	/*background: url('../image/werbung.svg') no-repeat top right #e6e6e6;*/
	background: #fff;
	padding-bottom: 180px;
}

section.werbung h1 {
	padding-top: 90px;
	margin-bottom: 20px;
	width: 100%;
	/*text-align: right;*/
	font-size: 55px;
}
@media only screen and (max-width: 830px) {section.werbung h1 { padding-top: 40px;}}

section.werbung h2 {
	/*text-align: right;*/
	font-family: 'robotolight',Arial, Helvetica, sans-serif;
	font-size: 20px;
	margin-bottom: 50px;
}
@media only screen and (max-width: 500px) {section.werbung h2 { font-size: 16px;}}

section.werbung a {color: #000;}

@media only screen and (max-width: 1040px) {
	section.werbung img {
		float: right;
		margin-left: 30px;
		margin-top: 20px;
	}
}

/*FOOTER*/
footer {
	width: 100%;
	min-height: 100%;
}


/*WER STOSST HIER AUF!?*/
/*
footer iframe {
	position: absolute;
	width: 100%;
	height: 150%;
}
*/

footer.hgbild {
	width: 100%;
	height: 100%;

	/*background: url('../image/hg-card.jpg') no-repeat bottom center;*/
	background-position: bottom center;
	-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}

footer .addresse {
	width: 30%;
	/*
	min-height: 100%;
	*/

	height: 100%;

	position: relative;
	z-index: 1;


	padding: 70px 0 0 3%;
	float: left;

	background: rgba(255,255,255,0.7);
}

/* footer address {} */

@media only screen and (max-width: 1250px) {
	footer.hgbild {
		height: 140%;
		background-position: bottom right;
}
	footer .addresse { width: 40%; }
}
@media only screen and (max-width: 920px) {footer .addresse { width: 50%; }}
@media only screen and (max-width: 590px) {
	footer .addresse {
		width: 100%;
		min-height: 100%;
		position: relative;
		background: rgba(255,255,255,0.7);
	}
	/*
	footer iframe {
		position: relative;
		height: 500px;
		float: left;
	}
	*/
}
@media only screen and (max-width: 500px) {
	footer .addresse {
		padding-top: 30px;
	}
}


footer .addresse h1 {
	color: #000;
	font-size: 55px;
}
footer .addresse h2 {
	color: #000;
	font-size: 24px;
}
@media only screen and (max-width: 500px) {footer .addresse h2 { font-size: 16px;}}

footer .addresse form {margin-top: 100px; margin-bottom: 50px;}
footer .addresse input[type="text"] {width: 85%}

@media only screen and (max-width: 500px) {
	footer .addresse form {margin-top: 40px;}
}

footer .addresse a {color: #000; text-decoration: none;}


/*------------------------------------------------------------------------------------------------*/

/*PAGE UP*/
/*
#back-top {
	position: fixed;
	bottom: 30px;
	z-index: 999;
	right: 5px;
}
#back-top a {
	width: 80px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

	float: right;
	margin: 0 30px 0 0;
}
#back-top a:hover {
	color: #000;
}

#back-top span {
	width: 80px;
	height: 80px;
	display: block;
	margin-bottom: 7px;
	background:url(../image/up-arrow.svg) no-repeat center center;
}
#back-top a:hover span {}

@media only screen and (max-width: 530px) {
	#back-top {bottom: 10px;}
	#back-top a {margin-right: 10px;}
	#back-top a, #back-top span { width: 60px; height: 60px;}
}
*/

/*------------------------------------------------------------------------------------------------*/

/* FORM CSS*/
input[type="text"], input[type="time"], input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select {
	font-family: 'robotolight',Arial, Helvetica, sans-serif;
	background-color: rgba(255,255,255,0.8);
	border: 1px solid #ccc;
	/* Textfarbe inaktiv */
	color: #000;
	font-weight: normal;
	font-size: 20px;
	padding: 5px 10px;
	max-width: 400px;
	width: 90%;
	border-radius: 4px;
	margin-bottom: 10px;
	-webkit-box-shadow: -3px 3px 3px rgba(87,87,89,0.50);
	box-shadow: -3px 3px 3px rgba(87,87,89,0.50);
}
#fahrtenrechner input[type="text"], #fahrtenrechner input[type="email"], #fahrtenrechner input[type="number"], #fahrtenrechner input[type="password"], #fahrtenrechner input[type="tel"], #fahrtenrechner textarea, #fahrtenrechner select {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid #fff;
}

input[type="time"],input[type="date"] {
    width: auto;
    float: left;
    height: 35px;
    margin-right: 20px;
}


@media only screen and (max-width: 480px) {
	#fahrtenrechner input[type="text"], #fahrtenrechner input[type="email"], #fahrtenrechner input[type="number"], #fahrtenrechner input[type="password"], #fahrtenrechner input[type="tel"], #fahrtenrechner textarea, #fahrtenrechner select {
		background-color: rgba(255,255,255,0.8);
		border: 1px solid #fff;
		max-width: 245px;
	}
}

input[type="text"]:hover, input[type="time"]:hover,input[type="date"]:hover,input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="tel"]:hover, textarea:hover, select:hover {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid #fff;
	color:#000;
}

input[type="text"]:focus, input[type="time"]:focus,input[type="date"]:focus,input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid #000;
	/* Textfarbe aktiv */
	color:#000;
}

#fahrtenrechner input[type="text"]:hover, #fahrtenrechner input[type="email"]:hover, #fahrtenrechner input[type="number"]:hover, #fahrtenrechner input[type="password"]:hover, #fahrtenrechner input[type="tel"]:hover, #fahrtenrechner textarea:hover, #fahrtenrechner select:hover {
	color: #000;
}

#fahrtenrechner input[type="text"]:focus, #fahrtenrechner input[type="email"]:focus, #fahrtenrechner input[type="number"]:focus, #fahrtenrechner input[type="password"]:focus, #fahrtenrechner input[type="tel"]:focus, #fahrtenrechner textarea:focus, #fahrtenrechner select:focus {
	color: #000;
}

/*platzhalter starttext*/
::-webkit-input-placeholder { color:rgb(84, 84, 84); }
::-moz-placeholder { color:rgb(84, 84, 84); } /* firefox 19+ */
:-ms-input-placeholder { color:rgb(84, 84, 84); } /* ie */
input:-moz-placeholder { color:rgb(84, 84, 84); }
/*vorlage html placeholder*/
/*
bei klick in feld verschwindet placeholder
<input name="test" id="test" placeholder="text_test" {literal}onfocus="if(placeholder == 'text_test'){placeholder=''};" onblur="if(placeholder== ''){placeholder='text_test'}"{/literal}>
*/

input.send, .send {
	border:1px solid #fff;
	background-color: #fff;
	color: #000;
	font-family: 'akrobatblack',Arial, Helvetica, sans-serif;
	font-size: 25px;
	padding: 9px 12px 5px 12px;
	border-radius: 13px;
	-webkit-box-shadow: -3px 3px 3px rgba(87,87,89,0.50);
	box-shadow: -3px 3px 3px rgba(87,87,89,0.50);
	text-transform: uppercase;

    text-decoration: none;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
}
#fahrtenrechner input.send {
	border:1px solid #fff;
	background-color: #fff;
	color: #000;
}


input[type="submit"]:active {
    position:relative;
    top:1px;
}

#false_input {
	border: 2px solid #fff;
}

.notice {
	font-family: 'robotoregular',Arial, Helvetica, sans-serif;
	border:1px solid gold;
	background:lightyellow;
	padding:10px 10px 10px 10px;
	margin:5px 0;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	color:#DEAE00;
	line-height:120%;
	max-width: 390px;
	width: 90%;
	vertical-align: center;
	text-shadow:0px 1px rgba(255,255,255,0.5);
	position:relative;
	top:0;
	left:0;
	clear:both;
	font-size: 16px;
}

/* .notice.warning{}default */
.notice.error{border:1px solid red;background:pink;color:red;}
.notice.success{border:1px solid #060;background:#94C01F;color: #060;}
.notice .icon{color:inherit;margin-right:10px;margin-bottom:-5px;margin-top:-5px;}
.notice a.icon.close,
.notice a.icon.close:active,
.notice a.icon.close:visited{position:absolute;top:5px;right:-5px;left:auto;color:inherit;}

/*NAVER*/

.naver .naver-handle {
	color: #333;
	cursor: pointer;
	display: none;
	font-size: 14px;
	line-height: 28px;
	text-transform: uppercase;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	/*background: #ccc;*/
}
.naver .naver-handle:before {
	background: url(../image/jquery.fs.naver-icon.svg) no-repeat center;
	content: '';
	display: block;
	margin: 0;
	width: 100px;
	height: 40px;
	float: right;
	margin-bottom: 50px;
	margin-right: 20px;
}
.naver .naver-wrapper { height: auto; /*background: #000; */}
.naver .naver-container:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }

.naver.enabled .naver-handle { display: block; }
.naver.enabled .naver-wrapper {
	height: 0px;
	overflow: hidden;
	margin-top: -300px;
}

.naver.enabled .naver-wrapper li {
	float: right;
	width: 100%;
	text-align: right;
	margin-right: 30px;
}

.naver.enabled .naver-wrapper li a { color: #000;}

/*HAM NAV*/
#menu-button{
  width: 90px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: all linear .3s;
  padding: 4px;
  z-index: 1;
  float: right;

  margin: 0 auto;
  margin: 0 25px 25px 0;
}

/*
#menu-button.active{
	margin-top: 10px;
	margin-bottom: -10px;
}
*/
#line-1,#line-2,#line-3{
  background: #000;
  height: 8px;
  margin: 7px auto;
  transition: all linear .3s;
}

#line-1.active{
-webkit-transform: translate(0px,15px) rotate(45deg);
transform: translate(0px,15px) rotate(45deg);
}

#line-2.active{
opacity: 0;
}

#line-3.active{
-webkit-transform: translate(0px, -15px) rotate(-45deg);
transform: translate(0px, -15px) rotate(-45deg);
}

#menu{
  display: none;
  position: absolute;

  margin: -370px 0 0 0;
  text-align: right;
  right: 0;
}

#menu li {
	float: right;
	width: 100%;
	text-align: right;
	margin-right: 30px;
	margin-top: 10px;
}

#menu li a {
	color: #000;
	background: #fff;
	padding: 0px 5px;
}