@charset "UTF-8";
/* CSS Document */



sup.super {
    font-size: .65em;
    vertical-align: 22%;
}

.map {
    outline: 0;
}

a.noUnderline {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
     !important
}

/*main*/
body {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.nobr {
    white-space: nowrap;
}

.fl {
    float: left;
    display: inline-block;
}

.fr {
    float: right;
    display: inline-block;
}

.mar_r {
    margin-right: 2%;
}

.center {
    margin: auto;
    display: inline-block;
}

.nofl {
    float: none;
}

.halfpg {
    width: 50%;
}

.thirdpg {
    width: 33%;
}

.twothirdpg {
    width: 66%;
}

.fullpg {
    width: 100%;
}

#wrapper,
#maincontainer {
    float: none;
    margin: 0 auto;
    width: 100%;
    clear: both;
    height: auto;
    max-width: 980px;
    overflow: hidden;

}

.masterM {
    font-size: 1.1em;
}

.grad {
    background: #DDD;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#EFEFEF, #FFF, #EFEFEF);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#EFEFEF, #FFF, #EFEFEF);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#EFEFEF, #FFF, #EFEFEF);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#EFEFEF, #FFF, #EFEFEF);
    /* Standard syntax */
}

.templateC ul li,
.templateD ul li,
.templateE ul li {
    list-style-type: none;
}

.scalable_img {
    width: 100%;
}

.scalable_img_50 {
    width: 50%;
}

/*page top*/
.perks_header {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.heroearn {
    width: 30%;
    margin-top: 3.3%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 30px;
}

.herocards {
    width: 25%;
    margin: 4.5% 0px 4.5% 5%;
}

/*tabs*/

.showMenu {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.perks_nav_full {
    height: 50px;
    margin-bottom: 20px;
    /* display: block; */
}

.perks_tab {
    display: table;
    font-weight: bold;
    font-size: 1.34em;
    text-align: center;
    width: 32%;
    /* height: 68px; */
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    line-height: 1.1em;
    cursor: pointer;
}

.perks_tab_nohl {
    color: #47484a;
    background-color: #ccc;
}

.perks_tab_hl {
    color: #FFF;
    background-color: #c03;
}

.perks_tab_nohl:hover {
    color: #c03;
    background-color: #ddd;
}

.tab_title {
    display: table-cell;
    vertical-align: middle;
}

/*hamburger*/
.perks_nav_hamburger {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: none;
    color: #fff;
}

.hamburger {
    background: none;
    position: absolute;
    top: 6px;
    right: 0;
    line-height: 28px;
    padding: 0px 7px 0px 15px;
    color: #fff !important;
    border: 0;
    font-size: 3em;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 1;
}

.cross {
    background: none;
    position: absolute;
    top: 4px;
    right: 0;
    padding: 0px 15px 0px 15px;
    color: #fff;
    border: 0;
    font-size: 3em;
    line-height: 65px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 1;
    display: none;
}

.perks_nav_mobile {
    display: none;
}


/*genpage*/
.perksPageTitle {
    font-size: 1.5em;
    color: #47484a;
    font-weight: bold;
    width: 100%;
    /* height: 100px; */
    background-color: rgba(255, 255, 255, .5);
    padding: 10px 74px;
    text-align: left;
    margin: 6px 0px 10px;
    box-sizing: border-box;
    line-height: 1.4em;
}


.calcPageTitle {
    font-size: 22px;
    color: #47484a;
    width: 100%;
    background-color: rgba(255, 255, 255, .5);
    padding: 10px 100px;
    text-align: center;
    margin: 56px 0px 10px;
    box-sizing: border-box;
    line-height: 29px;
}

/*grid card benefits*/

.gray_bg {
    background: #CCC;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #CBCBCB, #DCDCDC, #DCDCDC);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #CBCBCB, #DCDCDC, #DCDCDC);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #CBCBCB, #DCDCDC, #DCDCDC);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, #CBCBCB, #DCDCDC, #DCDCDC);
    /* Standard syntax */
}

.lGray_bg {
    background: #DDDDDD;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #DDDDDD, #EFEFEF);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #DDDDDD, #EFEFEF);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #DDDDDD, #EFEFEF);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, #DDDDDD, #EFEFEF);
}



.perks_benefits {
    box-sizing: border-box;
    display: table;
    font-size: 1em;
    color: #47484a;
    padding: 0px 20px;
    width: 100%;
    height: 84px;
    /*font-size: 22px;*/
}



.perks_benefits_text {
    vertical-align: middle;
    display: inline-block;
    /* float: left; */
    /* display: table-cell; */
    float: left;
    /* baseline-shift: 100%; */
    margin-top: 30px;
    width: 75%;
}

.purseText {
    margin-top: 23px;
}

.youCanUse {
    float: none;
}



.icon {
    width: 69px;
    text-align: center;
    float: left;
}

.bothben {
    width: 50%;
    margin: auto;
}

.no_image_benefit {
    text-align: center;
}

.apply_button {
    width: 25.91%;
    color: #fff;
    background: #c03;
    height: 38px;
    padding: 12px 10px 10px;
    margin: 40px auto 20px;
    text-align: center;
    font-size: 2em;
    font-weight: 900;
}

.no_annual {
    width: 100%;
    color: #47484a;
    background: #fff;
    text-align: center;
    font-size: 1.2em;
    font-weight: 900;
}

.member_terms {
    width: 100%;
    color: #47484a;
    background: #fff;
    text-align: center;
    font-size: 1em;
    margin-top: 10px;
}

.cardholder_button {
    box-sizing: border-box;
    width: 100%;
    color: #fff;
    background: #47484a;
    height: 47px;
    padding: 13px;
    text-align: center;
    font-size: 1.2em;
    font-weight: 700;
    margin: 19px 0px 0px;
}

.product_disclaimer {
    font-size: 0.75em;
    color: #999;
    padding: 10px;
}

.product_disclaimer p {
    margin: 8px 0;
    line-height: 1.5em;
}

.faq_disclaimer {
    font-size: .9em;
    color: #58595b;
    padding: 10px;
}

.mobilePlus {
    display: none;
}

.gray_rule {
    width: 100%;
    height: 1px;
    color: #58595b;
    background-color: #58595b;
}


/*calculator*/

.perksCalculator {
    display: table;
    width: 91.8%;
    margin: 14px auto;
}

.categoryHead {
    margin: 0px 13.1% 0px 97px;
    height: 50px;
}

.perksCalculatorHead {
    width: 123%;
    height: 24px;
    vertical-align: middle;
    font-size: 15px;
}

.inputContainer {
    width: 46%;
    float: left;
}

.perksCalculatorInput {
    width: 36%;
    float: left;
}

.perksCalculatorRow {
    display: table-row;
}

.perksCalculatoricon {
    float: left;
    display: table-cell;
    margin-right: 1.2%;
    height: 66px;
}

.perksCalculatorlabel {
    float: left;
    display: table;
    width: 111px;
    margin-right: 1.2%;
    margin-bottom: 10px;
    min-height: 66px;
    background-color: #47484a;
    color: #FFF;
    font-size: 1.2em;
    padding: 4px 5px;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.1em;
}

.perksCalculatorLabelText {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    line-height: 15px;
}

.perksCalculatorinput {
    float: left;
    display: table-cell;
    width: 49%;
    height: 66px;
    color: #47484a;
    font-size: 1.5em;
    padding-left: 17px;
    margin-bottom: 8px;
    box-sizing: border-box;
    border: 1px solid #47484a;
    margin-left: 1%;
}

.perksEquals {
    float: left;
    width: 5%;
    margin-right: 1.2%;
    height: 373px;
    color: #47484a;
    font-size: 2.5em;
    margin-top: 24px;
    text-align: center;
    padding-top: 159px;
    box-sizing: border-box;
}

.perksTotalBox {
    float: left;
    display: table-column-group;
    width: 46%;
    margin-right: 1.2%;
    background-color: #cc0033;
    color: #FFF;
    font-size: 2.5em;
    margin-top: 24px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    padding: 60px 24px 25px;
}

.perksTotalSum {
    font-size: 2em;
    font-weight: bold;
}

.perksTotalUseAwards {
    font-size: .65em;
    margin-top: 20px;
    font-weight: bold;
}

.redBoldText {
    color: #c03;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    margin-top: 5px;
}

.perksTotalPerksMembers {
    font-size: .45em;
    margin-top: 1em;
}

/*faq page*/

.answerBul {
    margin-top: -1px;
    margin-left: 10px;
}

.faqDiv {
    margin-left: 33px;
    font-size: 1.2em;
    line-height: 1.4em;
}

.faqQuestion {
    font-weight: bold;
}

.boldText {
    font-weight: bold;
}

.faqContainer {
    overflow: hidden;
}

.faqwrapper {
    width: 40%;
    float: left;
    margin-left: 6.5%;
    font-size: 1em;
    color: #47484a;
    margin-top: 20px;
    line-height: 20px;
}

.full-width {
    width: 100%;
    float: left;
}

.hidden {
    visibility: hidden;
}

.p-t-20 {
    padding-top: 20px;
}

#MyImageMap,
#MyImage {
    outline: none;
}

.member_terms a,
.product_disclaimer a,
.answerBul a {
    color: inherit !important;
}

.five_percent_cash_back {
    text-align: center;
}

.earn_up_to {
    font-size: 44px;
    line-height: 50px;
    color: #47484a;
}

.red_five {
    color: #cc0033;
    font-weight: 700;
}

.five_percent {
    display: inline-block;
    font-size: 94px;
    line-height: 84px;
}

.cash_back {
    display: inline-block;
    font-size: 40px;
    line-height: 40px;
}

.mastercard_text {
    font-size: 20px;
    color: #47484a;
}

@media only screen and (max-width : 990px) {
   
    .herocards {
        margin-top: 6%;
    }

    .heroearn {
        width: 89%;
        text-align: center;
    }

    .mastercard_text {
        padding: 0px 20px;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 414px) {
    .heroearn {
        width: 70%;
        margin-top: -15px;
        margin-left: 15%;
    }

    .herocards {
        margin-top: 8%;
        width: 41%;
    }

    .scalable_img_50 {
        width: 100%;
    }

    .heroearn {
        margin-right: 5%;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width : 799px) {
    .perks_header {
        display: inline-block;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding-bottom: 11px;

    }

    .templateC,
    .templateD {
        margin-top: 10px;
        padding: 0px;
    }

    body {
        margin: 0px;
    }

    #perksMain {
        margin-top: 0px;
    }

    .halfpg {
        width: 100%;
    }

    .perks_nav_full {
        display: none;
    }

    .herocards {
        width: 41%;
        margin: 4.5% 0px 0% 6%;
    }



    .perks_nav_mobile ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-image: none;
    }

    .perks_nav_mobile li {
        display: block;
    }

    .perks_nav_mobile ul li a {
        text-decoration: none;
        margin: 0px;
        color: #fff;
    }

    .perks_nav_mobile ul li a:hover {
        color: #fff;
        text-decoration: none;
    }

    .perks_nav_mobile a {
        text-decoration: none;
        color: white;
    }

    .perks_nav_mobile a:hover {
        text-decoration: none;
        color: white;
    }

    .perks_nav_mobile {
        z-index: 1000000;
        font-weight: bold;
        font-size: 0.8em;
        width: 100%;
        text-align: center;
        max-height: 40px;
        transition: max-height 0.15s ease-out;
        overflow: hidden;
        display: block;
    }

    .perks_nav_mobile:hover {
        max-height: 500px;
        transition: max-height 0.5s ease-in;
    }

    .perks_nav_hamburger {
        position: relative;
        display: block;
    }

    .perks_tab {
        width: 100%;
        margin-top: 4px;
        font-size: 1.7em;
    }

    .perksPageTitle {
        font-size: 1.2em;
        padding: 10px 0px;
        margin: 10px 0px;
    }

    .calcPageTitle {
        font-size: 1.5em;
        padding: 10px 0px;
        margin: 10px 0px;
        text-align: center;
    }

    .bothben {
        /*width: 93%;*/
        width: 100%;
        margin: auto;
    }

    .plusSide {
        display: none;
    }

    .perks_benefits {
        padding-left: 0px;
        font-size: 1.2em;
    }

    .perks_benefits_text {
        margin-top: 81px;
    }

    .purseText {
        margin-top: 81px;
    }

    .youCanUse {
        text-align: center;
        color: black;
        margin: 20px 10%;
        width: 80%;
        /* color: black; */
    }

    .icon {
        width: 23%;
    }

    .apply_button {
        width: 71.91%;
        margin-top: 10px;
    }

    .no_annual {
        font-size: 1em;
    }

    .member_terms {
        width: 100%;
        /*font-size: .8em;*/
        padding: 0px 14px;
    }

    .redBoldText {
        line-height: 27px;
    }

    .cardholder_button {
        width: 100%;
        height: auto;
        /*font-size: 1em;*/
        margin: 20px 0px 10px;
    }

    .product_disclaimer {
        /*font-size: .60em;*/
        margin-top: -10px;
    }

    .mobilePlus {
        display: block;
        margin-top: 10px;
    }

    /*calculator*/
    .perksCalculator {
        margin: 0px;
        width: 100%;
    }

    .perksCalculatorInput {
        width: 100%;
        float: none;
        display: block;
    }

    .perksEquals {
        width: 100%;
        margin-right: 0px;
        height: 27px;
        margin-top: 0px;
        padding-top: 4px;
    }

    .perksTotalBox {
        float: left;
        display: table-cell;
        width: 100%;
        margin-right: 1.2%;
        margin-top: 21px;
        padding: 13px 36px;
        box-sizing: border-box;
        vertical-align: middle;

    }

    .inputContainer {
        width: 100%;
    }

    .perksCalculatorlabel {
        width: 0px;
    }

    /*faq*/
    .faqwrapper {
        width: 94%;
        float: none;
        margin-left: 3%;
        margin-right: 3%;
    }

    .scalable_img_50 {
        width: 70%;
    }

    .modalCenter {
        padding-left: 5%;
        padding-right: 5%;
    }

    .hamburger {
        padding-right: 26px;
    }

    .main-content-wrapper {
        margin-top: 0px !important;
    }
}

@media only screen and (max-width : 700px) {
    .purseText {
        margin-top: 60px;
    }

}

@media only screen and (max-width: 600px) {
    .perks_benefits_text {
        margin-top: 51px;
    }
}

@media only screen and (max-width : 470px) {
    .perks_benefits_text {
        margin-top: 40px;
        font-size: 1em;
    }
}

@media only screen and (max-width : 480px) {
    .modalCenter {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

@media only screen and (max-width : 443px) {
    .purseText {
        margin-top: 27px;
    }

    .perks_benefits_text {
        margin-top: 30px;
        font-size: .8em;
    }
        .mastercard_text {
        padding: 0px 0px;
        font-size: 14px;
        color: #47484a;
    }
    .heroearn {
    margin-top: 5px;
}
.earn_up_to {
    font-size: 34px;
}
.five_percent {
    font-size: 78px;
}
.cash_back {
    font-size: 40px;
}
}

@media only screen and (max-width : 320px) {
    .perks_benefits {
        padding-left: 0px;

    }
}

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


    .perks_nav_hamburger .perks_tab,
    .main-content-wrapper .calcPageTitle {
        font-size: 1.3em;
    }

    .perksCalculator .perksCalculatoricon {
        height: 52px;
        margin-top: 7px;
    }

    .perksCalculator .perksCalculatorinput {
        width: 38%;
    }

    .perksCalculator>.inputContainer {
        padding-left: 6px;
    }

    .perksCalculator .perksCalculatorHead {
        height: 32px;
    }

    .perksCalculatorHead>span {
        font-size: 14px;
    }

    .perksCalculatorHead .categoryHead {
        margin-left: 80px;
    }

    .perksCalculatorHead .spendLevelHead {
        display: inline-block;
        width: 82px;
        text-align: center;
    }

    .perksCalculator .perksTotalBox {
        height: 476px;
    }

    .main-content-wrapper .member_terms {
        line-height: 1.3em;
    }

    .main-content-wrapper .member_terms sup {
        font-size: .8em;
    }

    .main-content-wrapper .cardholder_button {
        font-size: 1em;
    }

    #smallFooter .copyright {
        font-size: .9em;
    }

    #smallFooter .genericESpot>div {
        width: 39px;
    }
}