/* CSS
R.J.I. 
Design, tech. Infrastruktur und Website Architektur: R.Infantino 
*/   
        
/* Google Webfont*
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);*/

@font-face {
    font-family: Roboto;
    src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: Roboto;
    src: url('fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/roboto-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;

}
@font-face {
    font-family: Roboto;
    src: url('fonts/roboto-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: Roboto;
    src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: Roboto;
    src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

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, font, 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 {
	margin: 0;
	padding: 0;
    border: 0;
	outline: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
body {
    line-height: 1;
    background: #c4c4c4 ;
    font-family: Roboto;
    color: #555555;
    font-size: 16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body, html{
    height: 100%;
    min-height: 100%;
}
html{
    
}

ol, ul {
    line-height: 1.2em;
    list-style-position: inside;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
    outline: inherit;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
p {
    line-height: 1.5em;
    margin: 20px 0;
}
ul, li{
    line-height: 1.5em;
}

/* HTML 5 Elemente = display:block;  */
header, nav, section, footer, article, figure, aside, content{ 
    display: block;   
}

::-moz-selection { /* Code for Firefox */
    background-color: #84d2f6; 
    color:#ffffff;
}

::selection {
    background-color: #84d2f6; 
    color:#ffffff;
}

/*Contactarea button Browserspecs*/
input[type=submit]{
    appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;}        /* Headlines  */

h1{font-style:italic; font-weight: 700; font-size: 34px;  line-height: 1.2em; word-wrap:break-word;}
h2{font-weight: 700; font-size: 26px; line-height: 1.2em;}
p+h2{padding-top:20px}
h3{line-height: 1.4;}
/*h4{color: #ffffff; font-size:30px; line-height: 1.2em; font-weight:500;}*/
h5{color: #ffffff; line-height: 1.2em;}

/* Basic Elements -------------------------------------*/


.floatleft{
    float: left;
}
.floatright{
    float: right;
}
.center{
    text-align: center;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.lightgrey{
    background-color: #f8f8f8;
}

.overflow{
    overflow: hidden;
}

.padding{
    padding: 20px;
}

strong{
    line-height: 1.4em;
}

.pic{
    width: 100%;
    background-color: #f8f8f8;
    min-height:  300px;
    display: block;
}

.dezimal li{
    list-style-type: decimal;
}
.liststyle{
    list-style: disc inside;
}
.list ul{
    padding: 22px;
}
.list ul li{
    padding: 12px 10px;
}
.marginlist li{margin-bottom: 16px;}


a{
    color: #84d2f6;
}
a:hover{
    color: #777777;
}
.current{
    color: #777777;
}
.startext{
    font-size: 0.8em;
    color: #c9c9c9;
}
.nav .current{
    color:#84d2f6;
}

/* Goldener Schnitt / Strecke ----------------------------------*/

.shortway{
    width: 35%;
}
.longway{
    width: 60%;
}
.halfway{
    width: 49%; 
}

.firstcolumn{
    width: 33%;
}
.centercolumn{
    width: 33%;
}
.lastcolumn{
    width: 33%;
}
.marginbottom20{margin-bottom:20px;}
.marginbottom40{margin-bottom:40px;}
.margintop40{margin-top:40px;}
.margintop20{margin-top:20px;}

/* Header -------------------------------------*/

.quickinfo{
    margin-top: 10px;
    padding: 5px 20px;
    background-color: #f9f9f9;
    max-width: 1400px;
    margin: 0 auto;
}
.quickinfo p{
    margin: 0;
    display: inline-block;
    font-size: 12px;
    color:#5c5c5c;
    letter-spacing: 1px;
    font-weight: 700;
    vertical-align: middle;
}

.quickinfo p:first-child{
    width: 67%;
}
/*.quickinfo p:last-child{
    width: 10%;
}*/
.quickinfo a{
    text-decoration: none;
    font-size: 14px;
    color:#5c5c5c;
    letter-spacing: 1px;
}
.quickinfo a:hover{
    color:#333333;
}

.quickinfo article{ 
    padding: 0;
}

header{
    background-color: #123c55 !important;
}

/* #menu{
    display: none;
}*/

@media screen and (min-width: 1025px){
    #menu{
        max-width: 100%;
    }
    #menu li{
        display:inline-block;
        padding:4px 10px;
        cursor:default;
        color:#fff;
    }
    #menu li:first-child{
        margin-left:0;
        padding-left:0;
    }
    #menu li a{
        text-decoration:none;
        color:#ffffff;
    }
    #menu a:hover{
        color: #84d2f6;
    }
    #menu li ul{
        display:none;
        padding-top:13px;
        margin-left:-15px;
    }
    #menu li:hover ul{
        display:block;
        position:absolute;
        width:170px;
    }
    #menu li ul li{
        padding:0;
        margin:0;
        width:100%;
    }
    #menu li ul li a{
        width: 100%;
        display: block;
        padding: 8px 15px;
        background-color: #133c55;
        text-align: left;
    }
    #menu li ul li a:hover{
        color:#ffffff;
        background-color: #386fa4;
    }
    /*
    .cky-banner-top{top:124px !important;}
    .cky-consent-container .cky-consent-bar{
        margin:auto !important; 
        width: 60% !important;
        padding: 80px !important;
    }
    */
}


.nav{
    position:relative;
    text-align: right;
    z-index:1;
    max-width 100%;
    padding: 0px;
}













.inlinelink a{
    display: inline-block;
    padding-bottom: 15px;
}


.logo{
    position: absolute;
    z-index:2;
}
/* Intro ----------------------------------*/

.intro h1{
    color: #84d2f6;
    font-weight: 700;
    margin-bottom: 10px;
}
.intro h2{
    color: #ffffff;
    font-weight: 300;
}

.intro span{
    color: #ffffff;
}
.intro .blue{
    text-transform: uppercase;
    font-style: italic;
    color: #84d2f6;
}
.intro{
    background-color:#181818;
    background-position: center bottom;
    background-size: cover;
    padding-top: 160px;
    padding-bottom: 60px;
    background-repeat: no-repeat;
}
.intro.startsite{background-image: url('../img/luft-motoren-werkstatt.jpg');}
.intro.startsite h1 {color:#fff;}

.intro ul{
    list-style: disclosure-closed;
    list-style-position: inside;
    color: #fff;
    margin-top: 14px;
}
.intro li::marker, summary::marker{color:#78c554}

.intro.kontaktsite{background-image: #181818 url('../img/luft-motoren-kontakt.jpg');}
.intro.motoreninstandsetzung{background-image: url('../img/luft-motoren-motoreninstandsetzung.jpg');}

.intro.artikelteaser{background-image: url('../img/luft-motoren-motorkette.jpg');}
.intro.austauschmotor{background-image: url('../img/luft-motoren-austauschmotor.jpg');}
.intro.lkw{background-image: url('../img/lkw-motoren.jpg');}
.intro.pkw{background-image: url('../img/pkw-motoren.jpg');}
.intro.bmw{background-image: url('../img/motor-bmw.jpg');}
.intro.bmw-m8{background-image: url('../img/bmw-m8-banner.jpg');}
.intro.vw{background-image: url('../img/motor-vw.jpg');}
.intro.mercedes{background-image: url('../img/motor-mercedes.jpg');}
.intro.ford{background-image: url('../img/motor-ford.jpg');}
.intro.fiesta{background-image: url('../img/motor-ford-fiesta.jpg');}
.intro.transit-connect{background-image: url('../img/motor-ford-transit-connect.jpg');}
.intro.audi{background-image: url('../img/motor-audi.jpg');}
.intro.skoda{background-image: url('../img/motor-skoda.jpg');}
.intro.seat{background-image: url('../img/motor-seat.jpg');}
.intro.ranger{background-image: url('../img/ford-ranger-motorschaden.jpg');}
.intro.transit{background-image: url('../img/ford-transit-motorschaden.jpg');}
.intro.om642{background-image: url('../img/mercedes-om642-motorschaden.jpg');}
.intro.sprinter{background-image: url('../img/mercedes-sprinter-motorschaden.jpg');}
.intro.jumper{background-image: url('../img/citroen-jumper-motorschaden.jpg');}
.intro.citroen{background-image: url('../img/motor-citroen-308.jpg');}
.intro.boxer{background-image: url('../img/peugeot-boxer-motorschaden.jpg');}
.intro.amarok{background-image: url('../img/vw-amarok-motorschaden.jpg');}
.intro.crafter{background-image: url('../img/vw-crafter-intro.jpg');}
.intro.ducato{background-image: url('../img/fiat-ducato-motorschaden.jpg');}
.intro.insignia{background-image: url('../img/opel-insignia-motorschaden.jpg');}
.intro.vivaro{background-image: url('../img/opel-vivaro-motorschaden.jpg');}
.intro.movano{background-image: url('../img/motor-opel-movano.jpg');}
.intro.trafic{background-image: url('../img/motor-renault-trafic.jpg');}
.intro.master{background-image: url('../img/motor-renault-master.jpg');}


.intro.vw-t5-motorschaden{background-image: url('../img/vw-t5-motorschaden.jpg');}
.intro.bmw-motorschaden{background-image: url('../img/bmw-motorschaden.jpg');}
.intro.gebrauchtmotor{background-image: url('../img/luft-motoren-motoreninstandsetzung.jpg');}
.intro.getriebe{background-image: url('../img/luft-motoren-getriebe.jpg');}

.artikelteaser p{
    color: #ffffff;
    width: 50%;
}
.artikelteaser h2, .contactarea h3{
    font-style: italic;
    font-weight: 700;
    font-size:34px;
}
.orangebutton {
    background-color: #84d2f6;
    display: inline-block;
    padding: 15px 20px;
    color: #ffffff;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 700;
}
.orangebutton:hover {
    background-color: #59a5d8;
    color: #ffffff;
}
.orangebutton.current{
    color: #ffffff;
    background-color: #59a5d8;
}

.anfragebutton{
    position: fixed;
    bottom: 20px;
    right: 20px;
    box-shadow:4px 4px 10px 0 rgb(40 40 40 / 15%); 
    background-color:#78c554;
    z-index: 999999;
}
.anfragebutton:hover{background-color:#6fb24e;}

.klarna_mobile{
    position: fixed;
    bottom: 60px;
    right: 20px;
    /*box-shadow:4px 4px 10px 0 rgb(40 40 40 / 15%);*/
    z-index: 999999;
    padding: 4px 4px 4px 12px;
    background-color: #ffffffbd;
    border-radius: 4px;
}



.newsletter{
    background: linear-gradient(60deg, #84d2f6, #84d2f6, #84d2f6);
    background-size: 600% 600%;
    padding-top: 60px;
    padding-bottom: 60px;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}

/* Contactinfo Element ----------------------------------*/

.contactinfo h2{
    color: #ffffff;
}
.contactinfo h3{
    color: #ffffff;
    font-weight: 700;
}

.contactinfo{
    background: linear-gradient(60deg, #84d2f6, #84d2f6, #84d2f6);
    background-size: 600% 600%;
    padding-top: 60px;
    padding-bottom: 60px;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}

.contactarea{
    background: #59a5d8 url(../img/luft-motoren-kontaktformular.jpg);
    background-size: cover;
    color: #ffffff;
}
.contactarea ul li{
    padding: 3px 0;
}
.contactarea ul li:before{
    content: '✔ ' ;
    font-size: 20px;
    font-weight: 300;
    color: #7de256;
    position: relative;
    top: 2px;
}
.contactarea .border{
    border: 0px solid rgba(255, 255, 255, 0.9);
    border-radius: 2px;
}

input[type=text],input[type=email],input[type=number],textarea{padding:10px 1px}
.contactarea input{margin-bottom:4px}
.contactarea input,.contactarea input::placeholder,.contactarea textarea,.contactarea textarea::placeholder,.contactarea select{margin-top:0;font-style:normal;font-size:1em;line-height:0}
.contactarea textarea{line-height: 1;}
.contactarea button{background:;float:right}
.contactarea input[type=text],.contactarea input[type=email],.contactarea input[type=number],.contactarea textarea,.contactarea select{width:-webkit-fill-available;width:-moz-available;padding:7px 10px}
.contactarea input[type=text]::placeholder,.contactarea input[type=email]::placeholder,.contactarea input[type=number]::placeholder,.contactarea textarea::placeholder{padding:10px;padding-left:0;-webkit-padding:0}
::-moz-placeholder{line-height:1!important}
.contactarea textarea::placeholder{line-height: 1.3}

/*CONTACTAREA TOOLTIP*/
.tooltip{
    margin: 10px 0;
}
.tooltip .tooltiptext {
    display: none;
    width: 400px;
    max-width: 100%;
    background-color: black;
    color: #fff;
    border-radius: 6px;
    padding:15px;
    font-size: 13px;
    position: absolute;
    z-index: 1;
    left: 51%;
    margin-top: -12%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

@media screen and (min-width: 769px){
    .tooltip:hover .tooltiptext {
        display: inline-block;
    }
    
}



.carbrand ul{
    width: 100%;
}
.carbrand ul li{
    display: inline-block;
    width: 16%;
    text-align: center;
    vertical-align: middle;
    padding: 30px 0 ;
}
.carbrand h2{
    font-weight: 300;
    margin-bottom: 50px;
    text-align: center;
}
.carbrand.landing{padding:20px}
.carbrand.landing ul li {
    width: 9.7%;
    padding: 0;
}
.carbrand.landing ul li img{vertical-align: middle;}
.landing h3{font-size:24px;margin-top:20px}
.artikelteaser.landing h2{font-size:34px}

.landing.threecolumns h3{margin-top:0;}

.landing .stars{height:20px;color:#e8d600;}

@media screen and (min-width: 769px){
    .testimonials .justifycontent{
        display: flex;
        justify-content: space-between;
    }
    .testimonials .firstcolumn, .testimonials .centercolumn, .testimonials .lastcolumn{
        padding: 40px 4px 20px 4px;
        box-shadow: 0 0 18px rgba(100,100,100,.1);
        margin:0 8px;
    }
}


.validatr-message{
    max-width: 300px;
    padding: 5px !important; 
    background-color: #ffa1a1 !important;
    color: #db2d2d !important;
    border: 1px solid #db2d2d !important;
}


.phonecall{
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.phoneicon{
    width: 100px;
    height: auto;
}



/* Footer Form ----------------------------------*/

form{
    background: none;
    padding: 0 0 0 0;
    border:0px solid #ffffff;
}

input[type=text], input[type=email], input[type=number], textarea{
    border: none;
    border: 0px dotted #c9c9c9;
    background: #ffffff;
    width: 99%;
    padding: 10px 4px;
    margin-bottom: 5px;
    border-radius: 2px;
    font-family: 'Roboto';
}

textarea{
    height: 139px;
    border-radius: 2px;
    border-left: 0px dotted #c9c9c9;
    font-family: 'Roboto';
}
input[type="email"].big-dog::-webkit-input-placeholder {
   color:   #59a5d8;
    padding: 10px;
}
input[type=submit] {
    border-radius: 2px;
    border: 0;
    width: 100px;
    color: #ffffff; 
    font-size: 16px;
    height:35px;
    background: #386fa4;
    cursor: pointer;
    margin: 5px 0px; 
    float: right; 
    font-weight: 700;
}
input[type=submit]:hover {
    background: #133c55;

}


/* Copyright ----------------------------------*/
.copyright{
    background: #133c55;
    padding: 0 20px;
    margin-bottom: 20px;
    color:rgba(255, 255, 255, 0.7);
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.copytext{
    color:rgba(255, 255, 255, 0.7);
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
@keyframes AnimationName { 
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}


.lkw_pkw_intro{
    padding: 0 !important;
    box-sizing: border-box;
    max-width: 1440px;

}

.lkw_{
    background: url('../img/lkw.jpg');
    background-position: center center;
    background-size: cover;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 50px;
    width: 50%;
    float: left;
    min-height: 400px;
}
.lkw_ h3, .pkw_ h3{
    color:#ffffff;
    font-size: 36px;
    font-weight: 600;
    margin: 30px 0 10px 0 !important;
    padding: 0 !important;
}

._box_{
    margin-top: 120px;
    padding: 60px 40px;
}

.lkw_ p, .pkw_ p{
    font-size: 18px;
    color: rgba(255, 255, 255, 1);
    margin: 0 !important;
    padding: 0 !important;
}
.pkw_{
    background: url('../img/pkw.jpg');
    background-position: center center;
    background-size: cover;
    display: inline-block;
    min-height: 400px;
    box-sizing: border-box;
    width: 50%;
    padding-top: 50px;
}


@media screen and (max-width: 768px){
  
    .lkw_, .pkw_{
        box-sizing: none ;
        padding-top: 40px;
        width: 100%;
        min-height: 200px;
    }
}



/* Section -------------------------------------*/
section, header, footer, copyright{
    max-width: 1400px;
    margin: 0 auto;
    border: 0px solid red;
    padding: 20px;
    background-color: #ffffff;
}

section, footer{
    padding: 60px 20px;
}
section img{
    max-width:100%; 
    height:auto;
}

.pic1{
    width:99px; 
    height:auto;
    margin-bottom: 200px;
}
.pic2{
    width:103px; 
    height:auto;
}
.pic3{
    width:117px; 
    height:auto;
}

.titlearea{
    background-color: #84d2f6; 
    padding: 10px 20px;
    color: #ffffff;
}

/* Article -------------------------------------*/
article, .section-inner{
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
}




/**** OUTCOME, ABOUTUS Landing -----------------------------****/
.outcome .section-inner{margin-bottom: 40px;}

.outcome .floatright img{float: right;}

@media screen and (min-width: 769px){
    .outcome .floatleft {
        padding-right: 20px;
        box-sizing: border-box;
    }
    .outcome .floatright {
        padding-left: 20px;
        box-sizing: border-box;
    }
    .aboutus .floatleft{
        box-sizing: border-box;
        padding-right: 40px;
    }
}




/********STEPS*********/
section.steps article>div, section.steps .section-inner>div {
	overflow: hidden;
}
.steps.landing{padding-bottom:80px;}
@media screen and (min-width: 769px){
    .steps{
        padding: 0px;
        max-width: 1440px;
    }
    
    .steps article, .steps .section-inner{
        display: flex;
        padding: 0px;
        max-width: 1440px;
    }
    .steps .step-txt{
        padding: 60px 60px 40px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .steps .halfway {
        width: 50%;
    }
}

@media screen and (min-width: 1024px){
    header{margin-top:52px;} 
    .steps .step-txt{
        padding: 90px 90px 70px;
    }

    
    .lkw-c2a .textdiv{
    width: 60%;
    display: inline-block;
    float: left;
    }
    .lkw-c2a img{float: right;}
}
@media screen and (max-width: 768px){
    .steps .halfway{
        min-height: 200px;
        margin-bottom: 30px;
    }
    .steps article, .steps .section-inner, .outcome .section-inner {
        display: table;
    }
    .steps .step-txt, .outcome-txt {
        display: table-footer-group;
    }
}


.benefits .benefit{margin: 40px 0 60px 0;}


/* Lagerbestand -----------------------------------*/
@media screen and (min-width: 768px) {
        .mk-anchors{display: flex; justify-content: space-between;} 
    }
    .mk-anchors{margin-bottom:60px;}
    .mk-anchors a{display: block;margin-bottom:10px;font-weight: 700;font-size:18px; text-decoration:none;}
    .lkw-motorencodes ul{list-style: disc; padding-left:20px; margin-bottom: 40px;}
    .lkw-motorencodes h2{margin-bottom: 20px;}
    .lkw-motorencodes ul h3{margin-top:20px; margin-left:-20px;}
    .ul_heading{list-style: none; font-weight:700;margin-top: 10px; margin-left: -20px;}




/* Referenzen ----------------------------------*/
.ref{
    background-color:#f8f8f8;
    background-repeat: no-repeat;
    min-height: 500px;
}
/* Newsletter -------------------------------------*/
.mc-field-group{
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;   
}
.mc-field-group label{
    display: none;
}

.mc-field-group .email{
    border: 2px solid #ffffff;
    float: left;
    width: 53%;
    height: 50px;
    padding: 0 20px;
    font-family: Roboto;
    font-size: 14px;
}
.button{
    border: 2px solid #ffffff;
    float: left;
    color: #ffffff;
    background: none;
    width: 32%;
    height: 54px;
    cursor: pointer;
    font-family: Roboto;
}
.button:hover{
    background-color: #181818;
}

::-webkit-input-placeholder {
    color:  #59a5d8;
    font-family: 'Roboto';
    padding: 15px;
    font-size: 16px;
}
:-moz-placeholder {
    color:  #59a5d8;
    font-family: 'Roboto';
    padding: 15px;
    font-size: 16px;
}
::-moz-placeholder {
    color: #59a5d8;
    font-family: 'Roboto';
    padding: 15px;
    font-size: 16px;
}
:-ms-input-placeholder {
    color: #59a5d8;
    font-family: 'Roboto';
    padding: 15px;
    font-size: 16px;
}






/* Pulsieren -------------------------------------*/


.pulsar1{ left: 45%; top: 42%;}
.pulsar2{ left: 70%; top: 75%;}
.pulsar3{ left: 60%; top: 16%;}
.pulsar4{ left: 10%; top: 67%;}

.pulsar5{ left: 62%; top: -1%;}
.pulsar6{ left: 40%; top: 13%;}
.pulsar7{ left: 12%; top: 32%;}
.pulsar8{ left: 5%; top: 42%;}
.pulsar9{ left: 40%; top: 59%;}
.pulsar10{ left: 12%; top: 80%;}



@keyframes pulsar {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes pulsar {
    0% {
        -webkit-transform: scale(0);
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

.pulsar {
    width: 30px;
    height: 30px;
    margin: 0px auto;  
    position: absolute;
}



.pulsar .ring {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 7px solid #84d2f6;
    box-shadow: inset 0 0 7px 0 #84d2f6;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    margin-top: -50%;
    margin-left: -50%;
    -webkit-transform: scale(0);
    transform: scale(0);
    
}

.pulsar span{
    font-weight: 700;
    top: -10px;
    left: -5px;
    color: #999999;
    position: absolute;
}

.pulsar .ring:nth-child(1) {
    -webkit-animation: pulsar 2s 0s linear infinite;
    animation: pulsar 2s 0s linear infinite;
}

.pulsar .ring:nth-child(2) {
    -webkit-animation: pulsar 2s .5s linear infinite;
    animation: pulsar 2s .5s linear infinite;
}

.pulsar .ring:nth-child(3) {
    -webkit-animation: pulsar 2s 1s linear infinite;
    animation: pulsar 2s 1s linear infinite;
}

.pulsar .ring:nth-child(4) {
    -webkit-animation: pulsar 2s 1.5s linear infinite;
    animation: pulsar 2s 1.5s linear infinite;
}



/* Footer -------------------------------------*/

footer{
    background-color: #133c55;
    min-height: 200px;
    margin-bottom: 30px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
footer .lastcolumn li {
    color: rgba(255, 255, 255, 0.7);
}
footer .lastcolumn span{
    color: #84d2f6;
    text-decoration: none !important;
}
footer li a{
    padding: 5px 0;
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
}
footer li a:hover{
    color: #ffffff;
}
footer .current{
    color: #ffffff;
}


/*COOKIES******
#cookie-bar {background:#181818; height:auto; line-height:24px; color:#eeeeee; text-align:center; padding:8px 20px;bottom: 0;
    position: fixed;
    width: 100%;z-index: 99}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:0; padding:0;font-size:16px;}
#cookie-bar a.cb-enable {color:#212121; display:inline-block; border-radius:2px; text-decoration:none; padding:5px 14px; margin-left:50px;font-size:16px;}
#cookie-bar .cb-enable {background:#84d2f6;}
#cookie-bar .cb-enable:hover {background:#59a5d8;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#046db5;}
#cookie-bar .cb-policy:hover {background:#777;}
@media screen and (max-width: 850px){
    #cookie-bar {padding:10px;box-sizing: border-box;}
    #cookie-bar a.cb-enable {padding:3px 14px;margin:15px;display:block;width:fit-content}
}
*/        /* small Desctop
-------------------------------------------------------------------------------------------- */
/* --- Tablet & small Desctop --- */
@media screen and (max-width: 1500px) {  

footer{
    background-color: #133c55;
    min-height: 200px;
    margin-bottom: 0px;
    border-radius: 0px;
}
.quickinfo{
    margin-top: 0px;
    border-radius: 0px;
}
    .quickinfo p:first-child{width: 64%;}
}



/* Tablet & small Desctop
-------------------------------------------------------------------------------------------- */
/* --- Tablet & small Desctop --- */
@media screen and (max-width: 1024px) {  
/*
#menu{
    display: none;
}*/
.quickinfo p:first-child{width: 54%;}
.intro{
    padding-top: 180px;
    padding-bottom: 50px;
}
.carbrand ul li{
    width: 32%;
}
.artikelteaser p{
    width: 100%;
}
}







/* Tablet
-------------------------------------------------------------------------------------------- */
/* --- Tablet --- */
@media screen and (max-width: 768px) {      
    
h5{
    margin-bottom: 15px;
}
 
    
.intro{
    padding-top: 80px;
    padding-bottom: 30px;
}
.floatleft{
    float: none;
    width: 100%;
}  
.floatright{
    float: none;
    width: 100%;
}    
.quickinfo{
    display: none;
}  
    .firstcolumn, .centercolumn{
        margin-bottom: 40px;
    }
.carbrand ul li{
    width: 49%;
}   
.carbrand_smartphone{
    display: none;
}
.intro.startsite{
    padding-top: 50px;
    padding-bottom: 50px;
}
.intro.kontaktsite{
    padding-top: 50px;
    padding-bottom: 50px;
}
.intro.motoreninstandsetzung{
    padding-top: 50px;
    padding-bottom: 50px;
}
.intro.artikelteaser{
    padding-top: 50px;
    padding-bottom: 50px;
}
    
textarea{
    border-left: 0px solid rgba(255, 255, 255, 0.9);
}

.validatr-message{
    left: 15% !important;
}
.contactarea ul {
    margin-bottom: 30px;
}
.phonecall{
   display: block;
}
    .anbauteile article, .anbauteile .section-inner, .benefit{display: table;}
    .anbauteile .floatright.shortway, .benefits .floatright.shortway{display: table-header-group;}
    
}








/* Smartphone
-------------------------------------------------------------------------------------------- */
/* --- Smartphone --- */
@media screen and (max-width: 480px) {  

section, header, footer, copyright, .titlearea{
    padding-left: 10px;
    padding-right: 10px;
}

    .carbrand.landing ul li{padding:8px 16px;}
}





/***********NEW CSS MENU********************************************************/
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	color: #fff;
	text-align: right;
	height: 14px;
    padding: 7px 0 10px;
	display: none;
    overflow: hidden;
}
.show-menu>div{
    float: right;
}
.show-menu>div>div{
    background: #fff;
    width: 30px;
    height: 3px;
}
.show-menu>div>div:not(:last-child){
    margin-bottom: 5px;
}

/*Checkbox ausblenden*/
header input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}


@media screen and (max-width: 1024px){
    
    nav.nav {
        position: absolute;
        left: 0;
        width: 100%;
        background:#123c55;
    }
    
    /*ul Styling entfernen*/
header ul {
	margin:0;
	padding:0;
	position: absolute;
    text-align: center;
}

/*horizontale Liste*/
header li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

    .submenu{
        display: inline;
    }

header li a {
	display:block;
	min-width:140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	background:#123c55;
	text-decoration: none;
}

/*dropdown links*/
header li:hover ul a {
	background: #1b3249;
	color: #ffffff;
	height: 40px;
	line-height: 40px;
}

/*gehoverte Dropdown Links*/
header li:hover ul a:hover {
	background: #1b3249;
	color: #ffffff;
}


header li ul {
	display: none;
}

/*Vertikale Dropdown Links*/
header li ul li {
	display: block;
	float: none;
}

/*Text wrapping vermeiden*/
header li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Dropdown on Hover anzeigen*
header ul li span:hover + .hidden, .hidden:hover {
	display: block;
}

/*Menu anzeigen, wenn die unsichtbare Checkbox aktiviert ist*/
input[type=checkbox]:checked ~ nav #menu{
    display: block;
}  

    input[type=checkbox]:checked ~ nav.nav{
        padding: 30px 0;
    } 
    
    /**SUBMENU CHECKBOX TOGGLE*************************/
    input[type=checkbox]#submenu-check:checked ~ .hidden{
        display: block;
    }
    /*Submenu sichtbar machen*/
    input[type=checkbox].submenu-check:checked ~ ul.menu{display: block;}
      
    
	/*Dropdown Links inline darstellen*/
	header ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	header li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	header ul li, header li a {
		width: 100%;
        color:#fff;
	}
    header ul li.dropdown_nonclickable{min-height:50px;line-height:50px;}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
    
    
    .dropdown:after {
        content:'▼';
        margin-left: 20px;
        color: #ffffff;
    }
    
    input[type=checkbox]:checked ~ .dropdown:after {
    content: '▲';
    }
    
    
    .carbrand.landing ul li{width:9.5%;}
    .intro.landing ul{margin-bottom: 20px;}
    .landing .stars{height:16px;}
}