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

    nav img {
        margin-left: 12.5px;
    }

    header, footer, nav {
        width: 100% !important;
        }

    #wrapper {
        width: 100% !important;
        }
}

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

    input[type="radio"], input[type="checkbox"] {
        width: auto !important;
        height: auto !important;
    }
}

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

    #wrapper {
        /*padding: 0px 25px;*/
    }

    article {
        width: 100%;
    }

}


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

    .column_flex_container_position {
        flex-wrap: wrap;
    }

    .column_flex_content_position {
        width: calc(25% - 10px);

        margin-bottom: 25px;
    }

}

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



    .benefit_item {
        width: 100%;
    }

    .benefit_item:nth-of-type(even) {
        margin-left: 0px;
    }

}

/* Result bar horizontal scale */
@media only screen and (max-width : 535px) {

    .salary_input_box {
        width: 100%;
    }

    .salary_input_box input {
        width: calc(100% - 30px);
    }

    .result_texts {
        height: 148px;
    }

    .result_25_text, .result_50_text, .result_75_text {
        width: 120px;
        height: 148px;
        font-size: 0.75em;
    }

    .result_25_text {
        left: calc(25% - 60px); 
        padding: 73px 0px;
    }

    .result_50_text {
        left: calc(50% - 60px);
        padding: 48px 0px;
    }

    .result_75_text {
        left: calc(75% - 60px);
        padding: 73px 0px;
    }

    .result_25_text b, .result_50_text b, .result_75_text b {
        font-size: 1.1em;
    }
}

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

    #header_label img {
        height: 35px;
    }

    #wrapper {
        /*padding: 25px;*/
    }

}

/* Result bar flip */
@media only screen and (max-width : 510px) {

    .result_container {
        position: relative;
        width: 100%;
        height: auto;
    }

    .result_boxes {
        width: 100px;
        height: 500px;
        margin-top: 0px;
    }

    .result_25 {
        width: 100%;
        height: 25%;

        -webkit-border-top-right-radius: 10px;
        -moz-border-top-right-radius: 10px;
        -o-border-top-right-radius: 10px;
        border-top-right-radius: 10px;
        -webkit-border-bottom-left-radius: 0px;
        -moz-border-bottom-left-radius: 0px;
        -o-border-bottom-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .result_50 {
        width: 100%;
        height: 25%
    }

    .result_75 {
        width: 100%;
        height: 25%
    }

    .result_100 {
        width: 100%;
        height: 25%;

        -webkit-border-top-right-radius: 0px;
        -moz-border-top-right-radius: 0px;
        -o-border-top-right-radius: 0px;
        border-top-right-radius: 0px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-bottom-left-radius: 10px;
        -o-border-bottom-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .result_texts {
        position: absolute;
        top: 0px;
        left: 100px;

        width: 250px;
        height: 500px;

        margin: 0px;
        padding: 0px;
    }

    .result_texts_down {
        top: 90px;
    }

    .result_25_text, .result_50_text, .result_75_text, .result_90_text {
        position: absolute;
        width: 250px;
        height: 70px;

        margin-left: -6px;

        padding: 18px 0px 0px 135px;
        font-size: 0.85em;
        text-align: left;
    }

    .result_25_text {
        top: 90px;
        left: 0px;
        background-image: url("/images/percent_25_flipped.png");
    }

    .result_50_text {
        top: 215px;
        left: 0px;
        background-image: url("/images/percent_50_flipped.png");
    }

    .result_75_text {
        top: 341px;
        left: 0px;
        background-image: url("/images/percent_75_flipped.png");
    }

    .result_90_text {
        top: 416px;
        left: 0px;
        background-image: url("/images/percent_90_flipped.png");
    }

    .result_25_text b, .result_50_text b, .result_75_text b, .result_90_text b {
        font-size: 1.3em;
    }

    #result_user {
        position: absolute;
        top: 0;
        left: 0;

        width: 100px;
        height: 500px;
    }

    #result_userbox {
        left: 6px;
    }

    /* Bottom buttons */
    .button_email, .button_print {
        margin-bottom: 10px;
    }

    #benefit_all_button {
        margin-bottom: 15px;
    }

    #helpbox_progressed_salary, #helpbox_progressed_price {
        top: 90px;
    }

}

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

    .column_flex_content_position {
        width: calc(50% - 10px);

    }

}

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

    #wrapper {
        /*padding: 0px 12.5px;*/
    }

    .column_flex_container {
        flex-wrap: wrap;
    }

    /*.column_flex_content {
        width: 100%;

        margin-bottom: 15px;
    }*/

    .column_flex_content_position {
        width: calc(50% - 10px);
    }

}

/* Result bar for smartphones */
@media only screen and (max-width : 390px) {

    .result_boxes {
        width: 50px;
    }

    .result_texts {
        left: 50px;
    }
}