:root {
    --tine-lowlight:#E6A554;
    --tine-highlight:#E83B26;

    --dieter-lowlight:#727B5E;
    --dieter-highlight:#D7A358;

    --marleen-lowlight:#CFA094;
    --marleen-highlight:#258190;

    --standard-color: #535353;
    --lowlight-color:var(--tine-lowlight);
    --highlight-color:var(--tine-highlight);

    --gray-color:#999999;
    --light-gray-color:#cacaca;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color:var(--standard-color);
    text-align: justify;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-desktop-row-phone-column {
    flex-direction: row;
}

@media only screen and (max-width: 720px) {
    .flex-row {
        flex-wrap: wrap;
    }

    .front-img {
        width: 100% !important;
    }

    .menu-bar {
        flex-direction: column !important;
        text-align: center;
        font-size: 1.5em;
    }

    .menu-margin {
        /* display:none; */
    }

    .menu-title {
        display:none;
    }

    img.logo {
        margin-bottom:1em;
    }

    .img {
        margin:auto;
    }

    .bottom-row-content {
        text-align: center;
    }
  }

.display-none {
    display:none !important;
}

.display-not-none {
    display: inherit;
}

p {
    padding:0;
    margin:0;
}

.highlight {
    color:var(--highlight-color);
}

.lowlight {
    color:var(--lowlight-color);
}

.verybold {
    font-weight: 800;
}

.bold {
    font-weight: 600;
}

.italic {
    font-style: italic;
}

.unicase {
    font-variant-caps: unicase;
}

.bigtext {
    font-size:1.8em;
}

.semibigtext {
    font-size:1.4em;
}

.gray {
    color: var(--gray-color) !important;
}

.title {
    margin-bottom: 2em;
    font-size: 2em;
}

.content-block {
    margin-bottom:1em;
}

.content-wrapper {
    width:100%;
    max-width: 800px;
    height:100%;

    margin:auto;
    padding:0;
}

.top-row-container {
    flex:0 1 auto;
    padding: 5%;
}

.middle-row-container {
    display: flex;
    order:2;
    flex:0;
}

.menu-bar {
    flex:0 1 auto;
    border-top:solid 1px var(--light-gray-color);
    border-bottom:solid 1px var(--light-gray-color);
    margin: 0 5%;
}

.menu-margin {
    flex:1 0 auto;
    margin:0.5em;
}

.menu-item {
    flex:0 1 auto;
    margin:0.5em;
    color:var(--lowlight-color);
}

.selected {
    color:var(--highlight-color);
    text-decoration: underline;
}

.menu-button:hover {
    opacity:0.6;
    cursor: pointer;
}

.menu-button:active {
    opacity:0.5;
    cursor: pointer;
}

.main-content {
    flex:3;
    padding: 3%;
}

.main-content-img {
    padding: 2%;
}

.main-content-info {
    padding: 2%;
}

.front-img {
    width: 250px;
}

.bottom-row-container {
    border-top:solid 1px var(--light-gray-color);
    order:3;
    margin: 0 5%;
    padding: 2% 0;
}

.bottom-row-content {
    font-size:0.7em;
}

.tag {
    margin-top:0.8em;
    padding-right:0.8em;
    color:var(--lowlight-color);
}

.fa {
    font-size: 3em;
}

a {
    color:inherit;
    text-decoration:inherit;
}

a:hover {
    opacity: 0.6;
}

.img img.logo {
    content:url(media/logo_square_1100x1100_transparant_bg_no_highlight_no_borderspacing.png);
    max-width: 75px;
    width: 75%;
}