/*--------------------------------------------------
 ********************BASE STYLES********************
----------------------------------------------------*/

/*--------------------------------------------------
 *******************MEDIA QUERIES*******************
----------------------------------------------------*/

@media (max-width: 768px) {
    .main-header,
    .main-nav
    {
        display: flex;
    }

    .main-header, .main-header ul {
        flex-direction: column;
        align-items: center
    }
}

@media (min-width: 769px) {
    .main-header,
    .main-nav,
    .row {
        display: flex;
    }

    .main-header {
        flex-direction: column;
        align-items: center;
    }

    .primary {
        flex: 2;
    }
    .row {
        margin-bottom: 2em;
    }
}

@media (min-width: 1080px) {
    .main-header {
        flex-direction: row;
        justify-content: space-between;
    }
}