﻿/* Mobile only */
@media only screen and (max-width:480px) {
    .mobi-hide,
    .dtop-only,
    .tblt-only { display: none; }

    .m50 { width: 50%; }
    .m100 { width: 100%; }

    body { min-width: 320px; }

    #footer { background: #222; }
    #footer .top,
    #footer .bot { background: none; padding: 20px 0 0; }
    #footer .top .badge { overflow: hidden; }
    #footer .top .logo,
    #footer .top .badge { margin-bottom: 20px; }
    #footer .top .shares { text-align: center; float: none; clear: both; border-top: 1px solid #393939; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 20px auto 0; padding: 20px 0; }
    #footer .top .shares:after,
    #footer .top .shares:before { content: ''; clear: both; display: table; }
    #footer .top .shares h4 { float: left; text-align: left; display: block; }
    #footer .top .shares .share { padding: 0; }
    #footer .top .links { border-top: 1px solid #393939; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 0 auto; padding: 20px 0 0; white-space: nowrap; }
    #footer .top .links > div { text-align: left; width: 150px; }
    #footer .top .links a { padding: 0; line-height: 40px; display: block; margin: 0; max-width: 180px; }
    #footer .top .links a:after { content: none; }

    .hp-hero { padding: 20px 0 10px; }
    .hp-hero .top h1 { text-transform: uppercase; font-size: 30px; }
    .hp-hero .top h1 strong { font-size: 21px; }
    .hp-hero .top p { display: none; }
    .hp-hero .bot .btn,
    .hp-hero .bot .btn-txt { display: block; margin: 0 auto; max-width: none; width: 100%; }

    .hp-hdiw { background: #ebebeb; padding: 25px 0 12px; color: #000; }
    .hp-hdiw h2 { margin: 0 0 25px; font-size: 21px; line-height: 25px; }

    .feature-grid article { text-align: center; }
    .feature-grid article .inner { margin: 1px auto; padding: 20px 15px; }
    .feature-grid article .ico { float: none; margin: 0 auto 5px; width: auto; }
    .feature-grid article h3 { font-size: 18px; }
    .feature-grid .group article .inner { padding: 20px 10px; height: 206px; }
    .feature-grid .group article .ico { margin: 24px auto 10px; }
    .feature-grid .group article p { font-size: 15px; line-height: 18px; }
    .feature-grid article.accept .inner { padding: 20px; }
    .feature-grid article.accept h3 { font-size: 30px; }
    .feature-grid article.accept p { font-size: 15px; line-height: 22px; max-width: none; }
    
    .feature-grid.four-wide .group .btn {margin:0}
    
    .feature-grid.vertical article { width: 100%; max-width: none}
    .feature-grid.vertical article .inner {height: auto}

    .block-two-col .grid article { float: none; width: auto; margin-bottom: 25px; }

    .page-head h1 { font-size: 30px; line-height: 35px; }
    .page-head h1 strong { display: block; }

    #features-head { padding: 20px 0 20px; }
    #features-head .page-content { display: table; }
    #features-head .top { display: block; width: auto; }
    #features-head .img-wrap { display: block; width: auto; }
    #features-head .img-wrap img { margin: 0 auto; max-width: 60%; width: auto; }

    #feature-lockin h2 { font-size: 30px; }
    #feature-lockin h2,
    #feature-lockin p { margin-left: 10px; margin-right: 10px; }
    #feature-lockin .content { padding: 30px 10px 10px; }
    #feature-lockin .btn { margin: 10px auto 0; display: block; }

    #feature-curr h2 { font-size: 30px; }
    #feature-curr .top .btn { display: none; }
    #feature-curr .bot,
    #feature-curr .bot .btn { display: block; margin: 0 auto; clear: both; }

    .navstack.standard.img-left { padding: 32px 10px; }
    .navstack.standard.img-left h2 { font-size: 30px; }
    .navstack.standard.img-left .img {  }
    .navstack.standard.img-left .top,
    .navstack.standard.img-left .mid { width: 45%; padding: 0 8px 0 0; }
    .navstack.standard.img-left .bot { clear: both; float: none; width: auto; padding: 0 3px; }
    .navstack.standard.img-left ul { float: none; width: 100%; table-layout: fixed; margin: 20px auto; }

    #feature-accept { padding: 60px 0 45px; }

    .get-card-banner-1 { padding: 20px 0; }
    .get-card-banner-1 .img { margin: 0 auto; }
    .get-card-banner-1 .img img { max-width: 187px; }

    aside .module .btn { display: block; margin: 10px auto; width: auto; }

    .currency-choose label { max-width: calc((100% / 3) - 10px); padding: 8px; height: 90px; }

    /* error  */
    .error-block { padding: 15px 0; }
    .error-block .text { margin-left: 40px; }



    .xchg-rates .currency-choose label > * { display: none; }
    .xchg-rates .currency-choose label .rate { display: inline-block; overflow: hidden; text-align: left; width: 115px; }
    .xchg-rates .currency-choose label img { display: inline-block; height: 32px; margin: 0 20px 0 0; }
    .xchg-rates .currency-choose label .rate span {
        font: 700 14px/16px "Mark for MC Book", "Mark for MC Heavy", "Mark for MC Bold", "Mark for MC Light", "Mark for MC Extra Light", "Mark for MC Thin";
    }
    .xchg-rates .currency-choose label .rate p {
        font: 400 12px/16px "Mark for MC Book", "Mark for MC Heavy", "Mark for MC Bold", "Mark for MC Light", "Mark for MC Extra Light", "Mark for MC Thin";
        margin: 0;
    }

    .xchg-rates .currency-choose h2 { font-size: 20px; }
    .xchg-rates .currency-choose .currency-choose { max-width: none; }
    .xchg-rates .currency-choose .page-content { padding: 0; }
    .xchg-rates .currency-choose label { display: block; float: none; height: 72px; max-width: none; padding: 19px !important; width: auto; margin: -1px 0 0; border-width: 1px 0; border-color: #ccc !important; }

    .xchg-rates.USD .currency-choose .USD,
    .xchg-rates.SGD .currency-choose .SGD,
    .xchg-rates.GBP .currency-choose .GBP,
    .xchg-rates.EUR .currency-choose .EUR,
    .xchg-rates.NZD .currency-choose .NZD,
    .xchg-rates.HKD .currency-choose .HKD,
    .xchg-rates.JPY .currency-choose .JPY,
    .xchg-rates.CAD .currency-choose .CAD,
    .xchg-rates.THB .currency-choose .THB,
    .xchg-rates.AED .currency-choose .AED { background: #fff; border-width: 1px 1px 1px 1px; }

    .USD .currency-choose .USD,
    .SGD .currency-choose .SGD,
    .GBP .currency-choose .GBP,
    .EUR .currency-choose .EUR,
    .NZD .currency-choose .NZD,
    .HKD .currency-choose .HKD,
    .JPY .currency-choose .JPY,
    .CAD .currency-choose .CAD,
    .THB .currency-choose .THB,
    .AED .currency-choose .AED { padding: 6px; }


    /* reload-complete  */
    .complete-head { padding-top: 30px; }
    .pay-now-section .banklink-list li { width: 30%; margin-right: 3.333%; margin-bottom: 3.333%; }
    .bpay-label img { height: 80px; }
    .bpay-label .bpay-label-code { font-size: 20px; }
    .print-link { float: none; display: block; margin-top: 10px; }
    .bpay-label .bpay-label-code { width: calc(100% - 70px ); }
    .direct-credit .bpay-label-code { width: auto; }
    .pay-now-section .col-left > .inner { padding: 20px 10px; }
    .bpay-label .bpay-label-code .inner { padding: 9px; }
    .pay-now-section .total { padding-left: 0; }
    .pay-now-section .total strong { font-size: 25px; }
    .pay-now-section h2 { font-size: 20px; }
    .pay-now-section h3 { font-size: 15px; margin-bottom: 10px; font-weight: 700; }
    .warn-msg.grey { padding-left: 60px; }
    .form-complete-details .load-summ .rate { display: block; }
    .form-complete-details .load-summ table { margin-bottom: 10px; }
    .detail-of-load td.cur { width: 30px; }
    .detail-of-load td.cur img { width: 30px; }
    .detail-of-load td.amount { font-size: 15px; }
    .detail-of-load td { padding: 10px 10px 10px 0; }
    .form-complete-details h3 { font-size: 20px; }

    /*404*/
    .page-not-found .page-head .top { width: 100%; padding-right:0; }
    .page-not-found .page-head .img-wrap { display:none; }

     /*feature-std-template*/
    .feature-std-template .page-head .btn{width:100%;}
    .std-cnt h2{font-size:20px;}

    .card-holder-offers-head .details, .card-holder-offers-head .btns { float: none; width: auto; }
    .card-holder-offers-head .btns { margin-top: 20px; text-align: left; }
    .card-holder-offers-head .btns .link { text-align: left; }
    .card-holder-offer .col { float: none !important; width: auto; padding: 0; }
    .card-holder-offer .col-details { margin-top: 20px; }
}

@media only screen and (max-width:400px) {
    #feature-manage .mid { clear: both; float: none; width: auto; padding: 0 8px; }
    .reload-form .how-card label .content {
        font: 200 12px/18px "Mark for MC Book", "Mark for MC Heavy", "Mark for MC Bold", "Mark for MC Light", "Mark for MC Extra Light", "Mark for MC Thin";
    }
    #buying-online .mid { clear: both; float: none; width: auto; padding: 0 8px; }
}
