/* Media Queries
   ========================================================================== */
@media only screen and (max-width: 1325px) {

    header {
        width: 100%;
        height: 11.7vw;
    }

    header img {
        width: 100%;
        height: auto;
    }

    main, .hero_wrapper {
        width: 100%;
    }

}

@media only screen and (max-width : 1024px) {

    .button_add, .button_email {
        float: left;
        margin-right: 25px;
    }

    section {
        width: calc(50% - 12.5px);
    }

    article {
        padding: 25px;
    }

    .modal-content {
        width: 100%;
        padding: 25px;
    }
}

@media only screen and (max-width: 768px) {

    main {
    flex-direction: column;
    }

    section {
        display: contents;
    }

    #article_1 { order: 1; }
    #article_2 { order: 2; }
    #article_3 { order: 3; }
    #article_4 { order: 4; }
    #article_5 { order: 5; }
    #article_6 { order: 6; }
    #article_7 { order: 7; }
    #article_8 { order: 8; }
    #article_9 { order: 9; }
    #article_10 { order: 10; }

    .article_button_main { order: 50; }

    .hero_wrapper, article, .article_slim {
        padding: 25px;
    }

    .hero_text {
        width: 100%;
    }

    .hero_image {
        display: none;
    }

    .question_inline_text, .question_inline_input {
        width: 100%;
    }

    .question_inline_text {
        height: auto;
        margin-bottom: 10px;
    }

    .result_graph_labels, .result_graph_doughnut {
        width: 100%;
    }

    .graph_label_text {
        width: calc(50% - 30px);
    }
}

@media only screen and (max-width : 705px) {

    .article_button_main {
        /*display: none;*/
    }

    .article_button_responsive {
        /*display: block;*/
    }

    main {

    }

    section {
        width: 100%;

        margin-bottom: 20px;
    }

}

@media only screen and (max-width: 510px) {

    html {
        font-size: 14px;
    }

}


@media only screen and (max-width: 355px) {

    .modal-content {
        padding: 15px;
    }

}
