/* for big screen size */
@media only screen and (max-width: 1921px) and (min-width:1681px) {}

/* ============ for responsive ================ */
@media only screen and (max-width: 991px) and (min-width: 768px) {}



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

    /* Subheader */
    #navbar {
        display: block;
    }

    #mb_nav_item {
        display: none;
    }

}


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

    .row.loancalc_row_1,
    .loan-calculator,
    .loancalc_table,
    .loancalc_getstart,
    .loancalc_process,
    .loancalc_track,
    .loancalc_repayment,
    .loancalc_rating,
    .loancalc_faq,
    .loancalc_hotline,
    .loancalc_related,
    .loancalc_info,
    .loancalc_readmore,
    .survey-wrapper {
        max-width: 800px;
    }

    .loancalc_row_1 .why-we-think {
        width: 24%;
        margin-right: 1%;
        height: 305px;
    }
}

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

    .promotion-box.full-width .carousel-promo .carousel-caption {
        max-width: 992px;
        padding: 16px 24px 48px 24px;
    }

    .loan_menu_content ul li.subheader {
        height: 100px;
    }


    .loan_wrapper {
        max-width: 992px;
        margin-top: 48px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .select__trigger {
        background-position-x: 27em;
    }

    #questions_we_get_asked_often {
        margin-top: 40px;
    }

    .loancalc_info {
        margin-top: 0;
    }
}

@media (min-width: 320px) and (max-width: 768px) {
    .promotion-box.full-width {
        margin: 0 0 0 0;
    }

    .loancalc_row_1 .why-we-think {
        height: 300px;
    }
}

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

    html,
    body {
        overflow-x: hidden;
        font-size: 13px;
    }



    body.loan-calc .promotion-box.full-width .carousel-promo .carousel-inner>.item {
        height: 400px;
        overflow: hidden;
    }

    /* for banner */
    body.loan-calc .destop_view {
        display: none;
    }

    .mb_view {
        display: block;
    }

    section.promotion-box.full-width.mb_view {
        margin-top: 0;
    }

    .carousel-caption {
        text-align: center;
    }

    body.loan-calc .promotion-box.full-width .carousel-promo .promotion-content span.banner_tag {
        display: none;
    }

    .show_chart_region.dk_view {
        width: 60%;
        margin: auto;

    }

    body.loan-calc .mb_view .carousel-indicators {
        display: none;
    }

    body.loan-calc .promotion-box.full-width .carousel-promo .promotion-content h1.h1-big {
        font-size: 30px;
        font-weight: 450;
        line-height: 45px;
    }

    body.loan-calc .promotion-box .carousel-promo {
        max-height: 400px;

    }

    body.loan-calc .promotion-box.full-width .carousel-promo .carousel-inner>.item {
        height: 400px;
        overflow: hidden;
    }

    .loan_wrapper {
        padding: 30px 10px;
    }

    h2.head_title {
        font-size: 25px;
    }

    hr.loan-hr {
        width: 100%;
        margin: 30px auto;
    }

    /* menu  */
    .mega-panel>.panel>a,
    .mega-panel .last-menu li a {
        font-size: 18px;
    }


    /* Why We Think  */
    .loancalc_row_1 .why-we-think {
        width: 100%;
        padding: 20px;
        height: 220px;
        margin-bottom: 10px;
    }

    .why-we-think .img_reg {
        margin-bottom: 15px;
    }

    .hover_terms_apply>div {
        width: 90%;
    }

    /* Loan Calculator  */
    .loan_wrapper p {
        font-size: 13px;
    }

    .left_calc,
    .right_calc {
        float: unset;
        width: 100%;
        margin-bottom: 0;
        margin-top: 0;
    }

    a.key,
    a.apply {
        width: 190px;
        margin: 10px;
        display: block;
    }

    .accordion_table {
        width: 100%;
        margin-top: 20px;
    }

    p.borrow {
        width: 100%;
        font-size: 13px;
    }

    /* start Before you get started */
    .loancalc_getstart td {
        font-size: 16px;
    }

    .loancalc_getstart p,
    .loancalc_getstart ul li {
        font-size: 13px;
    }

    /* Keep Track  */
    .track {
        width: 100%;
        margin: 30px 0 20px;
    }

    .track img.media-object {
        margin-bottom: 0;
    }

    .loancalc_repayment span {
        font-size: 13px;
    }

    /* Payment schedule */
    .hover_schedule>div {
        width: 90%;
    }

    /* Rating */
    .gallery-cell {
        width: 90%;
    }

    /* FAQs */
    .faq_row {
        padding: 15px;
    }

    button.accor_dion .txt-lbl {
        width: 93%;
        display: inline-block;
    }

    button.accor_dion i.icon_faq {
        width: 5%;
        height: 20px;
    }

    .panel_p {
        padding: 0 0 0 10px;
    }

    /* Hotline  */
    .loancalc_hotline span,
    .loancalc_hotline a {
        font-size: 13px;
    }

    /* Related Loans  */
    .related-loan {
        width: 100%;
    }

    /* Loan Information  */
    .loancalc_info {
        padding-right: 0;
    }

    /* Read More  */
    .loancalc_readmore .media-left {
        width: 100%;
    }

    .desktop_readmore {
        display: none;
    }

    .mb_readmore {
        display: block;
    }




    /* Survey  */
    .survey,
    .topics-wrapper {
        width: 100%;
        margin-bottom: 2em;
    }

    .survey form button {
        font-size: 13px;
    }

    /* footer  */
    .footer .footer-content,
    .footer.footer-gray h4,
    .footer.footer-gray .footer-links ul li a {
        font-size: 13px;
    }

    .footer.footer-gray .footer-links .footer-social-box .icon {
        font-size: 2rem;
    }


    html,
    body {
        overflow-x: hidden;
        font-size: 13px;
    }


    .mb_view {
        display: block;
    }

    body.loan-calc .promotion-box.full-width .carousel-promo .carousel-inner>.item {
        height: 400px;
        overflow: hidden;
    }

    /* for banner */
    body.loan-calc .destop_view {
        display: none;
    }

    .show_chart_region.dk_view {
        width: 60%;
        margin: auto;

    }

    body.loan-calc .mb_view .carousel-indicators {
        display: none;
    }

    body.loan-calc .promotion-box.full-width .carousel-promo .promotion-content h1.h1-big {
        font-size: 32px;
        font-weight: 700;
        line-height: 40px;
        color: #172733;
      	text-align: left;
    }

    body.loan-calc .promotion-box.full-width .carousel-promo .promotion-content p.banner_text {
        font-weight: 600;
        font-size: 14px;
        line-height: 19px;
        text-align: center;
        color: #172733;
    }

    a.btn.btn-primary.mRight-16 {
        font-size: 16px;
        line-height: 22px;
        padding: 13px 105px;
        margin: 0 auto;
    }

    body.loan-calc .promotion-box .carousel-promo {
        max-height: 486px;

    }

    body.loan-calc .promotion-box.full-width .carousel-promo .carousel-inner>.item {
        height: 486px;
        overflow: hidden;
    }

    body.loan-calc .promotion-box.full-width .carousel-promo .promotion-content {
        margin: 0 auto;
        text-align: center;
        max-width: 100% !important;
        padding: 0 9%;
        width: 100% !important;
        bottom: 53px;
    }

    .loan_wrapper {
        padding: 30px 24px;
    }

    h2.head_title {
        font-size: 24px;
    }

    hr.loan-hr {
        width: 100%;
        margin: 30px auto;
    }

    /* menu  */
    .mega-panel>.panel>a,
    .mega-panel .last-menu li a {
        font-size: 18px;
    }

    /* Subheader */
    #navbar {
        display: none;
    }

    #mb_nav_item {
        display: block;
    }

    .topnav a:not(:first-child) {
        display: none;
    }

    div#myTopnav a.apply {
        width: auto;
        margin: 14px 24px;
    }

    .topnav a.icon {
        float: right;
        display: block;
        background-position: 0;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    /* Why We Think  */
    .row.loancalc_row_1 span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.25px;
        color: #455057;
    }

    .loancalc_row_1 .why-we-think {
        width: 100%;
        padding: 20px;
        height: 220px;
        margin-bottom: 16px;
    }

    .why-we-think .img_reg {
        margin-bottom: 15px;
    }

    .row.loancalc_row_1 span.para_text {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #6F7A81;
        padding-bottom: 8px;
    }

    .hover_terms_apply>div {
        width: 90%;
    }

    /* Loan Calculator  */
    .loan_wrapper p {
        font-size: 14px;
    }

    small.small input {
        text-align: left;
        width: 86%;
    }

    .loan-calculator {
        margin-top: 10px;
    }

    div#loan-calculator p {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.25px;
        color: #455057;
    }

    .top {
        min-width: 210px;
        left: 60px;
    }

    .right_calc td:first-child .top p {
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 16px !important;
        letter-spacing: -0.25px !important;
        color: #FFFFFF !important;
    }

    .left_calc,
    .right_calc {
        float: unset;
        width: 100%;
        margin-bottom: 0;
        margin-top: 0;
    }

    .right_calc tr {
        padding-bottom: 16px;
        display: inline-block;
    }

    .right_calc td,
    .right_calc td:last-child {
        width: 100%;
        float: left;
        text-align: left;
        margin-bottom: 4px;
    }

    #button_calc {
        margin-top: 24px;
        padding: 16px;
    }

    #button_calc table {
        margin-top: 24px;
    }

    .range-slider {
        margin-bottom: 5px;
        width: 100%;
        display: inline-block;
        padding: 10px 0 10px 0;
    }

    .range-slider label {
        width: 100%;
        margin-bottom: 16px;
    }

    small.small {
        width: 100%;
        height: 40px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.5px;
        color: #172733;
        text-align: left;
        float: left;
    }

    small.small input {
        text-align: left;
        width: 86%;
    }

    small.small input#period {
        width: 10%;
    }

    a.key,
    a.apply {
        width: 100%;
        margin: 10px 0;
        display: block;
    }

    .select__trigger {
        background-position-x: 34em;
    }

    .accordion_table {
        width: 100%;
        margin-top: 20px;
    }

    p.borrow {
        width: 100%;
        font-size: 13px;
    }

    .conversation-start span {
        padding: 10px 13px;
    }

    /* start Before you get started */
    .loancalc_getstart td {
        font-size: 16px;
        width: 100%;
        float: left;
        text-align: left;
        padding-top: 0;
        line-height: 25px;
    }

    .loancalc_getstart td:last-child ul {
        padding-inline-start: 22px;
    }

    .loancalc_getstart td:last-child ul li {
        font-weight: 400;
        font-size: 14px;
        letter-spacing: -0.75px;
        color: #172733;
    }

    .loancalc_getstart p,
    .loancalc_getstart ul li {
        font-size: 13px;
    }

    p.note-title {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.25px;
        color: #455057;
    }


    /* Loan Process  */
    .loancalc_process p {
        margin-top: 10px;
    }

    .loancalc_process img.media-object {
        width: 100%;
    }

    /* Keep Track  */
    .loancalc_track p {
        font-size: 16px;
    }

    .track {
        width: 100%;
        margin: 30px 0 20px;
    }

    .track span {
        font-size: 14px;
    }

    .track img.media-object {
        margin-bottom: 0;
    }

    .loancalc_repayment span {
        font-size: 13px;
    }

    /* Payment schedule */
    .hover_schedule>div {
        width: 90%;
    }

    /* Rating */
    .gallery-cell {
        width: 85%;
    }

    .flickity-prev-next-button {
        display: none;
    }

    /* FAQs */
    .faq_row {
        padding: 24px;
    }

    button.accor_dion .txt-lbl {
        width: 93%;
        display: inline-block;
    }

    button.accor_dion i.icon_faq {
        width: 5%;
        height: 20px;
    }

    .panel_p {
        padding: 0 0 0 10px;
    }

    .panel_p p {
        padding-right: 0;
    }

    /* Hotline  */
    .loancalc_hotline span,
    .loancalc_hotline p,
    .loancalc_hotline a {
        font-size: 16px;
    }



    /* Related Loans  */
    .related-loan {
        width: 85%;
        margin-right: 16px;
    }

    /* Loan Information  */
    .loancalc_info {
        padding-right: 0;
        margin-top: 0;
    }

    .loancalc_info ul li {
        font-size: 14px;
    }

    /* Read More  */
    .loancalc_readmore .media-left {
        width: 70%;
        margin-top: 5px;
    }

    .loancalc_readmore .media-left h3 {
        margin-bottom: 20px;
    }

    /* Survey  */
    .survey,
    .topics-wrapper {
        width: 100%;
        margin-bottom: 2em;
    }

    .survey form button {
        font-size: 13px;
    }

    /* footer  */
    .footer .footer-content,
    .footer.footer-gray h4,
    .footer.footer-gray .footer-links ul li a {
        font-size: 13px;
    }

    .footer.footer-gray .footer-links .footer-social-box .icon {
        font-size: 2rem;
    }


    .loancalc_rating .flickity-viewport {
        height: 310px !important;
    }

    .loancalc_related .flickity-viewport {
        transition: height 0.2s;
        height: 720px !important;
    }

    .mb_readmore .flickity-viewport {
        transition: height 0.2s;
        height: 640px !important;
    }
}



@media only screen and (max-width: 580px) {
    .loancalc_related .flickity-viewport {
        transition: height 0.2s;
        height: 540px !important;
    }

    .mb_readmore .flickity-viewport {
        transition: height 0.2s;
        height: 518px !important;
    }
}

@media only screen and (max-width: 480px) {
    .loancalc_related .flickity-viewport {
        transition: height 0.2s;
        height: 580px !important;
    }

    .mb_readmore .flickity-viewport {
        transition: height 0.2s;
        height: 518px !important;
    }

    .select__trigger {
        background-position-x: 24em;
    }
}

@media only screen and (max-width: 390px) {
    .loancalc_getstart .top {
        min-width: 36%;
        left: 20%;
        margin-bottom: 0;
        transform: translate(39%, -109%);
    }

    .flickity-slider {
        left: -25px !important;
    }

    .loancalc_related .flickity-slider {
        left: -24px !important;
    }

    .loancalc_rating .flickity-viewport {
        height: 310px !important;
    }

    .loancalc_readmore .flickity-slider {
        left: -50px !important;
    }

    .loancalc_related .flickity-viewport {
        transition: height 0.2s;
        height: 340px !important;
    }

    .mb_readmore .flickity-viewport {
        transition: height 0.2s;
        height: 350px !important;
    }

    .select__trigger {
        background-position-x: 19em;
    }

    .loancalc_rating .gallery {
        margin-top: 5px;
    }

    .line_right {
        float: left;
        width: 75%;
        margin-left: 5%;
    }

    .line_left {
        width: 20%;
        float: left;
    }

    .loancalc_hotline {
        margin-top: 0;
    }

    .loancalc_table {
        margin-top: 0;
    }
}

@media only screen and (max-width: 360px) {
    .loancalc_getstart .top {
        min-width: 36%;
        left: 24%;
        margin-bottom: 0;
        transform: translate(39%, -109%);
    }
}

@media only screen and (min-width: 768px) and (max-width: 1017px) {
    .header-placeholder .navbar .navbar-inner .img-logo {
        margin-left: 16px;
    }

    .header-placeholder.flp-type .navbar .navbar-inner .header-navigation .header-menu .submenulist {
        padding-left: 7px;
        padding-right: 7px;
    }
}

@media only screen and (min-width: 971px) and (max-width: 1017px) {
    .header-placeholder .navbar .navbar-inner .navbar-links-left ul>li>a {
        padding: 30px 16px 0;
    }
}