/* Media Queries
   ========================================================================== */
@media only screen and (max-width: 1220px) {

    main, .hero_wrapper {
        width: 100%;
    }

    header {
        width: 100%;
        height: 12vw;

        background-image: none;
        background-color: rgba(203, 246, 248, 1.0); /* GL Turkis */
    }

    header img {
        width: 100%;
        height: auto;
    }

}

@media only screen and (max-width: 850px) {

    .article_small {
        width: 100%; 
    }

    .helpbox {
        width: calc(100vw - 100px);
    }

}

@media only screen and (max-width: 768px) {

    article {
        padding: 25px;
    }

    .helpbox {
        width: calc(100vw - 50px);
    }
}

@media only screen and (max-width : 630px) {

    .question_header, .question_input, .question_radio {
        width: 100%;
    }

    .question_header, .question_radio {
        margin-bottom: 0px;
    }

    .helpbox {
        width: calc(100vw - 62.5px);
    }

}

/* Smartphones */
@media only screen and (max-width : 500px) {

    article {
        padding: 12.5px;
    }

    /* Flipping graph */
    #graph_all_container, #graph_seniority_container, #graph_age_container {
        float: left;

        width: 100%;
        height: 600px;
    }

    #graph_all_background, #graph_seniority_background, #graph_age_background {
        top: 0;
        left: 100px;

        height: 100%;
        width: 100px;

        -webkit-border-top-left-radius: 6px;
        -moz-border-radius-topleft: 6px;
        border-top-left-radius: 6px;
    }

    #graph_all_active, #graph_seniority_active, #graph_age_active {
        top: inherit;
        left: 100px;
        bottom: 0;

        height: 0;
        width: 100px;

        -webkit-border-top-left-radius: 0px;
        -moz-border-radius-topleft: 0px;
        border-top-left-radius: 0px;

        -webkit-border-bottom-left-radius: 6px;
        -moz-border-radius-bottomleft: 6px;
        border-bottom-left-radius: 6px;

        -webkit-border-bottom-right-radius: 6px;
        -moz-border-radius-bottomright: 6px;
        border-bottom-right-radius: 6px;
    }

    #graph_all_p10_index, #graph_all_p50_index, #graph_all_p90_index,
    #graph_seniority_p10_index, #graph_seniority_p50_index, #graph_seniority_p90_index,
    #graph_age_p10_index, #graph_age_p50_index, #graph_age_p90_index {
        top: inherit;
        left: 200px;

        width: 10px;
        height: 1px;
    }

    #graph_all_p10_amount, #graph_all_p50_amount, #graph_all_p90_amount,
    #graph_seniority_p10_amount, #graph_seniority_p50_amount, #graph_seniority_p90_amount,
    #graph_age_p10_amount, #graph_age_p50_amount, #graph_age_p90_amount {
        top: inherit;
        left: 230px;

        width: calc(100% - 230px);

        text-align: left;
    }

    #graph_all_p10_amount div, #graph_all_p50_amount div, #graph_all_p90_amount div,
    #graph_seniority_p10_amount div, #graph_seniority_p50_amount div, #graph_seniority_p90_amount div,
    #graph_age_p10_amount div, #graph_age_p50_amount div, #graph_age_p90_amount div {
        float: left;

        margin-right: 15px;
    }

    #graph_all_p10_subindex, #graph_all_p50_subindex, #graph_all_p90_subindex,
    #graph_seniority_p10_subindex, #graph_seniority_p50_subindex, #graph_seniority_p90_subindex,
    #graph_age_p10_subindex, #graph_age_p50_subindex, #graph_age_p90_subindex {
        top: inherit;
        left: 100px;

        width: 100px;
        height: 1px;
    }

    #graph_all_i1_index, #graph_all_i2_index, #graph_all_i3_index, #graph_all_i4_index, #graph_all_i5_index, #graph_all_i6_index, #graph_all_i7_index,
    #graph_seniority_i1_index, #graph_seniority_i2_index, #graph_seniority_i3_index, #graph_seniority_i4_index, #graph_seniority_i5_index, #graph_seniority_i6_index, #graph_seniority_i7_index,
    #graph_age_i1_index, #graph_age_i2_index, #graph_age_i3_index, #graph_age_i4_index, #graph_age_i5_index, #graph_age_i6_index, #graph_age_i7_index {
        top: inherit;
        left: 90px;

        width: 10px;
        height: 1px;
    }

    #graph_all_i1_index, #graph_seniority_i1_index, #graph_age_i1_index { bottom: 0.0%; }
    #graph_all_i2_index, #graph_seniority_i2_index, #graph_age_i2_index { bottom: 16.66%; }
    #graph_all_i3_index, #graph_seniority_i3_index, #graph_age_i3_index { bottom: 33.33%; }
    #graph_all_i4_index, #graph_seniority_i4_index, #graph_age_i4_index { bottom: 49.99%; }
    #graph_all_i5_index, #graph_seniority_i5_index, #graph_age_i5_index { bottom: 66.66%; }
    #graph_all_i6_index, #graph_seniority_i6_index, #graph_age_i6_index { bottom: 83.33%; }
    #graph_all_i7_index, #graph_seniority_i7_index, #graph_age_i7_index { bottom: 99.99%; }

    #graph_all_i1_amount, #graph_all_i2_amount, #graph_all_i3_amount, #graph_all_i4_amount, #graph_all_i5_amount, #graph_all_i6_amount, #graph_all_i7_amount,
    #graph_seniority_i1_amount, #graph_seniority_i2_amount, #graph_seniority_i3_amount, #graph_seniority_i4_amount, #graph_seniority_i5_amount, #graph_seniority_i6_amount, #graph_seniority_i7_amount,
    #graph_age_i1_amount, #graph_age_i2_amount, #graph_age_i3_amount, #graph_age_i4_amount, #graph_age_i5_amount, #graph_age_i6_amount, #graph_age_i7_amount {
        top: inherit;
        left: 0px;

        width: 75px;
    }

    #graph_all_i1_amount, #graph_seniority_i1_amount, #graph_age_i1_amount { bottom: calc(0.0% - 4px); text-align: right; }
    #graph_all_i2_amount, #graph_seniority_i2_amount, #graph_age_i2_amount { bottom: calc(16.66% - 6px); text-align: right; }
    #graph_all_i3_amount, #graph_seniority_i3_amount, #graph_age_i3_amount { bottom: calc(33.33% - 6px); text-align: right; }
    #graph_all_i4_amount, #graph_seniority_i4_amount, #graph_age_i4_amount { bottom: calc(49.99% - 6px); text-align: right; }
    #graph_all_i5_amount, #graph_seniority_i5_amount, #graph_age_i5_amount { bottom: calc(66.66% - 6px); text-align: right; }
    #graph_all_i6_amount, #graph_seniority_i6_amount, #graph_age_i6_amount { bottom: calc(83.33% - 6px); text-align: right; }
    #graph_all_i7_amount, #graph_seniority_i7_amount, #graph_age_i7_amount { bottom: calc(99.99% - 10px); text-align: right; }

    #graph_all_user_salary, #graph_seniority_user_salary, #graph_age_user_salary {
        z-index: 15;

        top: inherit;
        left: 112.5px;

        width: 75px;
        height: 55px;
    }

    #graph_all_user_salary:before, #graph_seniority_user_salary:before, #graph_age_user_salary:before {
        border-color: transparent;
        border-bottom-color: rgba(244, 147, 47, 1.0); /* GL Orange */
        border-width: 11px;
    }

    .graph_all_user_coins {
        display: none;
    }

    .graph_all_user_text {
        position: inherit;
        top: inherit;
        right: inherit;

        width: 100%;
        height: auto;
    }

    .helpbox {
        width: calc(100vw - 37.5px);
    }
}

/* Smartphones horizontal */
@media only screen and (max-width : 425px) {

    /* Flipped graph slim mode */
    #graph_all_background, #graph_seniority_background, #graph_age_background {
        width: 50px;
    }

    #graph_all_active, #graph_seniority_active, #graph_age_active {
        width: 50px;
    }

    #graph_all_p10_index, #graph_all_p50_index, #graph_all_p90_index,
    #graph_seniority_p10_index, #graph_seniority_p50_index, #graph_seniority_p90_index,
    #graph_age_p10_index, #graph_age_p50_index, #graph_age_p90_index {
        left: 150px;
    }

    #graph_all_p10_amount, #graph_all_p50_amount, #graph_all_p90_amount,
    #graph_seniority_p10_amount, #graph_seniority_p50_amount, #graph_seniority_p90_amount,
    #graph_age_p10_amount, #graph_age_p50_amount, #graph_age_p90_amount {
        left: 180px;

        width: calc(100% - 180px);
    }

    #graph_all_p10_subindex, #graph_all_p50_subindex, #graph_all_p90_subindex,
    #graph_seniority_p10_subindex, #graph_seniority_p50_subindex, #graph_seniority_p90_subindex,
    #graph_age_p10_subindex, #graph_age_p50_subindex, #graph_age_p90_subindex {
        width: 50px;
    }

    #graph_all_user_salary, #graph_seniority_user_salary, #graph_age_user_salary {
        left: 87px;
    }
}