* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  color: #555555;
  font-family: arial, verdana, times New Roman;
  font-size: 12px;
  margin: 0;
  padding: 0 0 142px;
float: left;
width: 100%;
}

img {
  max-width: 100%;    
  line-height: 0;
  vertical-align: bottom;
}

p,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: #056dae;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}
.no-break{
  white-space: nowrap;
}
.sec-wrap {
  padding-top: 30px;
}

@font-face {
  font-family: "interstate-regular";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/interstate-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate-regular.woff") format("woff"), url("../fonts/interstate-regular.ttf") format("truetype"), url("../fonts/interstate-regular.svg#interstateBold") format("svg");
}

@font-face {
  font-family: "Interstate-BoldCondensed";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Interstate-BoldCondensed.eot?#iefix") format("embedded-opentype"), url("../fonts/Interstate-BoldCondensed.woff") format("woff"), url("../fonts/Interstate-BoldCondensed.ttf") format("truetype"), url("../fonts/Interstate-BoldCondensed.svg#interstateBold") format("svg");
}

@font-face {
  font-family: "interstate-bold";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Interstate-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Interstate-Bold.woff") format("woff"), url("../fonts/Interstate-Bold.ttf") format("truetype"), url("../fonts/Interstate-Bold.svg#interstateBold") format("svg");
}

@font-face {
  font-family: "interstate-light";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/interstate-light.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate-light.woff") format("woff"), url("../fonts/interstate-light.ttf") format("truetype"), url("../fonts/interstate-light.svg#interstate-light") format("svg");
}

.top-bar {
  background: #333333;
  height: 26px;
}

.top-bar li {
  position: relative;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 12px;
  margin: 7px 0px 0 0px;
  padding-right: 20px;
  display: inline-block;
  font-family: "interstate-light", arial;
}

.top-bar li a {
  color: #fff;
}

.left-menu {
  float: left;
}

.right-menu {
  float: right;
}

.right-menu li:last-child {
  padding-right: 0;
}

.col-sm-1.sticky-cell {
  max-width: 112px;
  display: block !important;
  width: 150px !important;
  padding-top: 35px !important;
}

.col-sm-1.sticky-cell a {
  color: #FFF;
}


/* See rates */

.seerates, .citiCashBk, .citiCashBkPlus, .citiSMRT, .citiM1card, .citiPremier1, .citiPremier2, .citiPremier3, .citiRewd1, .citiRewd2, .citiCsbpl, .citiCsbpl2 {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  position: fixed;
  z-index: 999999;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: none;
}
/*
.seeratesPopupInner {
  width: 98%;
max-width:700px;
  background: #FFFFFF;
  padding: 20px;
  margin: auto;
  top: -100%;
  position: relative;
  -webkit-transition: top .35s ease-in-out; 
  transition: top .35s ease-in-out;
}

.seeratesPopupInner.active {
  top: 4%;
  height: 60%;
}

.seeratesPopupInner p {
font-size: 13px;
  line-height: 21px;
  font-family: "interstate-light";
  color: #333;
  padding: 5px 0px;
}

.seeratesPopupClose {
  font-family: "interstate-light";
  float: right;
  position: relative;
  top: -15px;
  right: -10px;
  padding: 10px;
  cursor: pointer;
width:22px;
height:22px;
background:url(/citigold/images/close-wt.png) center no-repeat
}*/

/* Popup 2 */


.seeratess, .citiLazada {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  position: fixed;
  z-index: 999999;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: none;
}

.seeratesPopupInners, .citiCashBkInners, .citiCashBkPlusInners, .citiSMRTInners, .citiM1cardInners, .citiPremier1Inners, .citiPremier2Inners, .citiCsbplInners, .citiCsbpl2Inners, .seeratesPopupInner, .citiPremier3Inners, .citiRewd1Inners, .citiRewd2Inners {
  width: 98%;
max-width:700px;
  background: #FFFFFF;
  padding: 20px;
  margin: auto;
  top: -100%;
  position: relative;
  -webkit-transition: top .35s ease-in-out; /* For Safari 3.1 to 6.0 */
  transition: top .35s ease-in-out;
}

.seeratesPopupInners.active, .citiCashBkInners.active, .citiCashBkPlusInners.active, .citiSMRTInners.active, .citiM1cardInners.active, .citiPremier1Inners.active, .citiPremier2Inners.active, .citiCsbplInners.active, .citiCsbpl2Inners.active, .seeratesPopupInner.active, .citiPremier3Inners.active, .citiRewd1Inners.active, .citiRewd2Inners.active {
  top: 4%;
}
.seeratesPopupInner.active {
  height: 38% !important;
}

.seeratesPopupInners p, .citiCashBkInners p, .citiCashBkPlusInners p, .citiSMRTInners p, .citiM1cardInners p, .citiPremier1Inners p, .citiPremier2Inners p, .citiCsbplInners p, .citiCsbpl2Inners p, .seeratesPopupInner p, .citiPremier3Inners p, .citiRewd1Inners p, .citiRewd2Inners p {
  font-size: 13px;
  line-height: 21px;
  font-family: "interstate-light";
  color: #333;
  padding: 5px 0px;
}

.seeratesPopupCloses, .citiCashBkClose, .citiCashBkPlusClose, .citiSMRTClose, .citiM1cardClose, .citiPremier1Close, .citiPremier2Close, .citiCsbplClose, .citiCsbpl2Close, .seeratesPopupClose, .citiPremier3Close, .citiRewd1Close, .citiRewd2Close {
  font-family: "interstate-light";
  float: right;
  position: relative;
  top: -15px;
  right: -10px;
  padding: 10px;
  cursor: pointer;
width:22px;
height:22px;
background:url(/citigold/images/close-wt.png) center no-repeat
}


.popTable {
  margin: 10px 0px;
max-width:100%;
}

.popHeader,.popTable th {
  background: #f1f1f1;
  font-family: "interstate-light";
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ccc;
  padding: 8px 16px;
  color: #333;
}

.popInnerCnt ,.popTable td{
  font-family: "interstate-light";
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 8px 16px;
  color: #333;
}

.scroll-bar-popup {
  height: 400px;
  overflow: auto;
  margin: 30px 0px 0px;
  padding: 0px 0px 20px;
  width: 100%;
}


/* See rates */

.blue-bar {
  height: 55px;
border-bottom: 1px solid #ccc;
  position: relative;
}
.top-border {
  float: left;
  width: 100%;
}
.bor-dark {
  width: 7px;
  height: 7px;
  background-color: #002a54;
  float: left;
}
.bor-light {
  width: calc(100% - 7px);
  float: left;
  height: 7px;
  background-color: #5fc6f1;
}
.logo {
  background: #056dae url(../images/logo.png) no-repeat scroll center 15px;
  background-size: 68%;
  width: 50px;
  height: 50px;
float: left;
}

.blue-bar a {
  display: block;
}

#Menu {
  width: 20px;
  height: 14px;
  float: left;
  margin: 18px 0 0;
  cursor: pointer;
}

#Menu.closed {
  background: url(../images/mob_burger_menu.png) no-repeat scroll 0 0;
}

#Menu.opened {
  background: url(../images/mob_header_close_icon.png) no-repeat scroll 0 0;
}

.loginMobile {
   float: right;
  color: #333;
  line-height: 63px;
  height: 63px;
  font-family: "interstate-bold", arial;
  font-size: 16px;
  padding: 0 18px;  
}
.blue-bar .searchHeader{
  float:right;
  margin: 16px 15px 0 0;
}
body.menu-opened {
  overflow: hidden;
}
.fixedHeader {
  position: absolute;
  top: 55px;
  overflow: auto;
  height: calc(100vh - 81px);
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 9;
width: 100%;
}
.fhInner {
  position: relative;
  width: 100%;
  top: 0;
}
.menuBar .container{
  padding: 0;
}
.menuBar {
  height: auto;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.menubar-ul>li.ddown>a {
  background: url('../images/mob_chevron_down.png') calc(100% - 28px) center no-repeat;
  display: block;
}

.menubar-ul>li.ddown>a.up {
  background: url('../images/mob_chevron_up.png') calc(100% - 28px) center no-repeat;
}

.menubar-ul>li {
  padding: 0
}

.menuShadow .container {
  padding: 0;
}

.menuBar .mCSB_inside>.mCSB_container {
  margin-right: 0 !important;
}

.menubar-ul>li>a {
  font-size: 16px;
  line-height: 16px;
  display: block;
  padding: 17px 20px 17px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #333333;
}

.menubar-ul>li:hover>a {
  color: #0E2A48;
}

.innerDropdowns {
  position: relative;
  width: 100%;
  top: 0;
  display: none;
}

.innerDropdowns .innerDropdowns {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
}

.innerDropdowns li a {
  padding: 15px 20px 15px 35px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #333333;
  font-size: 14px;
  line-height: 14px;
  background: #eee url('/views/citi-priority/images/mobile/mob_chevron_right.png') calc(100% - 28px) center no-repeat;
  display: block;
}

.innerDropdowns .innerDropdowns li a {
  padding: 15px 20px 15px 50px;
  background: #eee;
}

.dropdown-menu {
  display: none;
}

.sub-navbar-list {
  width: 100%;
}

.searchBar{
  position: absolute;
  top: 70px;
  padding-top: 0;
  float: left;
  display: none;
  background: #fff;
  width: 100%;
  left: 0;
  padding: 30px 0 0;
  z-index: 3;
}
.searchBar .close a, .searchIcon {
  display: none;
}
.cse .gsc-control-cse, .gsc-control-cse {
  padding: 0 !important;
  border: none !important;
}
.searchBar form.gsc-search-box {
  margin-left: 0 !important;
  margin-bottom: 0;
}
#gssSearchBox table.gsc-search-box {
  width: calc(100% - 65px) !important;
}
.gsc-search-box input, #gssSearchBox .gsc-input-box, #gssSearchBox .gsc-input-box-hover, #gssSearchBox .gsc-input-box-focus {
  border: 0px !important;
  box-shadow: none !important;
  height: auto !important;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.gsc-search-box input.gsc-input {
  float: left;
  margin-left: 0 !important;
  padding: 18px 0 18px 20px !important;
  border-bottom: none !important;
  background: none !important;
  text-indent: 0 !important;
}
.gsc-search-button {
  margin-left: 2px;
}
.gsc-search-box input.gsc-input {    border: 0px;
  border-bottom: 1px solid #cccccc !important;
  font-family: "interstate-light";
  font-size: 16px !important;
  padding-bottom: 12px !important;
  height: auto !important;
  margin-left: 0 !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  border-radius: 0px;
  background: none !important;
  text-indent: 0 !important;
  float: left;margin-left: 0 !important;padding: 18px 0 18px 20px !important;border-bottom: none !important;}
td.gsc-search-button {width: 50px !important;height: 55px !important;float: left;}
.gsc-search-button-v2 {
  display: block;
  border: none !important;
  background-color: transparent !important;
  padding: 15px 20px !important;
  background: url(../images/mob_search_icon.png)no-repeat 15px 16px !important;
  cursor: pointer;
  outline: none !important;
}
.gsc-search-button-v2 svg {
  width: 0 !important;
}
.searchBar .close a {
  color: #000000;
  position: absolute;
  right: 0px;
  top: 15px;
  background: url(../images/close_navigation.png) no-repeat scroll 0px 0px;
  width: 17px;
  height: 17px;
  display: block;
} 
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: center;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: 'Interstate-BoldCondensed';
  font-size: 80px;
  font-style: italic;
  line-height: 1;
}

h2 {
  font-family: 'Interstate-Bold';
  font-size: 26px;
  line-height: 1.19;
  color: #333333;
}

h3 {
  font-family: 'Interstate-Bold';
  font-size: 21px;
  line-height: 1.05;
  color: #333333;
  padding-bottom: 10px;
}

.btn {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Interstate-Bold';
  font-size: 16px;
  line-height: 1.38;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  padding: 9px 44px;
  background: #f16f2e;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f16f2e 0%, #ec5529 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f16f2e 0%, #ec5529 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f16f2e 0%, #ec5529 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

main {
  font-family: 'Interstate-Light';
  font-size: 16px;
}

section {
  padding: 40px 0;
}

.banner {
  background: url(../images/banner.jpg) no-repeat center;
  color: #fff;
  text-align: center;
  padding: 0;
  background-size: cover;
}
.banner-top{
  margin-top: 59px;
}
.banner .col {
  display: table;
  height: 450px;
}

.banner-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.banner h2 {
  font-size: 21px;
  color: #fff;
}

.banner p {
  font-family: 'interstate-regular';
  margin: 55px 0 18px;
  font-size: 17px;
}

.pay-your-way {
  text-align: center;
}

.pay-your-way-box {
  margin-top: 30px;
  display: table;
}

.pay-your-way-left,
.pay-your-way-right {
  display: table-cell;
  vertical-align: top;
  text-align: left;
}

.pay-your-way-right {
  padding: 0 30px;
}

.pay-your-way-right h3 {
  text-align: left;
}

.pay-your-way-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}

.pay-your-way-box.first {
  margin-top: 0;
}
.pay-your-way-info{
  font-size: 12px;
  color: #999;
  margin: 10px 0 0;
  text-align: center;
}

.calendar {
  background: url(../images/calendar.png) no-repeat;
}

.tick {
  background: url(../images/tick.png) no-repeat;
}

.mobile {
  background: url(../images/mobile.png) no-repeat;
}

.shop {
  background: url(../images/shop.png) no-repeat;
}

.love {
  background: url(../images/love.png) no-repeat;
}

.promotion {
  background: #f6f6f6;
  vertical-align: middle;
}

.promotion-img {
  width: 100%;
}

.promotion-inner {
  padding: 24px;
  text-align: left;
  color: #002a54;
}

.promotion-title {
  font-size: 26px;
  font-weight: 300;
  line-height: 1.14;
}
.promotion-content{
  font-family: "interstate-light";
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: normal;
  color: #002a54;
  margin-top: 20px;
}
.promotion-inner p {
  padding: 20px 0 0;
}

.instalments {
  background: #f6f6f6;
  text-align: center;
}

.cal-que {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #333333;
  margin: 15px 0;
}

.instalment-value {
  font-size: 34px;
  font-weight: 300;
  color: #056dae;
  margin-bottom: 20px;
}

.instalment-sub-title {
  font-family: 'interstate-regular';
  margin: 15px 0 20px;
}

.cal-months {
  background: #fff;
  color: #056dae;
  padding: 15px;
  margin-top: 2px;
}

.cal-months span {
  font-size: 21px;
}

.instalment-info {
  font-size: 12px;
  color: #999;
  margin-top: 25px;
}

.flexi-thumbnail {
  position: relative;
}

.flexi-thumbnail img {
  width: 100%;
}

.flexi-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  padding: 52px 30px 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
  font-size: 26px;
  line-height: 0.85;
  color: #ffffff;
}

.flexi-disc {
  padding: 20px 0 0;
  font-size: 14px;
  color: #333;
}
.flexi-cta{
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0 0;
}

.citi-mobile-app {
  text-align: center;
  background: linear-gradient(to bottom, rgb(255, 255, 255) 95%, #ccc 100%);
  padding-top: 0;
}

.app-store {
  margin: 40px 0 0;
}

.app-store a {
  display: inline-block;
  padding: 0 10px 10px 0;
}

.app-disc {
  padding: 20px 0 0;
}

.app-disc a {
  color: #056dae;
}

.app-disc a:hover {
  text-decoration: none;
}

.faq {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 95%, #ccc 100%);
}

.accordion {
  border: 1px #056dae solid;
  border-radius: 4px;
  padding: 25px 30px;
  margin-top: 20px;
  cursor: pointer;
}

.accordion.first {
  margin-top: 0;
}

.accordion-head {
  background: url(../images/plus-icon.png) no-repeat right 5px;
  background-position: 0 right;
}

.active .accordion-head {
  background: url(../images/minus-icon.png) no-repeat right 16px;
  background-position: 0 right;
}

.faq h4 {
  text-align: left;
  font-size: 21px;
  font-weight: normal;
  color: #056dae;
  cursor: pointer;
  padding-right: 30px;
}

.panel {
  display: none;
  overflow: hidden;
  margin: 0;
}

.panel-inner {
  padding: 15px 0 0;
}

.show-faq {
  text-align: center;
  display: block;
  padding: 20px 0 40px;
  text-decoration: none;
  color: #056dae;
  font-family: 'Interstate-Bold';
}

.terms-conditions {
  background: #f6f6f6;
  padding-top: 0;
  padding-bottom: 0;
}

.terms-conditions-inner {
  padding: 45px 0;
}

.terms-conditions-inner h4 {
  font-family: 'Interstate-Bold';
  text-align: left;
  padding-bottom: 5px;
}

footer {
   padding: 0;
  font-size: 12px;
  line-height: 18px;
  position: relative;
  clear: both;
}
.footer-bot {
  background-color: #444;
  padding-top: 15px;
  color: #fff;
  float: left;
  width: 100%;
  font-family: interstate-light, arial;
}
.footer-top {
  float: left;
  width: 100%;
  background-color: #f6f6f6;
}
.footerMenu {
  border-bottom: 1px solid #a8a8a8;
  overflow: hidden;
  padding: 7px 0 20px;
  width: 100%;
  position: relative;
  z-index: 999;
}

.footerLeftLink {
  float: left;
  padding: 4px 7px 0 0;
}

.footerMenu a {
  color: #666; 
  text-decoration: none;
  font-family: interstate-bold, arial;
  font-size: 15px;
}

.footerLinksList {
  float: none;
  padding: 0 23px 0 0;
  position: relative;
  margin-top: 0px;
}

.appFooterScrolTop,
.appFooterScrolBot {
  height: 16px;
  position: absolute;
  right: -5px;
  top: 4px;
  width: 21px;
  float: right;
}

.appFooterScrolTop {
  background: url(../images/arrow.png) no-repeat scroll 0 0 transparent;
  background-size: 9px 14px;
}

.appFooterScrolBot {
  background: url(../images/show-arrow.png) no-repeat scroll 0 2px transparent;
  background-size: 14px 9px;
}

.footerLinksList a {
  color: #fff;
  padding-bottom: 4px;
  display: inline-block;
}
.footerLeft {
  float: left;
}
.footerRhtLink {
  float: right;
  color: #666;
  padding: 4px 0 0;
}

.footerList {
  float: left;
  padding: 10px 0 0;
  width: 100%;
  margin: 0;
}

.footerLinksList ul li {
  float: left;
  padding: 0 15px 0 0;
  list-style: none;
  margin: 0;
}

.footerDisclaimer {
  overflow: hidden;
  padding: 16px 0 35px;
  position: relative;
  z-index: 999;
}

.footerLogo {
  background: url(../images/logo_footer.gif) no-repeat;
  width: 28px;
  height: 16px;
  float: left;
  background-size: 100% 100%;
}

.copyRight {
  float: left;
  text-align: left;
  color: #fff;
  padding: 10px 0 0 0;
}
.copyRightTxt {
  float: left;
  padding-top: 20px;
  font-family: interstate-bold, arial;
}

footer .footer-border {
  width: 100%;
  height: 60px;
  margin: 0 auto;
  padding: 0;
  background-color: #f6f6f6;
}
footer .footer-border span {
  display: inline-block;
  vertical-align: top;
}
footer .footer-border .citi-blue {
  background-color: #056dae;
  width: 55px;
  height: 55px;
  float: right;
}
footer .footer-border .blue {
  background-color: #0a91cb;
  width: 90px;
  height: 45px;
  float: right;
  margin-top: 35px;
}
footer .footer-border .med-blue {
  background-color: #32b2e4;
  width: 90px;
  height: 8px;
  float: right;
  margin-top: 47px;
}
footer .footer-border .dk-blue {
  background-color: #002a54;
  width: 10px;
  height: 5px;
  float: right;
  clear: both;
}
footer .footer-border .lt-blue {
  background-color: #5fc6f1;
  width: calc(100% - 10px);
  height: 5px;
  display: block;
  float: right;
  overflow: hidden;
}
.citi-logo-mobile {
  float: right;
  display: none;
  margin: 29px 15px 0 0;
}
.citi-logo-desktop {
  float: right;
  width: 65px;
  margin: 30px 15px 0 0;
}

#back-top {
  bottom: 0;
  padding: 0;
  position: fixed;
  right: 0;
}

#back-top span {
  background: url("../images/back-to-top.png") no-repeat scroll 0 0 #DDDDDD;
  border-radius: 3px 3px 3px 3px;
  display: block;
  height: 33px;
  margin-bottom: 0;
  transition: all 1s ease 0s;
  width: 33px;
  z-index: 9999;
}

.slick-slide {
  outline: none;
}

.slider-wrapper {
  position: relative;
}

.slider-wrapper::before,
.slider-wrapper::after {
  content: '';
  position: absolute;
  height: 11px;
  width: 2px;
  top: -5px;
  z-index: 0;
}

.slider-wrapper::before {
  left: 0;
  background: #056DAE;
}

.slider-wrapper::after {
  background: #ccc;
  right: 0;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-radius: 0;
  border: 0;
}

.ui-slider-horizontal {
  height: 3px;
}

.slider {
  height: 1px;
  background: #ccc;
  border: 1px solid #ccc;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  font-weight: normal;
  color: #FFF;
  background: #056DAE url('../images/slider-marker.png') no-repeat;
  display: block;
  width: 24px !important;
  height: 25px !important;
  padding: 0;
}

.ui-slider-range {
  background: #056DAE;
  padding: 2px;
  top: -2px !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 0;
  font-size: 10px;
  border-radius: 100%;
  text-align: center;
  padding-top: 4px;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default:hover {
  color: #FFF;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -13px;
  z-index: 1;
}

.sliderBottom {
  font-family: 'interstate-regular';
  margin: 15px 0 10px 0;
  display: table;
  width: 100%;
  font-size: 15px;
  color: #9b9b9b;
}

.sbLeft {
  display: table-cell;
  width: 50%;
  text-align: left;
}

.sbRight {
  display: table-cell;
  width: 50%;
  text-align: right;
}

.iValText {
  width: 250px;
  height: 48px;
  border: 0;
  padding: 5px;
  font-size: 34px;
  color: #056dae;
  outline: none;
}

.icnSave {
  content: '';
  display: block;
  position: absolute;
  right: -20px;
  top: 13px;
  width: 18px;
  height: 28px;
  background: url(../images/save.png) no-repeat;
  cursor: pointer;
}

.icnEdit {
  content: '';
  display: block;
  position: absolute;
  right: -25px;
  top: 18px;
  width: 18px;
  height: 28px;
  background: url(../images/edit.png) no-repeat;
  cursor: pointer;
}

.ivEdit,
.ivSave {
  position: relative;
}

.ivSave {
  display: none;
}

.faq .row:nth-child(n+3) {
  display: none;
}

/******* Paylite ******/
.paylite-banner{
  background: url(../images/paylite-banner.png) no-repeat top center;
}
.paylite-banner .col{
  display: block;
  height: 450px;
}
.paylite-banner .banner-inner{
  display: block;
  margin: 0 auto;
  max-width: 320px;
}
.banner.paylite-banner p{
  margin-top: 35px;
}
.first-title{
  position: absolute;
  left: 50%;
  top: 4%;
}
.first-title span{
  position: relative;
  left: -50%;
}
.purchases{
  background: #f6f6f6;
  text-align: center;
  padding: 0;
}
.purchases-inner h2{
  font-size: 26px;
  padding-bottom: 20px;
  padding-top: 40px;
}
.purchases-inner p{
  padding-bottom: 33px;
}
.purchases-inner{
  box-shadow: inset 0px -20px 20px -10px #ccc;
  margin-left: -15px;
  margin-right: -15px;
  padding: 0 20px;
}
.mobile-img{
  position: relative;
  display: inline-block;
}
.mobile-img .mobile-icon-left, .mobile-img .mobile-icon-right{
  position: absolute;
  top: 50px;
}
.mobile-img .mobile-icon-left{
  right: -50px;
}
.mobile-img .mobile-icon-right{
  left: -50px;
}
.purchases-value{
  padding: 20px 20px 40px;
  margin: 0 -15px;    
  font-family: 'interstate-regular';
  line-height: 13px;
}
.purchases-value p{
  padding: 8px 0 10px;
  text-align: center;
  position: relative;
}
.purchases-blue p span{
  font-size: 8px;
}
.purchases-blue{
  background: #fff;
}
.purchases-blue p{
  background: #4c77a1;
  color: #fff;
  font-size: 12px;
}
.purchases-white{
  background: #f6f6f6;
}
.purchases-white p{
  background: #fff;
  color: #056dae;
  font-size: 14px;
}
.purchases-white p span{
  font-size: 10px;
}
.tick-icon{
  position: absolute;
  top: 13px;
  left: 25px;
  width: 19px;
  height: 19px;    
  background: url(../images/tick-icon.png) no-repeat;
  display: block;
}

/******* Quick Cash ******/
.quickcash-banner h1{
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 10px;
}
.banner.quickcash-banner h2 {
  font-size: 38px;
  font-family: 'interstate-regular';
}
.quick-cash-calc{
  padding-top: 0;
}
.form-wrap{
  text-align: center;
  width: 230px;
  margin: 30px auto 0;
}
.form-title{
  margin-bottom:8px;
}
.form-col{
  margin-bottom: 20px;
  border-bottom: 1px #056dae solid;
  padding-bottom: 4px;
}
.form-control-input, .form-control-select{

  color: rgba(5, 109, 174, 0.95);
  background: none;
  border: 0;
  outline: none;
  font-size: 28px;
  width: auto;
  max-width: 100%;
  text-align: center;
}
.selectBox-dropdown .selectBox-label{
  text-align: center;
  width: 100% !important;
}

.equal{
  font-size: 42px;
  text-align: center;
  line-height: 22px;
}
.form-value{
  display: table;
  margin: 10px auto 0;
}
.form-value-cell{
  display: table-cell;
}
.form-value-cell-left{
  vertical-align: middle;
  padding-right: 20px;
  line-height: 60px;
}
.form-value-cell-right{
  color: #000;
}
.amount{
  font-size: 42px;
}
.month{
  font-size: 21px;    
  font-family: 'interstate-regular';
}
.calc-info{
  font-size: 12px;
  color: #999;
  margin: 20px 0 0;
  text-align: center;
}
.citi-mobile-works{
  background: #f6f6f6;
}
.citi-mobile-slider{
  margin-top: 40px;
  text-align: center;
}
.citi-mobile-slider::before{
  content: '';
  position: absolute;
  top: 360px;
  width: 100%;
  height: 20px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #d4d4d4);
  left: 0;
  z-index: 0;
}
#apply-site-tab{position:relative}
#apply-site-tab:before{
content: '';
  position: absolute;
bottom: 275px;
  width: 100%;
  height: 20px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #d4d4d4);
  left: 0;
  z-index: 0;
}
.screen-1-wrap{
  position: relative;
  margin: 0 auto;
}
.screen-1-icon{
  position: absolute;
  top: 30px;
  right: -20px;
}
.citi-mobile-img{
  height: 380px;
  overflow: hidden;
}
.slick-slide .citi-mobile-img img{
  text-align: center;
  margin: 0 auto;
}
.citi-mobile-info{
  text-align:center;
  position: relative;
  top: 15px;
  
}
.citi-mobile-info i{
  width: 30px;
  height: 30px;
  border: 2px #056dae solid;
  display: block;
  margin: 0 auto;
  font-style: normal;
  color: #056dae;
  border-radius: 15px;
  margin-bottom: 10px;    
  font-size: 21px;
  line-height: 21px;
  font-family: 'interstate-regular';
}
.slick-dots{
  bottom: -40px;
}

.sticky{
  background-color: #000;
  color: #fff;
  padding: 0 0 20px;
  position: fixed;
  z-index: 99998;
  bottom: 0;
  width: 100%;
  font-family:  'interstate-regular';
  background: url(../images/sticky-bg.png) center;
  background-size: cover;
}
.sticky .sticky-cell{
  padding: 20px 20px 0;
  text-align: center;
}
.sticky .sticky-cell span{
  font-size: 18px;
  font-weight: bold;
}

.breadcrumb-sec {
display: block;
padding: 10px 0;
}
.breadcrumb li {
display: inline-block;
}
.breadcrumb li a, .breadcrumb li span {
font-size: 16px;
line-height: 24px;
}
.breadcrumb li a img {
vertical-align: middle;
margin: 0 8px;
}

@media (min-width: 480px) {    
  .purchases-value p{
      width: 335px;
      margin: 0 auto;
  }
border .med-blue {
      width: calc(122px);
  }
}

@media (min-width: 576px) {
  body{
      padding: 0 0 90px;
  }
  .container {
      max-width: 100%;
  }
  .sticky{
      padding: 0;
  }
  .sticky .row{
      display: table;
  }
  .sticky .sticky-cell{
      display: table-cell;
      vertical-align: middle;
      text-align: left;
      height: 90px;
      padding: 20px;
  }
  .sticky .sticky-cell:nth-child(2){
      text-align: right;
  }
}

@media(min-width:768px) {
  h1 {
      font-size: 120px;
  }
  h2 {
      font-size: 38px;
  }
  section {
      padding: 60px 0;
  }
 
  .banner .col {
      height: 520px;
  }
  .sec-wrap {
      padding-top: 60px;
  }
  .banner h2 {
      font-size: 24px;
  }
  .pay-your-way-box {
      margin-top: 0;
      display: inherit;
  }
  .pay-your-way-left,
  .pay-your-way-right {
      display: inherit;
  }
  .pay-your-way-right h3 {
      text-align: center;
  }
  .pay-your-way-right {
      padding: 0;
      text-align: center;
  }
  .pay-your-way-info{
      margin-top: 40px;
      font-size: 16px;
  }
  .promotion-inner {
      padding: 25px 40px;
  }
  .promotion-title {
      font-size: 26px;
  }
  .promotion-inner p {
      padding: 30px 0 0;
  }
  .accordion {
      margin-top: 0;
  }
  .faq-row {
      margin-top: 20px;
  }
  .footerLinksList {
      float: right;
      padding: 0;
      margin-top: 4px;
      width: auto;
  }
  .footerList {
      padding-top: 6px;
      float: right;
  }
  .footerLinksList ul li{
      padding: 0 0 0 15px;
  }
  .footerLinksList a {
      padding-bottom: 0;
  font-size: 12px;
  }
  .copyRight {
       text-align: left;
      padding: 10px 0 0 0;
  }
  .slick-dotted.slick-slider {
      margin-bottom: 0;
  }
  .slick-dots {
      display: none;
  }
  .cal-month-divider {
      margin-top: 30px;
  }
  .faq .row:nth-child(3) {
      display: flex;
  }

  .paylite-banner .col{
      height: 500px;
  }
  .paylite-banner .banner-inner {
      max-width: 400px;
      padding-top: 25px;
  }
  .first-title {
      top: 10%;
  }
  .purchases-value{
      padding: 20px 20px 30px;
  }
  .purchases-blue{
      background:#f6f6f6; 
      border-bottom: 10px #fff solid;
  }

  .quickcash-banner h1{
      line-height: 120px;
  }
  .banner.quickcash-banner h2 {
      font-size: 55px;
  }
  .form-wrap{
      width: 335px;
  }
  .form-title{
      font-size: 21px;
  }
  .form-control{
      font-size: 42px;
  }
  .equal {
      line-height: 35px;
      margin-top: 20px
  }
  .amount {
      font-size: 60px;
  }
  .form-value-cell-left {
      font-size: 21px;
  }
  .calc-info {
      font-size: 16px;
  }
  footer .footer-border {
  height: 110px;
}
footer .footer-border .citi-blue {
  height: 100px;
  width: 100px;
}
footer .footer-border .blue {
  margin-top: 55px;
}
footer .footer-border .med-blue {
  margin-top: 85px;
  height: 15px;
  width: 120px;
}
footer .footer-border .lt-blue, footer .footer-border .dk-blue {
  height: 10px;
}
}

@media(min-width:992px) {
  .container {
      max-width: 100%;
  }
  .promotion-inner {
      padding: 54px 60px;
  }
  .promotion-title {
      font-size: 30px;
  }    
  .purchases-inner{
      margin: 0;
      box-shadow: none;
  }  
  .purchases-shadow{
      box-shadow: inset 0px -20px 20px -10px #ccc;
  }
  
  .purchases-value{
      margin: 0;
  }
  .purchases-blue{
     border: 0;
  }
  .purchases-left,.purchases-blue{
      border-right: 5px #fff solid;
  } 
  .purchases-right, .purchases-white{
      border-left: 5px #fff solid;
  }
.footerLinksList a {
  font-size: 15px;
  }
}

@media(min-width: 1025px) {
.blue-bar {
      height: 70px;		
  }
   #Menu { 
       display: none 
   } 
 
  .logo {
      float: left;
      width: 70px;
      height: 63px;
  }
  .blue-bar .searchHeader {
      display: block;
      margin: 23px 15px 0 0;
      float: right;
  }
  .fixedHeader{
      width: calc(100% - 200px);
  float: left;
      position: relative;
  padding-left: 15px;
      top: 0;
      height: auto;
      background: none;
      display: block !important;
  overflow: inherit;
  }
  .menuBar{background:#fff;width: 100%;top:0;
  box-shadow: none;
  border: 0;
      position: relative;
      z-index: 9;
      font-family: "interstate-light",arial;
  }
  .menuBar .container{
      padding: 0 15px;
  }
  .sub-navbar-list {
      width: auto;
      float: left;
  }
  .menubar-ul > li {
      position: relative;
      display: block;
      float: left;
  }
  .menubar-ul>li>a{        
      font-size: 16px;
      line-height: 24px;
  }
  .menubar-ul>li.ddown>a, .menubar-ul>li.ddown>a.up{
      background: none;
      padding: 0;
      border: 0;
  }
  .menubar-ul > li:after, .logInbtn:after {content: "";position: absolute;width: 0px;height: 5px;left: 0px;right: 0px;bottom: 0px;background: #056dae;-webkit-transition: all 220ms ease-out;-moz-transition: all 220ms ease-out;-o-transition: all 220ms ease-out;transition: all 220ms ease-out;}
  .menubar-ul > li:hover:after, .menubar-ul > li.menuBar-active:after, #signIn:hover:after, #signIn.menuBar-active:after, .activeMenu:after, .menubar-ul > li.activeMenu:after {width: 100%;}
  .activeMenu:after, .menubar-ul > li.activeMenu:after {width: calc(100% - 32px) !important;}

  .innerDropdowns {
      position: absolute;
      width: 240px;
      top: 63px;
  left: 0;
      z-index: 9999;
  }
  .innerDropdowns li a{
      background: #fff;
      display: block;
      padding: 18px 20px 20px 40px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-top: 0;
      color: #333333;
      font-size: 16px;
      line-height: 20px;
  }
  .innerDropdowns li:first-child a {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .innerDropdowns li:last-child a {
      border-radius: 0px 0px 6px 6px;
  }
  .menuBar.fhfixed {
      position: fixed;
      z-index: 9;
  }

  
  .LoginDesk{
      display: block;
      float: right;
  }
  .loginDesktop {
      line-height: 59px;
      display: block;
      font-family: "interstate-bold", arial;
      color: #333;
      font-size: 16px;
  }
.menubar-ul > li {
     padding: 20px 15px 18px 15px;
  }
}

@media(min-width:1200px) {
  .container {
      max-width: 1190px;
  }
  h1 {
      font-size: 160px;
  }
  h2 {
      font-size: 42px;
  }
  
  .top-menu {
      padding-left: 15px;
  }
  .banner h2 {
      font-size: 28px;
  }
  .promotion-title {
      font-size: 36px;
  }
  
  .paylite-banner .col{
      height: 520px;
  }
  .paylite-banner .banner-inner {
      max-width: inherit;
      padding-top: 0;
  }
  .first-title {
      top: 6%;
  }
  .paylite-banner .banner-inner img{
      margin-top: -16px;
  }
  .banner.paylite-banner p{
      margin-top: 16px;
  }
  .citi-mobile-slider, .citi-mobile-works .col{
      position: inherit !important;
  }
  .citi-mobile-works{
      position: relative;
  }
  .citi-mobile-slider::before{
      top: 518px;
  }
  .form-wrap{
      display: table;
      width: 100%;
      margin-top: 60px;
  }
  .form-title, .form-col{
      display: table-cell;
  }
  .form-title{
      padding: 0 25px 0 32px;;
  }
  .form-control-input, .form-control-select {
      font-size: 34px;
  }
  .equal {
      font-size: 60px;        
      margin-top: 30px;
  }
  .form-value {
      margin-top: 20px;
  }
  .calc-info{
      margin-top: 30px;
  }
  .form-control-input{
      max-width: 240px;
  }
  .loan-need{
      width: 118px;
  }
  .loan-tenor{
      width: 100px;
  }
  .loan-tenor-sel{
      max-width: 180px;
  }
  .loan-req{
      width: 134px;
  }
  .selectBox-dropdown .selectBox-label{
      text-align: left;
  }
  .selectBox-dropdown-menu{
      max-height: 335px;
  }

}
@media (max-width:1200px){
.citi-mobile-slider ul.slick-dots {
  bottom: -46px;
}
  .mCustomScrollBox {
      width: 100% !important;
  }

.microsite-img{height:400px}
#apply-site-tab:before{
   bottom:233px
}
}
@media (max-width:1150px){
#apply-site-tab:before{
   bottom:254px
} 
}
@media (max-width:1100px){
.microsite-img{height:374px}
}
@media(max-width: 1024px) {
.bor-dark, .bor-light {
  height: 5px;
}
.loginMobile {
  height: 50px;
  line-height: 50px;
}
#Menu {
  float: right;
}
.searchBar .container {
  padding: 0;
}
.searchBar {
  top: 55px;
}
.searchBar-inner {
  width: 100%;
}
}

@media (max-width:992px){
.microsite-img { height: 374px; }
}
@media (max-width:991px){
.microsite-img { height: 388px; }
#apply-site-tab:before {
  bottom: 212px;
}
}
@media (max-width:990px){
#apply-site-tab:before {
  bottom: 233px;
}
}
@media (max-width:880px){
.microsite-img { height: 380px; }
#apply-site-tab:before {
  bottom: 233px;
}
}
@media (max-width:778px){
#apply-site-tab:before {
  bottom: 254px;
}
}

@media (max-width:923px) and (min-width:768px){
.tab-el-content .row{
  display:block
}
.tab-ul{
  width: 94%;
  margin: 0 3%;
}
.tab-ul li{
  font-size:15px;
}
}
@media(max-width: 767px) {
.sticky .sticky-cell{
  padding:10px 20px 0 
}
.col-sm-1.sticky-cell{
  padding-top: 10px !important;
}
.sticky{
  padding: 0 0 14px;
}
.sticky-cell{
  font-size:18px;
}
.sticky-cell .btn{
  font-size:18px;
  padding: 9px 9px;
}
.mobile-hide{
  display:none;
}
.mobile-show{
  display:inline-block
}
.tab-ul { display: none; }
.microsite-img{text-align:center}
.microsite-img img{display:inline-block}
.tab-accord-head { display: block; color: #333; text-align: left; font-size: 16px; padding: 12px 10px 12px 46px; font-family: 'interstate-regular',arial; position: relative; border-top: solid 1px rgba(0,0,0,0.25); }
.tab-accord-head:after { content: ''; position: absolute; left: 17px; top: 20px; height: 7px; width: 14px; background: url(../images/sel-arw.png) no-repeat; }
.tab-el-content {
  display: none;
}
.tabs-el {
  display: block !important;
}
#apply-site-tab:before{
  display:none;
}
#apply-site-tab:before{
  bottom:195px;
}
.citi-mobile-works{
  padding:0
}
.tab-el-content{
  padding-top: 15px;
  padding-bottom:30px;
}
.tabs{border-bottom:solid 1px rgba(0,0,0,0.25)}
#apply-site-tab .tab-el-content.active{
  position:relative
}
#apply-site-tab .tab-el-content.active:after{
  content: ''; position: absolute; bottom: 141px; width: 100%; height: 20px; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #d4d4d4); left: 0; z-index: 0;
}
.microsite-img{
  height:398px;
}
.footerLinksList ul li {
  width: 100%;
  padding-bottom: 15px;
}
.footerMenu {
  padding: 7px 0 0;
}
.footerLeft {
  padding-bottom: 15px;
}
footer .footer-border .blue {
  width: 45px;
  height: 30px;
  margin-top: 25px;
}
.citi-logo-desktop {
  display: none;
}
.citi-logo-mobile {
  display: block;
  width: 40px;
  margin: 15px 8px 0 0;
}	
.breadcrumb li a, .breadcrumb li span {
  font-size: 12px;
  line-height: 18px;
}
.breadcrumb li a img {
  width: 5px;
  }
  .btn {
      white-space: nowrap;
  }

}
@media(max-width: 684px) and (orientation:landscape){
#apply-site-tab .tab-el-content.active:after{
  bottom: 162px;
}
}
@media (max-width:767px) and (min-width:710px)  {
#apply-site-tab .tab-el-content.active:after{
  bottom: 251px; 
}
}
@media (max-width:710px) and (orientation:portrait){
#apply-site-tab .tab-el-content.active:after{
  bottom: 273px; 
}
}
@media (max-width:504px) and (orientation:portrait){
#apply-site-tab .tab-el-content.active:after{
  bottom: 294px; 
}
}
@media (max-width:400px) and (orientation:portrait){
#apply-site-tab .tab-el-content.active:after{
  bottom: 315px; 
}
}
@media (max-width:330px) and (orientation:portrait){
#apply-site-tab .tab-el-content.active:after{
  bottom: 362px; 
}
}
@media only screen and (min-device-width: 480px) and (max-device-width: 767px) and (orientation:landscape) {
  .scroll-bar-popup {
      height: 200px;
  }

  .seeratesPopupInner, .citiCashBkInners, .citiCashBkPlusInners, .citiSMRTInners, .citiM1cardInners, .citiPremier1Inners, .citiPremier2Inners, .citiPremier3Inners, .citiRewd1Inners, .citiRewd2Inners {
      width: 90%;
  }

  .scroll-bar-popups, .scroll-bar-citiM1card, .scroll-bar-citiSMRT, .scroll-bar-citiCashBk, .scroll-bar-citiPremier1, .scroll-bar-citiPremier2, .scroll-bar-citiPremier3, .scroll-bar-citiRewd1, .scroll-bar-citiRewd2, .scroll-bar-citiCashBkPlus {
      height: 200px;
  }

  .seeratesPopupInners {
      width: 90%;
  }

}

@media screen and (orientation: portrait) {
  .scroll-bar-popup {
      height: 400px;
  }

  .seeratesPopupInner, .citiCashBkInners, .citiCashBkPlusInners .citiSMRTInners, .citiM1cardInners, .citiPremier1Inners, .citiPremier2Inners, .citiPremier3Inners, .citiRewd1Inners, .citiRewd2Inners {
      width: 98%;
  }

  .seeratesPopupInner, .citiCashBkInners, .citiCashBkPlusInners .citiSMRTInners, .citiM1cardInners, .citiPremier1Inners, .citiPremier2Inners, .citiPremier3Inners, .citiRewd1Inners, .citiRewd2Inners {
      padding: 5px;
  }

  .seeratesPopupClose {
      top: -10px;
  }


  .scroll-bar-popups, .scroll-bar-citiM1card, .scroll-bar-citiSMRT, .scroll-bar-citiCashBk, .scroll-bar-citiCashBkPlus, .scroll-bar-citiPremier1, .scroll-bar-citiPremier2, .scroll-bar-citiPremier3, .scroll-bar-citiRewd1, .scroll-bar-citiRewd2 {
      height: 540px;
  }

  .seeratesPopupInners {
      width: 85%;
  }

  .seeratesPopupInners{
      padding: 2px;
  }

  .seeratesPopupCloses, .citiCashBkClose, .citiCashBkPlusClose, .citiPremier3Close, .citiRewd1Close, .citiRewd2Close .citiSMRTClose, .citiM1cardClose {
      top: -10px;
  }

  .popHeader, .popInnerCnt {
      font-size: 13px;
      padding: 8px 5px;
  }
}
@media (max-width: 568px) {
  .col-sm-1.sticky-cell {
      display: table-cell !important;
      width: 100% !important;
      max-width: 100% !important;
  }
}
@media (max-width:500px){
.h2-main br{
  display:none !important
}
}
@media (max-width : 320px){
  .popHeader, .popInnerCnt {
      font-size: 11px;
      padding: 3px 2px;
  }
.microsite-img {
  height: 154px;
}
}