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

    #wrapper_credit_cards .btn-verify-card,
    #wrapper_credit_cards .btn-check-card,
    #wrapper_credit_cards .btn-delete-card {
        display: table;
        margin: 20px auto 0;
    }

    #credits_table td.tools .btn-design,
    #restruct_table td.tools .btn-design {
        min-width: 100%;
    }

}

@media screen and (min-width: 480px) {

    #wrapper_account #cashback .title {
        float: left;
    }

    #wrapper_account #cashback .content {
        float: right;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

    #credits_table td.tools .btn-design ,
    #restruct_table td.tools .btn-design {
        margin-right: 10px;
    }

    #credits_table td.tools .btn-design:last-child,
    #restruct_table td.tools .btn-design:last-child {
        margin-right: 0;
    }

}

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

    .display {
        display: none;
    }

    #main_header {
        padding: 20px 5% 15px;
    }

    #main_header .header-content .btn-login {
        width: 120px;
    }

    #header-nav {
        float: left;
        right: 1px;
    }

    #wrapper_auth .auth-content h1, #wrapper_forgot .forgot-content h1, #wrapper_reg .reg-content h1,
    #wrapper_reg_verify .reg-verify-content h1, #wrapper_credits .credits-content h1, #verify_phone_modal h1,
    #wrapper_contract .contract-content h1, #wrapper_contract .contract-content h1, #wrapper_credit_confirm .credit-confirm-content h1,
    #wrapper_account .account-content h1, #wrapper_credit .credit-content h1, #wrapper_credit #credit_restruct h1,
    #wrapper_credit_pay .credit_pay-content h1, #wrapper_card_verify .card-verify-content h1,
    #wrapper_credit_cards .credit-cards-content h1, #verify_card_modal h1, #wrapper_profile #address_form h1,
    #wrapper_profile #contacts h1, #pay_enter_modal h1 {
        font-size: 20px;
    }

    #wrapper_account .credit-container, #wrapper_account .profile-container, #wrapper_credit #repayment_amount {
        width: 100%;
        margin: 0 auto 20px;
        max-width: 500px;
    }

    #wrapper_account .account-content h1, #wrapper_account .profile-container .label, #wrapper_credit #credit_restruct h1  {
        text-align: center;
    }

    #main_content { padding: 0 5%; }

    #main_footer { padding: 25px 5%; }

    #wrapper_contract #contract_form #code {
        width: 100%;
    }

    #wrapper_contract #contract_form .btn-read-key {
        width: 240px;
        margin: 20px auto 0;
    }

    #wrapper_contract #contract_form .btn-confirm {
        margin: 0 auto;
    }

    #wrapper_credit #credit_repayment_table {
        margin: 20px auto 0;
        width: 100%;
        max-width: 500px;
    }

    #wrapper_credit_cards .icon-visa, #wrapper_credit_cards .icon-mastercard  {
        width: 38px;
        height: 24px;
        margin-right: 20px;
        line-height: 24px;
        font-size: 24px;
    }

    #wrapper_credit_cards .card-number {
        width: 180px;
        font-size: 18px;
    }

    #verify_card_modal .important {
        padding: 15px 5%;
    }

    #verify_card_modal .important .title {
        font-size: 20px;
    }

    #verify_card_modal .important .content, #verify_card_modal .text {
        font-size: 16px;
    }

    #verify_card_modal .text, #verify_card_modal form {
        padding: 0 5%;
    }

    #wrapper_profile .profile-content {
        padding-top: 45px;
    }

    #wrapper_profile .profile-content #profile_nav_tabs {
        position: absolute;
        top: 60px;
        left: 0;
        background: var(--color-blue);
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    #profile_nav_tabs > li.nav-tab {
        padding: 0 5%;
        display: none;
    }

    #profile_nav_tabs > li.nav-tab:last-child {
        padding-bottom: 20px;
    }

    #profile_nav_tabs > li.nav-tab > a {
        color: #fff;
        font-size: 16px;
    }

    #profile_nav_tabs li.nav-header {
        padding: 0 5%;
        background: var(--color-blue);
        font-size: 36px;
        color: #fff;
        line-height: 50px;
        display: table;
        width: 100%;
    }

    #profile_nav_tabs > li.nav-header .current-nav-item {
        color: #ffd920;
        float: left;
        font-size: 16px;
        cursor: default;
    }

    #profile_nav_tabs > li.nav-header .btn-nav {
        float: right;
        cursor: pointer;
        line-height: initial;
        padding: 5px 5px 0;
        top: 3px;
        position: relative;
    }

    #wrapper_profile form .flex-box {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #wrapper_profile .flex-box .label {
        width: 100%;
        margin-bottom: 20px;
    }

    #wrapper_profile #contacts h1 {
        text-align: center;
    }

    #wrapper_profile #contacts .tools {
        width: 100%;
        text-align: center;
    }

    #wrapper_profile #contacts .btn-add-phone, #wrapper_profile #contacts .btn-add-email {
        margin: 20px auto 0;
    }

    #wrapper_profile {
        display: table;
        margin: 0 auto;
    }

    #wrapper_profile #phones, #wrapper_profile #emails, #wrapper_profile #social_networks {
        margin: 0 auto 40px;
    }

    #wrapper_profile #contacts_form .fio, #wrapper_profile #contacts_form .who, #wrapper_profile #contacts_form .sub_who, #wrapper_profile #contacts_form .tel {
        width: 100%;
        margin-bottom: 10px;
    }

    #main_header .header-contacts {
        width: 100%;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        top: 12px;
    }

    #pay_enter_modal .tools .btn-design {
        margin: 0 auto 20px;
    }

    #pay_enter_modal .tools .btn-design:last-child {
        margin: 0 auto;
    }

    #main_footer .contacts .phone {
        margin-bottom: 10px;
        display: block;
    }

    #main_footer .contacts .phone:last-child {
        margin-bottom: 0;
    }

    .dog-get-code-block,
    .dog-code-response-block,
    .dog-copy-code-block,
    .dog-input-code-block {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #wrapper_credit #credit_info .tools {
        max-width: 320px;
        margin: 0 auto;
    }

    #wrapper_credit #credit_info .tools .btn-design {
        margin-top: 20px;
        width: 100%;
    }
}

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

    .mobile {
        display: none;
    }

    #main_header { padding: 20px 1% 15px; }

    #main_header .header-logo {
        max-width: 100px;
        display: inline-block;
        vertical-align: middle;
    }

    #header-nav { float: right; }

    #main_header .header-content .btn-login {
        width: 150px;
    }

    #main_header .wrapper-header-nav {
        width: 100%;
    }

    #wrapper_auth .auth-content h1, #wrapper_forgot .forgot-content h1, #wrapper_reg .reg-content h1,
    #wrapper_reg_verify .reg-verify-content h1, #wrapper_credits .credits-content h1, #verify_phone_modal h1,
    #wrapper_contract .contract-content h1, #wrapper_contract .contract-content h1, #wrapper_credit_confirm .credit-confirm-content h1,
    #wrapper_account .account-content h1, #wrapper_credit .credit-content h1, #wrapper_credit #credit_restruct h1,
    #wrapper_credit_pay .credit_pay-content h1, #wrapper_card_verify .card-verify-content h1,
    #wrapper_credit_cards .credit-cards-content h1, #verify_card_modal h1, #wrapper_profile #address_form h1,
    #wrapper_profile #contacts h1, #pay_enter_modal h1 {
        font-size: 28px;
    }

    #wrapper_account .credit-container, #wrapper_credit #repayment_amount {
        width: 55%;
    }

    #wrapper_account .profile-container {
        width: 35%;
    }

    #main_content { padding: 0 1%; }

    #main_footer { padding: 25px 1%; }

    #wrapper_contract #contract_form #key_password,
    #wrapper_contract #contract_form .btn-read-key {
        width: 47%;
    }

    #wrapper_contract #contract_form .btn-get-code.
    #wrapper_contract #contract_form #code {
        width: 100%;
    }

    #wrapper_credit #credit_repayment_table {
        width: 40%;
    }

    #wrapper_credit_cards .icon-visa {
        /*
        width: 72px;
        height: 24px;
        margin-right: 25px;
        */
        width: 60px;
        height: 40px;
        margin-right: 15px;
        font-size: 40px;
        line-height: 40px;
    }

    #wrapper_credit_cards .icon-mastercard {
        width: 60px;
        height: 40px;
        margin-right: 15px;
        font-size: 40px;
        line-height: 40px;
    }

    #wrapper_credit_cards .card-number, #wrapper_credit_cards .input-new-card {
        margin-right: 20px;
        width: 210px;
        font-size: 18px;
    }

    #verify_card_modal .important {
        padding: 15px 5%;
    }

    #verify_card_modal .important .title {
        font-size: 20px;
    }

    #verify_card_modal .important .content, #verify_card_modal .text {
        font-size: 16px;
    }

    #verify_card_modal .text, #verify_card_modal form {
        padding: 0 5%;
    }

    #wrapper_profile .profile-content #profile_nav_tabs {
        border-bottom: 1px solid #ddd;
        margin-bottom: 25px;
    }

    #profile_nav_tabs > li.nav-tab {
        display: inline-block;
        vertical-align: middle;
    }

    #profile_nav_tabs > li.nav-tab.active > a {
        color: var(--color-blue);
        box-shadow: 0 1px 1px #ffd920;
        cursor: default;
    }

    #wrapper_profile .profile-content #profile_nav_content {
        padding: 0 0 20px 20px;
    }

    #wrapper_profile form .flex-box {
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    #wrapper_profile #phones, #wrapper_profile #emails, #wrapper_profile #social_networks {
        margin-bottom: 40px;
    }

    #wrapper_profile #contacts_form .fio {
        width: 32%;
        margin-right: 2%;
    }

    #wrapper_profile #contacts_form .who {
        width: 32%;
        margin-right: 2%;
    }
    #wrapper_profile #contacts_form .sub_who {
        width: 32%;
        margin-right: 2%;
    }


    #wrapper_profile #contacts_form .tel {
        width: 32%;
    }

    #pay_enter_modal .tools .btn-design {
        display: inline-block;
        vertical-align: middle;
        margin-right: 20px;
    }

    #pay_enter_modal .tools .btn-design:last-child {
        margin-right: 0;
    }

    #wrapper_credits #wrapper_credits_table {
        overflow: auto;
    }

    #main_footer .contacts .phone {
        margin-right: 20px;
    }

    #main_footer .contacts .phone:last-child {
        margin-right: 0;
    }

    #wrapper_credit #credit_info .tools .btn-design {
        margin: 20px 20px 0 0;
    }

    #wrapper_credit #credit_info .tools .btn-design:last-child {
        margin-right: 0;
    }

    #payment_schedule_modal .modal-dialog {
        width: 98%;
        max-width: 1600px;
    }
}

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

    #main_header a.header-logo, #language_switch {
        display: none;
    }

    #header-nav {
        top: 0;
    }

    #language_switch ul.languages-list {
        background: rgba(32, 134, 72, 0.8);
    }

    #language_switch ul.languages-list li a {
        color: #fff;
    }

    #language_switch ul.languages-list li.active a {
        color: #eee;
    }

    #wrapper_credit #credit_repayment .btn-payment, #wrapper_credit #prolongation_form .btn-prolongation {
        margin: 10px auto 0;
    }

    #wrapper_credit #prolongation_form .calculation, #prolongation_modal #prolongation_form .calculation {
        text-align: center;
        margin: 20px auto;
    }

    #main_header .header-contacts .phone-icon {
        display: none;
    }

    #credits_table,
    #credits_table thead,
    #credits_table tbody,
    #credits_table th,
    #credits_table tr,
    #restruct_table,
    #restruct_table thead,
    #restruct_table tbody,
    #restruct_table th,
    #restruct_table tr,
    #credit_calculation_table,
    #credit_calculation_table thead,
    #credit_calculation_table tbody,
    #credit_calculation_table th,
    #credit_calculation_table tr {
        display: block;
    }

    #credits_table thead tr,
    #restruct_table thead tr,
    #credit_calculation_table thead tr {
        display: none;
    }

    #credits_table tr,
    #restruct_table tr,
    #credit_calculation_table tr {
        margin-bottom: 20px;
        border-radius: 5px;
        overflow: hidden;
    }

    #credits_table td,
    #restruct_table td,
    #credit_calculation_table td {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: 100%;
        border: none;
        hyphens: auto;
    }

    #credits_table td.tools,
    #restruct_table td.tools {
        display: block;
    }

    #credits_table td.tools .btn-design,
    #restruct_table td.tools .btn-design {
        margin-top: 10px;
    }

    #credits_table td.tools .btn-design:last-child,
    #restruct_table td.tools .btn-design:last-child {
        margin-bottom: 10px;
    }

    #credits_table td .content,
    #restruct_table td .content,
    #credit_calculation_table td .content {
        padding: 10px;
        background: #eee;
        border-bottom: 1px solid #ccc;
        width: 60%;
    }

    #credits_table td:first-child .content,
    #restruct_table td:first-child .content,
    #credit_calculation_table td:first-child .content {
        font-weight: 700;
    }

    #credits_table td.tools .content,
    #restruct_table td.tools .content {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    #credits_table td:before,
    #restruct_table td:before,
    #credit_calculation_table td:before {
        width: 40%;
        padding: 10px;
        text-align: left;
        background: var(--color-blue);
        color: #fff;
        border-bottom: 1px solid #fff;
    }

    #credits_table td:first-child:before,
    #restruct_table td:first-child:before,
    #credit_calculation_table td:first-child:before {
        font-weight: 700;
    }

    #credits_table td:nth-last-child(-n+2):before,
    #restruct_table td:nth-last-child(-n+2):before,
    #credit_calculation_table td:nth-last-child(-n+1):before {
        border-bottom: none;
    }

}

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

    #main_header .header-contacts {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        right: 100px;
        top: 12px;
    }

    #credits_table td.tools .btn-design,
    #restruct_table td.tools .btn-design {
        margin-right: 10px;
    }

    #credits_table td.tools .btn-design:last-child,
    #restruct_table td.tools .btn-design:last-child {
        margin-right: 0;
    }
}

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

    #main_header .header-content .btn-logout {
        width: 150px;
    }

    #language_switch ul.languages-list {
        background: #eee;
    }

    #language_switch ul.languages-list li.active a {
        color: #ccc;
    }

    #wrapper_credit #credit_repayment .btn-payment, #wrapper_credit #prolongation_form .btn-prolongation, #wrapper_credit #prolongation_wpp_form .btn-prolongation {
        float: right;
    }

    #wrapper_credit #prolongation_form .calculation, #wrapper_credit #prolongation_wpp_form .calculation, #prolongation_modal #prolongation_form .calculation, #prolongation_modal #prolongation_wpp_form .calculation {
        float: left;
        margin-right: 20px;
    }

    #credits_table .tools,
    #restruct_table .tools {
        max-width: 240px;
    }

    #credits_table .tools .btn-design,
    #restruct_table .tools .btn-design {
        width: 100%;
        margin-bottom: 10px;
    }

    #credits_table .tools .btn-design:last-child,
    #restruct_table .tools .btn-design:last-child {
        margin-bottom: 0;
    }

    #credits_table td,
    #credit_calculation_table td,
    #restruct_table td {
        padding: 10px;
        text-align: center;
    }

    #credits_table tr:nth-child(2n+2),
    #credit_calculation_table tr:nth-child(2n+2),
    #restruct_table tr:nth-child(2n+2) {
        background: #eee;
    }

}

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

    #payment_schedule_modal table,
    #payment_schedule_modal table thead,
    #payment_schedule_modal table tbody,
    #payment_schedule_modal table th,
    #payment_schedule_modal table tr {
        display: block;
    }

    #payment_schedule_modal table thead tr {
        display: none;
    }

    #payment_schedule_modal table tr {
        margin-bottom: 20px;
        border-radius: 5px;
        overflow: hidden;
    }

    #payment_schedule_modal table td  {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: 100%;
        border: none;
        hyphens: auto;
    }

    #payment_schedule_modal table td .content {
        padding: 10px;
        background: #eee;
        border-bottom: 1px solid #ccc;
        width: 60%;
    }

    #payment_schedule_modal table td:first-child .content {
        font-weight: 700;
    }

    #payment_schedule_modal table td:before {
        width: 40%;
        padding: 10px;
        text-align: left;
        background: var(--color-blue);
        color: #fff;
        border-bottom: 1px solid #fff;
    }

    #payment_schedule_modal table td:first-child:before {
        font-weight: 700;
    }

    #payment_schedule_modal table td:nth-last-child(-n+1):before {
        border-bottom: none;
    }
}

@media screen and (min-width: 1280px) {

    #payment_schedule_modal table td {
        padding: 10px;
        text-align: center;
    }

    #payment_schedule_modal table tr:nth-child(2n+2)  {
        background: #eee;
    }
}