/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 320px) and (max-width: 479px){

    .container { width: 300px; }
    #logo { width: 150px; height: 45px; background-size: 280px 280px; }

    .primary { padding-top: 20px; }
    .primary .contact_us { display: none !important; }
        .primary .mobile_nav .contact_us { display: block !important; margin: 30px 0 0 15px; }
            .primary .mobile_nav .contact_us span { font-size: 20px; }

    .primary .mobile_nav_toggle { display: block !important; }


    .primary nav { display: none; }
    .primary nav li a { font-size: 17px; }


    .masthead_small .secondary nav li { width: 100%; text-align: left; }
    .masthead_small .secondary nav .first-item a span { display: inline-block; }


    .masthead .section .container { padding: 2em 0 0 0; }

    .masthead .section .claim { width: 60%; padding-left: 0; }
        .masthead .section .claim h2 { font-size: 20px; line-height: 20px; }
        .masthead .merchants .claim h2 { font-size: 32px; line-height: 32px; margin-bottom: 30px; }
        .masthead .financial_institutions .claim h2 { font-size: 25px; line-height: 25px; margin-bottom: 30px; }
        .masthead .partners .claim h2 { font-size: 40px; line-height: 40px; margin-bottom: 30px; }

    .masthead .section .claim ul li { font-size: 12px; line-height: 15px; }

    .masthead .section .call_to_action { width: 20%; }
        .masthead .section .call_to_action a { font-size: 12px; line-height: 12px; padding: 10px; }
        .masthead .section .call_to_action a em { display: none; }

    .masthed_nav { text-align: center; }
    .masthed_nav li { width: auto; margin: 0; }
    .masthed_nav li a span { left: 50%; margin-left: -10px; }
    .masthed_nav li a, .masthed_nav .active a, .masthed_nav li a:hover { padding: 10px; }
    .masthed_nav em { display: block; background: url(/css/site/cssimg/assets/assets.png) no-repeat; background-size: 400px 400px; text-indent: -9999px; width: 51px; height: 51px; }

        .masthed_nav .mh_nav_about { background-position: -102px -130px; }
            .masthed_nav .active .mh_nav_about, .masthed_nav li a:hover .mh_nav_about { background-position: -102px -181px; }

        .masthed_nav .mh_nav_merchants { background-position: -153px -130px; }
            .masthed_nav .active .mh_nav_merchants, .masthed_nav li a:hover .mh_nav_merchants { background-position: -153px -181px; }

        .masthed_nav .mh_nav_institutions { background-position: -204px -130px; }
            .masthed_nav .active .mh_nav_institutions, .masthed_nav li a:hover .mh_nav_institutions { background-position: -204px -181px; }

        .masthed_nav .mh_nav_partnership { background-position: -255px -130px; }
            .masthed_nav .active .mh_nav_partnership, .masthed_nav li a:hover .mh_nav_partnership { background-position: -255px -181px; }


    .features li { margin: 0 0 15px 0; width: 100%; }
        .features li .button { width: 100%; }


    .purchase_plans .plans { width: 100%; }
    .purchase_plans .plan { padding-top: 0; }
    .purchase_plans .plan li { width: 100%; margin-top: 30px; }

    .purchase_plans .apply { display: block; float: none; margin: 0 auto 30px; width: 120px; }


    .col_double, .col_left, .col_mid, .sidebar, .sidebar .button { float: none; margin-bottom: 3%; margin-right: 0; width: 100%; }
    .view_article .figure { float: none; width: 100%; }
    .head_bg h1 { font-size: 20px; }

    .intro h2 { float: none; margin-right: 0; text-align: left; margin-bottom: 20px; }
    .intro h2 .f_light { display: inline; }
    .intro .col { width: 100%; float: none; }


    .checkout_plans li,
    .checkout_services li { width: 100%; float: none; margin: 0; }
    .checkout_plans .options li,
    .checkout_services .options li { width: 100%; float: none; }


    footer .inner { padding: 30px 0; margin-top: 30px; }

    footer .internal, footer .external { float: none; width: 100%; }

    footer .internal .c_blog { margin: 0; float: right; }

    footer .external { margin-top: 30px; }
    footer .external ul { text-align: center; }
        footer .external ul li { margin: 0; }

    footer .copy { text-align: center; }

    .contact_page .clean_form { width: 100%; float: none !important; }


    .col_half .col { width: 100%; float: none; }


    .selected_plan { font-size: 17px; padding-left: 20px; }


}

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

    .container { width: 460px; }
    #logo { width: 150px; height: 45px; background-size: 280px 280px; }

    .primary { padding-top: 20px; }
    .primary .contact_us { display: none !important; }

    .primary nav { display: none; }
    .primary .mobile_nav_toggle { display: block !important; }



    .masthead_small .secondary nav li { width: 100%; text-align: left; }
    .masthead_small .secondary nav .first-item a span { display: inline-block; }


    .masthead { min-height: 400px; height: auto !important; height: 400px; }
    .masthead .section { min-height: 400px; height: auto !important; height: 400px; }
    .masthead .section .container { padding: 2em 0 0 0; }

    .masthead .section .claim { width: 60%; padding-left: 0; }
        .masthead .section .claim h2 { font-size: 20px; line-height: 20px; }
        .masthead .merchants .claim h2 { font-size: 32px; line-height: 32px; margin-bottom: 30px; }
        .masthead .financial_institutions .claim h2 { font-size: 25px; line-height: 25px; margin-bottom: 30px; }
        .masthead .partners .claim h2 { font-size: 40px; line-height: 40px; margin-bottom: 30px; }

    .masthead .section .claim ul li { font-size: 12px; line-height: 15px; }

    .masthead .section .call_to_action { width: 20%; }
        .masthead .section .call_to_action a { font-size: 12px; line-height: 12px; padding: 10px; }

    .masthed_nav { text-align: center; }
    .masthed_nav li { width: auto; margin: 0; }
    .masthed_nav li a span { left: 50%; margin-left: -10px; }
    .masthed_nav li a, .masthed_nav .active a, .masthed_nav li a:hover { padding: 10px; }
    .masthed_nav em { display: block; background: url(/css/site/cssimg/assets/assets.png) no-repeat; background-size: 400px 400px; text-indent: -9999px; width: 51px; height: 51px; }

        .masthed_nav .mh_nav_about { background-position: -102px -130px; }
            .masthed_nav .active .mh_nav_about, .masthed_nav li a:hover .mh_nav_about { background-position: -102px -181px; }

        .masthed_nav .mh_nav_merchants { background-position: -153px -130px; }
            .masthed_nav .active .mh_nav_merchants, .masthed_nav li a:hover .mh_nav_merchants { background-position: -153px -181px; }

        .masthed_nav .mh_nav_institutions { background-position: -204px -130px; }
            .masthed_nav .active .mh_nav_institutions, .masthed_nav li a:hover .mh_nav_institutions { background-position: -204px -181px; }

        .masthed_nav .mh_nav_partnership { background-position: -255px -130px; }
            .masthed_nav .active .mh_nav_partnership, .masthed_nav li a:hover .mh_nav_partnership { background-position: -255px -181px; }





    .features li { margin: 0 0 15px 0; width: 100%; }
        .features li .button { width: 100%; }


    .purchase_plans .plans { width: 100%; }
    .purchase_plans .plan { padding-top: 0; }
    .purchase_plans .plan li { width: 50%; margin-top: 30px; }

    .purchase_plans .apply { display: block; float: none; margin: 0 auto 30px; width: 120px; }


    .col_double, .col_left, .col_mid, .sidebar, .sidebar .button { float: none; margin-bottom: 3%; margin-right: 0; width: 100%; }

    .view_article .figure { float: none; width: 100%; }
    .head_bg h1 { font-size: 25px; }

    .intro h2 { float: none; margin-right: 0; text-align: left; margin-bottom: 20px; }
    .intro h2 .f_light { display: inline; }
    .intro .col { width: 100%; float: none; }


    .checkout_plans li,
    .checkout_services li { width: 100%; float: none; margin: 0; }
    .checkout_plans li .month { width: 396px !important; }
    .checkout_plans .options li,
    .checkout_services .options li { width: 100%; float: none; margin: 0 0 20px 0; }


    footer .inner { padding: 30px 0; margin-top: 30px; }

    footer .internal, footer .external { float: none; width: 100%; }

    footer .internal ul { text-align: center; }
        footer .internal ul li a { text-align: left; }

    footer .external { margin-top: 30px; }
    footer .external ul { text-align: center; }
        footer .external ul li { margin: 0; }

    footer .copy { text-align: center; }


    .contact_page .clean_form { width: 100%; float: none !important; }

    .col_half .col { width: 100%; float: none; }

    .selected_plan { font-size: 17px; padding-left: 85px; }

}



@media only screen and (min-width: 621px) and (max-width: 980px){

    .container { width: 620px; }

    .primary nav { clear: both; float: none; padding: 16px 0 0 30px; }
        .primary nav li { margin-left: 30px; }
        .primary nav li a span { display: none; }

    .primary .contact_us { font-size: 15px; }
        .primary .contact_us span { font-size: 18px; }

    .masthead_small .secondary nav li { text-align: left; }
    .masthead_small .secondary nav .first-item a span { display: inline-block; }


    .masthead .section .claim { width: 300px; }
        .masthead .section .claim h2 { font-size: 30px; line-height: 30px; }
            .masthead .what_we_do .claim h2 { font-size: 20px; line-height: 20px; }
        .masthead .section .claim ul li { font-size: 16px; line-height: 16px; }

    .masthead .section .call_to_action { width: 20%; }
        .masthead .section .call_to_action a { padding: 15px; font-size: 15px; line-height: 15px; }


    .masthed_nav li { width: auto; margin-right: 0; }

    .features li { width: 120px; margin: 0 0 5px 5px; vertical-align: top; }
    .features li .button { width: 100%; }
        .features li .button .inner { height: 55px; }

    .purchase_plans.purchase_plans_inactive .plan li span { font-size: 28px; }

    .purchase_plans .plans { width: 76%; }
    .purchase_plans .plan li { width: 25%; font-size: 12px; line-height: 18px; }
    .purchase_plans .plan li span { font-size: 35px; margin-bottom: 10px; }

    .col_double, .col_left, .col_mid, .sidebar, .sidebar .button { float: none; margin-bottom: 3%; margin-right: 0; width: 100%; }

    .intro h2 { float: none; margin-right: 0; text-align: left; margin-bottom: 20px; }
    .intro h2 .f_light { display: inline; }
    .intro .col { width: 100%; float: none; }

    .head_bg h1 { font-size: 35px; }

    .checkout_plans li,
    .checkout_services li { width: 139px; }
    .checkout_plans li .month { width: 79px; }
    .checkout_plans .durations .month { font-size: 17px; }
    .checkout_plans .options li,
    .checkout_services .options li { width: 193px; }
    .checkout_plans .content_box .inner,
    .checkout_services .content_box .inner { padding: 10px; }
    .checkout_plans .huge,
    .checkout_services .huge { font-size: 60px !important; line-height: 60px !important; }
    .checkout_plans .huge span,
    .checkout_services .huge span,
    .checkout_plans .less_huge span,
    .checkout_services .less_huge span { letter-spacing: 0; font-size: 16px; line-height: 25px; }
    .checkout_plans div .price,
    .checkout_services div .price { font-size: 40px; line-height: 40px; }

    .contact_page .clean_form { width: 100%; float: none !important; }

    .selected_plan { font-size: 17px; padding-left: 160px; }
}


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

    .container { width: 940px; }

    .masthead .section .container { padding: 2.5em 0 0 0; }
    .primary nav { clear: both; float: none; padding: 16px 0 0 0; }
        .primary nav li { margin-left: 40px; }
        .primary nav li a span { display: inline-block; margin-right: 5px; }

    .features li { margin-left: 22px; }
    .purchase_plans .plans { width: 83%; }

    .intro h2 { float: none; margin-right: 0; text-align: left; margin-bottom: 20px; }
    .intro h2 .f_light { display: inline; }
    .intro .col { width: 100%; float: none; }

    .checkout_plans li,
    .checkout_services li { width: 219px; }
    .checkout_plans li .month { width: 159px; }
    .checkout_plans .options li,
    .checkout_services .options li { width: 300px; }

}