/*  Author:   Martin Stettler (https://dieweberei.ch/)
    Version:  05/04/2021 // based on BS v4.6.0
*/

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
.layout-green h1.icon-marmot:after,
.layout-green h1.icon-capricorn:after,
.layout-red h1.icon-marmot:after,
.layout-red h1.icon-capricorn:after,
.layout-green h2.icon-marmot:after,
.layout-green h2.icon-capricorn:after,
.layout-red h2.icon-marmot:after,
.layout-red h2.icon-capricorn:after {
    height: 53px;
    width: 53px;
    margin-left: 18px;
    margin-bottom: -12px;
}

.article-small h2.title-article {
    margin-top:  60px;
}
/* ==========================================================================
   HEADER
   ========================================================================== */
.logo-chinderstuba span{
    width: 314px;
    height: 135px;
    margin: 20px 40px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

header .teaser {
    position: absolute;
    left:  25px;
    bottom: 40px;
    padding: 20px;
    width:  50vw;
}

/* ==========================================================================
   NAVIGATION from 768px
   ========================================================================== */
.button_container {
    top: 40px;
    right: 40px;
}

.button_container:before {
    position: fixed;
    top: 43px;
    right: 72px;
    content: "Menu";
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    color: #4d3328;
    margin-right: 10px;
    width:  80px;
}

.button_container.active:before {
   display: none;
}

.bg-white {
    position: fixed;
    top: 35px;
    right: 35px;
    height: 35px;
    width: 130px;
    background: rgba(255,255,255, 0.7);
    z-index: 1080;
}

.overlay nav {
    top: 60px;
    right: 120px;
}

.overlay ul li {
    margin-bottom: 10px;
}
/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.main {
    padding-top: 80px; 
    padding-bottom: 20px;
    padding-left:  60px;
}

.layout-content .main,
.layout-form .main {
   padding-right:  80px;
   overflow: hidden;
}

.unit {
    margin-bottom: 60px; 
}

.article-small .unit-small {
    margin-top: 40px;
}

.border-top {
    padding-bottom: 60px;
}

.article-small .border-top {
    padding-bottom: 20px;
}

.watermark span{
    position: absolute;
    display: inline-block;
    background-size: 100% 100%;
    z-index: -1;
 }

.watermark.marmot span {
    background: url(../img/marmot.svg) no-repeat;
    width: 93px;
    height: 91px;
 }

.layout-home .watermark.marmot span,
.layout-content .watermark.marmot span {
    bottom: 60px;
    left: 20px;
 }

.layout-form .watermark.marmot span {
    bottom: 40px;
    right: 20px;
 }

.layout-home .watermark.capricorn span,
.layout-content .watermark.capricorn span,
.layout-form .watermark.capricorn span {
    background: url(../img/capricorn.svg) no-repeat;
    width: 164px;
    height: 197px;
 }

 .layout-home .watermark.capricorn span {
    bottom: 180px;
    right: 20px;
 }

.layout-content .watermark.capricorn span,
.layout-form .watermark.capricorn span {
    bottom: 180px;
    right: -10px;
}

/* ==========================================================================
   FORM
   ========================================================================== */

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
   padding-left: 75px;
}