@charset "utf-8";

/* R E S E T */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

strong {
	font-weight: bold;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* E N D   R E S E T */


/* alle Deklarationen bis einschliesslich 320px Breite */
body {
	margin: 0;
	padding: 0;
	font: 100%/1.8 "nimbus-sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #4e4e4e;	
}
#top {
	margin: 0;
	padding: 0;
	height: 1px;
	width: 100%;
}
/*div.bewerbung {
	padding: 0.75em 1em 0.1em 1em;
	background-color: #c5c5e1;
	margin: 0 0 1em 0;
}*/
.printonly {
	display: none;
}
.noprint {
}

.clearfix { zoom:1; }
.clearfix:before, .clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	overflow:hidden;
}
.clearfix:after { clear:both; }

a:link {
	color: #4e4e4e;
	text-decoration: underline;
}
a:visited {
	color: #4e4e4e;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
.rot {
	color: #F00 !important;
}
.tabelle img {
	width: 100%;
	height: auto;
	border: 1px solid #CCC;
}

.wrapper {
	width: 100%;
	margin: 0 auto;
}
.menuskip {
	text-align: center;
}
.menuskip a.skip {
	font-family: Arial, sans-serif;
	font-size: 1.0em;
	line-height: 1.5;
	text-decoration: none;
	color: #4e4e4e;
}

header {
	position: relative;
	width: 100%;
	height: auto;
	padding: 1em 0;
}
#content, #header-container {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#logo {
	float: left;
	width: 75%;
	margin: 0;
}
#logo img {
	width: 100%;
	max-width: 250px;
	height: auto;
}
#flags {
	float: right;
	width: 10%;	
	margin: 0;
}
#flags img {
	float: right;
	width: 100.0%;
	height: auto;
	margin: 2.60% 8px 0 0;
	max-width: 40px;
}
#flags img.first {
	margin-bottom: 0.75em;
}
#foto {
	margin: -0.5em 0 0 0;
}
#foto img {
	padding: 0;
	width: 100%;
	height: auto;	
}
nav {
	display: none;
}
.desktop {
	display: none;
}
.main-content, .sub-content {
	padding: 0 2.5%;
}
.main-content {
	margin-top: 0.5em;
}
.main-content p, .main-content ul, .main-content ol {
	margin-bottom: 1em;
}
.sub-content {
	text-align: center;
}
.sub-content h1 {
	text-align: left;
}
.sub-content img {
	text-align: center;
	width: 47.5%;
	height: auto;
	margin: 0.5em 1% 0 0;
	padding: 0;
	border: 1px solid #c5c5e1;
} 

.main-content ul, .main-content ol {
	list-style-type: square;
	padding: 0 0 0 2em;
}
.main-content ol {
	list-style-type: decimal;
	padding-left: 1.2em;
}
.main-content ol > li {
	padding: 1em 0;
}
#jobs div.more {
	height: 0.5em;
}
#jobs .main-content ol ul {
	padding: 0 0 0 1em;
	font-size: 1em;
}
h1 {
	font-family: "jaf-bernina-sans-condensed", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 1.75em;
	color: #33509b;
	margin-bottom: 0.25em;
}
.main-content h1 {
	line-height: 1.5;
}
.sub-content h1 {
	font-size: 1.5em;
	margin-bottom: 0.5em;
}
h2, .agb h1 {
	font-family: "jaf-bernina-sans-condensed", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 1.5em;
	color: #33509b;
	margin-bottom: 0.5em;
}
.main-content h2 {
	line-height: 1.25;
}
h3, .agb h2 {
	font-family: "jaf-bernina-sans-condensed", sans-serif;
	font-style: normal;	
	font-weight: 700;
	font-size: 1.25em;
	color: #33509b;
	margin-bottom: 0.25em;
}
.main-content h3 {
	line-height: 1.05;
}
h4 {
	font-weight: bold;
	font-size: 1.0em;
	color: #33509b;
	margin: 1.25em 0 0 0;
	margin: 0 0 0.5em 0;
}
.main-content h4 {
	line-height: 1.5;
}
  
footer {
	width: 100%;
	height: auto;
	background: #33509b;
	margin: 1em auto 0 auto;
	padding: 0;
	z-index: 200;
}

footer p {
	line-height: 5.0;
	line-height: 2;
	padding: 0;
	padding: 1em 0;
	margin: 0;
	color: #FFF;	  
	text-align: center;
	font-size: 0.75em;
}
footer p a:link, footer p a:visited, footer p a:hover, footer p a:active, footer p a:focus {
	color: #FFF;
}  
.backtotop {
	display: block;
	line-height: 1;
	margin: -1.5em 0 0 0;
	padding: 0 0 1em 0;
	background: transparent url(../images/nav-arrow-top.png) center center no-repeat;
	background-size: 30px;
}
.backtotop:hover, .backtotop:active, .backtotop:focus {
	background: transparent url(../images/nav-arrow-top-hover.png) center center no-repeat;
	background-size: 30px;
}
.backtotop img {
	width: 30px;
	height: 30px;
} 
.current {
	background-color: #5c73af !important;
	color: #FFF !important;
}

/* lightbox */
.image-row {
  *zoom: 1;
  margin-bottom: 20px;
}
.image-row:after {
  content: "";
  display: table;
  clear: both;
}
.image-row img {
	width: 100%;
	height: auto;
}

.lightbox-image-link {
  display: inline-block;
  margin: 0;
  line-height: 0;
  border: 1px solid #c5c5e1;
}
.lightbox-image-link:hover {
	-webkit-box-shadow: 0px 0px 20px 0px #33509b;
	box-shadow: 0px 0px 20px 0px #33509b;
	-webkit-transition: box-shadow 0.3s linear;
	-moz-transition: box-shadow 0.3s linear;
	-o-transition: box-shadow 0.3s linear;
	-ms-transition: box-shadow 0.3s linear;	
	transition: box-shadow 0.3s linear;   
}

.last {
	margin-bottom: 2.5em !important;
}
.hinweis {
	font-family: "jaf-bernina-sans-condensed", sans-serif;
	font-style: normal;	
	font-weight: 700;
	font-size: 1.1em;
	background-color: #c5c5e1;
	color: #33509b;
	padding: 0.125em 0.25em;
}
.small, .agb p, .agb ul {
	font-size: 0.85em !important;
}
span.adjust {
	margin-right: 0.09em;
}
span.adjust1 {
	margin-right: 1.25em;
}
.phone, .mail, .btn-anfahrt {
	margin: 0;
}
.phone a, .mail a, .btn-anfahrt a {
	display: block;
	margin: 0 0 0.25em 0;
	padding: 0.75em 0 0.75em 3.5em;
	background: #c5c5e1 url(../images/phone.png) 1em center no-repeat;
	background-size: 24px auto;
	color: #33509b;
	text-decoration: none;
	font-size: 1.0em;
}
.mail a {
	background: #c5c5e1 url(../images/mail.png) 1em center no-repeat;
	background-size: 24px auto;	
}
.btn-anfahrt a {
	background: #c5c5e1 url(../images/route.png) 1em center no-repeat;
	background-size: 24px auto;
}
.sitemap a {
	font-size: 1em;
}
.sitemap ul {
	padding: 0 0 0 1.25em;
	margin: 1em 0;
}
.sitemap ul ul {
	list-style: disc;
	font-size: 1em;
	margin: 0.5em;
}
.sitemap ul ul ul {
	list-style: circle;
	margin: 0;
}

div.leftfloat, div.rightfloat {
	float: left;
	width: 50%;
	margin: 0;
	text-align: center;
}
div.rightfloat {
	float: right;
}

div.leftfloat img, div.rightfloat img {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 0 1.5em 0;
	padding: 0;
}
div.fullimage img {
	width: 98%;
	margin: 0 1%;
	height: auto;
	padding: 0 0 1em 0;
}

/* Google Maps */
#maps {
	width: 350px;
	width: 97%;
	height: 250px;
	margin: 1em 0;	
	padding: 1.5%;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 6px rgba(51, 80, 155, 0.5);
	-moz-box-shadow:    0px 0px 6px rgba(51, 80, 155, 0.5);
	box-shadow:         0px 0px 6px rgba(51, 80, 155, 0.5);	
}
.formelements {
	padding: 0;
	margin: 1em 0;		
}
.formelements b {
	font-weight: bold;
	color: #33509b;	
	font-size: 1.05em;
}
.formelements input[type="text"] {
	padding: 0.25em;
	margin: 0 0 1em 0;
	width: 97%;
	font-size: 1.05em;
	color: #33509b;
}
.formelements input[type="button"] {
	padding: 0.25em 0.5em;
	padding: 0.85em;
	color: #33509b;
	width: 100%;
	border: none;
	background: #c5c5e1;
	font-size: 1.05em;
	cursor: pointer;
}
#map_canvas {
	margin: 0;
	padding: 0;
	height: 250px;
}
#map_canvas img {
	background-color: transparent;
}
#directionsPanel {
	position: relative;
	width: 100%;
	margin: 2em 0;
	background-color: transparent;
	font-size: 0.85em;
}
#directionsPanel table {
	background-color: transparent;
}
#directionsPanel td {
	border: none;
	text-align: left;
}

.kunden-logos {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
.kunden-logos img {
	float: left;
	width: 45%;
	height: auto;
	padding: 0;
	margin: 0 10% 2% 0;
	opacity: 1;
}
.kunden-logos img:hover, .kunden-logos img:active, .kunden-logos img:focus {
	opacity: 1;
}
.kunden-logos img:nth-child(2n+2) {
	margin-right: 0;
}
/* Kontaktformular */
#contactForm {
	padding: 0;
	margin: 0 0 2em 0;
	border: 0px solid transparent;
	font: 100%/1.8 "nimbus-sans", sans-serif;
	font-style: normal;
	font-weight: 400;	
}
#contactForm legend {
	margin: 0;
	padding: 0;
	font-family: "jaf-bernina-sans-condensed", sans-serif;
	font-style: normal;	
	font-weight: 700;
	font-size: 1.5em;
	color: #33509b;
	margin-bottom: 0.5em;	
}
#contactForm ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#contactForm li {
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	width: 100%;
}
#contactForm label {
	float: left;
	line-height: 1.75;
	width: 100%;
	cursor: pointer;
	position: relative;
}
#contactForm input, #contactForm #message, #contactForm #anrede {
	float: left;
	height: 1.70em;
	width: 98%;
	border: 1px solid #33509b;
	padding: 0 1%;
	background: #f0f0f7;
	color: #4e4e4e;
	font: 100%/1.8 "nimbus-sans", sans-serif;
	font-style: normal;
	font-weight: 400;		
}
#contactForm #message, #contactForm #anrede {
	height: auto;
}
#contactForm #message {
	resize: none;
}
#contactForm input[type=checkbox] {
	text-align: left;
	width: 1.0em;
	height: 1.0em;
	background-color: transparent;
	font-size: 100%;
}
#contactForm #anrede {
	padding: 0;
}
#contactForm #senden {
	margin: 0;
	width: 100%;
	border: none;
	background: #c5c5e1;
	color: #33509b;
	cursor: pointer;
	height: 2.5em;
	font: 100%/1.8 "nimbus-sans", sans-serif;
	font-style: normal;
	font-weight: 400;		
}
#contactForm #senden:hover, #contactForm #senden:active, #contactForm #senden:focus {
	background: #33509b;
	color: #FFF;
}

#contactForm .error_msg {
	width: 90%;
	padding: 5%;
	background-color: #ffeeee;
	border: 1px dotted #cc0000;
	margin: 0 0 1em 0;
	color: #cc0000;
}

#contactForm .error {
	color: #cc0000;
	}
.formgenerator p {
	width: 100%;
}

.banner {
	padding: 0.5em 0 0 0.5em;
	background-color: #EEE;
	margin-bottom: 0.5em;
}
.banner img {
	width: 25%;
	max-width: 80px;
	height: auto;
	float: right;
	padding: 0 0 0 1em;
	margin-top: -0.5em;
}
.banner > div {
}
.banner p {
	font-size: 85%;
}
p.download {
	display: block;
	background: #c5c5e1 url(../images/download-arrow.png) 2% center no-repeat;
	background-size: 30px auto;
	padding: 0.5em 0.5em 0.5em 3em;
	color: #33509b;
}
.download a:link, .download a:visited {
	color: #33509b;
	text-decoration: underline;
}
.download a:hover, .download a:active, .download a:focus {
	color: #33509b;
	text-decoration: none;
}

/** Layer Promo  **/
#promo {
	display: block;
	position: fixed;
	width: 100%;
	bottom: -15em;
	left: 50%;
	-wekkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #33509b url(../images/icon-job-offer.png) left 1.0em top 1.5em no-repeat;
	background-size: 20% auto;
	height: auto;
	max-height: 80vh;
	box-shadow: 0 7px 28px rgba(0,0,0,0.25), 0 5px 10px rgba(0,0,0,0.22);
	box-shadow: 0 7px 28px rgba(0,0,0,0.35), 0 5px 10px rgba(0,0,0,0.30);
	transition: bottom 1s ease-in-out, opacity 1s ease-in-out;
	margin: 0;
	padding: 0;
	opacity: 0;
	z-index: 5000;
}
.promo-content {
	padding: 2em 2em 1em 20%;
	text-align: center;
	color: #FFF;
}
#promo a {
	text-decoration: none;
	color: #fff;
	transition: all 0.3s ease-in-out;
}
#promo a:link {
	border-bottom: 2px solid #fff;
}
#promo a:visited {
	border-bottom: 2px solid #fff;
}
#promo a:hover, #promo a:focus {
	border-bottom: 2px solid transparent;
}
#promo a:active {
	border-bottom: 2px solid #fff;
}
.promo-content h3 {
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.2;
	padding: 0 5% 1em 5%;
	color: #FFF;
}
/* Position the close button (top right corner) */
#promo .closebtn {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 2.5em;
	width: 1.1em;
	height: 1.1em;
	text-align: center;
	font-weight: 400;
	line-height: 1;
	color: #FFF;
	cursor: pointer;
	z-index: 3001;
	transition: all 0.5s ease;
}
#promo .closebtn::after {
	content: '\00d7';
}

/* Smartphones ab 320px Breite */
@media only screen and (min-width: 320px) {
  .menuskip {
	  display: none;
  }
  
  #promo {
	  background: #33509b url(../images/icon-job-offer.png) left 1em top 1em no-repeat;
	  background-size: 15% auto;
	  height: auto;
  }
  .promo-content {
	  padding: 2em 3em 1em 3em;
  }  
  
}

@media only screen and (min-width: 640px) {
  /** Layer Promo  **/
  #promo {
	  width: 60vw;
	  /*width: 79.2vw;*/
	  min-width: 34em;
	  max-width: 60em;
	  max-width: 1202px;
	  max-width: 42em;
	  bottom: -15em;
	  left: 50%;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	  background: #33509b url(../images/icon-job-offer.png) left 1.0em top 1.5em no-repeat;
	  background-size: 17% auto;
	  height: auto;
	  max-height: 80vh;
/*	  border-top-right-radius: 20px;
	  border-top-left-radius: 20px;*/
	  border: 1px solid #FFF;
	  border-bottom: none;	  
  }	
  .promo-content {
	  padding: 2.5em 2em 1.5em 2em;
	  text-align: center;
  }
  .promo-content h3 {
	  font-size: 2em;
	  padding: 0 15% 1em 15%;
  }	
  #promo .closebtn {
	  top: 0.3em;
	  right: 0.3em;
  }  	
}

@media only screen and (min-width: 800px) {
  html {
	  overflow-y: scroll;
  }

  body {
	  font-size: 45%;
	  font-size: 75%;
  }  
  div.bewerbung {
	  padding: 0.75em 1em 0.1em 1em;
	  background-color: #c5c5e1;
	  margin: 0 0 1em 0;
  } 
  div.bewerbung p, div.bewerbung a {
	  color: #33509b;
  }
  header {
	  position: static;
	  border: none;
	  background: #FFF url(../images/bgd-lubeca-neu.png) left top repeat-x;
	  background-size: 100% 100%;
	  line-height: 0;
	  width: 100%;
	  margin: 4% 0 0 0;
	  padding: 0;
  }
  #header-container {
	  margin: 0 auto;
	  padding: 0;
	  width: 80%;
  }
  #logo {
	  float: left;
	  width: 29.835%;
	  margin: 0;
	  padding: 0;
  }
  #logo img {
	  width: 100%;
	  max-width: none;
	  height: auto;
	  margin: 0 0 0 17.5%;
  }  
  
  #flags {
	  display: block;
	  float: right;
	  width: 50%;
	  margin: 2% 5% 0 0;
	  padding: 0;
	  text-align: right;
  }
  #flags img {
	  float: none;
	  width: 5.0%;
	  max-width: none;
	  height: auto;
	  margin: 1.6% 2% 0 0;
	  border: 1px solid #c5c5e1;
  }
  #flags img.first {
	  margin-bottom: 0;
  }  
  #flags img.hov:hover, #flags img.hov:active, #flags img.hov:focus {
	  -webkit-box-shadow: 0px 0px 12px 0px #FFF;
	  box-shadow: 0px 0px 12px 0px #FFF;
	  -webkit-transition: box-shadow 0.3s linear;
	  -moz-transition: box-shadow 0.3s linear;
	  -o-transition: box-shadow 0.3s linear;
	  -ms-transition: box-shadow 0.3s linear;	
	  transition: box-shadow 0.3s linear;		
  }   
  
  .wrapper {
	  margin: -7.80% 0 2% 0;
	  margin-left: auto;
	  margin-right: auto;
	  width: 80%;
	  border: 1px solid transparent;
	  -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.5);
	  -moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.5);
	  box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.5);	  
	  padding: 0;
  }
  #foto {
	  margin: 12% 0 0 0;
	  background-color: #FFF;
  }
  #foto img {
	  padding: 0;
	  width: 100%;
	  height: auto;	
  }
  
  nav {
	  display: block;
	  width: 65%;
	  margin: 0;
	  padding: 0 0 0 35%;	  
	  background-color: #c5c5e1;
	  font-family: "jaf-bernina-sans-condensed", sans-serif;
	  font-style: normal;	  	
	  font-weight: 700;
	  font-size: 1.1em;
	  font-size: 1em;
	  border-bottom: 1px solid #33509b;
	  box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	  -webkit-box-shadow: 2px 2px 6px rgba(51, 80, 155, 0.5);
	  -moz-box-shadow:    2px 2px 6px rgba(51, 80, 155, 0.5);
	  box-shadow:         2px 2px 6px rgba(51, 80, 155, 0.5);	  
	  border-top: none;
  }
  
  #content {
	  background: transparent url(../images/bgd-gummiteile-neu.jpg) left top no-repeat;
	  background-size: 100%;
	  padding-bottom: 0;
	  margin: 0 0 -20px 0;
	  min-height: 36em;
  }  
  .main-content {
	  float: right;
	  margin: 3% 5% 1em 2%;
	  width: 58%;
	  padding: 0;
  }
  .main-content p, .main-content ul, .main-content ol {
	  font-size: 1.05em;
	  margin-bottom: 1em;
  }
  #contactForm input, #contactForm #message, #contactForm #anrede, #contactForm #senden {
	  font-size: 1.0em;
  }   
  .main-content ul {
	  list-style-type: square;
	  padding: 0 0 0 3em;	  
  }  
  .sub-content {
	  float: left;
	  margin: -2.85em 0 1em 0;
	  width: 35%;
	  padding: 0;
  }
  .sub-content img {
	  width: 60%;
	  height: auto;
	  margin: 0.5em 20% 0 20%;
	  border: 1px solid #c5c5e1;
  } 
  .sub-content h1 {
	  font-family: "jaf-bernina-sans-condensed", sans-serif;
	  font-style: normal;
	  font-weight: 400;
	  font-size: 1.4em;
	  /*font-size: 1.2em;*/
	  color: #33509b;
	  text-align: center;
	  background-color: transparent;
	  margin: 0 auto;
	  margin-bottom: 1em;
	  margin-bottom: 0.8em;
	  line-height: 2;
	  line-height: 2.2;
  }
  .sub-content img:hover, .sub-content img:active, .sub-content img:focus {
	  -webkit-box-shadow: 0px 0px 20px 0px #33509b;
	  box-shadow: 0px 0px 20px 0px #33509b;
	  -webkit-transition: box-shadow 0.3s linear;
	  -moz-transition: box-shadow 0.3s linear;
	  -o-transition: box-shadow 0.3s linear;
	  -ms-transition: box-shadow 0.3s linear;	
	  transition: box-shadow 0.3s linear;
  }   
  
  footer {
	  background-color: #33509b;
	  width: 100%;
	  margin: 0;
	  padding: 0;
  }
  footer {
	  display: inline-block;
	  width: 100%;
	  margin: 0;
	  background: #33509b;		
  }  
  footer p {
	  padding: 0;
	  margin: 0;
	  color: #FFF;	  
	  text-align: center;
	  font-size: 0.85em;
	  margin-top: 1em;
	  padding-bottom: 0.5em;
	  line-height: 1.75;
  }
  footer p a:link, footer p a:visited, footer p a:hover, footer p a:active, footer p a:focus {
	  color: #FFF;
  }
  
  #mobile-nav {
	  display: none;
  }
  
  .backtotop {
	  background-size: 16px;
  }
  .backtotop:hover, .backtotop:active, .backtotop:focus {
	  background-size: 16px;
  }
  .backtotop img {
	  width: 16px;
	  height: 16px;
  } 
  
  .menu-btn {
	display: none;
  }  
  .mobile {
	  display: none;
  }	
  .desktop {
	  display: block;
  }  
  span.desktop {
	  display: inline-block;
  }   
  
  .current {
	  background-color: #33509b !important;
	  color: #FFF !important;
  }   
  
  .sitemap a {
	  font-size: 1em;
  }
  .sitemap ul {
	  padding: 0 0 0 1.25em;
	  margin: 1em 0;
  }
  .sitemap ul ul {
	  list-style: disc;
	  font-size: 1em;
	  margin: 0.5em;
  }
  .sitemap ul ul ul {
	  list-style: circle;
	  margin: 0;
  }
  p.phone, p.mail, p.fax, p.btn-anfahrt {
	  display: none;
  }
  
  div.leftfloat {
	  float: left;
	  width: 35%;
	  margin: 0 10% 0 5%;
  }
  
  div.rightfloat {
	  float: right;
	  width: 35%;
	  margin: 0 5% 0 10%;
  }
  div.leftfloat img, div.rightfloat img {
	  width: 100%;
	  height: auto;
  }

  /* Google Maps */
  #maps {
	  height: 200px;
  }
  .formelements b {
	  font-size: 1.05em;
  }
  .formelements input[type="text"] {
	  margin: 0 4.75% 1em 0;
	  width: 62.5%;
  }
  .formelements input[type="button"] {
	  padding: 0.45em 0;
	  margin: 0;
	  width: 30%;
  }
  .formelements input[type="button"]:hover {
	  background: #33509b;
	  color: #FFF;
  }
  #map_canvas {
	  height: 200px;
  }
  
  .kunden-logos img {
	  float: left;
	  width: 27%;
	  height: auto;
	  padding: 0;
	  margin: 0 9% 2% 0;
	  opacity: 0.5;
  }
  .kunden-logos img:hover, .kunden-logos img:active {
	  opacity: 1;
	  -webkit-transition: opacity 0.5s;
	  -moz-transition: opacity 0.5s;
	  -o-transition: opacity 0.5s;
	  transition: opacity 0.5s;	
  }
  .kunden-logos img:nth-child(2n+2) {
	  margin-right: 9%;
  }
  .kunden-logos img:nth-child(3n+3) {
	  margin-right: 0;
  }

  /* Kontaktformular */
  #contactForm label {
	  width: 25%;
	  width: 45%;
	  width: 40%;
  }
  #contactForm input, #contactForm #message, #contactForm #anrede {
	  width: 50%;
	  width: 55%;
  }
  #contactForm #anrede {
	  padding: 0;
	  width: 52.1%;
	  width: 57.1%;
  }
  #contactForm #senden {
	  margin-left: 25%;
	  margin-left: 40%;
	  width: 7em;
  }
  
  .banner {
	  position: relative;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  width: 100%;
	  height: auto;
	  background-color: #dc140d;
	  padding: 4px;
	  margin: 0 0 1em 0;
  }
  .banner img {
	  margin: 0;
	  padding: 0;
	  float: left;
	  width: 12%;
	  max-width: 80px;
	  height: auto;
	  border: 1px solid #FFF;
  }
  .banner > div {
	  /*background-color: #936;*/
	  position: absolute;
	  width: 80%;
	  top: 50%;
	  margin: -2em 0 0 15%;
	  color: #FFF;
  }
  .banner a:link, .banner a:visited {
	  color: #FFF;
	  text-decoration: underline;
  }
  .banner a:hover, .banner a:active, .banner a:focus {
	  text-decoration: none;
  }
  
  p.download {
	  background: #c5c5e1 url(../images/download-arrow.png) 2% center no-repeat;
	  background-size: 4.25% auto;
	  padding: 0.5em 0.5em 0.5em 8%;
  } 
  
}

@media only screen and (min-width: 800px) {
/*  body {
	font-size: 55%;	
  }*/
  /* Google Maps */
  #maps {
	  height: 250px;
  }
  #map_canvas {
	  height: 250px;
  }   
}

@media only screen and (min-width: 1024px) {
  body {
	  font-size: 70%;
	  font-size: 90%;
  }
  .backtotop {
	  background-size: 20px;
  }
  .backtotop:hover {
	  background-size: 20px;
  }
  .backtotop img {
	  width: 20px;
	  height: 20px;
  }
  
  /* Google Maps */
  #maps {
	  height: 350px;
  }
  #map_canvas {
	  height: 350px;
  }  
  
}

@media only screen and (min-width: 1152px) {
  body {
	  font-size: 80%;
	  font-size: 95%;
  }
  .backtotop {
	  background-size: 22px;
  }
  .backtotop:hover {
	  background-size: 22px;
  }
  .backtotop img {
	  width: 22px;
	  height: 22px;
  }
  
  /* Google Maps */
  #maps {
	  height: 350px;
  }
  #map_canvas {
	  height: 350px;
  }  
  
}

@media only screen and (min-width: 1280px) {
  body {
	  font-size: 90%;
	  font-size: 100%;
  }
  .backtotop {
	  background-size: 24px;
  }
  .backtotop:hover {
	  background-size: 24px;
  }
  .backtotop img {
	  width: 24px;
	  height: 24px;
  }
  /* Google Maps */
  #maps {
	  height: 400px;
  }
  #map_canvas {
	  height: 400px;
  }  
  
}

@media only screen and (min-width: 1440px) {
  body {
	  font-size: 100%;
	  background-size: 1px 100px;
  }
  header {
	  margin-top: 57px;
  }
  #header-container {
  	max-width: 1200px;
  }	
  .wrapper {
	  margin-top: -122px;
	  margin-top: -116px;
	  max-width: 1200px;
  }	
  .backtotop {
	  background-size: 30px;
  }
  .backtotop:hover {
	  background-size: 30px;
  }
  .backtotop img {
	  width: 30px;
	  height: 30px;
  }   
}