/* Author:   Martin Stettler (https://dieweberei.ch/)
   Version:  07/05/2021 // based on BS v5.0
*/

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

@media (min-width: 768px) {
    h1 {
        margin-top: 30px;
    }

    .icon-wrap h3 {
        bottom: 8px;
    }
}

.link-element a,
a.btn {
    padding: 20px 60px 15px 60px;
}

.info-box .link-element a {
    display: block;
    text-align: center;
    padding: 15px 10px 10px 10px;
}

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

/* ==========================================================================
   NAVIGATION from 768px
   ========================================================================== */
.navbar-brand {
    height: 101px;
    width: 245px;
    bottom: 30px;
}

.layout-content .navbar-brand {
    top: 75px;
}

.button-24h {
    top: -20px;
    right: -20px;
    height: 150px;
    width: 150px;
}

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

/* icon-section */
.layout-mobile {
    display: none;
}

.layout-screen {
    display: flex;
}

@media (min-width: 768px) {
    .figures {
        position: absolute;
        display: inline-block;
        content: '';
        width: 220px;
        height: 158px;
        right: 40px;
        top: -140px;
    }

    .sanitaer .figures {
        background: url('../img/figure_sanitaer.svg') no-repeat;
    }

    .spenglerei .figures,
    .bedachung .figures {
        background: url('../img/figure_tools.svg') no-repeat;
    }

    .heizungen .figures {
        background: url('../img/figure_pipe.svg') no-repeat;
    }

    .rohrreinigung .figures {
        background: url('../img/figure_schlauch.svg') no-repeat;
    }

}

@media (min-width: 768px) {
    .part:nth-last-of-type(3) {
        margin-bottom: 0;
    }
}

.icon-wrap {
    position: relative;
    display: block;
    margin-bottom: 15px;
}

.icon-wrap img {
    margin-bottom: 0;
}

.icon-wrap:hover .bg-blue {
    background-color: rgba(18, 45, 74, 0);
}

.icon-pict {
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    bottom: 30px;
    right: 0;
    transform: translateY(-50%);
}

.icon-pict img {
    width: 60%;
    height: auto;

}

/* .icon-section */
.main {
    padding-bottom: 35px;
}

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

.info-box:last-child {
    margin-bottom: 45px;
}

.bg-blue {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(18, 45, 74, 0.7);
}

.article-yellow {
    padding: 50px 20px;
}

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

.footer {
    padding: 40px 40px 0px 40px;
}