@media (max-width: 768px),
(max-height: 768px) {

    html,
    body {
        width: 100%;
    }

    h1 {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.0rem;
    }

    p {
        font-size: 0.7rem;
    }

    .bannersplit li:nth-child(1) {
        display: none;
    }

    .carousel {
        max-width: 250px;
    }

    .carousel-card {
        min-width: 250px;
    }

    .carousel-card img {
        max-height: 30%;
    }

    .centered-button-table {
        width: 100%;
    }

    .centered-table {
        width: 100%;
    }

    .centered-table td {
        min-width: 0;
    }

    .col th,
    .col td {
        font-size: 0.7rem;
    }

    .container {
        font-size: 0.7rem;
    }

    .container p {
        font-size: 0.7rem;
    }

    .containertop {
        margin-top: 70px;
    }

    .footerbar {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .form-container {
        width: 96%;
        height: 100%;
        max-width: 100%;
        border-radius: 0px;
    }

    .form-popup {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        align-items: center;
        border: none;
        border-radius: 0px;
        overflow-y: auto;
        background-color: white;
    }

    .headerlogo {
        width: 80%;
    }

    .navitem {
        padding: 5px;
        font-size: 0.7rem;
    }

    .picturecenter {
        width: 70%;
    }

    .portfolio {
        padding: 8px;
        left: 10px;
        top: 10px;
    }

    #navitemone {
        width: 30%;
    }

    #navitemtwo {
        width: 70%;
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
}