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

    header {
        width: 100%;
        height: 11.7vw;
    }

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

    .hero_wrapper {
        width: 100%;
    }

}

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

    .hero_wrapper, article, .article_slim {
        padding: 25px;
    }

    .hero_text {
        width: 100%;
    }

    .hero_image {
        display: none;
    }

    #wrapper {
        width: 100%;
    }

    /* Questionare */
    .question_input {
        width: 100%;
    }

    /* Profile */
    .result_profile_image {
        width: calc(25% - 15px);
    }

    .result_profile_text {
        width: 75%;
    }

    /* Custom dot color in radio */
    input[type="radio"]:checked:before {
        position: inherit;
        top: inherit;
        left: inherit;
        width: inherit;
        height: inherit;

        content: inherit;
        display: inherit;

        border-radius: inherit;
        background-color: inherit;
    }

    .helpbox {
        top: 45px;
        left: 0px;

        width: 100%;
    }
}

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

    /* Result bar flip */
    .result_boxes {
        width: 100px;
        height: 500px;

        margin-top: 0px;
    }

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

        width: calc(100% - 100px);
        height: 500px;

        margin: 0px;
        padding: 0px;
    }

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

        padding-top: 10px;

        text-align: left;
    }

    .result_10_text {
        top: 15px;
        left: 0px;

        padding-left: 120px;

        background-image: url("/images/percent_10_flipped.png");
    }

    .result_25_text {
        top: 90px;
        left: 0px;

        padding-left: 150px;

        background-image: url("/images/percent_25_flipped.png");
    }

    .result_50_text {
        top: 215px;
        left: 0px;

        padding-left: 150px;

        background-image: url("/images/percent_50_flipped.png");
    }

    .result_75_text {
        top: 340px;
        left: 0px;

        padding-left: 150px;

        background-image: url("/images/percent_75_flipped.png");
    }

    .result_90_text {
        top: 415px;
        left: 0px;

        padding-left: 120px;

        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_0_10 {
        width: 100%;
        height: 10%;

        border-width: 0px 0px 1px 0px;
    }

    .result_10_25 {
        width: 100%;
        height: 15%;

        border-width: 1px 0px;
    }

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

        border-width: 1px 0px;
    }

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

        border-width: 1px 0px;
    }

    .result_75_90 {
        width: 100%;
        height: 15%;

        border-width: 1px 0px;
    }

    .result_90_100 {
        width: 100%;
        height: 10%;

        border-width: 1px 0px 0px 0px;
    }

}

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

    html {
        font-size: 14px;
    }

    /* Profile */
    .result_profile_image {
        display: none;
    }

    .result_profile_text {
        width: 100%;
    }

}

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

    /* Questionare */
    .radio_box {
       width: 100%;
       margin-bottom: 10px;
    }

    .radio_box:nth-child(3) {
       margin-bottom: 0px;
    }

    .job_radio_padding {
        margin-left: 0px;
    }

    /* Profile */
    .result_header, .result_input {
        width: 100%;
    }

    .result_input {
        margin-bottom: 5px;
    }
}

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

    /* Result bar flip - slim */
    .result_boxes {
        width: 60px;
    }

    .result_texts {
        left: 40px;
    }

}