@charset "utf-8";

/* pt-sans-narrow-regular - latin */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-narrow-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/pt-sans-narrow-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans-narrow-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans-narrow-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans-narrow-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans-narrow-v17-latin-regular.svg#PTSansNarrow') format('svg'); /* Legacy iOS */
}

/* pt-sans-narrow-700 - latin */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-sans-narrow-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/pt-sans-narrow-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans-narrow-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans-narrow-v17-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans-narrow-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans-narrow-v17-latin-700.svg#PTSansNarrow') format('svg'); /* Legacy iOS */
}

header,
section,
footer,
aside,
nav,
article,
figure {
    display: block;
}

body {
    font: 85%/1.5 Arial, Helvetica, sans-serif;
    /*text-shadow: 1px 1px 0 #fff;*/
    /*	
    background-image: -webkit-gradient(linear, left top, left bottom, from( #efefef), to( #e3e3e1));
	background-image: -webkit-linear-gradient(#efefef, #e3e3e1);
	background-image:    -moz-linear-gradient(#efefef, #e3e3e1);
	background-image:     -ms-linear-gradient(#efefef, #e3e3e1);
	background-image:      -o-linear-gradient(#efefef, #e3e3e1);
	background-image:         linear-gradient(#efefef, #e3e3e1);
    background: #333 url(../img/layout/bg-body.png) center 0 no-repeat fixed;
    */
    background:#ffffff;   
    margin: 0;
    padding: 0;
    color: #595B61;
}

.small {
    font-size: 80%;
}
.big {
    font-size: 285%;
}
img,
object {
    /*max-width: 100%;*/
}


/******************************************************/


/******** Element-/Tag-Selektoren  */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl {
    padding: 0;
    margin: 0;
    padding-right: 5%;
    padding-left: 5%;
    color: #46484E;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.3em;
}

h2 {
    font-size: 160%;
    color: #61646B;
    margin: 0 0 .6em;
}

h3 {
    font-size: 130%;
    color: #61646B;
    margin: .3em 0 .9em;
    padding-top: 1.2em;
    border-top: 1px solid #fff;
    -webkit-box-shadow: 0 -1px 0px #595C62;
    -moz-box-shadow: 0 -1px 0px #595C62;
    box-shadow: 0 -1px 0px #595C62;
    clear: both;
    float: none;
}

video {
    padding: 0;
    margin: 0;
    padding-right: 2%;
    padding-left: 2%;
}

section section h3 {
    padding-left: 10%;
    /* doppeltes padding, da verschachtelte <section> à 5% */
}

section.gallery h3 {
    padding-left: 0;
    /* kein padding, da <section class="gallery"> bereits padding à 5% hat */
    border-top: none;
    -webkit-box-shadow: 0 0 0 #595C62;
    -moz-box-shadow: 0 0 0 #595C62;
    box-shadow: 0 0 0 #595C62;
}

h4 {
    font-size: 110%;
    color: #61646B;
    margin: 2.2em 0 .3em;
    padding-top: .6em;
}

h4.first {
    margin-top: 0;
}

h4 img {
    padding-bottom: .8em;
}

p {
    margin-bottom: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav ul a,
#quickcontact .inner,
#quickcars .inner {
    font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif;
}

ul,
ol,
dl {
    margin: 0 0 1.3em 0;
}

ul,
ol {
    list-style-position: outside;
    margin-left: 3%;
}

a img {
    border: none;
}

a:link {
    color: #595B61;
    text-decoration: underline;
}

a:visited {
    color: #595B61;
    text-decoration: underline;
}

a:hover,
a:active,
a:focus {
    color: #595B61;
    text-decoration: none;
    outline: none;
}

a.alarm {
    color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: #902021;
    padding: 3px 10px;
    text-shadow: none;
    font-weight: bold;
    margin: 5px 0;
    -o-transition: background-color, .5s, ease;
    -moz-transition: background-color, .5s, ease;
    -webkit-transition: background-color, .5s, ease;
    transition: background-color, .5s, ease;
}

a.alarm:hover {
    background-color: #F00;
}


/******************************************************/


/******** Verschiedene float/clear-Klassen */

.fltrt {
    float: right;
    margin-left: 1.3em;
    margin-bottom: 1.3em;
}

.fltlft {
    float: left;
    margin-right: 1.3em;
    margin-bottom: 1.3em;
}

.clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}


/******************************************************/


/******** Header  */

header {
    position: relative;
    margin-bottom: 3em;
}

header img {
    /*max-width:100%;*/
}
header .teaser {
    position: static;
    height: 50px;
    background: white;
    text-align: center;
    width: 100%;
    padding-top: .5rem;
}
header .teaser img {
    max-height: 50px;
}

/******************************************************/


/***** VIDEO HEADER */

.videoheader {
    position: relative;
    overflow: hidden;
    max-width: 1024px;
    height: 100vh;
    max-height: 50vh;
    text-align: center;
}

.videocontainer {
    position: absolute;
    height: 100%;
    width: 200%;
    left: -50%;
}

.videocontainer video {
    position: absolute;
    top: -99999px;
    bottom: -99999px;
    left: -99999px;
    right: -99999px;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
   /*background:transparent url('../media/Subaru-Clip-Schmitt24_V02.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover;*/ 
}


/******************************************************/


/******** Verschiedene ID */

#flex-container {
    height: 300px;
    display: block;
}

#whitebox {
    position: absolute;
    top: 0px;
    right: 0/*3%*/
    ;
    width: 132px;
    height: 120px;
    background: #fff;
    z-index: 1000;
    text-align: center;
}

#whitebox img {
    width: auto;
    margin-top: 20px;
}

#titlebox {
    border: 1px #595C62 solid;
    border-left: none;
    border-right: none;
    width: 96%;
    padding: .9em 2% 1.4em;
    margin: .8em 0;
    -webkit-box-shadow: 0 1px 0px 0px #fff;
    -moz-box-shadow: 0 1px 0px 0px #fff;
    box-shadow: 0 1px 0px 0px #fff;
}

#titlebox h1,
#titlebox p {
    line-height: 1.2em;
    margin: .2em 0 .2em 0;
    padding: 0 0 0 15px;
    font-weight: normal;
}

#titlebox h1 {
    cursor: pointer;
}

#titlebox span {
    font-weight: bold;
}

#quicklinks {
    position: absolute;
    margin: auto 0;
    bottom: .66em;
    right: 4%;
    width: 20%;
}

#quickcars,
#bannerbox {
    cursor: pointer;
    padding: 3% 1%;
    width: 100%;
    text-decoration: none !important;
    text-transform: uppercase;
    text-shadow: -1px -1px 0px rgba(20, 20, 20, 1);
    text-align: center;
    font-size: 110%;
    font-weight: bold;
    color: #A1D6FF;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 0px 2px 0px #666;
    -moz-box-shadow: 0px 0px 2px 0px #666;
    box-shadow: 0px 0px 2px 0px #666;
    background: #3a8dd1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOGRkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNTU3YTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #3a8dd1 0%, #1557a3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a8dd1), color-stop(100%, #1557a3));
    background: -webkit-linear-gradient(top, #3a8dd1 0%, #1557a3 100%);
    background: -o-linear-gradient(top, #3a8dd1 0%, #1557a3 100%);
    background: -ms-linear-gradient(top, #3a8dd1 0%, #1557a3 100%);
    background: linear-gradient(top, #3a8dd1 0%, #1557a3 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3a8dd1', endColorstr='#1557a3', GradientType=0);
}

#quickcars:hover,
#quickcars:active {
    color: #DFF1FF;
    background-color: #3a8dd1;
    -webkit-box-shadow: 0px 0px 0px 0px #666;
    -moz-box-shadow: 0px 0px 0px 0px #666;
    box-shadow: 0px 0px 0px 0px #666;
}

#bannerbox {
    text-transform: none;
    position: absolute;
    left: 5%;
    width: 36%;
    height: auto;
    padding: 1% 1%;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    -webkit-box-shadow: 2px 2px 5px 0px #666;
    -moz-box-shadow: 2px 2px 5px 0px #666;
    box-shadow: 2px 2px 5px 0px #666;
    z-index: 9999;
}

#bannerbox h4,
#bannerbox p {
    font-size: 1.2em;
    margin: 0;
    padding-top: 0;
    padding-bottom: .2em;
    color: #fff !important;
    text-align: left;
}

#bannerbox p {
    font-size: .8em;
}

#quickcontact {
    cursor: pointer;
    padding: 3% 1%;
    width: 100%;
    text-decoration: none !important;
    /*text-transform: uppercase;*/
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
    text-align: center;
    font-size: 110%;
    font-weight: bold;
    -webkit-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 0px 1px 0px #999;
    -moz-box-shadow: 0px 0px 1px 0px #999;
    box-shadow: 0px 0px 1px 0px #999;
    background: rgb(238, 238, 238);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 238, 238, 1)), color-stop(100%, rgba(204, 204, 204, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    /* IE10+ */
    background: linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
    /* IE6-8 */
}

#quickcontact:hover,
#quickcontact:active {
    color: #999;
    background-color: #ddd;
    -webkit-box-shadow: 0px 0px 0px 0px #666;
    -moz-box-shadow: 0px 0px 0px 0px #666;
    box-shadow: 0px 0px 0px 0px #666;
}

#quickcontact:focus,
#quickcars:focus {
    outline: thin dotted #333333;
    outline-offset: -2px;
}


/******************************************************/


/******** Navigation  */

nav ul {
    list-style: none;
    margin-bottom: 1em;
}

nav ul li {
    font-size: 120%;
    color: #595A60;
}

nav ul a,
nav ul a:link,
nav ul a:visited {
    padding: .3em .5em .5em 1em;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    display: block;
    text-decoration: none;
}

nav ul a:hover,
nav ul a:active,
nav ul a:focus,
nav ul a.active {
    color: #333;
    margin-bottom: 0;
    border-top: 1px solid #595C62;
    border-bottom: 1px solid #595C62;
    -webkit-box-shadow: 0 1px 0px 0px #fff;
    -moz-box-shadow: 0 1px 0px 0px #fff;
    box-shadow: 0 1px 0px 0px #fff;
}

nav ul a:hover {
    border-top: 1px solid #9C9EA5;
    border-bottom: 1px solid #9C9EA5;
}


/******************************************************/


/******** Main Content  */

.container {
    background: #CCC;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #efefef), to( #e3e3e5));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#efefef, #e3e3e5);
    /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(#efefef, #e3e3e5);
    /* FF3.6 */
    background-image: -ms-linear-gradient(#efefef, #e3e3e5);
    /* IE10 */
    background-image: -o-linear-gradient(#efefef, #e3e3e5);
    /* Opera 11.10+ */
    background-image: linear-gradient(#efefef, #e3e3e5);
    width: 100%;
    margin: 0 auto;
}

section {
    max-width: 500px;
    width: 100%;
    float: left;
}


/*section img,*/

aside img {
    display: block;
}

section img.shadow,
aside img.shadow {
    margin: 0 .5em .6em 0;
    border: 3px solid #fff;
    -webkit-box-shadow: 0 0 1px #595C62;
    -moz-box-shadow: 0 0 1px #595C62;
    box-shadow: 0 0 1px #595C62;
}

section.gallery {
    width: 91%;
    padding: 0 3%;
    margin: 2em 0 2em 1.66666%;
}

section.no-topmargin {
    margin: 0 0 2em 1.66666%;
}


/******** Teamliste  */

section section {
    max-width: 300px;
    width: 50%;
    float: left;
    margin-bottom: 1em;
}

section section p {
    padding: 0 0 0 10%;
}

section section span {
    font-size: 80%;
}

section section img,
section.gallery .galleryimage {
    float: left;
    margin: 0 .5em .6em 0;
    border: 3px solid #fff;
    -webkit-box-shadow: 0 0 1px #595C62;
    -moz-box-shadow: 0 0 1px #595C62;
    box-shadow: 0 0 1px #595C62;
}


/******** Markenlogos  */

.markenlogos {
    padding: 0 0 0 5%;
    margin: 1em 0;
}

.markenlogos img {
    padding: .333em;
    background: #FFFFFF;
    margin: .1em;
}


/******************************************************/


/******** Fußzeile  */

footer {
    padding: 1em 0 1em;
    margin-bottom: 1.2em;
    position: relative;
    clear: both;
    border-top: 1px solid #595C62;
    /*border-bottom: 1px solid #595C62;*/
    -webkit-box-shadow: 0 1px 0px 0px #fff;
    -moz-box-shadow: 0 1px 0px 0px #fff;
    box-shadow: 0 1px 0px 0px #fff;
}

footer span.right {
    float: right;
}


/******************************************************
/******************************************************
/******************************************************/


/******** From 481px to 800px ********/

@media only screen and (max-device-width: 800px),
(max-width: 800px) {
    header img {
        max-width: 800px;
    }
    #whitebox {
        right: 0/*2%*/
        ;
        width: 125px;
        height: 115px;
    }
    #whitebox img {
        margin-top: 10px;
    }
    .container {
        width: 95%;
        max-width: 800px;
        margin: 0 auto;
    }
    #navigation {
        float: left;
        width: 20%;
        min-width: 110px;
        padding-bottom: .5em;
        padding-left: 2%;
    }
    .content {
        padding: .5em 0;
        width: 70%;
        float: left;
        margin-left: 5%;
    }
    aside {
        background-color: #D1D3D6;
        float: right;
        width: 65%;
        padding: .5em 0;
        border-radius: 15px;
        margin: 0 5% 1em 5%;
    }
    #quicklinks {
        bottom: 1em;
    }
    .flex-direction-nav {
        display: none;
    }
}


/******************************************************
/******************************************************
/******************************************************/


/* ******* From 1px to 600px ******* */

@media only screen and (max-device-width: 600px),
(max-width: 600px) {
    body {
        font: 80%/1.4 Arial, Helvetica, sans-serif;
    }
    h1 {
        font-size: 1.3em;
    }
    #whitebox {
        position: relative;
        right: 0px;
        width: 100%;
        height: 100px;
        margin: 0 auto;
    }
    #whitebox img {
        width: auto;
        margin-top: 0px;
    }
    header {
        margin-bottom: 1em;
    }
    header img {
        max-width: 600px;
    }
    nav ul li {
        margin-top: 3px;
        background: #e1e1e1;
    }
    nav ul a,
    nav ul a:link,
    nav ul a:visited {
        color: #555;
        text-shadow: 0 1px 1px #fff;
        border-top: 0px transparent;
        border-bottom: 0px transparent;
    }
    nav ul a:hover,
    nav ul a:active,
    nav ul a:focus,
    nav ul a.active {
        background: #fff;
        color: #595B61;
        text-shadow: 0 1px 1px #fff;
        border-top: 0px transparent;
        border-bottom: 0px transparent;
        -webkit-box-shadow: 0 1px 0px 0px #fff;
        -moz-box-shadow: 0 1px 0px 0px #fff;
        box-shadow: 0 1px 0px 0px #fff;
    }
    .container {
        width: 95%;
        max-width: 600px;
        margin: 0 auto;
    }
    #navigation {
        float: none;
        width: 96%;
        padding-bottom: .5em;
        padding-left: 2%;
        padding-right: 2%;
    }
    .content {
        padding: .5em 0;
        width: 100%;
        float: left;
        margin: 0;
    }
    section section {
        max-width: 600px;
        width: 96%;
        clear: both;
        margin-top: .2em;
    }
    aside {
        background-color: #D1D3D6;
        float: left;
        width: 90%;
        padding: .5em 0;
        margin: 0 5% 2em 5%;
        border-radius: 15px;
    }
    #quicklinks {
        width: auto;
        position: relative;
        margin: 5% 1% 0 6%;
    }
    #quickcars,
    #quickcontact {
        float: none;
        font-size: 160%;
        padding: .3em;
    }
    .flex-direction-nav {
        display: none;
    }
    #supersized-loader {
        display: none;
    }
    #bannerbox {
        text-transform: none;
        position: relative;
        left: 0;
        width: 98%;
        height: auto;
        padding: 1% 1%;
        -webkit-border-radius: 0px 0px 0px 0px;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow: 0px 0px 0px 0px #666;
        -moz-box-shadow: 0px 0px 0px 0px #666;
        box-shadow: 0px 0px 0px 0px #666;
        z-index: 9999;
    }
}


/******************************************************
/******************************************************
/******************************************************/


/* ******* From 801px ******* */

@media only screen and (min-width: 801px) {
    header img {
        max-width: 100%;
    }
    .container {
        /* box-shadow: 0px 0px 10px #000122; */
        margin: 0 auto;
        max-width: 1024px;
        padding: 0px;
        width: 95%;
    }
    #navigation {
        float: left;
        width: 18%;
        padding-bottom: 10px;
        padding-left: 2%;
    }
    .content {
        padding: .5em 0;
        width: 52%;
        float: left;
        margin-left: 3%;
    }
    aside {
        float: left;
        width: 18%;
        padding: .5em 0;
        margin: 0 3% 0 3%;
    }
    aside h4 {
        border-top: 1px solid #FFFFFF;
        box-shadow: 0 -1px 0 #595C62;
    }
    aside h4.first {
        border-top: none;
        box-shadow: none;
    }
    /******************************************************
/******************************************************
/******************************************************/