body {
    padding-top: 5rem;
    background-color: #EFEEEE;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    position: relative;
    padding-top: 5.0rem;
}

.lineborder_flags {
    border-left: 2px solid #C5A00B;
}

.navbar_background_color {
    background-color: #1E1E1E;
    color: black;
}

.navbar_text {
    color: #C5A00B;
    font-size: 25px;
    letter-spacing: 0.4px;
}

.navbar-toggler {
    color: #C5A00B !important;
    border-color: #C5A00B !important;
}

h1 {
    font-size: 45px;
    font-weight: bold;
    color: #C5A00B;
}

h2 {
    font-size: 25px;
    font-weight: 200px;
    color: #C5A00B;
}

h3 {
    font-size: 20px;
    font-weight: 200px;
    color: #C5A00B;
}

h4 {
    font-size: 28px;
    font-weight: 500px;
    color: black;
}

p {
    font-size: 16px;
    font-weight: 200px;
    color: black;
}

.container {
    max-width: 1400px;
}

body,
html {
    height: 100%;
}

/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./assets/images/Feld.jpg");

    /* Set a specific height */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-content {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.p-size-slogen {
    color: white;
    font-weight: bold;
    font-size: 40px;
}

.background-image {
    background-image: url("./assets/images/background.jpg");
}

.line {
    border-bottom: 1px solid #1E1E1E;
}

.slogen_background_color {
    background-color: #1E1E1E;
}

.slogen_font {
    color: #C5A00B;
    font-size: 20px;
}

.card {
    color: black;
    font-size: 30px;
    border: 1px solid #1E1E1E;
}

.button_prospekt {
    width: 240px !important;
}

.button_produkte {
    border-radius: 4px;
    color: #C5A00B;
    background-color: #333333;
    border: none;
    text-align: center;
    font-size: 20px;
    padding: 8px;
    width: 175px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 36px;
}

.button_effect {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button_effect:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 7px;
    right: -20px;
    transition: 0.5s;
}

.button_produkte:hover {
    padding-right: 24px;
    padding-left: 8px;
}

.button_produkte:hover:after {
    opacity: 1;
    right: 10px;
}

.footer_background_color {
    background-color: #1E1E1E;
}

.footer_text {
    color: #C5A00B;
    font-size: 12px;
}

.footer_infotext {
    color: #C5A00B;
    font-size: 8px;
}

.link:hover {
    color: white;
    text-decoration: none;
}

.hero-image-aepfel {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./assets/images/äpfel-hero.jpg");

    /* Set a specific height */
    height: 40%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image-trauben {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./assets/images/top_picture_grapes.jpg");

    /* Set a specific height */
    height: 40%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image-orangen {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./assets/images/orange-hero.jpg");

    /* Set a specific height */
    height: 40%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image-melonen {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./assets/images/melonen-hero.jpg");

    /* Set a specific height */
    height: 40%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image-kiwi {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./assets/images/kiwi-hero.jpg");

    /* Set a specific height */
    height: 40%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image-birnen {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./assets/images/birnen-hero.jpg");

    /* Set a specific height */
    height: 40%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image-pfirsiche {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./assets/images/pfirsich-hero.jpg");

    /* Set a specific height */
    height: 40%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.carousel-color {
    color: black;
    background-color: black;
}

.privacy-ipressum_p-size {
    font-size: 20px;
}

.e-mail-footer {
    color: #C5A00B;
}

.e-mail {
    color: black;
}

.e-mail:hover {
    color: black;
}

.footer-link:hover {
    color: #C5A00B;
}

@media (min-width: 576px) {
    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 45px;
    }

    p {
        font-size: 24px;
    }

    .footer_infotext {
        font-size: 12px;
    }

    .footer_text {
        font-size: 20px;
    }

    .slogen_font {
        font-size: 35px;
    }
}