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

    .layer {
        display: block;
    }

    .cols .col.col-33 {
        float: none;
        padding: 0 1rem 2rem;
        width: 100%;
    }

    .cols .col.col-33:nth-child(3) {
        padding-bottom: 0;
    }

    header {
        height: 8rem;
        width: 100%;
    }

    header .logo {
        margin: 1rem 0 1rem 2rem;
    }

    header .logo img {
        height: 6rem;
    }

    header .logo span {
        margin-top: 3rem;
    }

    header nav.main,
    header nav.social-media,
    header nav.meta-bottom {
        display: none;
    }

    header .menu-trigger {
        display: block;
    }

    main {
        margin-left: 0;
        margin-top: 8rem;
        min-height: auto;
        width: 100%;
    }

    footer {
        margin-left: 0;
        min-height: calc(100vh - 8rem);
        width: 100%;
    }

    nav.main-mobile {
        display: block;
    }

}