@media only screen and (max-width:1018px) {
    .hp-hero { padding: 40px 10px; }
    .hp-hero .top h1 { margin: 0 0 10px; }
    .hp-hero .top { display: block; float: none; width: auto; text-align: center; margin: 0 auto 20px; }
    .hp-hero .mid-wrap { display: table; width: 100%; table-layout: fixed; }
    .hp-hero .anim-wrap,
    .hp-hero .bot { display: table-cell; vertical-align: middle; float: none; }

    .hp-hdiw { background-size: auto 100%; }
    .feature-grid article, .block-right-box article { float: none; margin: 0 auto; width: auto; height: auto; }
    .feature-grid article .inner { height: auto; }
    .feature-grid .group { float: none; margin: 0 auto; width: 100%; height: auto; clear: both; }
    .feature-grid .group .btn { width: 100%; display: block; clear: both; }
    .feature-grid.vertical article { float: left;}

    .get-card-banner-1 .txt { text-align: center; }

    .layout-aside .col-left { width: 543px; width: calc(100% - 332px); }
    .layout-aside aside { width: 300px; }

    .currency-choose { margin-left: auto; margin-right: auto; max-width: 570px; }
    /*.xchg-rates .currency-choose .currency-choose { margin: 30px auto 0; max-width: 570px; }*/

    /* Using your card */
    .uyc-jump-to-nav p { font-size: 25px; }
    .feature-grid.four-wide article.title { width: 100%; margin-bottom: 30px; }
    .feature-grid.four-wide .group { width: 100%; }

    #header.get-head th,
    #header.get-head td { border: 0; }
    #header.get-head td { border-left: 1px solid #626262; }

    .feature-std-template .col-left{ width:60%;}
    .feature-std-template .col-right{ width:40%;}
}

@media only screen and (max-width:930px) {
    body.sticky-nav #header .nav li { font-size: 13px; }
}

@media only screen and (min-width:901px) {
    .dtop-hide,
    .mobi-only,
    .tblt-only { display: none; }

    #header { background: #222222; width: 100%; margin: 0; top: 0; left: 0; z-index: 50; position: relative; }
    #header header { padding: 0 0 60px; }
    #header .nav { background: #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 0; width: 100%; -moz-transition: top 0.5s; -o-transition: top 0.5s; -webkit-transition: top 0.5s; transition: top 0.5s; z-index: 50; }

    #header .btn-sml { min-width: 160px; }
    #header .top .logo { float: left; }
    #header .top .logo img { display: block; float: left; }
    #header .top .logo .mc { margin: 45px 0 0 15px; }
    #header .top .page-content { padding-top: 18px; padding-bottom: 18px; vertical-align: baseline; display: table; width: 100%; }
    #header .top .page-content > a { display: table-cell;vertical-align: middle; }
        #header .links {
            font: 400 14px/1 "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";
            color: #fff;
            vertical-align: middle;
            white-space: nowrap;
            display: table-cell;
            width: 100%;
            text-align: right
        }
    #header .links li { display: inline-block; margin: 0 0 0 20px; vertical-align: middle; }
    #header .links li:last-child { margin: 0 0 0 5px; }
    #header .nav .sticky-bg { position: absolute; left: 0; width: 0; background: #222; height: 100%;  }
    #header .nav ul { display: table; width: 100%; position: relative; }
        #header nav > ul > li {
            display: table-cell;
            vertical-align: middle;
            font: 700 16px/1 "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";
            color: #222;
            text-align: center;
            padding: 0;
            background: #eee;
        }
    #header .nav li.home a { margin: 0 0 0 -10px; padding-left: 10px; text-align: left; }
    #header .nav li.logo { padding: 0; background: transparent !important; }
    #header .nav li.logo a { display: block; -moz-transition: width 0.5s, height 0.5s; -o-transition: width 0.5s, height 0.5s; -webkit-transition: width 0.5s, height 0.5s; transition: width 0.5s, height 0.5s;  position: relative; padding: 0; height:44px; display:none; }
    #header .nav li.logo img { display: block; height: 41px;float: left; padding-right: 5px}
    #header .nav li:last-child { text-align: right; padding-right: 0; }
    #header nav > ul > li a { text-decoration: none; }
    #header nav > ul > li > a { line-height: 44px; padding: 6px 5px 10px; display: block; white-space: nowrap }
    #header nav > ul > li .darr:after { content: ''; display: inline-block; vertical-align: middle; width: 9px; height: 4px; margin: 0 0 0 10px; background: url('../images/nav-darr.png') no-repeat 100% 50% transparent; }
    #header nav .sub-nav { left: 0; position: absolute; right: 0; top: 100%; right: 0; display: none; z-index: 2; -moz-transition: left 0.3s, right 0.3s; -o-transition: left 0.3s, right 0.3s; -webkit-transition: left 0.3s, right 0.3s; transition: left 0.3s, right 0.3s; }
    .sticky-nav #header .nav .sub-nav { left: -12px; right: -12px; }
    #header nav > ul > li.hover > a {  position: relative; z-index: 2; background-color:#f5f5f5; color:#000; }
    #header nav > ul > li.hover > .sub-nav { display: block; }

    #header .nav-uyc { }
    #header .nav-uyc .outer { padding: 20px 0; background: #fff; }
    #header .nav-uyc .outer:after { display: table; content: ''; clear: both; }
    #header .nav-uyc .tmc,
    #header .nav-uyc .osc { background: none no-repeat scroll 45px 25px transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; padding: 25px 30px 25px 100px; margin: 0; position: relative; line-height: 1; }
    #header .nav-uyc .tmc { background-image: url("../images/icons/nav-tmc.png"); border-right: 1px solid #ccc; width: 47%; }
    #header .nav-uyc .osc { background-image: url("../images/icons/nav-osc.png"); width: 53%; }
    #header .nav-uyc .tmc:after,
    #header .nav-uyc .osc:after { background: url('../images/icons/nav-rarr-sml.png') no-repeat 50% 50% transparent; width: 10px; height: 20px; position: absolute; right: 30px; margin: -10px 0 0; top: 50%; content: ''; }
    #header .nav-uyc .sub-nav { font: 400 15px/1 "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"; }
        #header .nav-uyc .title {
            font: 200 30px/33px "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";
            display: block;
        }

    #header .nav-focp { }
        #header .nav-focp p {
            font: 200 15px/20px"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 0 15px;
        }
    #header .nav-focp .outer { padding: 25px 0; background: #fff; display: table; width: 100%; table-layout: fixed; text-align: left; }
    #header .nav-focp .outer:after { display: table; content: ''; clear: both; }
    #header .nav-focp .features,
    #header .nav-focp .xchg,
    #header .nav-focp .comp { display: table-cell; width: 30%; background: transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 25px; margin: 0; position: relative; line-height: 1; border-left: 1px solid #ccc; vertical-align: bottom; }
        #header .nav-focp .features {
            font: 200 16px/24px"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";
            width: 40%;
            border-left: 0;
        }
    #header .nav-focp .features li { position: relative; border-top: 1px solid #ccc; text-align: left; }
    #header .nav-focp .features li:after { background: url('../images/icons/nav-rarr-lrg.png') no-repeat 50% 50% transparent; width: 10px; height: 20px; position: absolute; right: 13px; bottom: 23px; content: ''; }
    #header .nav-focp .features li a { padding: 18px 0; display: block; }
            #header .nav-focp .features .title {
                border-top: 0 none;
                font: 200 30px/35px "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";
            }
    #header .nav-focp .features .title a { padding-top: 0; }
    #header .nav-focp .features img { vertical-align: middle; margin: 0 15px 0 0; }

    #header .nav-focp .xchg,
    #header .nav-focp .comp { padding-bottom: 20px; }
        #header .nav-focp .xchg .title {
            font: 700 30px/35px "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 0 15px;
            display: block;
        }
    #header .nav-focp .xchg img { margin: 0 0 15px; max-width: 100%; }

        #header .nav-focp .comp .title {
            font: 200 20px/35px "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 0 15px;
            display: block;
        }
    #header .nav-focp .comp img { margin: -18px 0 15px; max-width: 100%; }

    #top-nav-mask {background:url('../images/50-black.png'); position: fixed; left: 0; top: 0; right: 0; bottom: 0; opacity:0; z-index:-1; 
                   -webkit-transition: all 500ms ease-out .3s;
    -moz-transition: all 500ms ease-out .3s;
    -o-transition: all 500ms ease-out .3s;
    transition: all 500ms ease-out .3s;
    }
    .mask-active #top-nav-mask { z-index:1; opacity:1; }

    body.sticky-nav #header .nav { position: fixed; top: 0; }
    body.sticky-nav #header .nav .sticky-bg {  width:50%; top:0; }
    body.sticky-nav #header .nav li.logo { padding: 0; }
    body.sticky-nav #header .nav li.logo a { height: 44px; display:block; background-color:#222; }
    body.sticky-nav #header .nav li.home a { padding: 6px 10px 10px; text-align: center; margin: 0; }

    .jump-to-nav select { display: none; }
}