/* Media Queries
   ========================================================================== */
@media only screen and (max-width: 1140px) {
    
    #wrapper {
        width: 100%;
    }

    h1 {
        /* DFT CSS */
        font-size: 3.125em;
    }

    header {
        margin-bottom: 6vw;
    }

    #maternity_date_picker section {
        1padding: 7vw;
    }

    /* Introduction */
    #introduction {
        1height: 43vw;
    }

    #flow_family {
        1width: 8vw;
    }

}

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

    h1 {
        /* DFT CSS */
        font-size: 2.5em;
    }

}

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

    /* Introduction */
    #introduction {
        1padding: 8vw;
    }

    /* Step 4 */
    #flow_umbrella {
        bottom: 4vw;

        width: 100px;
    }
    
}

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

    section {
        width: 100%;
    }

    /* Flow */
    aside {
        display: none;
    }

    .overview_box_third {
        1margin-bottom: 4vw;
    }

    #color_section {
        1margin-bottom: 4vw;
    }

    .color_box_container {
        1padding: 4vw 0px;
    }

}

@media only screen and (max-width: 815px) {
    /* Step 2 */
    .agreement_selection_input {
        width: calc(100% - 150px);
    }

    .agreement_selection_spacer {
        display: none;
    }

    /* Modal */
    .modal-content {
        width: calc(100% - 25px);
    }
}

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

    h1 {
        /* DFT CSS */
        font-size: 1.875em;
    }

    section {
        /* padding: 1vw; /* non-iframe setting */
    }

    article {
        width: 100%;
        padding: 6vw;
    }

    /* Modal icons */
    .icon_modal_sector {
        top: 4vw;
        right: 4vw;
    }

    /* Introduction */
    #introduction article {
        margin-bottom: 6vw;

        /* DFT CSS */
        font-size: 1.125em;
    }

    /* Step 1 */
    section .p, .parentcombo_container {
        width: 100%;
    }

    #maternity_date_picker, #error_daddad, #error_dad, #error_adoption {
        width: 100%;
    }

    /* Flow */
    #overview_section {
        margin-bottom: 6vw;
    }

    #color_section {
        padding: 0px 6vw 6vw;
    }

    .maternity_box_text {
        padding: 2px 0px 0px 1vw;
    }

    .warning_flow_mom_text div {
        left: 0;
        right: auto;    
    }

    .warning_flow_dad_text div {
        left: auto;
        right: 0;
    }

    /* 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;
    }

}

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

    #wrapper, #wrapper_agreement_overview {
        width: 100%;
    }

    .article_parent_header {
        width: calc(100% - 60px);
    }
    
    aside {
        width: 100%;
        margin-bottom: 25px;
    }

    /* Flow */
    #overview_dad, #overview_child {
        padding-left: 3.5%;
    }

    .article_headline {
        height: auto;
    }

    /* Misc */
    .reminder_box {
        display: none;
    }

    .button_box {
        display: inline-block;
    }
}


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

    html {
        1font-size: 15px;
    }

    /* Flow */
    .color_box_container {
        flex-wrap: wrap;
    }

    .color_box {
        width: 50%;
    }

    .color_box:nth-child(-n+2) {
        margin-bottom: 3.5%;
    }

    .controls {
        position: relative;
        top: inherit;
        right: inherit;

        width: 100%;

        margin-bottom: 7%;
    }

    .button_box {
        width: 50%;

        margin-bottom: 0px;
    }
}

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

    /* Introduction */
    #introduction {
        1height: 290px;
    }

    #introduction img {
        1width: 245px;
    }

    /* Step 2 + 4 */
    .agreement_selection_text, .agreement_selection_input {
        width: 100%;
    }

    .agreement_selection_image, .agreement_selection_text, .agreement_selection_input, .agreement_selection_help {
        margin-bottom: 0px;
    }

    .agreement_extension_input {
        margin-bottom: 25px;
    }

    /* Flow */
    .maternity_flow_mom, .maternity_flow_dad {
        width: calc(50% - 7.5px);
    }

}

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

    html {
        1font-size: 14px;
    }

    /* Flow */
    #overview_mom, #overview_dad, #overview_child {
        width: 100%;

        padding-left: 0;
        padding-bottom: 4vw;
        margin-bottom: 4vw;

        border-left-width: 0px;
    }

    #overview_mom, #overview_dad {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(225, 225, 225, 1.0);
    }

    #overview_child {
        padding-bottom: 0;
        margin-bottom: 0;
    }

}

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

    /* Step 1 */
    #flow_family {
        display: none;
    }

    #maternity_date_picker article {
        padding: 6vw;
    }

    /* Flow */
    #maternity_section article {
        font-size: 2.6vw !important;
    }

    .reminder_box {
        font-size: 14px !important;
    }

}

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


    /* Step 3 */
    .agreement_overview_image {
        width: calc(15% - 15px);
    }

    .agreement_overview_headline {
        width: 80%;
    }

    /* Flow */
    
}


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

    /* Step 2 */
    .agreement_selection_image {
        width: 55px;
        height: 55px;

        margin-right: 25px;
    }

    .agreement_overview_image img {
        width: 9vw;
    }

    .agreement_selection_container {
        width: calc(100% - 80px);
    }

    .agreement_selection_text, .agreement_selection_input {
        width: 100%;
    }

    #warning_box_unemployed_mom, #warning_box_selfemployed_mom, #warning_box_student_mom, #warning_box_unemployed_dad, #warning_box_selfemployed_dad, #warning_box_student_dad {
        padding-left: 80px;
    }

    /* Step 3 */
    .agreement_overview_no_border {
        display: none;
    }

    .agreement_overview_type {
        width: 100%;

        border-bottom-width: 0px;
    }

    .agreement_overview_text {
        width: calc(100% - 220px);
    }

    .agreement_overview_info, .agreement_overview_using, .agreement_overview_amount, .agreement_overview_chosen {
        width: 110px;
    }

}

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

    html {
        1font-size: 13px;
    }

    .agreement_extend_image {
        /*width: 60px;*/
    }

    .agreement_extend_name {
        width: calc(100% - 125px);
    }

    #parental_leave_share_box .agreement_extend_image {
        height: 10px;
    }

    /* Flow */
    #maternity_section article {
        font-size: 11px !important;
    }

    .button_box img {
        display: none;
    }

    .color_box {
        width: 100%;
        margin-bottom: 3.5%;
    }

    .color_box:last-of-type {
        margin-bottom: 0;
    }

    .button_print {
        display: none;
    }

    /* Modal */
    .modal-content {
        padding: 2vw;
        font-size: 0.9em;
    }

}

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

    /* Step 1 */
    .parentcombo_box {
        width: calc(50% - 15px);
    }

    /* Step 4 */
    #flow_umbrella {
        display: none;
    }

}