/* GENERAL */
html {
    font: 400 106.3%/1.7 'Lato', Arial, sans-serif;
    font-style: italic;
    background: #fff;
    color: #666;
}

::selection {
    background: #ccc;
}

::-moz-selection {
    background: #ccc;
}

a {
    color: #683201;
    transition: all 300ms ease-in-out;
}

a:hover {
    color: #666;
    text-decoration: none;
}

ul {
    list-style: none;
}

.nowrap {
    white-space: nowrap;
}

.icon-raquo:before {
    content: '\00BB \0020';
}

.container {
    max-width: 70.588rem;
    margin: 0 auto;
    position: relative;
}


/* HEADLINES */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    text-rendering: optimizeLegibility;
    /* optimize text kerning */
}

h1 {
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
    color: #21730b;
    margin: 0 0 3rem 0;
    text-align: center;
}

h1 span {
    font-weight: 400;
    font-size: 1.294rem;
    line-height: 1;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .2rem;
    display: block;
    position: relative;
    padding: 0.412rem 0 2.176rem 0;
}

h1 span:before {
    content: '';
    background: #723f12;
    width: 6.118rem;
    height: 0.412rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

h2 {
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.8rem;
    color: #21730b;
    padding: .7rem 0 1rem 0;
}

h3 {
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.8rem;
    color: #666;
    padding: 0 0 .5rem;
}

h4,
h5,
h6 {
    font-size: 1.1rem;
}


/*=TOP */
#top {
    background: rgba(255, 255, 255, .9);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 20;
}

#top.small {
    background: #fff;
    border-bottom: 1px solid #ddd;
}


/*=BRANDING */
a#branding {
    width: 15.471rem;
    margin: 0 auto;
}

a#branding img {
    width: 100%;
    padding: 1rem 0 .8rem 0;
}

#top.small a#branding {
    width: 10rem;
}


/*=CONTACT */
p.contact {
    font-size: 0.882rem;
    text-align: center;
    color: #444;
    padding: 0 0 1.294rem 0;
}

p.contact strong {
    font-weight: 900;
    text-transform: uppercase;
}

p.contact .green {
    color: #21730b;
}

p.contact a {
    color: #21730b;
    text-decoration: none;
}

p.contact a:hover {
    color: #683201;
}

#top.small p.contact {
    display: none;
}


/*=NAVIGATION MAIN */
nav {
    position: relative;
    overflow: hidden;
}

nav ul,
.navi {
    list-style: none;
}

.navi a {
    display: inline-block;
}

.toggle-navi {
    background: none;
    color: #666;
    display: block;
    padding: .7rem 0 .6rem 1.5rem;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    text-indent: 2.5rem;
    line-height: 1.5;
}

.toggle-navi:hover {
    color: #683201;
}

.toggle-navi span,
.toggle-navi span:before,
.toggle-navi span:after {
    content: '';
    cursor: pointer;
    height: 0.235rem;
    width: 1.533rem;
    background: #21740c;
    position: absolute;
    top: 1.3rem;
    display: block;
}

.toggle-navi span:before {
    top: -0.5rem;
}

.toggle-navi span:after {
    top: 0.45rem;
}

.toggle-navi span,
.toggle-navi span:before,
.toggle-navi span:after {
    transition: all 500ms ease-in-out;
}

.toggle-navi.active span {
    background-color: transparent;
}

.toggle-navi.active span:before,
.toggle-navi.active span:after {
    top: 0;
}

.toggle-navi.active span:before {
    transform: rotate(45deg);
}

.toggle-navi.active span:after {
    transform: rotate(-45deg);
}

.close-navi {
    display: none;
}

#navi {
    max-height: 0;
    -webkit-transition: max-height 300ms ease-in-out 200ms;
    -moz-transition: max-height 300ms ease-in-out 200ms;
    -ms-transition: max-height 300ms ease-in-out 200ms;
    -o-transition: max-height 300ms ease-in-out 200ms;
    transition: max-height 300ms ease-in-out 200ms;
}

.openNav #navi {
    max-height: 31rem;
}

#openNavi:target #navi {
    max-height: 31rem;
}

#openNavi:target .open-navi {
    display: none;
}

#openNavi:target .close-navi {
    display: block;
}

#navi>li {
    font-size: 0.941rem;
    font-weight: 900;
    line-height: 1.2rem;
    text-transform: uppercase;
    padding: 0 0 0 4rem;
    display: block;
    position: relative;
    border-top: 1px solid #bbb;
}

#navi>li:before {
    content: '\4d';
    font-family: 'userinterface';
    font-size: .8rem;
    font-style: normal;
    color: #bbb;
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    top: 0.6rem;
    left: 2rem;
}

#navi>li>a,
#navi>li>a:visited {
    color: #666;
    display: block;
    text-decoration: none;
    padding: .6rem 0 .5rem 0;
    transition: all 300ms ease-in-out;
}

#navi>li:hover>a,
#navi>li.active>a,
#navi>li.active>a:visited {
    color: #683201;
}

#navi li ul.sub li {
    font-size: 1rem;
    text-transform: none;
}

#navi li ul.sub li a,
#navi li ul.sub li a:visited {
    height: auto;
    display: block;
    padding: 0 0 .4rem;
    color: #666;
    text-decoration: none;
}

#navi li ul.sub li a:hover,
#navi li ul.sub li.active a,
#navi li ul.sub li.active a:visited {
    color: #683201;
}


/*=SOCIAL */
a#socialGoogle {
    background: url(../images/layout/icon-google.png) no-repeat 0 0 rgba(255, 255, 255, .8);
    width: 1.176rem;
    height: 1.176rem;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    transition: none;
    margin-left: 25px;
}


/*=HEADER */
#header {
    background: url(../images/layout/bg-header.jpg) no-repeat top center fixed;
}

#header {
    min-height: 27rem;
}

.index #header {
    min-height: 44.118rem;
}



/*=HEADER TEXT */
.headerText {
    padding-top: 17rem;
}

.index .headerText {
    padding-top: 18.471rem;
}

.headerText span {
    background: #fff;
    color: #444;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
}

.headerText span.big {
    padding: .5rem 1rem .6rem 1rem;
    font-size: 1rem;
    margin-bottom: .6rem;
}

.headerText span.big.green {
    color: #21730b;
    margin-bottom: .6rem;
}

.headerText span.list {
    padding: .8rem 1rem .75rem 2.5rem;
    font-size: 0.941rem;
    margin-right: .6rem;
    margin-bottom: .6rem;
    background: url(../images/layout/icon-list-header.png) no-repeat 0.706rem 0.756rem #fff;
}

.headerText a.goLink {
    background: #21730b;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
    text-decoration: none;
    padding: .8rem 1rem .75rem 1rem;
}

.headerText a.goLink:hover {
    background: #723f12;
    padding-right: 1.3rem;
    padding-left: 1.3rem;
}


/*=HEADER SIGNETS */
.headerSignets {
    display: none;
}


/*=TEASER */
#teaser {
    display: none;
}

/*=LINKS */
a {
    word-break: break-all;
}

/*=CONTENT */
#content {
    padding: 2.5rem 0 2rem;
    position: relative;
}

#content p,
#content ul,
#content ol,
#content table {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    margin-bottom: 1rem;
}

#content .upper {
    text-transform: uppercase;
}

#content p.head {
    font-weight: 900;
    font-size: 1.176rem;
}

#content strong {
    font-weight: 900;
}

#content hr {
    background: #723f12;
    width: 6.118rem;
    height: 0.412rem;
    margin: 1rem auto 2rem;
    border: none;
}

#content hr.clear {
    background: none;
    width: 0;
    height: 0;
    margin: 0;
}

#content ul li {
    position: relative;
    padding: .3rem 0 .3rem 2.5rem;
    display: block;
    border-top: 1px solid #bbb;
}

#content ul li:first-child {
    border: none;
}

#content ul li:before {
    content: '';
    background: url(../images/layout/icon-list.png) no-repeat;
    width: 1rem;
    height: 0.706rem;
    position: absolute;
    top: 0.824rem;
    left: 0.824rem;
}

#content ul.special {
    text-align: center;
    margin-bottom: 3rem;
}

#content ul.special li {
    position: relative;
    padding: .3rem 1rem .3rem 1rem;
    display: block;
    background: #ebe8e7;
    display: inline-block;
    margin: 0.5rem;
    border: none;
}

#content ul.special li:before {
    content: '';
    background: none;
    width: 0;
    height: 0;
}

#content table {
    margin-bottom: 1.6rem;
}

#content tbody tr {
    border-bottom: none;
    padding: 0;
    border-top: 1px solid #bababa;
}

#content tbody tr:first-child {
    border-top: none;
}

#content tbody tr td {
    padding: .5rem .7rem;
}

#content tbody tr td:before {
    content: attr(data-label)'';
}

#content a:hover img {
    transition: all 300ms ease-in-out;
    box-shadow: 0 0 .5rem #999;
}

#content .images {
    text-align: center;
    padding: 1rem 0 2rem;
}

#content .images img {
    border-radius: 50%;
    display: inline-block;
    margin: 1rem;
}

#content img.image {
    border-radius: 50%;
    float: left;
    margin: 0 1rem 1rem 0;
}

#content a.contentPdf,
#content a.contentLink {
    font-size: 1rem;
    line-height: 1.6rem;
    margin-bottom: 1rem;
    position: relative;
}

#content a.contentPdf:before {
    content: '\47';
    font-family: 'userinterface';
    font-size: .8rem;
    color: #8492ac;
    margin-right: .5rem;
}

#content a.contentLink:before {
    content: '\46';
    font-family: 'userinterface';
    font-size: .8rem;
    color: #8492ac;
    margin-right: .5rem;
}

#content address {
    font-style: normal;
    margin-bottom: 1rem;
}

#contentMap {
    width: 100%;
    height: 31.2rem;
}


/*=INFO */
#info {
    background: #ebe8e7;
    padding: 2.4rem 0;
    border-bottom: 1px solid #fff;
}

#info .green {
    color: #21730b;
}

#info a {
    color: #666;
}


/*=MAP */
#maps {
    height: 20rem;
    width: 100%;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.nojs #maps {
    height: 17rem;
}

#maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    transition: all 1s;
}

#maps #mapsOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(33, 115, 11, .8);
    cursor: pointer;
    transition: all 1s;
}

#maps.active iframe {
    filter: blur(0px) grayscale(0%);
}

#maps.active #mapsOverlay {
    opacity: 0;
    transform: scale(2);
    visibility: hidden;
}

#maps .container {
    padding-top: 6rem;
}

#maps span {
    background: #fff;
    color: #444;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
}

#maps span.big {
    padding: .5rem 1rem .6rem 1rem;
    font-size: 1rem;
    margin-bottom: .6rem;
}

#maps span.green {
    padding: .6rem 1rem .6rem 1rem;
    color: #21730b;
    font-size: 1rem;
    line-height: 1;
}

.nojs #maps span.green {
    display: none;
}

#maps img {
    display: none;
}


/*=REFERENCES */
#references {
    background: url(../images/layout/bg-refs.jpg) repeat;
    border-top: 1px solid #fff;
    min-height: 10.588rem;
    padding-top: 2.353rem;
}

#references p.head {
    font-weight: 900;
    line-height: 1.2;
    color: #444;
    text-transform: uppercase;
    font-size: 1.176rem;
    padding: 0.35rem 0 .9rem;
}

#references a.goLink {
    color: #444;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.941rem;
    display: block;
}

#references a.goLink:hover {
    color: #21730b;
    text-indent: .5rem;
}

#references img.image {
    display: none;
}

#references a:hover img {
    transition: all 300ms ease-in-out;
    box-shadow: 0 0 .5rem #999;
}


/*=NAVIADD */
#naviAdd {
    text-align: center;
    padding: 1rem 0 5rem 0;
    position: relative;
}

#naviAdd>li {
    font-size: 0.941rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 1rem;
    display: inline-block;
    position: relative;
}

#naviAdd>li:before {
    content: '';
    background: #bbb;
    width: 1px;
    height: 0.706rem;
    position: absolute;
    top: .95rem;
    left: -.95rem;
}

#naviAdd>li:first-child:before {
    background: none;
}

#naviAdd>li>a,
#naviAdd>li>a:visited {
    color: #666;
    display: block;
    text-decoration: none;
    padding: .5rem 0 .5rem 0;
    transition: all 300ms ease-in-out;
}

#naviAdd>li:hover>a,
#naviAdd>li.active>a,
#naviAdd>li.active>a:visited {
    color: #683201;
}


/*=MISC */
.backToTop {
    background: #6cc23e;
    color: #fff;
    text-transform: uppercase;
    font-size: .85rem;
    text-decoration: none;
    padding: .5rem 1rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    transition: all 300ms ease-in-out;
}

.backToTop:hover {
    background: #54aa25;
}

.backToTop:before {
    font-family: 'userinterface';
    content: '\4c';
    display: block;
    float: left;
}


/* MAX 412px */
@media only screen and (max-width:25.8em) {
    .container {
        padding: 0 1rem;
    }

}

/* 500px */
@media only screen and (min-width:31.25em) {
    .headerText {
        padding-top: 15rem;
    }

    .headerText span.big {
        font-size: 1.8rem;
    }

    .headerText span.list {
        font-size: 0.941rem
    }

    .headerText a.goLink {
        font-size: 1.176rem;
    }

}

/* 752px */
@media only screen and (min-width:47em) {
    h1 {
        font-size: 2.941rem;
    }

    #top.small a#branding {
        width: 10rem;
        display: block;
    }

    #top.small p.contact {
        padding: 0 0 .4rem 0;
        display: block;
    }

    .toggle-navi {
        display: none;
    }

    nav {
        text-align: center;
        overflow: visible;
    }

    #navi {
        max-height: none;
        border-top: 1px solid #bbb;
    }

    #navi>li {
        font-size: 0.882rem;
        margin: 0 0 0 1.9rem;
        padding: 0;
        display: inline-block;
        border-top: none;
    }

    #navi>li:first-child {
        margin: 0;
    }

    #navi>li:before {
        content: '';
        background: #bbb;
        width: 1px;
        height: 0.706rem;
        position: absolute;
        top: 1.8rem;
        left: -.9rem;
    }

    #top.small #navi>li:before {
        top: 1.25rem;
    }

    #navi>li:first-child:before {
        background: none;
    }

    #navi>li>a,
    #navi>li>a:visited {
        padding: 1.5rem 0 1.48rem 0;
    }

    #top.small #navi>li>a,
    #top.small #navi>li>a:visited {
        padding: 1rem 0 1rem 0;
    }

    #navi>li>a:before,
    #navi>li>a:visited:before {
        content: '';
        background: #21740c;
        width: 100%;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        transition: all 300ms ease-in-out;
    }

    #navi>li:hover>a:before,
    #navi>li.active>a:before,
    #navi>li.active>a:visited:before {
        height: 0.412rem;
    }

    #navi li ul.sub {
        position: absolute;
        top: 100%;
        left: 0;
        display: block;
        background: none;
        width: auto;
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 300ms ease-in-out;
        z-index: 20;
        text-align: left;
    }

    #navi li:hover ul.sub {
        height: auto;
        opacity: 1;
    }

    #navi li ul.sub li {
        background: rgba(255, 255, 255, .9);
        margin-top: 1px;
        padding: .6rem .8rem .2rem .8rem;
    }

    a#socialGoogle {
        background: rgba(255, 255, 255, .8);
        position: absolute;
        bottom: -2.588rem;
        right: 0;
        width: 15.529rem;
        height: 2.588rem;
        font-size: 0.882rem;
        color: #666;
        text-decoration: none;
        display: block;
        padding: .5rem .4rem .4rem 1.1rem;
        text-indent: 0;
        white-space: normal;
        transition: background 300ms ease-in-out;
    }

    a#socialGoogle:hover {
        background-color: rgba(0, 0, 0, .8);
        color: #fff;
    }

    a#socialGoogle:before {
        content: '';
        background: url(../images/layout/icon-google.png);
        width: 1.176rem;
        height: 1.176rem;
        position: absolute;
        top: 0.706rem;
        right: 1.176rem;
    }

    .headerText {
        padding-top: 18rem;
        padding-bottom: 2rem;
    }

    .headerText span.big {
        font-size: 2.353rem;
    }

    .headerText span.big.green {
        margin-bottom: 1.8rem;
    }

    .headerText span.list {
        padding: .8rem 0 .75rem 2.5rem;
        font-size: 0.941rem;
        width: 16.2rem;
    }

    .headerText span.list.listRight {
        width: 18.2rem;
    }

    .headerText a.goLink {
        font-size: 1.176rem;
    }

    .index .headerText a.goLink {
        margin-top: 1.2rem;
    }

    #content p,
    #content ul,
    #content ol,
    #content table {
        text-align: justify;
    }

    #maps .container {
        padding-top: 6.5rem;
    }

    #maps span.big {
        font-size: 1.765rem;
    }

    #maps span.green {
        font-size: 1.176rem;
    }

    #maps img {
        float: right;
        display: block;
        margin-top: 1.4rem;
    }

    #references img.image {
        width: 100%;
        height: auto;
        display: block;
    }

}

/* 992px */
@media only screen and (min-width:62em) {
    a#branding img {
        padding: 1.941rem 0 1.176rem 0;
    }

    #top.small a#branding img {
        padding: 1rem 0 .6rem 0;
    }

    p.contact {
        text-align: right;
        padding-top: 1.765rem;
    }

    #top.small p.contact {
        padding-top: .5rem;
    }

    nav {
        text-align: right;
    }

    #navi>li {
        margin: 0 0 0 1.3rem;
    }

    #navi>li:before {
        left: -.6rem;
    }

    .headerText {
        padding-top: 12rem;
    }

    .headerSignets {
        display: block;
        padding-top: 14rem;
        text-align: center;
    }

    .index .headerSignets {
        padding-top: 27.75rem;
    }

    .headerSignets img {
        width: 100%;
        height: auto;
    }

    .headerSignets img.gepr {
        width: 90%;
        margin-bottom: .4rem;
    }

    #teaser {
        display: block;
        background: url(../images/layout/bg-refs.jpg) repeat;
        text-align: center;
        border-top: 1px solid #fff;
        min-height: 8.4rem;
        padding: 3.235rem 0 0 0;
    }

    #teaser a {
        font-weight: 900;
        color: #444;
        font-size: 1rem;
        display: inline-block;
        padding-left: 4.7rem;
        text-decoration: none;
        text-transform: uppercase;
        position: relative;
    }

    #teaser a:before {
        content: '';
        border-radius: 50%;
        width: 3.765rem;
        height: 3.765rem;
        position: absolute;
        top: -0.882rem;
        left: 0;
        background-color: #22730c;
        background-position: center;
        background-repeat: no-repeat;
        transition: all 300ms ease-in-out;
    }

    #teaser a:hover {
        text-indent: .4rem;
    }

    #teaser a:hover:before {
        background-color: #683201;
    }

    #teaser a.teaserDach:before {
        background-image: url(../images/layout/icon-teaser-dach.png);
    }

    #teaser a.teaserHaus:before {
        background-image: url(../images/layout/icon-teaser-haus.png);
    }

    #teaser a.teaserCarp:before {
        background-image: url(../images/layout/icon-teaser-carp.png);
    }

    #teaser a.teaserVers:before {
        background-image: url(../images/layout/icon-teaser-vers.png);
    }

    #content {
        padding: 3rem 0 7.5rem;
    }

    .index #content {
        padding-top: 5rem;
    }

    .zollstock {
        background: url(../images/layout/bg-zollstock.png) no-repeat 0 0;
        width: 0;
        height: 2.176rem;
        position: absolute;
        bottom: 3rem;
        right: 0;
        overflow: hidden;
        transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
        transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    }

    .zollstock.flowIn {
        width: 50rem;
    }

}

/* 1200px */
@media only screen and (min-width:75em) {
    #navi>li {
        font-size: 0.941rem;
        margin: 0 0 0 2.4rem;
    }

    #navi>li:before {
        left: -1.3rem;
    }

    #teaser a {
        font-size: 1.176rem;
    }

    .zollstock.flowIn {
        width: 60rem;
    }

    #references p.head {
        position: relative;
    }

    #references p.head:before {
        content: '';
        background: rgba(114, 63, 18, .5);
        width: 0.3rem;
        height: 6.118rem;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 4.471rem;
        margin: auto;
    }

}