$primary-color: #33691e;

#willkommen-banner {
    height: calc(100vh - 64px);

    .lead {
        text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, 1);

        background: rgba(255, 255, 255, 0.5);
    }

    .parallax img {
        max-width: 110%;
    }
}

#wohnung-banner {}

#buchung-banner {}

#footer-banner {
    height: 90vh;
}

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

.heading-2 {
    font-size: 3.56rem;
    line-height: 110%;
    margin: 2.3733333333rem 0 1.424rem 0;
}

.heading-3 {
    font-size: 1.64rem;
    line-height: 110%;
    margin: 1.0933333333rem 0 .656rem 0;
}

.heading-5 {
    font-size: 1.64rem;
    line-height: 110%;
    margin: 1.0933333333rem 0 .656rem 0;
}

.uppercase {
    text-transform: uppercase;
}

.cryptmail:after {
    content: attr(data-name) "@"attr(data-domain) "."attr(data-tld);
}

a:not([href^='#']) {
    color: $primary-color;
}

#logo-container img {
    height: 64px;
}

.slider .card-panel {
    background-color: rgba(0, 0, 0, .7);
    border-radius: 0;
}

.masonry {
    display: flex;
    flex-grow: row wrap;
    margin-left: -8px;

    .masonry-brick {
        flex: auto;
        height: 250px;
        min-height: 150px;
        margin: 0 8px 0 0;
    }
}

@media only screen and (max-width:600px) {
    #willkommen-banner {
        height: calc(100vh - 56px);
        max-height: 300px;

        .parallax img {
            max-width: 130%;
        }
    }

    .heading-2,
    h2 {
        font-size: 2.82rem;
    }

    #logo-container img {
        height: 56px;
    }
}

@media only screen and (max-width:360px) {
    #willkommen-banner {
        height: calc(100vh - 56px);
        max-height: 300px;

        .parallax img {
            max-width: 130%;
        }
    }

    .heading-2,
    h2 {
        font-size: 2.12rem;
    }

    #logo-container img {
        height: 56px;
    }
}