.widget {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    padding: 0.25em;
    background-color: #f9f9f9;
    border-radius: 2px;
    margin: 0.25em;
}

.widgets > div {
    flex: 2;
    -webkit-flex: 2;
    -moz-flex: 2;
}

.main-content .mynav {
    flex: 2;
    -webkit-flex: 2;
    -moz-flex: 2;
    order: 0;
    -webkit-order: 0;
    -moz-flex-order: 0;
    background-color: #fff;
    border-radius: 5px;
    margin: 1em;
    padding: 1em;

    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
}

.main-content .news {
    flex: 6;
    -webkit-flex: 6;
    -moz-flex: 6;
    order: 0;
    -webkit-order: 0;
    -moz-flex-order: 0;
    border-radius: 5px;
    margin: 1em;
    padding: 1.5em;


    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fff;
}

.main-content .widgets {
    flex: 2;
    -webkit-flex: 2;
    -moz-flex: 2;
    order: 0;
    -webkit-order: 0;
    -moz-flex-order: 0;
    background-color: #fff;
    border-radius: 5px;
    margin: 1em;
    padding: 1em;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;

    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
}

.widget .news {
    order: 1;
    -webkit-order: 1;
    -moz-flex-order: 1;
}

@media screen and (max-width: 768px) {
    .main-content {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
    }
    .main-content .mynav {
        order: 2;
        -webkit-order: 2;
        -moz-flex-order: 2;
    }
    .main-content .widgets {
        order: 1;
        -webkit-order: 1;
        -moz-flex-order: 1;
    }
    .main-content .news {
        order: 0;
        -webkit-order: 0;
        -moz-flex-order: 0;
    }

    .topbar {
        padding: 0;
    }

    .topbar-inner {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;   
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
    }
    .topbar-inner .logo {
        order: 0;
        -webkit-order: 0;
        -moz-flex-order: 0;
    }

    .topbar-inner .logo img {
        padding: 1em;
        display: block;
        margin: 0 auto;
        position: relative;
        float: none;
    }

    .topbar-inner ul.navbar {
        
        background-color: #c1c7b3;
        box-shadow: inset 0px 1px 0px #41560e;
        order: 1;
        -webkit-order: 1;
        -moz-flex-order: 1;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;   
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
    }
    .topbar-inner ul.navbar li {
        padding: 0;
 
        flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .main-content {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
    }
    .main-content .mynav {
        flex: 2;
        -webkit-flex: 2;
        -moz-flex: 2;
    }
    .main-content .widgets {
        flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        display: none;
    }
    .main-content .news {
        flex: 8;
        -webkit-flex: 8;
        -moz-flex: 8;
    }
}