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

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

/*
 * basics
 */
body, html {
    height: 100%;
}

body {
    position: relative;
    color: #333;
    background-color: #999eaa;
    font-family: Lato, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 30px;
}

.container {
    /*max-width: 960px !important;*/
    /*max-width: 1170px !important;*/
}

/*.visual-intro {*/
    /*width: 1170px;*/
    /*height: auto;*/
/*}*/

a {
    color: #000;
}

/*
 * header & navigation
 */
.navigation {
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
    height: 95px;
    width: 100%;
    z-index: 954;
    position: fixed;
}

.navigation .container {
    min-height: 95px;
}

.navigation .meta-navi {
    background-color: #999eaa;
    height: 25px;
}

.navigation .navi {
    background-color: #fff;
    height: 70px;
}

.navigation ul {
    padding: 0;
    margin: 0;
}

.navigation li {
    list-style-type: none;
}

.navigation .meta-navi li {
    float: right;
    margin-right: 12px;
}

.navigation .meta-navi a {
    color: #fff;
    display: block;
    line-height: 25px;
    font-size: 11px;
    text-transform: uppercase;
}

.navigation .navi {
    position: relative;
    /*background: transparent url(../img/logo/logo_fuchs_small.png) 12px 0 no-repeat;*/
}

.navigation .navi li {
    float: right;
    margin-right: 12px;
}

.navigation .navi a {
    color: #999eaa;
    display: block;
    line-height: 70px;
    font-size: 14px;
}

.navigation .navi .active,
.navigation .navi a:hover,
.navigation .navi a:active,
.navigation .navi a:focus {
    color: #52555b; /* #61646b */
    text-decoration: none;
}

/*
 * mobile overlay navi
 */
.mobile-navi-active {
    margin: 0;
    overflow: hidden;
}

.overlay-mobile-menu {
    margin: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 4561;
    background-color: #999eaa; /* fallback old IE */
    background-color: rgba(153, 158, 170, 100); /* 153, 158, 170, 95 */
}

.mobile-navi-close {
    position: absolute;
    z-index: 4562;
    top: 15px;
    right: 15px;
}

.mobile-navi-close i {
    font-size: 16px;
    color: #eee;
    cursor: pointer;
}

.mobile-navi-close i:hover {
    color: #fff;
}

.overlay-mobile-menu .mobile-navi {
    list-style: none;
    padding: 0;
    margin: 0 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.overlay-mobile-menu .mobile-navi a {
    display: block;
    padding: 12px 0;
    text-align: center;
    font-family: Lato, Helvetica, "Helvetica Neue", "Lucida Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 22px;
    text-transform: uppercase;
    color: #fff;
}

.overlay-mobile-menu .mobile-navi li:last-child a {
    border-bottom: none;
}

.overlay-mobile-menu .mobile-navi li .active,
.overlay-mobile-menu .mobile-navi a:hover,
.overlay-mobile-menu .mobile-navi a:active,
.overlay-mobile-menu .mobile-navi a:focus {
    color: #52555b;
    text-decoration: none;
}

/*
 * logo
 */
.navi .logo-head {
    position: absolute;
    top: 0;
    left: 12px;
}

.navi .logo-head a {
    line-height: normal;
}

/*
 * menu toggle
 */
.btn-toolbar {
    position: absolute;
    top: 22px;
    right: 12px;
}

.btn-toolbar .btn {
    /* background-color: #999eaa; */
    text-transform: none;
}

.btn-toolbar .btn:hover,
.btn-toolbar .btn:active,
.btn-toolbar .btn:focus {
    /* background-color: #999eaa; */
    border-color: #52555b !important;
}

/*
 * btn
 */
.btn {
    text-transform: uppercase;
    font-size: 14px;
    color: #999eaa !important;
    background-color: #fff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn:hover,
.btn:active,
.btn:focus {
    background-color: #52555b;
    color: #fff !important;
}

.btn.active,
.btn:active {
    box-shadow: none !important;
}

.btn-outline {
    border: 2px solid #fff;
    background: none;
    color: #fff !important;;
}

.btn-outline:hover,
.btn-outline:active,
.btn-outline:focus {
    border: 2px solid #fff;
    background-color: #fff;
    color: #999eaa !important;;
}

/*
 * headlines, links
 */
h1 {
    font-size: 40px;
    margin: 0 0 40px 0;
    text-transform: uppercase;
}

h2 {
    margin: 40px 0 20px 0;
    text-transform: uppercase;
}

h3 {
    margin: 20px 0;
    text-transform: uppercase;
}

h4, h5, h6 {

}

hr {
    margin: 40px 0;
}

.content a {
    color: #fff; /* #52555b; */
}

.content ul {
    padding-left: 25px;
}


/*
 * intro
 */
.intro-area,
.no-intro-area {
    position: relative;
    margin-top: 95px;
}

.logo {
    position: absolute;
    right: 0;
    bottom: 120px;;
}

/*
 * sections
 */
.section {
    color: #fff;
}

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

.section-fullheight {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.section .content {
    padding: 60px 0;
}

.section .btn {
    margin: 30px 0 0 0;
}

.home .section h2 {
    font-size: 40px;
    margin: 0 0 40px 0;
    text-transform: uppercase;
}

/*
 * parallax with scrollmagic
 */
 .layers {
     position: relative;
     max-width: 960px !important;
     margin: 0 auto;
     height: 100%;
 }

 .layer {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    text-align: center;
    top: 0;
}

/* https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/ */
.layers .centered {
    bottom: 0;
    height: auto;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
}

.layers .left {
    left: 0 !important;
    margin-left: 0 ;
}

.layers .right {
    right: 0 !important;
    margin-right: 0;
}

/*
 * footer
 */
.footer {
    background-color: #fff;
}

.footer p {
    color: #000;
    margin: 15px 0;
    font-size: 14px;
    text-align: center;
}

/*
 * responsive: default, everything above default site width
 */
@media only screen and (min-width: 1200px) {

    .section .content .container {
        padding-left: 80px;
        padding-right: 80px;
    }

}

/*
 * responsive: 1 smaller, "normal" site width
 */
@media only screen and (min-width: 992px) and (max-width: 1199px) { /* don't set to 1200!*/

}

/*
 * responsive: 2 smaller, "tablet" site width
 */
@media only screen and (min-width: 768px) and (max-width: 991px) { /* don't set to 992!*/

}

/*
 * responsive: 3 smaller, "small tablet / phone" site width
 */
@media only screen and (min-width : 480px) and (max-width: 767px) { /* don't set to 768!*/

    /*
     * basics
     */
    body {
        font-size: 16px;
        line-height: 24px;
    }

    /*
     * headlines, links
     */
    h1,
    .home .section h2 {
        font-size: 24px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
    }

    h4, h5, h6 {

    }

    /*
     * intro
     */
    .intro-area .logo {
        display: none;
    }

    /*
     * layers
     */
    .section {
        height: auto !important;
    }

    .layers .layer {
        position: static !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*margin: 0 !important;*/
    }

    .layers .img-responsive {
        max-width: 55%;
        margin: 0 auto !important;
    }

    .layers .layer1 {

    }

    .layers .layer2 {
        margin-top: 15px !important;
    }

    .layers .layer3 {
        margin-top: 15px !important;
    }

    .layers .layer4 {
        margin-top: 15px !important;
    }

    /*
     * footer
     */
    .footer {
        margin-top: 60px;
    }

}

/*
 * responsive: smaller phones and below
 */
@media only screen and (min-width : 320px) and (max-width : 479px), /* don't set to 480!*/
only screen and (max-width : 319px){

    /*
    * basics
    */
    body {
        font-size: 16px;
        line-height: 24px;
    }

    /*
     * headlines, links
     */
    h1,
    .home .section h2 {
        font-size: 24px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
    }

    h4, h5, h6 {

    }

    /*
     * intro
     */
    .intro-area .logo {
        display: none;
    }

    /*
     * layers
     */
    .section {
        height: auto !important;
    }

    .layers .layer {
        position: static !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*margin: 0 !important;*/
    }

    .layers .img-responsive {
        max-width: 55%;
        margin: 0 auto !important;
    }

    .layers .layer1 {

    }

    .layers .layer2 {
        margin-top: 15px !important;
    }

    .layers .layer3 {
        margin-top: 15px !important;
    }

    .layers .layer4 {
        margin-top: 15px !important;
    }

    /*
     * footer
     */
    .footer {
        margin-top: 60px;
    }

}