/* Media Queries
   ========================================================================== */

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

    #navigation_bar, #hero_bar {
        width: 100%;
    }

    #hero_bar {
        padding-left: 17.5%;
    }

    .modal-content {
        width: calc(100% - 100px);
    }
}

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

    #hero_bar {
        padding-left: 10%;
    }

}

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

    h1 {
        font-size: 1.875em; /* 30px */
        margin-bottom: 24px;
    }

    h2 {
        font-size: 1.5em; /* 24px */
        margin-bottom: 12px;
    }

    h3 {
        font-size: 1.25em; /* 20px */
        margin-bottom: 12px;
    }

}

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

    main {
        width: 100%;
    }

    #hero_bar {
        padding: 50px;
    }

}

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

    #overlay_cta {
        display: none;
    }
}

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

    button {
        width: auto;
    }

    .button_back, .button_forward {
        width: 125px;
    }

    section, #info_momdad, #info_mommom, #info_daddad, #info_solo, #info_lgbt, #info_adoption, #info_surrogate, #info_custody {
        width: 100%;
    }

    article, .p {
        width: 100%;
    }

    /* Introduction */
    #introduction p {
        width: 100%;
    }

    /* Step 3 */
    #maternity_date_picker {
        width: 100%;
    }

    #maternity_date_picker article {
        min-height: 31vw;
    }

    /* Flow */
    #section_warnings {
        width: 100%;
    }

    .maternity_flow_legal1_text_lgbt_s2 div, .maternity_flow_social1_text_lgbt_s2 div, .maternity_flow_social2_text_lgbt_s2 div,
    .maternity_flow_legal1_text_lgbt1 div, .maternity_flow_legal2_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, 
    .maternity_flow_legal1_text_lgbt2 div, .maternity_flow_legal2_text_lgbt2 div, .maternity_flow_social1_text_lgbt2 div, .maternity_flow_social2_text_lgbt2 div {
        font-size: 1.60vw;
    }

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

    /* 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: 700px) {

    .button_email, .button_print, .button_calendar {
        width: auto;
        padding: 3px 20px 0px 20px;
    }

    .button_calendar {
        margin-left: 0px;
    }

    /* Step 8 */
    .absence_header_info, .absence_header_input {
        min-height: 40px;
    }

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

    .color_box {
        width: 50%;
    }

    .color_box:nth-child(1), .color_box:nth-child(2) {
        margin-bottom: 25px;
    }

}

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

    article {
        padding: 25px;
    }

    #hero_bar {
        padding: 25px;
    }

    #hero_bar p {
        width: 100%;

        text-shadow: 0px 0px 5px #FFFFFF, 0px 0px 5px #FFFFFF;
    }

    /* Step 6 */
    .infographic_container, .infographic_container_text {
        padding: 25px;
    }

    /* Step 7 */
    .agreement_overview_edit {
        right: 0px;

        width: auto;
    }

    #section_headers_legal1 .agreement_overview_type, #section_headers_legal2 .agreement_overview_type, #section_headers_legal1 .agreement_overview_text, #section_headers_legal2 .agreement_overview_text {
        display: none;
    }

    #section_headers_legal1 .agreement_overview_info, #section_headers_legal2 .agreement_overview_info {
        width: 62.5%;
    }

    #section_headers_legal1 .agreement_overview_using, #section_headers_legal2 .agreement_overview_using {
        width: 37.5%;
    }

    .agreement_overview_type, .agreement_overview_transfer {
        width: 100%;
        height: 40px;

        align-items: flex-end;
    }

    .agreement_overview_info, .agreement_overview_using {
        width: 33%;
    }

    .agreement_overview_amount {
        width: 35%;
    }

    .agreement_overview_text {
        width: 40%;
    }

    .agreement_overview_chosen {
        width: 25%;
    }

    .agreement_overview_chosen input, .agreement_transfer_chosen input {
        width: 35px;
        height: 35px;
    }

    #section_receive_legal1 .agreement_overview_text, #section_receive_part1_legal2 .agreement_overview_text, #section_receive_part2_legal2 .agreement_overview_text {
        width: 75%;
    }

    /* Flow */
    #overview_legal1, #overview_legal2, #overview_social1, #overview_social2, #overview_child {
        width: 100%;

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

        border-left-width: 0px;
    }

    #overview_legal1, #overview_legal2, #overview_social1, #overview_social2 {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(225, 225, 225, 1.0);
    }

    .overview_box_third:last-of-type {
        padding-bottom: 0;
        margin-bottom: 0;

        border-bottom-width: 0px;
    }

    #controls_container {
        width: 94%;
    }

    #section_warnings article {
        padding: 0% 3%;
    }

    /* Misc */
    .icon_modal_sector, .icon_modal_contract, .icon_modal_distribute, .icon_modal_extension, .icon_modal_vacation {
        top: 3vw;
        right: 3vw;

        width: 20px;
        height: 20px;
    }
}

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

    .button_back, .button_email, .button_print, .button_calendar {
        float: left;
        width: calc(50% - 10px);

        margin-left: 0px;
    }

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

        margin-left: 0px;
    }

    .button_back, .button_email {
        margin-bottom: 20px;
    }

    .button_back, .button_print {
        margin-right: 20px;
    }
}    

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

    /* Flow */
    .maternity_flow_legal1_text div, .maternity_flow_legal2_text div {
        font-size: 14px;
    }

    .maternity_flow_legal1_text_lgbt_s2 div, .maternity_flow_social1_text_lgbt_s2 div, .maternity_flow_social2_text_lgbt_s2 div,
    .maternity_flow_legal1_text_lgbt1 div, .maternity_flow_legal2_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, 
    .maternity_flow_legal1_text_lgbt2 div, .maternity_flow_legal2_text_lgbt2 div, .maternity_flow_social1_text_lgbt2 div, .maternity_flow_social2_text_lgbt2 div {
        font-size: 1.60vw;
    }

}

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

    button {
        margin-bottom: 25px;
    }

    /* Step 4 */
    .agreement_selection_text {
        height: auto;

        padding: 5px 0px;
        margin-bottom: 10px;
    }
    .agreement_selection_input {
        width: calc(100% - 150px);
    }

    .agreement_selection_spacer {
        display: none;
    }

    #warning_box_unemployed_legal1, #warning_box_selfemployed_legal1, #warning_box_student_legal1, #warning_box_unemployed_legal2, #warning_box_selfemployed_legal2, #warning_box_student_legal2 {
        padding: 0px;
    }

    #agreement_infobox_dismissed_legal1, #agreement_infobox_dismissed_legal2, #agreement_infobox_hourly_legal1, #agreement_infobox_hourly_legal2 {
        padding: 0px;
    }

    /* Flow */
    #postpone_box_shared {
        width: calc(100% - 20px);
    }

}

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

    /* Step 8 */
    .absence_header_info {
        width: calc(100% - 190px);
    }

    .absence_header_input, .absence_chosen {
        width: 95px;

        text-align: right;
    }

    .absence_spacer {
        width: 60px;
    }

    .absence_text {
        width: calc(100% - 300px);
    }

    /* Flow */
    .maternity_flow_legal1_text div, .maternity_flow_legal2_text div {
        font-size: 13px;
    }

    .maternity_flow_legal1_text_lgbt_s2 div, .maternity_flow_social1_text_lgbt_s2 div, .maternity_flow_social2_text_lgbt_s2 div,
    .maternity_flow_legal1_text_lgbt1 div, .maternity_flow_legal2_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, 
    .maternity_flow_legal1_text_lgbt2 div, .maternity_flow_legal2_text_lgbt2 div, .maternity_flow_social1_text_lgbt2 div, .maternity_flow_social2_text_lgbt2 div {
        font-size: 1.60vw;
    }

}

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

    /* Step 1 */
    #error_adoption article {
        background-image: none;
    }

}

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

    /* Step 6 */
    .infographic_container {
        width: 100%;
    }

    .infographic_container:nth-child(2) {
        margin-left: 0px;
    }

    .infographic_toggle {
        display: none;
    }

    /* Flow */
    .maternity_flow_legal1_text div, .maternity_flow_legal2_text div {
        font-size: 12px;
    }

    .maternity_flow_legal1_text_lgbt_s2 div, .maternity_flow_social1_text_lgbt_s2 div, .maternity_flow_social2_text_lgbt_s2 div,
    .maternity_flow_legal1_text_lgbt1 div, .maternity_flow_legal2_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, 
    .maternity_flow_legal1_text_lgbt2 div, .maternity_flow_legal2_text_lgbt2 div, .maternity_flow_social1_text_lgbt2 div, .maternity_flow_social2_text_lgbt2 div {
        font-size: 1.60vw;
    }

    .maternity_flow_legal1_text_lgbt_s2 div, .maternity_flow_social1_text_lgbt_s2 div, .maternity_flow_social2_text_lgbt_s2 div,
    .maternity_flow_legal1_text_lgbt1 div, .maternity_flow_legal2_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, 
    .maternity_flow_legal1_text_lgbt2 div, .maternity_flow_legal2_text_lgbt2 div, .maternity_flow_social1_text_lgbt2 div, .maternity_flow_social2_text_lgbt2 div {
        font-size: 1.60vw;
    }

}

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

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

    .parent_combo_box:nth-child(4) {
        margin-bottom: 20px;
    }

    /* Step 2 */
    .combo_box_spacer { 
        display: none;
    }

    /* Step 3 */
    .child_combo_box, .share_leave_box, .residence_box, .residence_box, .custody_box, .surrogate_box {
        width: calc(50% - 10px);
    }

    /* Step 9 */
    .extension_select_input {
        width: calc(100% - 75px);
    }

    .extension_select_spacer {
        display: none;
    }

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

        padding: 12px;
        font-size: 0.9em;

        hyphens: auto;
    }

}

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

    html {
        /*font-size: 14px;*/
    }

    article {
        padding: 12px;
    }

    /* Step 3 */
    #maternity_date_icon {
        display: none;
    }

    #maternity_date {
        margin: 15px 0px;
    }

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

    .agreement_selection_text {
        height: 40px;

        margin-bottom: 0px;
    }

    /* Step 7 */
    .agreement_overview_amount {
        width: calc(40% - 45px);
    }

    .agreement_overview_text {
        width: calc(60% - 45px);
    }

    .agreement_transfer_text {
        width: calc(100% - 90px);
    }

    .agreement_overview_chosen, .agreement_transfer_chosen {
        width: 90px;
    }

    #section_receive_legal1 .agreement_overview_text, #section_receive_part1_legal2 .agreement_overview_text, #section_receive_part2_legal2 .agreement_overview_text {
        width: calc(100% - 90px);
    }

    /* Step 9 */
    .extension_select {
        width: calc(100% - 65px);
    }

    .extension_chosen {
        width: 75px;
    }

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

    /* Flow */
    .color_box {
        width: 100%;
        margin-bottom: 3.5% !important;
    }

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

    .maternity_flow_legal1_text_lgbt_s2 div, .maternity_flow_social1_text_lgbt_s2 div, .maternity_flow_social2_text_lgbt_s2 div,
    .maternity_flow_legal1_text_lgbt1 div, .maternity_flow_legal2_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, .maternity_flow_social1_text_lgbt1 div, 
    .maternity_flow_legal1_text_lgbt2 div, .maternity_flow_legal2_text_lgbt2 div, .maternity_flow_social1_text_lgbt2 div, .maternity_flow_social2_text_lgbt2 div {
        font-size: 1.60vw;
    }

}

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

    /* Step 1 */
    .parent_combo_box {
        padding: 40px 0px 30px;
    }

    .parent_combo_box img {
        height: 45px;
    }

    .parent_combo_box_text {
        margin-top: 25px;
    }

    /* Step 3 */
    .child_combo_box img {
        height: 45px;
    }
}

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

    .section_button {
        margin-top: 25px;
    }

    /* Step 1 */
    .parent_combo_box {
        height: auto;
    }

    .parent_combo_box:nth-child(4) {
        margin-bottom: 25px;
    }

    /* Step 2 */
    .combo_box_spacer {
        height: auto;
    }

    /* Step 3 */
    .child_combo_box {
        height: auto;
    }

    #maternity_date_picker input {
        width: 100%;
    }

    /* Step 6 */
    .infographic_overview_leave {
        height: auto;
    }

}