*, *:after, *:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

img {
    width: 100%;
    height: auto;
    border: 0
}

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

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none
}

p{
  line-height: 120%;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

body {
    font-family: "Open Sans", sans-serif;
    color: #000;
    background-color: #fff
}

.hidden, .none {
    display: none
}

.block, .show {
    display: block
}

.grid {
  display: block;
}

.col {
  flex: 1;
}

.inline-block {
    display: inline-block
}

.main__wrapper {
    width: 100%;
    height: 100%;
    position: relative
}

.container {
    display: inline-block;
    width: 100%;
    padding: 0 2rem
}

.main__header {
    width: 100%;
    position: fixed;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 5px 10vw #fff, 0 1px 5vw #fff
}

.main__nav {
    display: block;
    width: 100%;
    text-align: center
}

.main__nav__navbar {
    width: 100%;
    display: inline-block
}

.main__nav__item {
    display: none;
    padding: 0 0.75rem;
    margin: 1rem 0;
    transition: all 0.5s ease-in-out
}

.main__nav__item--logo {
    float: left;
    margin: 0;
    display: block
}

.main__logo_big {
    display: none
}

.main__logo_small {
    display: block;
    max-width: 4rem
}

.main__nav__item:hover {
    background: #5b9cd6;
    transform: skew(5deg)
}

.main__nav__item--logo:hover {
    background: #fff;
    transform: skew(0deg)
}

.main__nav__item--hamburger {
    background: #5b9cd6;
    display: inline-block;
    transform: skew(5deg);
}

.main__nav__link {
    color: #000;
    display: inline-block;
    padding: 2rem 1.5rem;
    float: inherit;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.25s ease-in-out;
    font-weight: 600
}

.main__nav__link--logo {
    padding: 2rem 1.5rem
}

.main__nav__link--cta {
    transform: scale(1.2)
}

.main__nav__link:hover {
    color: #fff;
    letter-spacing: 3px;
    transform: skew(-5deg);
    font-weight: 800
}

.main__nav__link--logo:hover {
    background: #fff;
    padding: 2rem 1.5rem;
    transform: skew(0deg)
}

.main__nav__link--cta:hover {
    background: none;
    transform: skew(0deg) scale(1.5)
}

.main__nav__link--hamburger {
    color: #fff;
    font-size: 2.5rem;
    transform: skew(-5deg)
}

.main__nav__link--hamburger:hover {
    letter-spacing: 0;
    font-weight: 600
}


.section {
    padding: 2rem 0;
    width: 100%;
    min-height: 100vh;
    display: inline-block
}

.section h1 {
    font-size: 3rem;
    font-weight: 600
}

.section h2 {
    font-size: 2rem;
    font-weight: 600;
    transform: skew(-5deg);
    color: #fff;
    display: inline-block;
    letter-spacing: 0.25rem
}

.section h3 {
    font-size: 1.5rem;
    font-weight: 600
}

.section--hskew {
    transform: skew(5deg);
    background: #5b9cd6;
    padding: 1rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.section p{
    text-align: left;
}


.section--home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url("../img/bg.jpg") no-repeat;
    background-position: 100% 100%;
    background-size: cover;
    text-align: center
}

.section--home p{
    text-align: center;
}


.section--home h1{
  padding: 1rem 0;
  font-size: 2rem;
  line-height: 1.2;
}

.section--about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: url("../img/icongrid_g3.png") repeat, #a1a5a7;
    background-position: center center;
    background-size: 60%;
    box-shadow:inset 60px 60px 100px 0 #a1a5a7, inset -60px -60px 100px 0 #a1a5a7;
}
.section--about p{
    color: #fff;
}
.section--leistungen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url("../img/waldshut_map.svg") no-repeat center center;
    -webkit-background-size: 50%;
    background-size: 50%;
    text-align: center
}

.section--leistungen--content {
    width: 100%;
    display:
}

.box{
  padding: 1rem 0 0 0;
}

.box h3{
  padding: 1rem 0;
}

.section--preise {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: url("../img/icons_preise.png") repeat no-repeat, #fafafa;
    background-position: center center;
    background-size: 60%;
    box-shadow:inset 60px 60px 100px 0 #fafafa, inset -60px -60px 100px 0 #fafafa;
}

.section--fahrzeuge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: url("../img/icongrid_g3.png") repeat, #a1a5a7;
    background-position: center center;
    background-size: 60%;
    box-shadow:inset 60px 60px 100px 0 #a1a5a7, inset -60px -60px 100px 0 #a1a5a7;
}

.section--fahrzeuge p{
    color: #fff;
    text-align: center;
}

.section--fahrzeuge img{
    margin-bottom: 1rem;
}

.section--kontakt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #eaeaea
}

.section--impressum {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fafafa;
    text-align: left
}

#impressum {
    display: none
}

.cta{
  width: 7rem;
  z-index: 50000;
  right: 1rem;
  bottom: 1rem;
  display: block;
  position: fixed;
}

.cta--link{
  padding: 1rem;
  background: #fff;
  display: block;
  border-radius: 2rem 1rem 2rem 8rem;
}

.main__footer {
    display: inline-block;
    width: 100%;
    text-align: left;
    background: #a1a5a7;
    padding: 2rem 0
}

.footer__navbar {
    display: flex;
    flex-flow: column
}

.footer__nav__item {
    display: inline-block
}

.footer__nav__item p {
    padding: 0.4rem
}

.footer__nav__link {
    display: block;
    padding: 0.4rem;
    text-decoration: none;
    font-size: 1rem;
    color: #000
}

.footer__nav__link--impressum {
    display: inline-block;
    padding: 0;
    text-decoration: none;
    font-size: 1rem;
}

.footer__nav__link:hover {
    color: #fff;
    text-decoration: underline
}

.main__footer--headline {
    transform: skew(-5deg);
    color: #fff
}



.button {
    padding: 1rem;
    margin: 0.5rem 0;
    border: 0;
    outline: 0;
    font-size: 1rem;
    transition: all 0.5s ease-in-out
}

.button:focus {
    outline: none
}

.button:hover {
    background: #5b9cd6;
    color: #fff;
    cursor: pointer
}

.mail__form {
    display: inline-block;
    width: 100%;
    padding-top: 1rem
}

.mail__form label {
    font-family: "Open Sans", sans-serif;
    width: 100%;
    padding-left: 1rem;
    padding-top: 0.25rem;
    margin: 0.5rem 0;
    border: 0;
    outline: 0;
    font-size: 1rem;
    display: block
}

.mail__form input {
    font-family: "Open Sans", sans-serif;
    width: 100%;
    padding: 1rem;
    margin: 0.5rem 0;
    border: 0;
    outline: 0;
    font-size: 1rem
}

.mail__form textarea {
    font-family: "Open Sans", sans-serif;
    width: 100%;
    padding: 1rem;
    margin: 0.5rem 0;
    border: 0;
    outline: 0;
    font-size: 1rem
}

@media screen and (min-width: 34em) {
  .container {
      padding: 0 4rem
  }

    .main__logo_big {
        display: none
    }
    .main__logo_small {
        display: inline-block;
    }

    .section {
        padding: 4rem 0
    }

    .mail__form {
        padding: 1rem 1rem 0
    }
}

@media screen and (min-width: 48em) {
  .container {
      padding: 0 6rem
  }

  .main__logo_big {
      display: inline-block;
  }
  .main__logo_small {
      display: none;
  }

    .section {
        padding: 6rem 0
    }

    .section p{
        text-align: center;
    }

    .mail__form {
        padding: 1rem 2rem 0
    }
}


@media screen and (min-width: 62em) {
  .grid {
    display: flex;
  }

  .box{
    padding:1rem;
  }

  .container {
      padding: 0 8rem
  }
    .section {
        padding: 8rem 0
    }

    .mail__form {
        padding: 1rem 10rem 0
    }
}

@media screen and (min-width: 76em) {
  .container {
      padding: 0 10rem
  }
    .main__nav__item {
        display: inline-block
    }
    .main__nav__item--hamburger {
        display: none
    }

    .main__logo_big {
        display: block
    }
    .main__logo_small {
        display: none
    }

    .section {
        padding: 10rem 0
    }

    .main__footer {
        padding: 2rem
    }
    .footer__navbar {
        display: flex;
        justify-content: space-between;
        flex-flow: nowrap
    }

    .mail__form {
        padding: 1rem 20rem 0
    }

}