@charset "utf-8";

.head_contents .home_nav {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    padding: 0px 30px;
}

@media screen and (max-width:1200px) {
    .head_contents .cont {
        width: 100%;
        max-width: 960px;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .page_cont .fz {
        font-size: 16px;
    }
}

@media screen and (min-width:601px) {
    .head_contents .logo {
        margin-right: 30px;
        flex-basis: auto;
    }

    body .page_cont {
        width: 100%;
        max-width: 960px;
    }

    #form input[name="permits_year"] {
        width: 30%;
    }

    #form .pp_check {
        padding-left: 52px;
        margin: 0px;
    }

    .page_cont .info {
        margin-bottom: 65px;
    }

    .page_cont .fz {
        font-size: 16px;
    }

    /* form-nav */
    .progressbar {
        margin-bottom: 90px;
    }

    .progressbar ol {
        background-color: transparent;
        padding: 0;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .progressbar li {
        position: relative;
        padding: 0;
        margin: 4px 4px 4px 0;
        display: inline-block;
        min-width: 160px;
        text-align: center;
        float: left;
    }

    .progressbar li>* {
        position: relative;
        padding: 15px 0px 13px 13px;
        color: #ffffff;
        background-color: #b4bdc8;
        border-color: #b4bdc8;
        display: inline-block;
        width: 100%;
        text-align: center;
        line-height: 1em;
        font-weight: bold;
        height: 44px
    }

    .progressbar li::after, .progressbar li>*::after {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        content: '';
        height: 0;
        width: 0;
        border: 24px solid transparent;
        border-right-width: 0;
        border-left-width: 12px;
        display: inline-block;
    }

    .progressbar li::after, .progressbar li>*::after {
        border-top-width: 22px;
        border-bottom-width: 22px;
    }

    .progressbar li>*::after {
        z-index: 2;
        border-left-color: inherit;
    }

    .progressbar li::after {
        display: inline-block;
        color: #b4bdc8;
    }

    .progressbar li::after {
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #E8F1F2;
        margin: 0;
    }

    .progressbar li:last-of-type::after, .progressbar li:last-of-type>*::after {
        display: none;
    }

    .progressbar li.active>* {
        background-color: #00c0ff;
        border-color: #00c0ff;
    }

    .progressbar li.active::after {
        color: #b4bdc8;
    }
}

@media screen and (max-width:600px) {
    .content {
        width: 100%;
        padding: 0 10px;
    }

    .head_in {
        width: 100%;
        margin: 0 auto;
    }

    .form header .head_logo {
        padding: 0 10px;
    }

    .page_info {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .postal_code, .region, .street_address, .extended_address {
        width: 100%;
    }

    .postal_code, .street_address {
        margin-bottom: 15px;
    }

    #form .form-inner {
        width: 100%;
    }

    #form .form-group {
        flex-wrap: wrap;
    }

    #form .cnt-blc, #form .other_blc {
        display: block;
    }

    #form .form-group>label {
        margin-bottom: 10px;
    }

    #form .form-group>label.bold {
        /* width: 100%; */
        display: flex;
        flex-wrap: nowrap;
    }

    #form label {
        flex-wrap: wrap;
    }

    #form label.sf-select-button.form-checkbox-field {
        flex-wrap: nowrap;
    }

    #form label small {
        width: 100%;
    }

    #form .cnt-group {
        padding: 15px;
    }

    #form .address-blc {
        padding-left: 0em;
    }

    #form .form-group .w30,
    #form .form-group .w50,
    #form .col-xs-50 {
        width: 100%;
    }

    #form .form-group #age {
        width: 100px;
    }

    #form .address-blc {
        padding-left: 10px;
    }

    #form .address-blc .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    #form .address-blc.h-adr .row {
        display: block;
    }

    #form .address-blc div.building {
        padding: 0 8px;
    }

    #form dd {
        padding: 0;
    }

    #form label .ml15 {
        margin-left: 0px;
    }

    .sf-btn.sf-btn-lg {
        font-size: 16px;
    }

    #form #permits_category.row.row-select-button-group {
        display: block;
    }

    #form .row.row-select-button-group .col-xs-40,
    #form .row.row-select-button-group .col-xs-30 {
        width: 100%;
    }

    #form input[name="permits_year"],
    #form #job_offers,
    #form #contract_period {
        width: 30%;
    }

    #form #monthly_wage,
    #form #housing_costs,
    #form #utility_bills,
    #form input[name="permits_number"],
    #form input[name="full_time"],
    #form input[name="total"],
    #form input[name="working_days_per_year"],
    #form input[name="holidays_per_year"],
    #form #perfect_attendance_allowance,
    #form #field_allowance,
    #form #other_allowances {
        width: 50%;
    }

    #form .pp_check {
        padding-left: 0px;
        margin: 0px;
    }

    #form .address-blc.pay label {
        margin-right: 0px;
    }

    /* form-nav */
    .progressbar {
        margin-bottom: 35px;
        /*background-color: #b4bdc8;*/
    }

    .progressbar ol {
        background-color: transparent;
        padding: 0;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .progressbar li {
        position: relative;
        padding: 0;
        margin: 0px 4px 0px 0;
        display: inline-block;
        /*min-width: 136px;*/
        text-align: center;
        float: left;
    }

    .progressbar li>* {
        position: relative;
        padding: 9px 5px 9px 20px;
        color: #ffffff;
        background-color: #b4bdc8;
        border-color: #b4bdc8;
        display: inline-block;
        width: 100%;
        text-align: center;
        line-height: 1em;
        font-weight: bold;
        height: 30px;
        font-size: 12px;
    }

    .progressbar li::after, .progressbar li>*::after {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        content: '';
        height: 0;
        width: 0;
        border: 24px solid transparent;
        border-right-width: 0;
        border-left-width: 12px;
        display: inline-block;
    }

    .progressbar li::after, .progressbar li>*::after {
        border-top-width: 15px;
        border-bottom-width: 15px;
    }

    .progressbar li>*::after {
        z-index: 2;
        border-left-color: inherit;
    }

    .progressbar li::after {
        display: inline-block;
        color: #b4bdc8;
    }

    .progressbar li::after {
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #E8F1F2;
        margin: 0;
    }

    .progressbar li:last-of-type::after, .progressbar li:last-of-type>*::after {
        display: none;
    }

    .progressbar li.active>* {
        background-color: #00c0ff;
        border-color: #00c0ff;
    }

    .progressbar li.active::after {
        color: #b4bdc8;
    }

    /*.progressbar {
      margin-bottom: 30px;
    }
    .progressbar ol {
      background-color: transparent;
      padding: 0;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .progressbar li {
      position: relative;
      padding: 0;
      margin-right:15px ;
      display: inline-block;
      text-align: center;
    }
    .progressbar li > * {
      position: relative;
      padding: 3px 5px;
      color: #ffffff;
      background-color: #b4bdc8;
      border-color: #b4bdc8;
      display: inline-block;
      width: 100%;
      text-align: center;
      line-height: 1em;
      font-size:12px;
      font-weight: bold;
    }
    .progressbar li > *::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 100%;
      height: 0;
      width: 0;
      border: 24px solid transparent;
      border-right-width: 0;
      border-left-width: 7px;
      display: inline-block;
      margin-left: 4px;
    }
    .progressbar li > *::after {
      border-top-width: 7px;
      border-bottom-width: 7px;
      z-index: 2;
      border-left-color: inherit;
    }
    .progressbar li::after {
      display: inline-block;
      color: #b4bdc8;
    }
    .progressbar li::after {
      z-index: 1;
      -webkit-transform: translateX(4px);
      -moz-transform: translateX(4px);
      -ms-transform: translateX(4px);
      -o-transform: translateX(4px);
      transform: translateX(4px);
      border-left-color: #fff;
      margin: 0;
    }
    .progressbar li:last-of-type > *::after {
      display: none;
    }
    .progressbar li.active > * {
      background-color: #53a6d9;
      border-color: #53a6d9;
    }*/
    h1.h1_title {
        width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    .info {
        margin-bottom: 35px;
        padding-left: 25px;
        padding-right: 25px;
    }

    #form .subtitle {
        padding-left: 25px;
        padding-right: 25px;
    }

    #form .page_box {
        box-shadow: none;
        padding: 35px 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .head_contents .cont {
        justify-content: space-between;
    }

    .head_contents .home_nav {
        padding: 0px 10px;
    }

    /* sf-trainees */
    .page_cont-top {
        padding: 0 1em;
        flex-direction: column;
    }

    #form label {
        font-size: 15px;
    }

    .form-elements label {
        font-size: 15px;
    }

    .page_cont .fz {
        font-size: 15px;
    }

    .sf-trainees {
        margin: 0 auto 2em;
    }

    .sf-btn.sf-btn-m {
        font-size: 1em;
    }
}

@media screen and (max-width:990px) {
    .foot_logo {
        display: none;
    }

    .head_contents .cont {
        padding: 10px 15px;
    }

    .head_contents .logo img {
        height: 40px;
    }

    footer .copyright {
        margin: 0px auto;
    }

    .page_cont-top {
        margin: auto;
        width: 94%;
    }
}