@media (max-width: 800px) {
    body {
        background-color:var(--bg);
        display:flex;
        flex-direction: column;
        font-family: "Roboto";
        font-size: 18px;
        color:var(--content-text);
    }

    div.topheader {
        display: none;
    }

    header, main, footer {
        background-color:var(--content-bg);
    }

    nav {
        width:100%;
        background-image:url('../images/bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        height:700px;
        position: relative;
    }

    nav ul {
        position: absolute;
        bottom:0px;
        display: flex;
        background-color:var(--navbar-bg);
        list-style: none;
        flex-direction: column;
        width: 100%;
        justify-content: space-evenly;
        padding-top:20px;
        padding-bottom:20px;
    }

    nav ul li {
        width: 100%;
        text-align: center;
        margin-top:5px;
        margin-bottom:5px;
    }

    div.text ul li {
        margin-left: 20px;
    }

    nav ul li a {
        color:var(--navbar-text);
        text-decoration: none;
        font-size: 20px;;
        font-weight: bold;
    }

    div.paragraph div.figure img {
        display: none;
    }

    h1 {
        font-size: 32px;
        margin-top:15px;
        margin-bottom:15px;
        width: 100%;
        text-align: center;
    }

    div.article-content div.text {
        padding-left:10px;
        padding-right: 10px;
        text-align: justify;
        margin-top:10px;
    }

    div.text ul {
        margin-top:10px;
        margin-bottom: 10px;;
        margin-left:20px;
        text-align: left;
    }

    div.figure-full {
        width:100%;
        text-align: center;
        margin-top:20px;
        margin-bottom:20px;
    }

    div.figure-full img {
        width:100%;
        opacity: .7;
    }

    div.contact-form {
        margin-left:10px;
        margin-right: 10px;
    }

    div.form-input {
        display: flex;
        flex-direction: column;
        margin-bottom:20px;
    }

    div.form-input label {
        font-weight: bold;
    }

    div.form-input textarea, div.form-input input {
        background-color: var(--input-bg);
        border:1px solid var(--input-bg);
        padding-left:20px;
        color:black;
        width:calc(100% - 20px);
        margin-top:10px;
        padding-top:20px;
        padding-bottom:20px;
        font-family: "Roboto";
        font-size:14px;
    }

    form.contact-form button {
        background-color:var(--button-bg);
        border:0px;
        color: var(--button-text);
        font-weight: bold;
        font-size: 16px;
        padding-top:20px;
        padding-bottom: 20px;
        width: 100%;
    }

    footer {
        background-color:var(--footer-bg);
        margin-top:30px;
        color:var(--footer-text);
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 5px;
        padding-top:20px;
        padding-bottom:20px;
    }

    footer h1 {
        text-align: left;
        margin-bottom:0px;
        text-align: center;
    }
    footer div {
        flex-shrink: 0;
    }
    footer div.company {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-bottom: 20px;
    }

    footer div.company div.socialmedia {
        color:var(--footer-text);
        font-size: 30px;
        margin-bottom:20px;
    }

    footer div.company div.socialmedia a {
        color:var(--socialmedia-link-text-footer);
    }

    footer div.company div.socialmedia a:hover {
        color:var(--socialmedia-link-text-footer-hover);
    }

    header div.socialmedia a {
        color: var(--socialmedia-link-text-header);
    }

    header div.socialmedia a:hover {
        color: var(--socialmedia-link-text-header-hover);
    }

    footer div.menu h2 {
        margin-bottom:25px;
    }

    footer div.menu ul li {
        list-style: none;
        margin-bottom:10px;
    }

    footer div.menu a {
        color:var(--footer-text);
        text-decoration: none;
        transition: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }

    footer div.mainmenu {
        width:100%;
        margin-bottom: 20px;
        margin-left:10px;
    }

    footer div.solutionsmenu {
        width: 100%;
        margin-left:10px;
    }

    footer div.menu a:hover {
        color: var(--footer-menu-hover);
    }

    div.reference-layout a.link {
        display: none;
    }

    div.paragraph div.text h3 {
        width: 100%;
        text-align: center;
        font-size: 24px;
        color:var(--text-header);
        padding-bottom:20px;
    }
}