/* ===== Custom Styles ==================================================

  ========================================================================== */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    font: 14px;
    font-family: 'Roboto', sans-serif;
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

p {
    font-family: Arial,sans-serif;
}
.navbar-brand {
    float: left;
    width: 16em;
}

.site-navigation {
    margin-top: 0.8em;
}

.container {
    padding: 1em;
    max-width: 1280px;
    margin: 0 auto;
}

.site-sidebar {
    width: 38%;
    margin-right: 2%;
    float: left;
}

.site-main {
    width: 60%;
    float: left;
    padding: 0.7em;
}

.site-main header h1 {
    color: #fff;
    font-weight: 500;
    font-size: 2em;
    margin-top: -2.7em;
    margin-bottom: 1em;
}


.site-sidebar img {
    margin-top: -9em;
}

.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}


@media (max-width: 768px) {
    .site-sidebar,
    .site-main {
        width: 100%;
    }

    .site-main header h1 {
        margin-top: 0.5em;
        color: #373737;
    }

    .site-sidebar img {
        margin-top: -6em;
    }

}
/* Navigation */

.site-navigation {
    float: right;
}

    .site-navigation ul {
        list-style-type: none;
    }

    .site-navigation li {
        float: left;
    }

    .site-navigation a {
        text-decoration: none;
        padding: 1em;
        padding-bottom: 0.6em;
        color: #787878;
    }

    .menu-toggle {
        display: none;
    }

    .site-navigation a.active {
        background: url(../img/red-underline.png) no-repeat center bottom;
    }

    @media (max-width: 1080px) {
        .site-navigation a {
            padding: 1em 0.6em;
        }
    }

    @media(max-width: 1023px) {
        .navbar-brand {
            width: 20em;
        }

    }

    @media (max-width: 1023px) {

        .overlay {
            position: fixed;
            top: 0;
            right:0;
            bottom:0;
            left:0;
            background: rgba(0,0,0,0.7);
            opacity: 0;
            -webkit-transition: 0.2s ease-in-out;
            -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
            z-index: 10;
            left: -100%;
            width: 100%;
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        .menu-toggled .overlay {
            opacity: 1;
            -webkit-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            -o-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0);
        }

        .menu-toggle {
            display: block;
            position: absolute;
            z-index: 200;
            right: 1em;
            top: 2.7em;
            background: none;
            box-shadow: none;
            outline: 0;
            border: 0;
            height: 2em;

        }

        .nav-icon {
          position: relative;
          width: 2em;
          height: .3125em;
          background: #373737;
          -webkit-transition: 0.1s;
          -o-transition: 0.1s;
          transition: 0.1s;
          border-radius: 2.5em;
        }
            .nav-icon:before, .nav-icon:after {
              display: block;
              content: "";
              height: .3125em;
              width: 2em;
              background: #373737;
              position: absolute;
              z-index: -1;
              -webkit-transition: 0.3s;
              -o-transition: 0.3s;
              transition: 0.3s;
              border-radius: 1em;
            }

            .nav-icon:before {
              top: .625em;
            }

            .nav-icon:after {
              top: -.625em;
            }

                .menu-toggled .nav-icon:before,
                .menu-toggled .nav-icon:after {
                  top: 0 !important;
                }

                .menu-toggled .nav-icon:before,
                .menu-toggled .nav-icon:after {
                  transition: 0.5s;
                }

                .menu-toggled .nav-icon {
                  background: transparent;
                }
                .menu-toggled .nav-icon:before {
                  transform: rotate(-45deg);
                }
                .menu-toggled .nav-icon:after {
                  transform: rotate(45deg);
                }

                .menu-toggled .menu-toggle .nav-icon:before,
                .menu-toggled .menu-toggle .nav-icon:after {
                    background: #f44;
                }

        .site-navigation {
            position: absolute;
            z-index: 100;
            width: 100%;
            left: -100%;
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            -webkit-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
        }

        .site-navigation li {
            float: none;
        }

        .menu-toggled .site-navigation {
            -webkit-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            -o-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0);
        }

        .site-navigation a.active {
            background-position: left bottom;
        }

        .nav-menu {
            padding: 0;
        }

        .site-navigation a {
            display: block;
            color: #fff;
        }

    }

@media (max-width: 480px) {
    .navbar-brand {
        width: 13em;
    }

    .menu-toggle {
        top: 1.9em;
    }
}


/* Main */

.hero {
    background-size: cover;
    padding-top: 2em;
    height: 15em;
    text-align: center;
    margin-top: 7em;
}

.hero__was-wir-tun {
    background: url(../img/was-hero.jpg) no-repeat center;
}

.hero__uber-uns {
    background: url(../img/uber-hero.jpg) no-repeat center;
}

.hero__angebote {
    background: url(../img/home-hero.jpg) no-repeat center;
}

.hero__erreichen {
    background: url(../img/erreichen-hero.jpg) no-repeat center;
}

.hero__home {
    background: url(../img/home-hero.jpg) no-repeat center;
}

    .hero h1 {
       font-weight: 100;
       color: #fff;
       font-size: 3em;
       margin: 0;
       background: url(../img/red-underline-lg.png) no-repeat right bottom;
       padding-bottom: 0.6em;
       padding: 0.6em 1em;
       display: inline-block;
       white-space: nowrap;
       text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
    }

    @media (max-width: 1160px) {
        .hero h1 {
            font-size: 2em;
            background-size: 12em;
        }
    }

    @media (max-width: 800px) {
        .hero h1 {
            width: 300px;
            white-space: normal;
            padding: 0;
            padding-bottom: 1em;
        }
    }

    @media (min-width: 481px) and (max-width:1023px) {
        .hero {
            margin-top: 8em;
        }
    }

    @media (max-width: 480px) {
        .hero {
            margin-top: 6em;
        }
    }
.img-framed {
    border: 1em solid #fff;
    box-shadow: 2px 1px 10px #999;
    box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.53);
}


.bg-success {
    background: #069506;
    height: 2.2em;
    margin: 0;
}


.site-footer {
    background: #d2d2d2;
    padding: 1em;
    color: #393939;
}







/* ==========================================================================
   Helper classes
   ========================================================================== */

.btn {
    text-decoration: none;
    padding: 1em 1.7em;
    border-radius: 0.4em;
    margin: 1em 0;
    display: inline-block;

}

.btn-primary {
    background: #0f488f;
    color: #fff;
}

.text--md {
    font-size: 1.1em;
    line-height: 1.4;
}

.gap-top {
    margin-top: 1.5em;
}

.text-center {
    text-align: center;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}