@media (max-width: 1023px) {
    html.noscroll {
        overflow: hidden;
    }

    body.noscroll {
        overflow: visible;
        height: 100%;
    }

    .logo, .hamburger__container {
        position: relative;
        background: none;
        z-index: 7000;
    }

    .plus__container {
        position: relative;
        background: none;
        z-index: 6000;
    }


    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: rgb(153, 22, 54);
        opacity: 0;
        transition: opacity .3s ease;
        z-index: 5800;
    }

    .main-container {
        position: relative;
        z-index: 0;
    }

    .filter {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        background: white;
        opacity: 0;
        -webkit-transition: height 0.7s ease;
        -moz-transition: height 0.7s ease;
        -o-transition: height 0.7s ease;
        -ms-transition: height 0.7s ease;
        transition: height 0.7s ease;
        z-index: -5500;
    }

    .open {
        opacity: 1;
        right: 0;
    }

    .filter.open {
        z-index: 5500;
    }

    .wit {
        opacity: 1;
    }

    #textContainer {
        margin-right: 0;
    }

    #gridContainer {
        margin-left: 0;
    }

    .nav__container {
        position: absolute;
        padding: 80px 20px 30px;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* These 2 below are all the magic: */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter__container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 160px;
        /* These 2 below are all the magic: */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: white;
    }

    .logo{
        color: rgb(153, 22, 54);
    }

    .logo #sans {
        color: black;
    }

    .logo #art {
        color: rgb(153, 22, 54);
    }

    .hamburger__container .mobile p {
        color: white;
    }

    .plus__container p {
        color: black;
    }

    .plus__container p.rood {
        color: rgb(153, 22, 54);
    }

    .nav__container .mobile p {
        color: white;
        font-weight: 100;
    }

    .menu .activated {
        color:  white;
        text-decoration: underline;
        font-weight: 100;
    }
    #contentContainer {
        flex-direction: column;
    }
    #gridContainer {
        padding: 0px;
        width: 100%;
    }
    #projectGridContainer {
        padding: 0px;
        width: 100%;
    }
    #textContainer {
        display: block;
        width: 100%;
        padding: 0px;
    }
    #projectTextContainer {
        display: block;
        width: 100%;
        padding: 0px;
    }
}

@media (min-width: 1023px) {

    .menu {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
    }

    .myBtnContainer {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
    }

    .mobile {
        display: none;
    }

    .logo{
        color: rgb(153, 22, 54);
    }

    .logo #sans {
        color: black;
    }
    .logo #art {
        color:rgb(153, 22, 54);
    }
}