.span_1_of_1 {width: 100%;}
div.content-img-container.small, div.ceo-small, .bioContainer,img.ceo-touch, div.content-img a.simple-ajax-popup.touch, .hideheader, .citi-logo, p.charts-mobile, .keycapital-copy-container {display: none;}
div.span_1_of_1 p a  {color: #004488;}
div.span_1_of_1 p a:hover, a.simple-ajax-popup:hover {color: #008ce6;}
a.simple-ajax-popup {font-weight: normal; color: #fff; text-decoration: underline;}
div.span_1_of_1 p {padding-left: 19.5%; padding-right: 19.5%; font-size: 1.3em; line-height: 1.5;}
sup {font-family: Arial, Helvetica, sans-serif;}
.chart-hdr {margin-bottom: 1.2em;}
h3.global-hdr {margin-top:0; padding-top: 2.6em;}
.citi-blue {color: #002d72;}
.citi-ocean {color: #005A9C;}
.citi-orange {color:#b45322;}
.citi-green {color:#528321;}
.citi-teal {color:#006265;}
.ocean-callout {color: #004488  /* 008ce6 */; margin-bottom: 1.8em;}
.ocean-ar {color: #0f6cae;}
div.ceo-large {padding: 0px;overflow: hidden;margin-top: 0px;width: 100%; height: auto;}
div.ceo-container {margin-bottom: 1.6em;}
#maincontent #splash {line-height:0;}
#splash {clear: both; position: relative; /*min-height: 100vh;*/ background: #fff;}
#value-proposition div.span_1_of_1:first-child {
	padding-bottom: 8em;
	background: #fff;
}
#value-proposition div.span_1_of_1 div { padding-top: 2.8em;}
#value-proposition div.span_1_of_1:first-child p:last-child {margin-bottom: 0;}
#value-proposition div.span_1_of_1:nth-child(2) {padding-top: 6em; padding-bottom: 6em;}
#value-proposition div.span_1_of_1:nth-child(2) h3 {color: #fff; text-align: center;}
#value-proposition {overflow: hidden; color: #333; background: #004488;}
a.content-img.progresslrg {background-image: url(../images/2018/progress-lrg.jpg);border-radius: 0px 0px 70px 70px; background-repeat: no-repeat; background-position: 50% 50%; vertical-align: middle; line-height:0; width: 100%; background-size: 100%;}
#progressbg {overflow: hidden; background: #122a52; color: #fff;}
#progress h3 {color: #fff; padding-top: 1.6em; padding-bottom:0.3em;}
div#progress div.col.span_1_of_1 p {color: #fff; text-align: center;}
div#progress div.col.span_1_of_1 p a {color: #fff;}
div#progress div.col.span_1_of_1 p a:hover {color: #fff; text-decoration: underline;}
div#progress div.col.span_1_of_1 {margin-left:0;}
div.fin-container {padding-left: 19.5%;padding-right: 19.5%; padding-bottom:6em;}
table.fin-tbl {font-family:Interstate_Light; color: #53565a;}
table.fin-tbl tr th, table.fin-tbl tr td {text-align: right;font-weight: normal;padding: 6px;}
table.fin-tbl tr th, table.fin-tbl tr.section td {border-bottom: 1px solid #bebebe;}
table.fin-tbl tr th, table.fin-tbl tr.doublesection td {border-bottom: 2px solid #bebebe;}
table.fin-tbl tr td.header-yaxis {text-align: left;}
table.fin-tbl tr td.current-year, table.fin-tbl tr th.current-year, table.fin-tbl tr td.header-yaxis.bold {font-weight: bold; color: #111;}
p.table-footer {color: #53565a;padding-top: 10px;}
p.table-key {color: #53565a;font-style: italic;padding-bottom: 6px;padding-top: 15px;}
div.ceo-container p.introBig {padding-left: 0;padding-right: 0%;}

div.ceo-container {padding-left: 19.5%;padding-right: 19.5%;}

div.centered-pic-container {padding: 0 19.5%; margin-bottom: 1.6em;}
div.centered-pic-container p.cp-caption {padding: 20px 0 15px 0; color: #004488;}
.charts {text-align: center; border: 0; outline: none;}
.flip {width: 100%; height: auto; position:relative;cursor:pointer;margin-bottom: 15px;}
.photoFlip {width:100%;height:auto;}
.bio {margin: 25px;overflow-y: scroll;overflow-x: hidden;font-size: .8em;height: 475px;padding: 0 10px 0 0;}
div.page-break {height: 3px;background: url(../images/page-break.gif) repeat-x 0 1px;}
#letterMain, #bankingMain, #institutionalMain, #citizenshipMain, #stockholderMain {/*padding-bottom: 3em;*/}
#letterMain, #bankingMain, #institutionalMain {padding-bottom: 8em;}
ul.view-bio {margin:0;display: flex; padding: 30px; align-items: center; background: #002d72;}
ul.view-bio li {padding: 14px 0px; display: inline-block; font-family: Arial, Helvetica, sans-serif; flex: 1 1 0px;}
ul.view-bio li span {display: block; padding:0; color: #fff; font-weight: bold; font-size: 14px; padding-top: 4px; line-height: 19.6px;}
ul.view-bio li.view-btn {text-align: right;}
div.viewphoto-btn {padding: 0 18px 0 18px; text-align: right;}
ul.view-bio li.view-btn div, div.viewphoto-btn div{background: #002d72!important; padding: 18px 28px; color: #fff; font-weight: bold; display: inline-block; font-family: Arial, Helvetica, sans-serif; border-radius: 10px; font-size: 1em; border: 1px solid #fff;}
ul.view-bio li.view-btn div:hover, div.viewphoto-btn div:hover {background: #045193!important;}
ul.view-bio li.view-btn div a,ul.view-bio li.view-btn div a:hover {text-decoration: none;color: #fff; font-size: 14px; font-weight: bold;}
.bio-small {float: left; margin-right: 15px; margin-bottom: 10px;}
.ten-k {background: #24bff7;}
.ten-k a {padding: 40px 0; text-align: center; display: block;}
h3 sup {vertical-align:super; font-family: Arial, Helvetica, sans-serif;}
div.progress-vid-container img:hover {cursor: pointer;}
div.span_1_of_1 p.introBig.white {color: #fff; line-height: 1.4em;}
.white-popup-block {background: #fff;padding: 15px; position: relative; text-align: left; max-width:600px; margin: 55px auto 28px auto; max-height: 535px; overflow: hidden;}
.modal-content {overflow-y: scroll; max-height: 525px; margin-top:17px;}
.modal-content h3 {padding: 0 0 0 0;padding-right: 10px; font-size:1.6em;margin-bottom: 1em;}
.modal-content p {padding-right: 10px;}
.magOpen {overflow: hidden;}
ul li span.psmall {font-size:0.5em;}
span.italic {font-style: italic;}
#financials h3, #stockholder h3{padding-top: 4em; padding-bottom: 1.5em; font-weight: bold; color: #002D72;}
#letter h3.intro {padding-top:0;}
.section-hdr-ocean {padding: 8em 0 2.5em;}
#letter h3,  #banking h3, #institutional h3, #citizenship h3 {
	color: #002d72; 
	padding: 0 19.7% .3em 19.7%; 
	display: inline-block; 
	font-size: 3.2em;
	line-height: 1.2em;
}
#progress {padding-top: 72px;}
* {-webkit-tap-highlight-color: rgba(0,140,230,0.2) !important;}
span.spanish {font-family: Arial, Helvetica, sans-serif;}
.notation {display: block; font-size: 10px; padding-bottom: 3px;}
.cde-right 	{float: right; padding: 0 0 24px 26px; }
.cde-left	{float: left; padding: 0 0 24px 26px; }

/** PROGRESS **/
div.progress-content-container {margin-bottom: 27px;background: #fff;background: rgba(255, 255, 255, 0.3);padding: 36px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; clear: both; content:""; }
.content-img.progresslrg {height: 800px; display: block;}
a.white-link, a.white-link:link, a.white-link:visited {color: #fff;}
.progress-last {padding-bottom: 1.5em;}

div.modal-content a {color:#00bdf2;}
div.modal-content a:hover {color:#004488 /* 008CE6 */; text-decoration: underline;}


/***************  MEDIA QUERIES  ^^^^^^2560px^^^^^^ ************************************/
@media only screen and (max-width: 2048px) {.mala {border-radius: 0px 0px 70px 70px;}}
@media only screen and (max-width: 1920px) {}
@media only screen and (max-width: 1680px) {}
@media only screen and (max-width: 1600px) {}
@media only screen and (max-width: 1480px) {
	.content-img.progresslrg {height: 755px;}
}
@media only screen and (max-width: 1400px) {}
@media only screen and (max-width: 1366px) {
	.gcb-callout-intro {flex-direction: column;}
}
@media only screen and (max-width: 1280px) {
	#value-proposition h3 {font-size: 2.5em;}
}
@media only screen and (max-width: 1152px) {
	.content-img.progresslrg {height: 480px;}
}
@media only screen and (max-width: 1080px) {
	#headcontainer {padding: 15px 0;}
	#maincontent, header{width: 90%; margin: 0 auto;}
	.pushy a, ul.pnav li.header {padding: 10px 25px;font-size: 0.90em;}
	a.social {width: 30px;height: 30px;background: url(../images/social.png) no-repeat 0px 0px;padding:0;margin:0;}
	ul.pnav li.socialbtns {padding: 10px 20px 12px;}
}
@media only screen and (max-width: 1024px) {
	#value-proposition h3 {font-size: 2.2em;padding-top:3.2em; }
	.cde-right 	{float: right; padding: 0 0 20px 20px; max-width: 50%; }
	.cde-left	{float: left; padding: 0 0 20px 20px; max-width: 50%; }

}
@media only screen and (max-width: 961px) {
	div.span_1_of_1 p, div.ceo-container, h3, h3.intro, div.three-col-callout h3, div.lightcyan-large h3, div.centered-pic-container, div.progress-container, div.fin-container, div.lightcyan-large div.hero div.caption, div.hero-one-wide div div.caption, div.inner-row {padding-left: 11%; padding-right: 11%;}
	#letter h3,  #banking h3, #institutional h3, #citizenship h3 {
		background-size: 1.4em 12px;
		padding: 0 6% .3em 10.4%; 
		}
	
}
@media only screen and (max-width: 800px) {
	#maincontent {margin: 0; width: 100%;}
	header {width: 100%; margin:0;}
	#headcontainer {padding: 10px 0;}
	.header-wrapper {padding: 0 1.8em;}
	.citilogo {width:41px; height: 30px;}
	.menu-btn, .done-btn {width: 72px; padding: 8px;}
	div#splash div.splash-image img {margin-top: 50px;}
	.content-img.progresslrg {height: 408px;}
	.content-img.progresslrg {border-radius: 0 0 40px 40px;}
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
	#maincontent {margin: 0;width: 100%;}
}
@media only screen and (max-width: 768px){
	#maincontent {margin: 0;width: 100%;}
	.done-btn {font-size: 0.85em; font-size: 100%;}
	.pushy{font-size: 1.0em;}
	.citilogo {width:41px; height: 30px;}
	.citilogo img {margin-top: 2px;}
	.mala {border-radius: 0px 0px 50px 50px; /*border-radius: 0px 0px 70px 70px;*/}
}
@media only screen and (device-width: 768px) and (device-height: 1024px) {
  div.hero-four-wide div.img {height:490px; background-size:cover;}
  #letter h3,  #banking h3, #institutional h3, #citizenship h3 {
	background-size: 1.4em 12px;
	padding: 0 6% .3em 10.4%; 
	}
}
@media only screen and (max-width: 720px) {
	.content-img.progresslrg {height: 380px;}
	.cde-right 	{float: right; padding: 0 0 20px 20px; max-width: 50%; }
	.cde-left	{float: left; padding: 0 0 20px 20px; max-width: 50%; }
}
@media only screen and (max-width: 640px) {
	.pushy a {font-size: 0.80em;}
	.ten-k a img {width: 75%; height: auto;}
	.content-img.progresslrg {height: 340px;}
}
@media only screen and (max-width : 600px){
	.content-img.progresslrg {height: 315px;}
}
@media only screen and (max-width: 540px) {
	.content-img.progresslrg {height: 285px;}
	ul.view-bio li.view-btn div, div.viewphoto-btn div{padding: 13px 28px; border-radius: 10px;}
	ul.view-bio li.view-btn div a {font-size: 13px;}
	ul.view-bio li span {font-size: 13px;}
}
@media only screen and (max-width: 480px) {
	.citilogo img {margin-top: 0px;}
	#maincontent {margin: 0;width: 100%;}
	.span_1_of_1 {width: 100%;}
	div.span_1_of_1 p {font-size: 1em; }
	.menu-btn, .done-btn{width: 38px;padding: 5px;}
	.done-btn {font-size: 0.85em;padding: 6px 6px 7px 6px;}
	.menu-btn:before {content: "";}
	.pushy a {padding: 10px 25px;font-size: 0.80em;}
	ul.pnav li.header {padding: 10px 25px;font-size: 0.80em;}
	a.social {padding:0; margin:0;}
	.content-img.progresslrg {height: 255px;}
	div.span_1_of_1 p, div.ceo-container, h3, h3.intro, div.three-col-callout h3, div.lightcyan-large h3, div.centered-pic-container, div.progress-container, div.fin-container, div.inner-row, .gcb-callout-wrapper {padding-left: 5%!important; padding-right: 5%!important;}
	div.modal-content h3 {font-size:1.4em; padding-left:0%!important; padding-right:0%!important;}
	div.modal-content p {font-size: 13px;}
	.timeline-container:after {right:0;}
	#letterMain, #bankingMain, #institutionalMain {padding-bottom: 3em;}
	#value-proposition div.span_1_of_1:first-child {padding-top: 3em; padding-bottom: 3em;}
	#value-proposition div.span_1_of_1:nth-child(2) {padding-top: 3em; padding-bottom: 3em;}
	#financials h3, #letter h3, #banking h3, #institutional h3, #citizenship h3, #stockholder h3, .chart-hdr {font-size: 1.5em;}
	.chart-hdr {padding-top: .4em;}
	.ocean-callout {font-size: 1.6em; margin-bottom: 1.3em;}
	div.fin-container {padding-bottom: 2em;}
	.ceo-container, .gcb-watermark, .icg-watermark, .citizenship-watermark {background: none;}
	.section-hdr-ocean {padding: 4.5em 0 2.5em;}
	.mala {border-radius: 0px 0px 35px 35px; /*border-radius: 0px 0px 70px 70px;*/}
	#letter h3,  #banking h3, #institutional h3, #citizenship h3 {
	background-size: 0em 0px; /*  */
	padding: 0 6% .3em 10.4%; 
	}
	ul.view-bio {
		flex-direction: column;
	}
	div.span_1_of_1 p.cp-caption {padding-left: 0!important; padding-right:0!important;}
	
}
@media all and (min-width: 321px) and (max-height: 480px) {

}
@media only screen and (max-width: 414px) {
	/** IPHONE 6PLUS **/
	div.span_1_of_1 p, ul.content-list,div.progress-vid-container p.vid-copy {font-size: 1em;}
	h3 {font-size: 1.4em;}
	a.content-img.progresslrg {border-radius: 0 0 30px 30px; height: 220px;}
	#progress {padding-top: 3.6em;}
	div.progress-vid-container {padding: 20px;}
	.mfp-close {width: 38px;}
	.white-popup-block {max-height: 570px;}
}
@media only screen and (max-width: 375px) {
	/** IPHONE 6 **/
	a.content-img.progresslrg {height: 200px;}
	.cde-right 	{ clear: both; max-width: 100%;margin: auto;}
	.cde-left	{ clear: both; max-width: 100%;margin: auto;}

}
@media only screen and (max-width: 360px) {
	.header-wrapper {padding: 0 1.1em;}
	a.content-img.progresslrg {height: 190px;}
	p.charts-mobile {display: block;}
	p.charts.revenues {display: none;}
}
@media only screen and (max-width: 320px) {
	.span_1_of_1 {width: 100%;}
	table.fin-tbl, p.table-footer {font-size: 0.83em;}
	p.table-footer {padding-top: 0px;}
	a.content-img.progresslrg {height: 170px;}
	ul.view-bio li.view-btn div, div.viewphoto-btn div{padding: 13px 18px; border-radius: 10px;}
	ul.view-bio li.view-btn div a {font-size: 12px;}
	ul.view-bio li span {font-size: 12px;}
}
@media only screen and (max-width: 300px) {
	a.content-img.progresslrg {height: 150px;}
}