body{font:16px "interstate-light",arial;color: #555;}
html,body{-webkit-font-smoothing:antialiased;}
html{-webkit-text-size-adjust:none;}
@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.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate-light.woff") format("woff"), url("../fonts/interstate-light.sitx") format("truetype"), url("../fonts/interstate-light.svg#Citibank") format("svg");}
@font-face {font-family: "interstate-extralight";font-style: normal;font-weight: normal;src: url("../fonts/interstate_extralight.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate_extralight.woff") format("woff"), url("../fonts/interstate_extralight.sitx") format("truetype"), url("../fonts/interstate_extralight.svg#Citibank") 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#Citibank") format("svg");}
*,*:before,*:after {box-sizing: border-box;margin:0;padding:0;}
ul,li{list-style:none;}
a{color: #056DAE;text-decoration:none;}
a:hover {text-decoration:underline;}
img{max-width:100%;}
input,textarea{font-family: interstate-light;color: #555;font-size: 12px;}
input[type="text"],input[type="tel"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
sup{line-height: 0;}
h1{font: 34px/26px interstate-extralight;padding-bottom: 15px;}
h2{font: 30px/26px interstate-extralight;padding-bottom: 15px;}
h3{font: 22px/26px interstate-light;padding-bottom: 15px;}
p{padding: 0 0 10px 0;line-height: 21px;}
.last{padding-bottom: 0 !important;}
.txtCenter{text-align: center;}
ul.bulLst li {background: url(../images/bullet.jpg) no-repeat scroll 0 6px transparent; padding: 0 0 10px 10px;list-style: none;}
.container{width:100%;max-width: 100%;}
.wrapper{width:1280px;margin:0 auto;}
.visible-phone {display: none;}
ul.topMenuLeft {float: left;}
ul.topMenuLeft li {float: left;font-size: 12px;letter-spacing: 0px;line-height: 12px;margin: 7px 0px 0 0px;display: inline-block;
font-family: "interstate-light";}
ul.topMenuRight li {float: right; text-align: right;font-size: 12px;letter-spacing: 0px;line-height: 12px;margin: 7px 0px 0 0px;display: inline-block;font-family: "interstate-light";}
ul.topMenuRight li a {color: #fff;}
.topMenu li a:hover{text-decoration: none;}
#footer {padding: 20px 0 0;font-size: 11px;clear:both;background-color:#fff; width:100%;}
.mediaIcons {float: left;border-left: 1px solid #ccc;padding: 0 0 0 7px;}
.mediaIcons li {float: left;margin: 0 6px 0 0;list-style: none;}
.mediaIcons li a.facebookIcon, .faceIcon {background-image: url(../images/facebookIcon.png);}
.mediaIcons li a.facebookIcon, .mediaIcons li a.twitterIcon, .mediaIcons li a.youtubeIcon, .faceIcon {width: 18px;height: 18px; background-repeat: no-repeat;display: inline-block;background-size: contain;-webkit-background-size: contain;-moz-background-size: contain;-o-background-size: contain;-ms-background-size: contain;-moz-border-radius: 3px 3px 3px 3px;-webkit-border-radius: 3px 3px 3px 3px;border-radius: 3px 3px 3px 3px;cursor: pointer;z-index: 1;}
.footerMenu{border-bottom: 2px solid #CCCCCC;overflow: hidden;padding: 7px 0 5px;width: 100%;}
.footerMenu a{color: #666;}
.footerMenu a:hover{text-decoration:underline;}
.footerLinks {float: right;padding: 0;}
.footerLinks ul{margin:0;padding:0;}
.footerLinks ul li {float: left;padding: 0 0 0 23px;list-style: none;}
.footerLeftLink{float:left;padding:2px 7px 0 0;}
.footerLinksList {float: right;padding: 0;margin-top: 1px;}
.footerList li{float:left;padding-left:24px;list-style: none;}
.footerDisclaimer {overflow: hidden;padding: 16px 0 35px;}
.footerLogo {background:url("../images/citi-logo-pc.png") no-repeat;width:31px;height:20px;float: left;background-size: 100% 100%;}
.copyRight {float: right;text-align: right;color:#999;}
#header {background: url(../images/bg_header.jpg) repeat-x;height: 5em;line-height: 5em;background-size: contain;
left: 0;right: 0;top: 0;z-index: 9000;outline: none;}
.logo {width: auto;float: left;outline: none;}
.logo a{background: url(../images/logo.png) no-repeat left center;display: block;text-indent: -99999px;outline: none;    width: 60px;}
.main-head{padding: 30px 0;background: #056DAE;color:#fff;}
.slider-bg{background:url(../images/banner.jpg) no-repeat;height:500px;position: relative;background-size: cover;width: 100%;
display: block;float: left;background-position: 100% 100%;}
.carousel-slider{background:rgba(255, 255, 255, 0.9);color:#333;width: 480px;padding: 40px;position: relative;}
.carousel-slider h3{font:36px/36px interstate-extralight;}
.carousel-slider p{font:24px/24px interstate-extralight;}
.col-6{width:50%;float:left;}
.col-50{width: 50%;float:left;}
.col-45{width: 45%;float:left;}
.citi-offers p{width: 100%;float: left;margin: 30px 0 0;}
.citi-offers{margin-top: -44px;background: #fff;width: 100%;box-sizing: border-box;padding: 40px 40px 30px;display: inline-block;}
.offers-01{border-right: 1px solid #ccc;padding: 0 30px 0 0;margin: 20px 0 0;}
.offers-02{padding: 0 0 0 40px;margin: 20px 0;}
.list-offers{position: relative;clear: both;}
.formSect{background: #EEEEEE;position: relative;clear: both;}
.mortgage-form-section {padding: 40px 0;width: 100%;display: inline-block;}
.mortgage-form-section h2{font:36px/36px interstate-extralight;}
.faqSect .questions {border-bottom: 1px solid #cccccc;}
.faqs{padding: 40px 0;}
.faqs .questions .answer {display: none;padding: 0 0 20px;font-family: interstate-light;margin-left: 20px;}
.faqs .question{padding: 30px 20px;cursor:pointer;position:relative}
.faqs .question.active{color: #056DAE;font-weight: bold;}
.arrow-down:after {background: url(../images/arrow-down.png) no-repeat left center;background-position: 0 50%;transform: rotate(0deg);content:"";position: absolute;width: 10px;height: 10px;left: 0;top: 34px;transition: all 0.3s ease-in;}
.arrow-down.active:after {transform: rotate(-90deg);content:"";}
.arrow-up {background: url(../images/arrow-up.png) no-repeat left center;background-position: 0 50%;}
.form-options{padding: 0;width: 70%;margin: 20px auto;}
.form-options-ul li{width: 50%;float: left;background:#fff;padding: 20px 0;color: #056DAE;text-align: center;cursor:pointer;}
.form-options-ul li:hover{background:#f7f7f7;}
.form-options-ul li.active,.form-options-ul li.active:hover{background: #056DAE;color:#fff;cursor:default;}
.form-options-ul li:first-child{border-bottom-left-radius: 5px;border-top-left-radius: 5px;}
.form-options-ul li:last-child{border-bottom-right-radius: 5px;border-top-right-radius: 5px;}
.calc-sect{padding: 40px 0;clear: both;text-align: center;width: 50%;margin: 0 auto;}
.mortgage-form-section .calc-sect p{float:left;padding:0 0 5px;}
.calc-sect img{margin-right: 15px;display:inline-block;}
.calc-sect a{color:#333;}
.calc-sect a:hover{color:#056DAE;text-decoration:underline;}
.form-options .calc-sect p{width: auto;}
.calc-sect ul{}
.calc-sect ul li{display:inline-block;}
.calc-sect ul li:last-child{padding: 5px 0 0;}
.txtArea{border: none;outline: none;padding: 12px 20px;color: #555;width:95%;height:80px;border-radius: 6px;overflow: hidden;font-size: 16px;resize:none;}

.col-33{width:33.33333%;float:left;padding:30px 0;position:relative;}
.col-33 input{width: 95%;outline: none;border: none;padding: 10px 20px;border-radius: 6px;font-size: 16px;line-height: 18px;
max-height: 50px;height: 50px;}
.col-33 p{width: 350px;float: left;}
.errorcode{display:none;color: #D60000;font-weight: normal;font-size: 12px;padding: 10px 0 0;float: left;width:100%;}
.radioImg {background-image: url(../images/rbutt-off.png);background-repeat: no-repeat;padding: 2px 4px 0 0;height: 20px;width: 25px;background-position: 1px 0;}
.labelField{padding-bottom: 15px;display: inline-block;width: 95%;line-height: 21px;}
span.radioImg input {width: 25px;height: 20px;opacity: 0; _noFocusLine: expression(this.hideFocus=true); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-khtml-opacity: 0; -moz-opacity: 0;cursor: pointer;}
.labelText {padding: 0px 8px 0px 0px;cursor: pointer;}
span.radioImg.tick {background-image: url(../images/rbutt-on.png);}
.checkboxStyle.tick1{background-image: url(../images/checkbox-active.png);}
.agreeSect{font-size: 13px;width: 100%;display: inline-block;padding-top:30px;}
.agree-stmt{line-height: 20px;font-size: 12px;}
.terms{color:#555;font-size:12px;}
#ln-amt{width:50%;}
.checkboxStyle{background-image: url(../images/checkbox-inactive.png);background-repeat: no-repeat;padding: 2px 4px 5px 0;height: 20px;width: 25px;background-position: 1px 0;float: left;margin-right: 5px;}
.agreeSect input {width: 25px;height: 20px;opacity: 0; _noFocusLine: expression(this.hideFocus=true); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-khtml-opacity: 0; -moz-opacity: 0;cursor: pointer;}
.submitSect {padding: 18px 30px;border-radius: 5px;background: #056DAE;font-family: interstate;cursor:pointer;text-align: center;width: auto;clear: both;display: inline-block;margin: 20px 0 0;}
.submitSect:hover {background-color: #002A54;}
.submitSect a{color: #fff;}
.submitSect a:hover {text-decoration: none;}
.cashout{display:none;}
.mortgage-form-section p{display: inline-block;}
.overlay {}
.loan-calc{background: #F7F7F7;clear: both;width: 100%;margin: 0px auto 40px;padding: 50px;position:relative;border-radius: 6px;}
.col-70{width:63%;float:left;border-right: 1px solid #ccc;margin-right: 0;}
.col-30{width:37%;float:left;margin: auto;right: 0;padding: 0 35px;}
.calc-Sect{}
.calc-Sect h2{font-family:interstate;}
.result-Sect{}
.property-purchase .result-Sect p{margin-top: 5px;}
.result-Sect div{padding: 10px 0 20px;width: 100%;float: left;}
.result-Sect div div{padding: 10px;margin-bottom: 0;border: 1px solid #ccc;border-radius: 5px;color: #555;width:80%;}
.bluTxt{color: #056DAE;}
.agreeSect a:hover, .calc-sect a:hover, .closetooltip:hover {text-decoration:underline;}
.disclaimer{padding: 40px 0 0;font-size: 12px;line-height: 18px;}
.loan-calc h2{padding-bottom: 50px;font-weight: bold;font: 28px/26px interstate-light;}
.topMenu {background: #000 url(../images/topMenu.jpg) repeat-x top;height: 26px;color: #FFF;}
.calcLeft, .calcRight, .cashout-Calc-Sect, .cashout-Result-Sect {opacity: 0;}
#currentMonRepay, #newMonRepay {color: #00bdf2;font-size: 32px;}
.toolIcon {vertical-align:bottom;}
.property-purchase .quesToolTip label{padding-right: 10px;}
.toolIcon img {width: 15px;vertical-align:bottom;cursor: pointer;}
#loanAmt, #downPay, #monInst{color: #00bdf2;font-size: 22px;}
.calcRight .result-Sect {float: left;font-size: 22px;}
.calcRight .result-Sect div div {border: 0;border-radius: 0;padding: 0;width: auto;float: right;}
.calcRight .result-Sect p {float: left;}
.mrgnZeroRight{margin-right: 0 !important;}
input[type="text"]:focus{border:1px solid #056DAE;}
input[type="tel"]:focus{border:1px solid #056DAE;}
.inputBox-lable{position: absolute;top: 5px;font-size: 12px;line-height: 12px;-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;
}
.mandy-notfilled {border: 1px solid #D60000 !important;color: #D60000;}

/* calculator */
.year-slider {
		background: rgba(0, 0, 0, 0) url(../images/0-30.png) no-repeat scroll 0 0 / contain;
		height: 65px;
		width: 63%;
		display: inline-block;
	}
	.interest-slider {
		background: rgba(0, 0, 0, 0) url(../images/0-90.png) no-repeat scroll 0 0 / contain;
		height: 65px;
		width: 63%;
		display: inline-block;
	}
	.slider {
		padding: 1px 5px 0 1px;
		position: relative;
		top:20px;
		margin-bottom: 35px;
	}
	#year.ui-widget-content .ui-state-default, #interest.ui-widget-content .ui-state-default {
		background: rgba(0, 0, 0, 0) url(../images/scrubber.png) no-repeat scroll 0 0 / contain;
		border: 0 none;
		outline: medium none;
		width: 20px;
		height: 20px;
		top: -9px;
	}
	.ui-slider-horizontal {	
		height: 1px;
		top: 36px;
	}
	.year-value, .interest-value {
		display: inline-block;
		margin-left: 40px;
		position: absolute;
		top: 6px;
		
	}
	#yearValue, #interestValue {
		color: #00bdf2;
		font-size: 32px;
	}
	.percent {
		color: #00bdf2;
		font-size: 18px;
	}
	.slider-wrapper {
		position: relative;
	}
	.calc-row {
		margin-bottom: 30px;
	}
	.calc-row input {
		outline: none;
		border: 1px solid #ccc;
		padding: 12px 25px;
		border-radius: 5px;
		font-family: interstate-light;
		color: #555;
		font-size: 14px;
		width: 100%;
	}
	.calc-input {
		position: relative;
		display: inline-block;
		margin-left: 10px;
	}
	.calc-input span{
		position: absolute;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
	}
	.ui-slider .ui-slider-range {
		border: 1px solid #00bcf5;
		top: -1px;
	}
.calc-row1 label{width: 60%;display: inline-block;}
.calc-row1 .calc-input {width: 30%;}
.calc-row1 input{padding: 15px 5px 15px 15px;}
.form-row{width: 100%;display: inline-block;}
.property-purchase label{padding-right:25px;}
.propHead-visible-phone{display:none;}
.terms{padding: 10px 0 0;width: 100%;float: left;}
#errorTandC{margin-left: 30px;}
/*  TOOLTIP */
#tooltip{font-size:14px;text-align:center;line-height:1.5;color:#555;background:#EEE; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 3px 3px rgba(0,0,0,.2);-moz-box-shadow:0 3px 3px rgba(0,0,0,.2);box-shadow:0 3px 3px rgba(0,0,0,.2);position:absolute;z-index:100;padding:25px;width: 250px;text-align: left;}
#tooltip:after{width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(200, 200, 200, 0.8);
    border-top-color: rgba(200, 200, 200, 0.8);
    content: '';
    position: absolute;
    left: 50%;
    top: -10px;
    margin-left: -10px;}
#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;border-bottom-color:rgba(0,0,0,.6);top:-20px;bottom:auto}
#tooltip.left:after{left:10px;margin:0}
#tooltip.right:after{right:10px;left:auto;margin:0}
#tooltip .closetooltip{color:#333;position:absolute;right:0;top:0;text-transform:lowercase;line-height:normal;cursor:pointer;opacity:.5;z-index:9;font-family:arial;font-size:18px;background:#ccc;padding:3px 7px;border-radius:0 5px 0 0;}
.mgnBTM{margin-bottom: 0;}
.want-loan{font-size: 16px;}
.want-loan a{font-size: 22px;font-family: interstate-light;}
.want-loan a:hover{color: #056DAE;text-decoration:underline;}
.formSection{width: 85%;margin: 0px auto 40px;}
#yearly{color: #056DAE;cursor:pointer;}

/* media queries */
@media (max-width: 1500px) {
	.carousel-slider h3{font-size:30px;line-height:30px;}
	.carousel-slider p{font-size:22px;line-height:22px;}
}
@media (max-width: 1400px) {
.slider-bg{height: 400px;}

}
@media (max-width: 1300px) {
	.wrapper{width:100%;padding:0 30px;}
	.property-purchase .calcRight .result-Sect{font-size: 18px;font-family: interstate-light;}
	.txtArea{height: 60px;}
}
@media (max-width: 1024px) {
	.col-70 {width: 60%;}
	.col-30 {width: 39%;padding: 0 35px 0 10px;}
	
	.calc-row input{width: 95%;}
	.txtArea{height: 123px;}

}
@media (max-width: 992px) {
	.calc-sect{width: 70%;}
	.loan-calc{width: 100%;margin: 0 auto 30px;}
	.footerLeft {margin: 0 23px 0 0;}
	.footerMenu a {color: #666;}
	.footerRhtLink {float: right;color: #666;padding: 0;display: inline-block;margin-top: 0px;}
	.footerList {float: left; padding-top: 20px;}
	.footerLinksList ul li {float: left;padding: 0 15px 0 0;}
	.footerLinksList a {color: #666666;padding-bottom: 4px;display: inline-block;}
	.footerLinksList {float: none;padding: 0 23px 0 0;position: relative;}
	.appFooterScrolPlus {background: url(../images/plus.png) no-repeat scroll right 0 transparent;}
	.appFooterScrolMinus {background: url(../images/minus.png) no-repeat scroll right 0 transparent;}
	.visible-desktop {display: none !important;}
	.footerMenu {height: 30px;overflow: hidden;}
	footer {font-size: 11px;clear: both;}
	.appFooterScrolPlus, .appFooterScrolMinus {display: block;position: absolute;right: 3px;top: 2px;padding-right: 20px;}
	.slider{padding: 0;position: inherit;top: 0;margin-bottom: 0;right: 0;background:  none;width: 99%;}
	.year-value, .interest-value{position: inherit;top: 0;width: 50%;margin-left: 0;float: left;}
	.wrapper{padding: 0 15px;}
	.loan-calc{width: 100%;margin: 0 auto 15px;padding: 25px;}
	.col-70{width: 100%;margin-right: 0;border-right: 0;padding: 0;border-bottom: 1px solid #ccc;}
	.col-30 {width: 100%;float: left;position: inherit;top: 0;transform: translateY(0);margin: auto;right: 0;padding: 15px 0 0;}
	.slider-wrapper {position: inherit;padding-bottom: 30px;float: left;width:100%;}
	.result-Sect {width:100%;}
	.result-Sect div{width:33.33%;}
	.calcRight .result-Sect p,.calcRight .result-Sect div div{width:100%;}
	.cashout-Result-Sect .result-Sect div {}
	.cashout-Result-Sect .result-Sect div p{width: 100%;display: inline-block;}
	.disclaimer{padding-top:10px;}
	.years-Result, .percent-Result{margin-left: 15px;}
}
@media (min-width: 768px) and (max-width: 855px) {
	.calc-input{margin-left: 0;margin-top: 10px;}
}
@media(max-width: 768px) {
	#currentMonRepay, #newMonRepay {font-size: 28px;}
	.years-Result, .percent-Result {margin-left: 10px;}
}
@media(max-width: 767px) {
	.commonHide{display:none;}
	.commonShow{display:block;}
	.propPurchase-phone{padding: 20px;border: 1px solid #056DAE;border-top: none;}
	.visible-phone {display:block}
	.citiLogo {float: none;margin: 0 auto;}
	.copyRight {float: none;text-align: left;padding-left: 90px;}
	.carousel-slider{width:100%;padding: 25px;}
	.col-33 {width: 100%;}
	.agree-stmt{width: 90%;}
	.checkboxStyle{margin-right: 10px;}
	.form-options-ul li{padding: 20px 10px;}
	.form-options{width:100%;}
	.col-33 input, .txtArea{width:100%;}
	.toolIcon img {}
	.years-Result, .percent-Result{margin-left: 15px;font-size: 21px;font-family: interstate-extralight;}
	.toolIcon {position: inherit;right: 0;top: 0;}
	.calc-input {width: 100%;padding: 10px 0 0;margin-left: 0;}
	
	.disclaimer {padding: 0;}
	.mortgage-form-section p.want-loan{text-align: center;display: inherit;font-size: 22px;float: none;}
	.want-loan a{color: #056DAE;}
	.calc-input span{top: 57%;}
	.calc-Sect, .property-purchase .calcRight .result-Sect{font-size: 18px;}
	.carousel-slider h3{font-size: 26px;}
	.carousel-slider p {font-size: 18px;}
	.loanTXT{width: 100%;}
	#loanAmt, #downPay, #monInst{font-size:18px;}
	.result-Sect div{padding: 10px 10px;width: 100%;}
	.mortgage-form-section h2 {font: 30px/36px interstate-extralight;}
	.result-Sect div div{width: 100%;}
	.inputBox-lable{top: 10px;}
	.labelField, .submitSect{width: 100%;}

}
@media (max-width: 767px) and (orientation: landscape) {}
@media (max-width: 500px) {}
@media (max-width: 450px) {}
@media (max-width: 736px) {}
@media (max-width: 667px) {}
@media (max-width: 568px) {
	.carousel-slider{}
	.loan-calc h2{line-height: 35px;padding-bottom: 25px;}
	.form-options-ul li{font-size: 12px;}
	h1, h2{line-height:35px;}
	.calc-sect {width: 65%;}
}
@media (max-width: 480px) {
	.portraitCol1 {width:100%;}
	.col-50 {width: 100%;}
	.offers-02 {padding: 0;margin: 10px 0;}
	.offers-01 {border-right: 0;}
	.citi-offers p{margin: 10px 0 0;}
	.property-purchase{padding-bottom: 5px !important ;}

	.citi-offers{padding: 25px 15px;}
	.slider{width: 95%;}
	.years-Result, .percent-Result{margin-left: 15px;font-size: 32px;font-family: interstate-extralight;}
	.limitedOffer{padding: 15px;margin: 0 0 20px;}
	.years-Result, .percent-Result{font-size: 20px;}
	.calc-row1 label {width: 100%;}
	.calc-row1 .calc-input {width: 100%;}
	.mortgage-form-section h2 {font: 25px/36px interstate-extralight;}
	h2{font: 25px/26px interstate-extralight;}
	.result-Sect div div{width: 100%;}
}
}
@media (max-width: 430px) {
	.propHead-visible-phone{display:block;}
	.calc-row {margin-bottom: 25px;}
}
@media (max-width: 370px) {
	.agree-stmt {width: 85%;}
}
@media (max-width: 414px) {}
@media (max-width: 375px) {
	
	
}
@media (max-width: 320px) {
	.calc-Sect, .property-purchase .calcRight .result-Sect , .result-Sect{font-size: 13px;}
	.calc-sect {width: 75%;}
}