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

/* ==========================================================================
   HEADER
   ========================================================================== */
header {
    margin-top: 20px;
}

.logo {
    left: 25px;
}

.logo span,
.slogan span {
    width: calc(45vw - 40px);
    margin: 20px;
}

/* ==========================================================================
   NAVIGATION from 768px
   ========================================================================== */
.button_container {
    top: 5vw;
    right: 25px;
    height: 47px;
    width: 55px;
    padding: 10px;
}

.button_container.shrink {
    top: 25px;
}

.button_container.active .top {
    transform: translateY(11px) translateX(0) rotate(45deg);
    background: #FFF;
}

.button_container.active .middle {
    opacity: 0;
    background: #FFF;
}

.button_container.active .bottom {
    transform: translateY(-11px) translateX(0) rotate(-45deg);
    background: #FFF;
}

.button_container span {
    height: 5px;
    width: 35px;
    top: 10px;
    left: 10px;
}

.button_container span:nth-of-type(2) {
    top: 21px;
}

.button_container span:nth-of-type(3) {
    top: 32px;
}

.overlay nav {
    padding-right: 100px;
}

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

.card-container {
    padding-left: 30px;
}

.card-deck .card {
    margin-bottom: 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.social {
    right: 25px;
    bottom: 25px;
}