* {
  box-sizing: border-box;
}

body {
    font-family: Verdana,sans-serif;
}

a {
    color: #71881B;
}


/* Mobile Design */

.know-life {
    color: #a8cd24;
    font-family: Arial;
    font-style: italic;
    font-weight: 900;
}

#top {
        margin-top: -8px;
        margin-left: -8px;
        margin-right: -8px;
        padding: 2px;
        text-align: center;
}

#logo img {
    width: 100px;
}

#header {
    padding: 5px;
    padding-left: 10px;
    margin-left: -8px;
    margin-right: -8px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#header-img {
    height: 100%;
}

#header-img > div {
    background-size: 100% 100%;
    height: 35vh;
}

#header-text {
    /*position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 47%;
    height: 70%;
    text-align: left;
    */
}

#header-name {
    display: none;
    font-size: 30px;
    font-style: italic;
    font-family: Arial;
}

#header-slogan {
    font-size: 20px;
    font-family: Arial;
}

.info-button {
    border-radius: 50%;
    height: 12vh;
    width: 12vh;
    background-color: #f8f9f9;
    border: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 16px;
}

.text-muted {
    color: #64748b;
}

.text-bold {
    font-weight: 800;
    margin: 8px 0;
}

#news {
    width: 100%;
    margin: 15vh 0 15vh 0;
}

#news-heading {
    display: flex;
    justify-content: center;
    margin-bottom: 5vh;
    font-size: 18pt;
}

.news-element {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e9e9e9;
    padding: 16px 0;
}

.news-element-date {
    color: #a8cd24;
    font-weight: 600;
}

.news-element-heading {
    font-size: 25px;
    font-weight: 800;
    margin: 8px 0;
}

.news-element-text {
    font-size: 13pt;
}

#box-image {
    margin: 8vh 0;
}

#container-info-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 8vh;
}

.box-info-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 5vh;
}

.teaser-box {
    display: flex;
    flex-direction: column;
    /*margin: 0 0 15vh 0;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
}

.teaser-box-img {
    filter: sepia(100%);
    background-position: center;
    background-size: cover;
    height: 40vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.teaser-box-text {
    text-align: center;
    padding: 8%;
    background-color: white;
}

.teaser-box-text > h2 {
    font-size: 14pt;
}

#content {
    margin-left: 3%;
    margin-right: 3%;
    padding-top: 24px;
    padding-bottom: 23px; /* same as footer.height*/
}

#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: auto;
    width: 100%;
    margin-left: -8px;
    margin-top: 5px;
    margin-bottom: -8px;
    text-align: center;
}

#footer > div {
    padding: 8px;
}

.service {
    margin-bottom: 15px;
    display: flex;
}

.services-box {
    background-color: #f8f9f9;
    margin: 5vh 0;
}

.service-element {
    padding: 8px;
    width: 100%;
}

.service h1 {
    margin-left: 16px;
}

.service-details {
    margin-left: 36px;
}

.center {
    position: relative;
    top: -6px;
}

.heading-green {
    color: #a8cd24;
}

.w3-input {
    border: none;
    border-bottom: 1px solid #ccc;
    margin: 8px 0 16px 0;
}

.w3-textarea {
    border: 1px solid #ccc;
    margin: 8px 0 16px 0;
}

#contact {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15vh;
}

#contact-form {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 10vw;
    width: 100%;
}

.text-muted-color {
    color: light-dark(#afafb6, #71717a);
}

.copyright {
    position: absolute;
    bottom: 0;
    right: 0;
    color: white;
    font-size: 8pt;
    padding: 4px;
}

.green-order-list {
    list-style-image: url('icons/chevron-right-green.svg');
}

.green-order-sublist {
    list-style-image: url('icons/chevrons-right-green.svg');
}

/* Desktop Design */

@media only screen and (min-width: 810px) {

    #page-container {
        position: relative;
        min-height: 100vh;
    }

    #top {
        margin-top: -8px;
        margin-left: -8px;
        margin-right: -8px;
        padding: 2px;
        padding-bottom: 10px;
        text-align: center;
    }

    #logo {
        margin-top: 14px;
    }

    #logo img {
        margin-top: -8px;
        width: 110px;
    }

    #header {
        height: 60vh;
        padding: 5px;
        padding-left: 10px;
        padding-top: 10px;
        margin-left: -8px;
        margin-right: -8px;
        text-align: center;
    }

    #header-img > div {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;
        width: 40%;
        height: 100%;
    }

    #header-img {
        position: absolute;
        top: 0;
        left: -8px;
        width: 100%;
        height: 100%;
    }

    #header-text {
        position: absolute;
        top: 30%;
        right: 0;
        z-index: 10;
        width: 50%;
        height: 70%;
        text-align: left;
    }

    #header-name {
        display: block;
        font-size: 80px;
        font-style: italic;
        font-family: Arial;
    }

    #header-slogan {
        font-family: Arial;
        font-size: 35px;
    }

    #content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 40px; /* same as footer.height*/
    }

    #description {
        margin-bottom: 55px;
    }

    #news {
        width: 50vw;
        margin: 5vh 0 15vh 0;
    }

    #news-heading {
        font-size: 20pt;
    }

    .news-element {

    }

    #container-info-button {
        flex-direction: row;
        justify-content: space-between;
        width: 60%;
        min-height: 40vh;
        margin-top: 0;
    }

    .box-info-button {
        margin-bottom: 0;
        width: 30%;
    }

    .info-button {
    }

    .teaser-box {
        flex-direction: row;
        width: 100vw;
        min-height: 60vh;
    }

    .teaser-box-img {
        filter: sepia(100%);
        background-position: left center;
        background-size: cover;
        width: 50%;
        height: auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .teaser-box-text {
        text-align: left;
        padding: 20vh 8vw 0 8vw;
        background-color: white;
        width: 50%;
    }

    .teaser-box-text > h2 {
        font-size: x-large;
    }

    #services {
        width: 100vw;
    }

    .service {
        margin-bottom: 15px;
        display: flex;
    }

    .service p {
        margin-left: 16px;
    }

    .service h3 {
        margin-left: 16px;
        font-size: 30px;
    }

    .services-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 15vh;
        background-color: #f8f9f9;
        padding: 12vh 0;
        min-height: 70vh;
    }

    .service-element {
        width: 50vw;
    }

    .service-details {
        font-size: 20px;
    }

    #contact {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        min-height: 60vh;
        margin: 18vh 0 10vh 0;
    }

    #contact-form {
        width: 30%;
        padding: 3%;
    }

    #footer {
        height: 12vh;
        position: absolute;
        bottom: auto;
        width: 100%;
        margin-left: -8px;
        margin-top: 5px;
        margin-bottom: -8px;
        text-align: center;
    }

    #footer > div {
        padding: 8px;
        margin-top: 8px;
    }

}


/* Color Scheme */

.w3-theme-l5 {color:#000 !important; background-color:#f7fbe8 !important}
.w3-theme-l4 {color:#000 !important; background-color:#e4f2b3 !important}
.w3-theme-l3 {color:#000 !important; background-color:#c9e466 !important}
.w3-theme-l2 {color:#fff !important; background-color:#a8cd24 !important}
.w3-theme-l1 {color:#fff !important; background-color:#698017 !important}
.w3-theme-d1 {color:#fff !important; background-color:#262f08 !important}
.w3-theme-d2 {color:#fff !important; background-color:#222a07 !important}
.w3-theme-d3 {color:#fff !important; background-color:#1e2406 !important}
.w3-theme-d4 {color:#fff !important; background-color:#1a1f06 !important}
.w3-theme-d5 {color:#fff !important; background-color:#151a05 !important}

.w3-theme-light {color:#000 !important; background-color:#f7fbe8 !important}
.w3-theme-dark {color:#fff !important; background-color:#151a05 !important}
.w3-theme-action {color:#fff !important; background-color:#151a05 !important}

.w3-theme {color:#fff !important; background-color:#2b3409 !important}
.w3-text-theme {color:#2b3409 !important}
.w3-border-theme {border-color:#2b3409 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#2b3409 !important}
.w3-hover-text-theme:hover {color:#2b3409 !important}
.w3-hover-border-theme:hover {border-color:#2b3409 !important}