html,
button,
input,
select,
textarea {
    color: #222;
}

body {
	font-size: 16px;
	line-height: 1.4;
	width: 100%;
	height: 100% !important;
	min-height: 100%;
	color: #333;
	background-color: #fff;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}
*{
	box-sizing: border-box;
}
p{
	margin: 0;
	color: #333;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
 a{outline:none; text-decoration: none;}

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

img {width: auto\9;height: auto;max-width: 100%;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Custom Fonts
   ========================================================================== */

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

/* ==========================================================================
   Adaptive styles
   ========================================================================== */
.visible-desktop{display:block !important;}
.visible-desktop-tablet{display:block !important;}
.visible-phone{display:none !important;}
.visible-tablet{display:none !important;}

/* ==========================================================================
   Common styles
   ========================================================================== */
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}

.fleft{
	float: left;
}
.fright{
	float: right;
}
.pos-rel{
	position: relative;
}
.pos-abs{
	position: absolute;
}
.grey-font p{
	color: #666;
}

.clearfix:before, .clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.loading {
	background: #222 url('../images/ico_loading.gif') center center no-repeat;
	position: fixed;
	z-index: 1;
}
body, html {
  height: 100%;
  min-height: 100%;
  position: relative;
}
#body{
	position: relative;
	font-family: "interstate-light";
}
section{
	opacity: 0;
}
.loaded section{
	opacity: 1;
	overflow: hidden;
	position: relative;
}
.normal-font{
	font-size: 1em !important;
}

.background{
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.unstyled {
	padding: 0;
	margin: 0;
}
.container{
	width: 100%;
	float: left;
}
.section-head {
	font-family: "interstate-light";
    font-weight: 100;
    display: inline-block;
    font-size: 2.6em;
    margin: 0px auto;
	padding: 0 0 20px 0;
	color: #333;
	position: relative;
}
.section-head:after{
	width: 80%;
	height: 1px;
	background: #333;
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
}
.section-desc{
	font-family: "interstate-light";
	font-weight: 100;
	text-align: center;
	margin: 25px auto 35px auto;
	width: 50%;
	color: #333;
	 -webkit-margin-collapse: separate;
	position: relative;
}

.no-touch .no-call-link, .touch .call-link{
	display: block;
}
.no-touch .call-link, .touch .no-call-link{
	display: none;
}
a.link{
	text-decoration: underline;
	color: inherit;
}

/* ==========================================================================
   Home section
   ========================================================================== */

.header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: url('../images/header-bg.png') repeat-x;
	background-size: 100% 100%;
	height: 60px;
	z-index: 2;
	display: none;
}
.citiLogo {
	background: url('../images/citi.png') no-repeat;
	background-size: 100%;
	float: left;
	display: block;
	width: 58px;
	height: 35px;
	margin: 10px 0 0 60px;
}
.menu{
	background: url('../images/menu.png') no-repeat center center;
	background-size: 100%;
	float: right;
	display: block;
	width: 25px;
	height: 20px;
	margin: 20px 60px 0 0;
}

/* ==========================================================================
   Fixed Navigation
   ========================================================================== */

#slide-menu{
	background: #353633;
	color: #fff;
	position: fixed;
	right: -270px;
	top: 60px;
	width: 270px;
	border: none;
	box-shadow: 5px 0px 10px #222 inset;
	height: 100%;
}
.head-menu li a {
	font-family: "interstate-light";
	padding: 15px 10px 15px 25px;
	margin-left: 5px;
	display: block;
	background: url("../images/left-arrow.png") no-repeat 10px 48%;
	background-size: 9px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	line-height: 18px;
}
.no-touch .head-menu li:hover, .head-menu li.active{
	background: #0e4e7a;
}


/* ==========================================================================
   Main Navigation (Sticky pagination) - desktop only
   ========================================================================== */
.main-nav {
	position: fixed;
	top: 50%;
	right: 40px;
	z-index: 99;
	margin-top: -70px;
	display: none;
}
.unstyled li {
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav li a {
	display: block;
	border: 1px solid #545454;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	padding: 5px;
	margin-top: 8px;
}
.nav li.active a {
	background: #545454;
}

/* ==========================================================================
   HOME SECTION
   ========================================================================== */

#home .background{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-overflow-scrolling: touch;
}
#home video{position: absolute; width:100%;overflow: hidden;z-index:-1;} 
.video-overlay{
	position: absolute; 
	width:100%;
	height: 100%;
	overflow: hidden;
	top: 0; 
	left: 0;
	bottom: auto;
	background: url('../images/section-01/video-overlay.png');
	opacity: 0.75;
} 
#home p{
	color: #fff;
}
.mobile-app{
	width: 23%;
}
.app-icons{
	margin: 35px 0 0 0;
    position: relative;
}
.app-icons p{
	margin: 0 0 15px 0;
}
.app-icons a img{
	height: 45px;
	margin: 0 5px;
}
@-webkit-keyframes scroll-down-anim {
	0% {bottom:-5px}
	50% {bottom:0px}
	100% {bottom:-5px}
}
@-moz-keyframes scroll-down-anim {
	0% {bottom:-5px}
	50% {bottom:0px}
	100% {bottom:-5px}
}
@-o-keyframes scroll-down-anim {
	0% {bottom:-5px}
	50% {bottom:0px}
	100% {bottom:-5px}
}
@keyframes scroll-down-anim {
	0% {bottom:-5px}
	50% {bottom:0px}
	100% {bottom:-5px}
}
.scroll-down{
	position: absolute;
    bottom: 25px;
    left: auto;
    width: 100%;
}
.scroll-down p{
	margin: 0 0 10px 0;
}
.scroll-down a{
	position: relative;
	z-index: 1;
	-webkit-transition: all 500ms cubic-bezier(.25, .46, .45, .94);
	-moz-transition: all 500ms cubic-bezier(.25, .46, .45, .94);
	-o-transition: all 500ms cubic-bezier(.25, .46, .45, .94);
	transition: all 500ms cubic-bezier(.25, .46, .45, .94);	
	-webkit-animation: scroll-down-anim 1s infinite;
	-moz-animation: scroll-down-anim 1s infinite;
	-o-animation: scroll-down-anim 1s infinite;
	animation: scroll-down-anim 1s infinite;
}
.scroll-down a img{
	width: 30px;
}

.mobile-app-holder, .app-icons, .scroll-down{
	visibility: hidden;
}
.mobile-app-holder{
	position: relative;
}

.mobile-app-holder.show, .app-icons.show, .scroll-down.show{
	visibility: visible;
}
.audioClk {
    position: absolute;
    bottom: 60px;
    right: 50px;
    z-index: 10;
    background: url('../images/mute.png');
    width: 30px;
    height: 30px;
	display: none;
}
.audioClk.muted {
    background: url('../images/un-mute.png');
}

/* ==========================================================================
   KEY FEATURES
   ========================================================================== */
.swap-mobile{
	visibility: visible;
}
#key-features .background{
	background-image: url('../images/section-02/bg.jpg');
	background-repeat: repeat;
	background-attachment: initial;
    background-size: inherit;
	padding: 80px 0 0 0;
}
#key-features .mobile-app-holder{
	display: inline-block;
	vertical-align: top;
	position:relative;
	z-index: 1;
	height: 525px;
}
#key-features .section-head{

}
#key-features .mobile-app-holder .mobile-app{
	width: auto;
    height: 525px;
	display: inline;
}
#key-features .mobile-app-holder .mobile-app.android{
	display: none;
}
#key-features .mobile-app-holder .mobile-app.hide{
	display: none;
}
#key-features .accordion-holder{
	display: inline-block;
	vertical-align: top;
	width: 0px;
	height: 0px;
	text-align: left;
	overflow: hidden;
	-webkit-transition: width 1s cubic-bezier(.25, .46, .45, .94);
	-moz-transition: width 1s cubic-bezier(.25, .46, .45, .94);
	-o-transition: width 1s cubic-bezier(.25, .46, .45, .94);
	transition: width 1s cubic-bezier(.25, .46, .45, .94);
	position: relative;
}
#key-features .accordion-holder.show{
	display: inline-block;
	width: 450px;
	margin: 0 0 0 15px;
	height: auto;
}
#key-features .inner-content{
	margin: 55px 0 0 0;
}
.accordion-holder .accordion-tile{
	border-bottom: 1px solid #333;
}
.accordion-holder .accordion-tile.last{
	border-bottom: 0;
}
.accordion-holder .accordion-head{
	font-size: 1.3em;
	width: 450px;
	background: url('../images/section-02/plus-icon.png') no-repeat 95% 52%;
	padding: 10px 30px 10px 3px;
	cursor: pointer;
}
.accordion-holder .accordion-head.active{
	background: url('../images/section-02/minus-icon.png') no-repeat 95% 52%;
	cursor: pointer;
}
.accordion-holder .accordion-head img{
	padding-right: 15px;
    width: 70px;
	box-sizing: initial;
}
.accordion-holder .accordion-desc{
	padding: 0px 15px 15px 10px;
	display: none;
	width: 450px;
}
.accordion-holder .accordion-desc.open{
	display: block;
}
.accordion-holder .accordion-desc p{
	color: #333;
}
.accordion-holder .accordion-desc a{
	background-color: #fff;
    padding: 10px 20px;
    display: inline-block;
    margin: 20px 0 0 0;
	color: #333;
}
.accordion-holder .accordion-desc a img{
	padding-left: 5px;
	top: -1px;
    position: relative;
}
.white-strip{
    width: 100%;
    height: 150px;
    background-color: #fff;
	margin-top: -100px;
	float: left;
	overflow: hidden;
}

/* ==========================================================================
   BANKING ON THE MOVE
   ========================================================================== */
#banking .background{
	padding: 80px 0 175px 0;
	background: #fff;
}
.slider-cont{
	width: 70%;
	-webkit-margin-top-collapse: separate;
	margin: 35px 15% 0 15%;
	position: relative;
}
.slide-inner{
	background: #eeeeee;
	padding-top: 26%;
	height: 100%;
}
.slide-inner img{
	width: 70px !important;
	display: inline !important;
	position: relative;
	opacity: 0.5;
	-webkit-transition: all 300ms cubic-bezier(.25, .46, .45, .94);
	-moz-transition: all 300ms cubic-bezier(.25, .46, .45, .94);
	-o-transition: all 300ms cubic-bezier(.25, .46, .45, .94);
	transition: all 300ms cubic-bezier(.25, .46, .45, .94);
}
.slide-inner p{
	font-family: 'interstate';
	font-size: 14px;
	padding: 15px 25px 0 25px;
	position: relative;
	opacity: 0.5;
	-webkit-transition: all 500ms cubic-bezier(.25, .46, .45, .94);
	-moz-transition: all 500ms cubic-bezier(.25, .46, .45, .94);
	-o-transition: all 500ms cubic-bezier(.25, .46, .45, .94);
	transition: all 500ms cubic-bezier(.25, .46, .45, .94);
}
.slide-inner img.show, .slide-inner p.show{
	opacity: 1;
}
.slider-btn{
	position: absolute;
	top: 40%;
	width: 50px;
	height: 20%;
	background-size: 80%;
}
.slider-btn.prev{	
	left: -5%;
	background: url('../images/section-03/left-chevron.png') no-repeat center center;
}
.slider-btn.next{	
	right: -5%;
	background: url('../images/section-03/right-chevron.png') no-repeat center center;
}
.slider-btn.prev.disabled, .slider-btn.next.disabled{	
	cursor: default;
	opacity: 0.3;
}

/* ==========================================================================
   CHECK OUR OUR IPAD APP
   ========================================================================== */
#ipad-app .background{
	background-image: url('../images/section-05/bg.jpg');
	padding: 100px 0;
	position: static;
}
#ipad-app .inner-content{
	margin: 55px 0 0 0;
	display: table;
    width: 100%;
}
#ipad-app .ipad-column{
	width: 30%;
    padding: 15px;
	display: table-cell;
    vertical-align: middle;
	position: relative;
}
#ipad-app .ipad-column img{
	width: 80%;
}
#ipad-app .content-column{
	width: 40%;
	padding: 15px;
	display: table-cell;
    vertical-align: middle;
	position: relative;
}
#ipad-app .content-column .fav-way{
	background: #fff;
	padding: 35px;
	margin-bottom: 35px;
}
#ipad-app .content-column .fav-way .blue-head{
	font-family: 'interstate';
	color: #0462b5;
	font-size: 30px;
	font-weight: bold;
}
#ipad-app .content-column .fav-way .blue-head sup{
	font-size: 60%;
	font-weight: normal;
}
#ipad-app .content-column p, #ipad-app .content-column .fav-way ul li{
	font-family: 'interstate-light';
}
#ipad-app .content-column .fav-way .grey-head{
	font-size: 30px;
}
#ipad-app .content-column .fav-way .fav-way-inner{
	border-top: 1px solid #ddd;
	padding: 25px 0 0 0;
    margin: 25px 0 0 0;
}
#ipad-app .content-column .fav-way .fav-way-inner ul{
	background: #eaeaea;
	margin: 25px 0;
	padding: 25px;
	text-align: left;
}
#ipad-app .content-column .fav-way .fav-way-inner ul li{
    padding: 0 0 0 20px;
	margin: 0 0 10px 0;
	position: relative;
}
#ipad-app .content-column .fav-way .fav-way-inner ul li:before{
	position: absolute;
	top: 0;
	left: 0;
	content: '>';
	color: #0462b5;
}
#ipad-app .content-column .fav-way .fav-way-inner ul li:last-child{
	margin: 0;
}
#ipad-app .content-column .fav-way .blue-text, #ipad-app .content-column .fav-way .blue-text a{
	color: #0462b5;
	font-size: 14px;
}
#ipad-app .content-column .fav-way .blue-text a{
	font-size: 16px;
}
#ipad-app .content-column .app-store{
	margin-top: 10px;
	display: inline;
}
.content-column p {margin-bottom:10px;}
#ipad-app .content-column .app-store img{
	width: 175px;
}
#footer .top-footer a {margin: 0 15px 0 0;}
/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer .top-footer{
	background: #000 url('../images/section-06/bg.jpg') repeat-x;
	padding: 50px 0 150px;
}
#footer .top-footer p{
	display: inline-block;
	color: #fff;
	font-family: 'interstate-light';
	line-height: 50px;
	border-right: 1px solid #fff;
	padding: 0 25px 0 0;
	margin: 0 25px 0 0;
}
#footer .top-footer a img{
	margin: 0 0px 0 0;
	height: 50px;
}
#footer .bottom-footer{
	background: #19191b;
    border-top: 1px solid #19191b;
}
#footer .bottom-footer .blue-strip{
	width: 80%;
	margin: 0 auto;
	background: #0462b5;
	padding: 15px 5%;
	margin-top: -100px;
}
#footer .bottom-footer .blue-strip p{
	color: #fff;
    font-size: 12px;
    margin-top: 15px;
}
#footer .bottom-footer .blue-strip p.no-margin{
    margin: 0;
}
#footer .bottom-footer .contact-strip{
	width: 80%;
    margin: 0 auto;
    padding: 20px 0;
	border-bottom: 1px solid #fff;
}
#footer .bottom-footer .contact-strip p, #footer .bottom-footer .contact-strip a{
	color: #fff;
	font-family: 'interstate';
	display: inline-block;
	line-height: 35px; 
	float: left;
}
#footer .bottom-footer .contact-strip .contact-links{
	float: right;
}
#footer .bottom-footer .contact-strip a{
	color: #fff;
	font-family: 'interstate';
	margin: 0 20px 0 0;
    padding: 0 20px 0 40px;
	border-right: 1px solid #fff;
}
#footer .bottom-footer .contact-strip a.tel-link{
	background: url('../images/section-06/call-icon.png') no-repeat left center;
}
#footer .bottom-footer .contact-strip .no-call-link a.tel-link{
	cursor: default;
}
#footer .bottom-footer .contact-strip a.email-link{
	background: url('../images/section-06/email-icon.png') no-repeat left center;
}

#footer .bottom-footer .contact-strip a.branch-link{
	background: url('../images/section-06/branch-icon.png') no-repeat left center;
	border: 0;
	margin-right: 0;
	padding-right: 0;
}
.tandc-strip{
	padding: 15px 0;
    width: 80%;
    margin: 0 auto;
}
.tandc-strip p{
	text-align: left;
	float: left;
	color: #fff;
	font-size: 12px;
	display: block;
	width: 100%;
}
.tandc-strip p a{
	float: left;
	color: #0462b5;
	margin-top: 15px
}
.tandc-strip p span{
	float: right;
	margin-top: 15px
}



/* ==========================================================================
   FLIP SLIDER
   ========================================================================== */

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*  UPDATED! flip the pane when hovered */
.flip-container.hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.flip-container.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-o-transition: 0.6s;
	-ms-transition: 0.6s;
	transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-o-transition: 0.6s;
	-ms-transition: 0.6s;
	transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}


/* DEVICE DETECTION */
#detect-desktop, #detect-tablet, #detect-mobile{width:0px; height: 0px;}

/********************* Snap shot section *********************/
	#snap-shot .background {
		background-image: url('../images/section-07/bg.jpg');
		padding: 0px 0;
		position: static;
	}
	#snapContainer{
		padding: 100px 0 0;
		background:url('../images/section-07/overlay.png') repeat;
	}
	#snapContainer h2.section-head{  color: #fff; }
	#snapContainer h2.section-head:after{
		width: 80%;
		height: 1px;
		background: #fff;
		content: '';
		position: absolute;
		bottom: 0;
		left: 10%;
	}
	#snapContainer p{padding: 30px 0px 70px;color:#fff;}
	


	.controller{ width:168px; margin:40px auto 0; position:relative; top:100px;}
	.cntrls{list-style:none;}

	.cntrls li{position:relative; top:8px; padding:8px; float:left;width:10px; height:10px;background:url('../images/section-07/normal.png') no-repeat;}
	.cntrls li.activeSnap{background:url('../images/section-07/active.png') no-repeat;}

/********************* Snap shot section *********************/

.flexslider {display:none;}
.slider-cont {display:block;}


.app-experience {
	background: url('../images/blue-bg.png') repeat;
	padding: 75px 0px;
}

.innerConatiner {
	width: 1140px;
	margin: auto;
	position: relative;
}

.left-mob {
	width: 345px;
    float: left;
}

.right-Text {
	width: 785px;
    float: right;
}

.right-Text h2 {
	font-family: "interstate-light";
	font-weight: normal;
	margin-bottom: 20px;
    font-size: 3.2rem;
    line-height: 1.2;
	color: #FFF;
}

.right-Text h2:after{
	background: none;
}

.right-Text p {
	font-family: "interstate-light";
    font-weight: normal;
    margin: 5px 0px;
    font-size: 1rem;
    color: #FFF;
    width: 100%;
    text-align: left;
}
.cta{
	padding-top: 20px
}
.cta a{
	text-decoration: none;
    padding: 13px 0px;
    display: inline-block;
    font-size: 15px;
	font-weight: bold;
	background: #fff;
	color: #1073af;
	border-radius: 8px;
	width: 250px;
	text-align: center;
}