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

/* ==========================================================================
   HEADER
   ========================================================================== */

.logo {
    position: absolute;
    left: 40px;
    bottom: -40px;
    height: auto;
    width: 500px;
    height: 188px;
}

.slogan {
    width: 55vw;
    max-width: 550px;
}

.logo span,
.slogan span {
    width: 450px;
    height: auto;
}

.logo span {
    height: 86px;
    margin-top: 50px;
}

.slogan span {
    height: 138px;
    margin-left: 50px;
}

/* ==========================================================================
   NAVIGATION from 992px
   ========================================================================== */

.button_container {
    right: 40px;
}

.button_container.shrink {
    top: 40px;
}

.overlay nav {
    padding-right: 10vw;
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.main>div,
.footer {
    max-width: 1440px;
}

.mb-60 {
    margin-bottom: 90px;
}

@media (min-width: 1200px) {
    .main {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    h1 {
        margin-top: -30px;
    }

    .unit {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .bg-blue {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .bg-blue .unit {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .card-deck {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.card-container {
    padding-left: 60px;
    padding-right: 10px;
}

.card-deck .card {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.diagonal-bg {
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
    padding-top: 80px;
}

.social {
    right: 40px;
    bottom: 40px;
}