@charset "utf-8";

@import url("fonts.css");

@media screen{
/* =============================================================================
   BASIC
   ========================================================================== */

/* BASIC: =reset ------------------------------------------------ */
* {
	text-rendering:optimizeLegibility;
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; width: 100%; overflow-x: hidden; overflow-y: scroll; position: absolute;}
html, button, input, select, textarea { font-family: sans-serif; color: #CCC; }
body { margin: 0; font-size: 1em; }

::selection {background: #606060; color: #fff; }
::-moz-selection {background: #606060; color: #fff;}

img {
	max-width:100%;
}

/* =============================================================================
   Links
   ========================================================================== */

a { color: #cd1719;
	text-decoration:none;
	transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
}
a:visited { color: #9a1315; }
a:hover { color: #9a1315; }
a:focus { outline: none;
 }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

/* =============================================================================
   Typography
   ========================================================================== */

b, strong { font-weight: 400; }

.small {font-size:0.9em;}

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

p {
	font-size:1.2em;
	line-height:1.5em;
	margin-bottom:1.5em;
}

.textCenter {
	text-align:center;
}

h2 {
    font-size: 2.5em;
    line-height: 1.2em;
    margin-bottom: 0.2em;
    text-transform: uppercase;
}

h3 {
    font-size: 1.4em;
    line-height: 1.2em;
    margin-bottom: 0.5em;
	font-weight:400;
    text-transform: uppercase;
}

h4 {
    font-size: 1.15em;
    line-height: 1.3em;
    margin-bottom: 0.5em;
	font-weight:400;
    text-transform: uppercase;
	color:#cd1719;
}

.underline {
	background:#2a2a2a;
	width:100%;
	height:2px;
	position:relative;
	display:block;
	margin-bottom:1.65em;
}

.underline span {
    background: #cd1719;
    content: "";
    height: 150%;
    left: 0;
    position: absolute;
    top: 0px;
    width: 30%;
	max-width:350px;
    z-index: 1;
}

/* =============================================================================
   Lists
   ========================================================================== */

nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
section dl,
#ajax-content dl {
    margin: 0 0 1.5em;
    text-align: left;
	font-size: 1.2em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
}

section dl dt,
#ajax-content dl dt {
	background: rgba(0, 0, 0, 0.06);
    color: #3c3a36;
	float:left;
	font-weight:400;
	margin-right: 0.5em;
}

dl dd, #ajax-content dl dd ,
#ajax-content dl dd {
	white-space: nowrap;
}

dl dd + dd,
#ajax-content dl dd + dd {
    float: none;
}

ul.list {
	list-style:none;
	font-size: 1.2em;
    line-height: 2em;
    margin-bottom: 1.5em;
	display:block;
}

ul.list li {
	background:url(../images/icon-list.svg) no-repeat left 18px;
	background-size:15px 15px;
	padding:0.3em 0 0.3em 1.5em;
	font-weight:400;
	list-style:none;
	border-bottom:1px solid rgba(255, 255, 255, 0.1);
}

ul.list li:last-child {
	border-bottom:none;
}

/*ul.list li:nth-child(even) { background:rgba(0, 0, 0, 0.4);}*/
		
/* ==|== primary styles Main Site ==============================================
   Author:indivisualz
   ========================================================================== */

body {
	background:#131313;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#858584;
	overflow-x:hidden;
}
.clear {
    clear: both;
    float: none;
}

.nolinking a {pointer-events: none; color:inherit;}

/* Sidebar - Content ----------------------------------------------- */
#side {
	width: 18%;
	height:100%;
	position:fixed;
	left:0;
	box-sizing: border-box;
	padding: 1em;
	background: url(../images/sidebar-bg.jpg) no-repeat center center;
	background-size:cover;
	border-right:2px solid #2a2a2a;
	z-index:80;
}
a.backToStart {
	background:url("../images/arrow-left.svg") no-repeat center center;
	max-width:42px;
	height:42px;
	display:block;
	margin: 8% auto 0;
	text-indent:-9999px;
	opacity:0.3;
	transition: all 0.2s ease-out 0s;
}
a.backToStart:hover {
	opacity:0.5;
}
#side hr { display: block; height: 4px; border: 0; border-top: 2px dotted rgba(255, 255, 255, 0.1); margin: 1.7em 0; padding: 0; }

h1.logo {
	width:90%;
	margin:15% auto;
	transition: all 0.2s ease-out 0s;
}
h1.logo img {
	max-width:100%;
}

div.mobilelogo {
    position: absolute;
    right: 1.5em;
    text-align: right;
    top: 10px;
    transition: all 0.2s ease-out 0s;
    width: 80px;
	display:none;
}

/* Main - Content ------------------------------------------------ */
#main {
	width: 82%;
	position:relative;
	left: 18%;
	padding: 4em 4em 2em;
	box-sizing: border-box;
	-webkit-transition: all 0.3s ease-out;
    transition: all 0.2s ease-out 0s;
}
.row {
	margin:0;
	clear:both;
}
.col1,
.col2,
.col3,
.col4 {  
  box-sizing: padding-box; 
}
section {
	padding:80px 0;
	display: inline-block;
	width:100%;
}
.photoBg {
	background:url(../images/intro-autohaus.jpg) no-repeat center center;
	background-size:cover;
	padding: 80px 4em;
    margin: 0 -4em;
}
#imagebox {
    background: url(../images/panorama-innen.jpg) no-repeat center center;
	background-size:cover;
	height:0;
    padding-bottom:27.1%;
	margin-top:80px;
	position:relative;
}
#imagebox::after {
    background: rgba(27, 27, 27, 0.1);
    content: "";
    height: 90%;
    left: 0;
    position: absolute;
    top: 5%;
    width: 100%;
    z-index: 1;
}

#redbox {
    background:rgba(0, 0, 0, 0.2);
	border:2px solid #9a1315;
	height:auto;
	padding:2em;
	margin:80px 0;
	position:relative;
}
#redbox h3 {
    color: #cd1719;
	font-size:2.5em;
    text-shadow: 1px 1px 4px rgba(47, 70, 54, 0.3);
    text-transform: normal;
	font-style:italic;
	margin:0;
}
#redbox p {
    color: #858584;
	margin:0;
}

.patternDark {
	background:url(../images/pattern-dark_@2X.png) repeat 0 0;
	background-size:76px 76px;
	padding: 80px 4em;
    margin: 0 -4em;
	border-top:1px solid #070707;
	border-bottom:1px solid #070707;
}

#leasingruecklaeufer,
#lack-brandschaeden,
#fuhrparkmanagement,
#glasschaeden {
	display: inline-block;
    margin-bottom: 40px;
}

@media (min-width: 50em) {
	.row {
	margin:0 -1.5em;
  	}
	.col1 {
    float: left;
    width: -webkit-calc(25% -3em);
	width: -o-calc(25% - 3em);
	width: calc(25% - 3em);	
	padding: 0 1.5em;
  	}
	.col2 {
    float: left;
	padding:0 1.5em;		
	width: -webkit-calc(50% -3em);
	width: -o-calc(50% - 3em);
	width: calc(50% - 3em);		
  	}
	.col3 {
    float: left;
    width: -webkit-calc(75% -3em);
	width: -o-calc(75% - 3em);
	width: calc(75% - 3em);	
	padding: 0 1.5em;
  	}
	.col4 {
    float: left;
    width: -webkit-calc(100% -3em);
	width: -o-calc(100% - 3em);
	width: calc(100% - 3em);	
	padding: 0 1.5em;
  	}    	
}

.servicesIcon {
    height: 140px;
    margin: 1em auto 2em;
	width:140px;
	border-radius:50%;
	background-color:rgba(0, 0, 0, 0.5);
	background-repeat:no-repeat;
	background-position:center center;
	position:relative;
	opacity:0.8;
	transition: background-color 0.2s ease 0s, opacity 0.2s ease 0s;
}
.servicesIcon:hover {
	opacity:1;
	background-color:rgba(0, 0, 0, 1);
}
.servicesIcon::after {
    border-radius: 50%;
    box-sizing: content-box;
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 1);
    left: -7px;
    opacity: 0;
    padding: 7px;
    top: -7px;
    transform: scale(0.8);
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}
.servicesIcon:hover::after {
    opacity: 1;
    transform: scale(1);
}

.servicesIcon.werkstatt { background-image: url(../images/icon-werkstatt.svg); background-size:60px auto;}
.servicesIcon.finanzierung {background-image: url(../images/icon-finanzierung.svg); background-size:65px auto;}
.servicesIcon.aufbereitung {background-image: url(../images/icon-aufbereitung.svg); background-size:70px auto;}

/* =============================================================================
   Slider
   ========================================================================== */

.slider {
	margin:0 auto 1.65em;
	position:relative;
	overflow:hidden;
}

.slider h2.slidecontent {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    bottom: 3em;
    color: #858584;
    font-size: 2em;
    left: 0;
    padding: 1em;
    position: absolute;
}
.slider h2.slidecontent span {
    color: #cd1719;
	font-weight:400;
}

#image-gallery li::after {
    /*background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(19, 19, 19, 0.3)) repeat scroll 0 0;*/
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    bottom: 4px;
    width: 100%;
    z-index: 1;
}
.slider ul {
	margin:0;
} 

#carousel {
	margin-top:80px;
}

/* Map ----------------------------------------------------------- */

.mapBox {margin-top:2.5em; display:block;}
#karte {	
	min-height: 500px;
	overflow: hidden;
	position: relative;
	width: 100%;
	border:10px solid #2a2a2a;
	box-sizing: border-box;
}
    
#karte:empty::after {
  content: 'Google Maps aufgrund von Datenschutzeinstellungen blockiert!';
  color: #cd1719;
  position: absolute;
  margin: auto;
  text-align: center;
  left: 0;
  right: 0;
  padding: 11vw;
}

/* Footer ------------------------------------------------------- */
img.footerPartnerLogo {
    max-width: 260px;
	width:100%;
	-webkit-transition: all 0.3s ease-out;
    transition: all 0.2s ease-out 0s;
	opacity:1;
}

a.fb-icon {
	background:url(../images/fb-icon.png) no-repeat center center;
	background-size:50px 50px;
	width:50px;
	height:60px;
	display:block;
	float:left;
	margin-right:15px;
	text-indent:-9999%;
	-webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out 0s;
	opacity:1;
}

.fb {clear:both; display:inline-block;}

a.fb-icon:hover,
img.footerPartnerLogo:hover {
	opacity:0.5;
}

p.copyright {
	background: rgba(0, 0, 0, 0.4);
    font-size: 1em;
    margin: 1em 0 0;
    padding: 0.5em;
}

/* =============================================================================
   Ajax Frame
   ========================================================================== */
   
#ajax-content {
	background:#131313;
	box-sizing: border-box;
    padding: 3em 3em 3em;
    position: relative;
	display:inline-block;
	max-width:1000px;
	
}

#datenschutz ul {
    padding: 0em;
    margin: 0 0 1.6em 1.1em;
    line-height: 1.8em;
    letter-spacing: 0;
    list-style: outside;
}

/* =============================================================================
   Formular
   ========================================================================== */

#formular {
	padding-bottom:1em;
	width:100%;
  	margin: 0 auto;
}

.feedback-input{
    font-weight:400;
	font-size: 1em;
	border-radius: 0;
	line-height: 22px;
	background-color: #131313;
    border: 2px solid rgba(255, 255, 255, 0.1);
	padding: 13px 13px 13px 20px;
	margin: 0 0 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
    -webkit-border-radius:0; 
    border-radius:0;
}

::-webkit-input-placeholder {
    color: #605a4e;
}

.feedback-input:focus{
	background: rgba(0, 0, 0, 0.5);
	box-shadow: none;
	border: 2px solid #fff;
	color: #858584;
	outline: none;
    padding: 13px 13px 13px 22px;
}

#formular .formblock {
	float: left;
    margin-right: 1.5%;
    width: 32.333%;
}

#formular .email {
    margin-right: 0;
}

#formular .message {
	float:left;
	width: 100%;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

#formular legend {
	display:none;
}

input, textarea {	
	transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
	outline:none;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	border: 2px solid rgba(83, 84, 90, 0.6);
}

#button-submit{	
	float:left;
	width: 50%;
	min-width: 251px;
	border: #cd1719 solid 4px;
	cursor:pointer;
	background-color: #9a1315;
	color: #fff;
	font-size:1.3em;
	font-weight:400;
	text-transform:uppercase;
	padding-top:15px;
	padding-bottom:15px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
    margin: 25px auto 0;
	display:block;
    -webkit-appearance: none;
    -webkit-border-radius:0; 
    border-radius:0;
	outline:none;
}

#button-submit:hover{
	background-color: rgba(0, 0, 0, 0.5);
	color: #666;
	border: #9a1315 solid 4px;
}

#button-submit::-moz-focus-inner {
  border: 0;
}
	
.submit:hover {
	color: #3498db;
}

#successmessage {	
}

#successmessage span {
	background-color: rgba(33, 32, 31, 0.5);
    border:1px solid #090;
    color: #858584;
    display: block;
    margin: 2em 0 0;
    padding: 1em;
    text-align: center;
    transition: all 0.2s ease-in-out 0s;	
}

span.TectiteFieldError {
	color:#bb291e;
	font-size:0.8em;
	display: inline-block;
    padding: 0 0 1.3em 1em;
	margin-top:-15px;
}

/* =============================================================================
   Navigation
   ========================================================================== */

#container,
#menu,
.menu-link,
#side {
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}
#side.active {
	width: 215px;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#container {
    position: relative;
    padding-left: 0;
	left:0;
}
#container.active #menu {left: 197px; width: 240px;}
#container.active .menu-link {left: 178px;}

#menu {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
}

/* -- Dynamic Button For Responsive Menu -------------------------------------*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: rgba(0,0,0,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 99999;
    width: 2.3em;
    height: auto;
    padding: 2.4em 1.8em;
	outline:none;
}
    .menu-link:hover,
    .menu-link:focus,
	.menu-link::-moz-focus-inner {
		background: #000;
  		border: 0;
		outline:none;
	}

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #cd1719;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }
		

#menu .pure-menu ul {
    font-size: 1.1em;
    line-height: 1.65em;
    list-style: outside none none;
	text-align:center;
	padding:0;
	margin:0;
}
#menu .pure-menu ul li {    
    margin-bottom: 4px;
}
#menu .pure-menu ul li a {
	background: rgba(0, 0, 0, 0.55);
    border-right: 15px solid rgba(0, 0, 0, 0);
    color: #858584;
    display: block;
    padding: 0.7em 0em 0.7em 1em;
	text-decoration:none;
    transition: all 0.3s ease-in-out 0s;
}
#menu .pure-menu ul li a:hover,
#menu .pure-menu ul li a.active {
	background: rgba(0, 0, 0, 0.9);
    border-right: 15px solid #cd1719;
    color: #cd1719;
    margin-bottom: 4px;
}

/*----------------------------------------------------
// ----> Fancybox
 * Version: 1.3.1 (05/03/2010)
 * Requires: jQuery v1.3+
/----------------------------------------------------*/
#fancybox-loading{position:fixed; top:50%; left:50%; height:40px; width:40px; margin-top:-20px; margin-left:-20px; cursor:pointer; overflow:hidden; z-index:1104; display:none}
* html #fancybox-loading{/* IE6 */position:absolute; margin-top:0}
#fancybox-loading div{position:absolute; top:0; left:0; width:40px; height:480px; background-image:url(../images/fancybox/fancybox.png)}
#fancybox-overlay{position:fixed; top:0; left:0; bottom:0; right:0; background:#000; z-index:1100; display:none}
* html #fancybox-overlay{/* IE6 */position:absolute; width:100%}
#fancybox-tmp{padding:0; margin:0; border:0; overflow:auto; display:none}
#fancybox-wrap{position:absolute; top:0; left:0; margin:0; padding:20px; z-index:1101; display:none}
#fancybox-outer{position:relative; width:100%; height:100%; background:#333}
#fancybox-inner{position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:0; outline:none; overflow:hidden}
#fancybox-hide-sel-frame{position:absolute; top:0; left:0; width:100%; height:100%; background:transparent}
#fancybox-close{position:absolute; top:-15px; right:-15px; width:30px; height:30px; background-image:url(../images/fancybox/fancybox.png); background-position:-40px 0px; cursor:pointer; z-index:1103; display:none; border:0px}
#fancybox_error{color:#444; font:normal 12px/20px Arial; padding:7px; margin:0}
#fancybox-content{height:auto; width:auto; padding:0; margin:0}
#fancybox-img{width:100%; height:100%; padding:0; margin:0; outline:none; line-height:0; vertical-align:top; -ms-interpolation-mode:bicubic}
#fancybox-frame{position:relative; width:100%; height:100%; border:none; display:block}
#fancybox-title{position:absolute; bottom:0; left:0; font-family:'Merriweather Sans',Arial,Helvetica,sans-serif; font-size:13px; z-index:1102}
.fancybox-title-inside{padding:10px 0; text-align:center; color:#333}
.fancybox-title-outside{padding-top:5px; color:#FFF; text-align:center; font-weight:bold}
.fancybox-title-over{color:#FFF; text-align:left}
#fancybox-title-over{padding:10px; background-image:url(../images/fancybox/fancy_title_over.png); display:block}
#fancybox-title-wrap{display:inline-block}
#fancybox-title-wrap span{height:32px; float:left}
#fancybox-title-left{padding-left:15px; background-image:url(../images/fancybox/fancybox.png); background-position:-40px -90px; background-repeat:no-repeat}
#fancybox-title-main{font-weight:bold; line-height:27px; background-image:url(../images/fancybox/fancybox-x.png); background-position:0px -40px; color:#FFF}
#fancybox-title-right{padding-left:15px; background-image:url(../images/fancybox/fancybox.png); background-position:-55px -90px; background-repeat:no-repeat}
#fancybox-left, #fancybox-right{position:absolute; bottom:0px; height:100%; width:35%; cursor:pointer; outline:none; background-image:url(../images/fancybox/blank.gif); z-index:1102; display:none; border:none}
#fancybox-left{left:0px}
#fancybox-right{right:0px}
#fancybox-left-ico, #fancybox-right-ico{position:absolute; top:50%; left:-9999px; width:30px; height:30px; margin-top:-15px; cursor:pointer; z-index:1102; display:block; border:0px}
#fancybox-left-ico{background-image:url(../images/fancybox/fancybox.png); background-position:-40px -30px}
#fancybox-right-ico{background-image:url(../images/fancybox/fancybox.png); background-position:-40px -60px}
#fancybox-left:hover, #fancybox-right:hover{visibility:visible;  /* IE6 */}
#fancybox-left:hover span{left:20px}
#fancybox-right:hover span{left:auto; right:20px}
.fancy-bg{position:absolute; padding:0; margin:0; border:0; width:20px; height:20px; z-index:1001}
#fancy-bg-n{top:-20px; left:0; width:100%}
#fancy-bg-ne{top:-20px; right:-20px; background-position:-40px -162px}
#fancy-bg-e{top:0; right:-20px; height:100%; background-position:-20px 0px}
#fancy-bg-se{bottom:-20px; right:-20px; background-position:-40px -182px}
#fancy-bg-s{bottom:-20px; left:0; width:100%; background-position:0px -20px}
#fancy-bg-sw{bottom:-20px; left:-20px; background-position:-40px -142px}
#fancy-bg-w{top:0; left:-20px; height:100%}
#fancy-bg-nw{top:-20px; left:-20px; background-position:-40px -122px}
/* IE */
.fancybox-ie .fancy-bg{background:transparent !important}


/* Preloader */

#preloader {
	position: fixed;
	height:100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(19, 19, 19, 1); /* change if the mask should have another color then white */
	z-index: 99999; /* makes sure it stays on top */
}

#status {
	width: 15%;
	max-width:50px;
	height: auto;
	max-height:50px;
	position: absolute;
	left: 0;
	right:0;
	top: 0;
	bottom:-60px;
	background-image: url(../images/preloader.gif); /* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
	margin: auto;
}

.welcomeLogo {
    background: rgba(0, 0, 0, 0) url("../images/leasing-doc-logo.png") no-repeat scroll center 0 / contain ;
    bottom: 0;
    height: 71px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    text-indent: -9999px;
    top: -55px;
    width: 150px;
}

/* =============================================================================
   Indivisualz Backlink
   ========================================================================== */


#madeby a {
	background:url(../images/indivisualz-logo.svg) no-repeat 0 0;
	background-size:contain;
    display: block;
    font-family: 'Raleway',sans-serif;
    font-size: 14px;
    line-height: 2em;
    padding-left: 2.4em;
	margin-bottom: 2em;
	transition: all 0.3s ease 0s;
  	-webkit-transition: all 0.3s ease 0s;
}

#madeby a:hover {
	color: #f92c42;
}



/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 54em) {

    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }

    #container {
        padding-left: 0px; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 0px;
		margin-left:0;
    }

    .menu-link {
        position: fixed;
        left: 150px;
        display: none;
    }

    #layout.active .menu-link {
        left: 150px;
    }
}

@media (max-width: 54em) {
    #container.active {
        position: relative;
        left: 215px;
    }
	
	#ajax-content {
		font-size: 0.8em;
		max-width: 100%;
    	padding: 2em 1em;
	}		
	
	#menu {
	    margin-left: -215px;
	}
	#side {
    	width: 0px;
		padding:0;
		border-right:none;		
	}
	
	#side.active {
		width: 240px;
		border-right: 2px solid #2a2a2a;
		padding: 1em;
		position:absolute;
		left:-215px;
	}
	#side.active .menu-link {
		position:absolute;
	}
	#menu .pure-menu ul {
		font-size: 1.1em;
    	line-height: 1.5em;
	}
	#main {
		font-size:0.8em;
		left: 0px;
		width:100%;
		/*width: -moz-calc(100% - 57px);
    	width: -webkit-calc(100% - 57px);
    	width: calc(100% - 57px);*/
		padding: 5.2em 1.5em 2.5em;
	}
	h2 {
    	font-size: 2em;
		margin-bottom: 0.3em;
	}
	section {
		padding: 40px 0;
	}
	.lSAction {
		display:none !important;
	}
	.patternDark {
		padding: 40px 1.5em;
		margin: 0 -1.5em;
	}	
	#side hr {
		display:none;
	}
	a.backToStart {
		height: 30px;
		margin: -4px 0 0 0.5em;
		max-width: 30px;
	}
	h1.logo {
		margin: 20% auto 2em;
		width: 100%;
	}
	div.mobilelogo {
		display:block;
	}
	.col1,
	.col2,
	.col3,
	.col4 {
		width:100%;
		float:none;
	}
	
	.col1.service {
		float: left;
		width: -moz-calc(50% - 3em);
		width: -webkit-calc(50% - 3em);
		width: -o-calc(50% - 3em);
		width: calc(50% - 3em);
		padding:0 1.5em;
  	}
	
	#button-submit {	
		width: 100%;
	}
	
	#karte {	
		min-height: 280px;
	}
	ul.list li {
		background-position: left 13px;
	}
	img.footerPartnerLogo {
		max-width: 200px;
	}
	.slider h2.slidecontent {
		background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
		bottom: 1em;
		font-size: 1.2em;
		padding: 0.3em;
	}
	#leasingruecklaeufer, #lack-brandschaeden, #fuhrparkmanagement, #glasschaeden {
		margin-bottom: 0px;
	}
	#leasingruecklaeufer .col2, #lack-brandschaeden .col2, #fuhrparkmanagement .col2, #glasschaeden .col2 {
		margin-bottom: 40px;
	}
}

@media screen and (max-height: 45em) {	
	#menu .pure-menu ul {font-size: 1em; line-height: 1.4em;}
	h1.logo { margin: 8% auto;}	
	#side hr {margin: 1.2em 0;}
	
}

@media screen and (min-width: 50em)
and (max-width: 77em) {	
	#main {
		font-size: 0.8em;
		padding: 2.5em;
		left:253px;
		width: -moz-calc(100% - 253px);
		width: -webkit-calc(100% - 253px);
		width: -o-calc(100% - 253px);
		width: calc(100% - 253px);
	}
	#side {
		position: fixed;
		width: 253px;
	}
	#menu .pure-menu ul {
		font-size: 1em;
		line-height: 1.4em;
	}
	h1.logo {
		margin: 20% auto 2em;
		width: 100%;
	}	
	.col1 {
		float: left;
		width: -webkit-calc(100% -3em);
		width: -o-calc(100% - 3em);
		width: calc(100% - 3em);
  	}
	.col2 {
		float: none;
		width: -webkit-calc(100% -3em);
		width: -o-calc(100% - 3em);
		width: calc(100% - 3em);
  	}
	.col3 {
		float: left;
		width: -webkit-calc(100% -3em);
		width: -o-calc(100% - 3em);
		width: calc(100% - 3em);
  	}
	.col4 {
		float: none;
		width: -webkit-calc(100% -3em);
		width: -o-calc(100% - 3em);
		width: calc(100% - 3em);
		clear:both;
  	}
	.col2 .col2 {
		float: left;
		width: -webkit-calc(50% -3em);
		width: -o-calc(50% - 3em);
		width: calc(50% - 3em);
  	}
	.patternDark {
		padding: 80px 2.5em;
		margin: 0 -2.5em;
	}  
}


}

/* ------------------------------------------------------- */
/* --------------------- =PRINT -------------------------- */
/* ------------------------------------------------------- */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}