.span_1_of_1 {width: 100%;}
div.content-img-container.small, div.corbat-small, .bioContainer,img.corbat-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: #00BDF2;}
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;}
.ocean-callout {color: #008ce6; margin-bottom: 1.8em;}
div.corbat-large {padding: 0px;overflow: hidden;margin-top: 0px;width: 100%; height: auto;}
div.corbat-container {margin-bottom: 1.6em;}
#maincontent #splash {line-height:0;}
#splash {clear: both; position: relative; /*min-height: 100vh;*/ background: #002d72;}
#value-proposition div.span_1_of_1:first-child {background: #008ce6; padding-top: 6em; padding-bottom: 6em;}
#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: #fff; background: #002d72;}
a.content-img.progresslrg {background-image: url(https://uat.citigroup.com/rcs/citigpa/storage/public/Annual_Report/2017/images/2016/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: #00bdf2; background: -moz-linear-gradient(top, #00bdf2 31%, #00498c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#00bdf2), color-stop(100%,#00498c)); background: -webkit-linear-gradient(top, #00bdf2 31%,#00498c 100%);background: -o-linear-gradient(top, #00bdf2 31%,#00498c 100%); background: -ms-linear-gradient(top, #00bdf2 31%,#00498c 100%); background: linear-gradient(to bottom, #00bdf2 31%,#00498c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bdf2', endColorstr='#00498c',GradientType=0 );}
#progress h3 {color: #fff; padding-top: 1.6em; padding-bottom:0.3em;}
div#progress div.col.span_1_of_1 p {color: #fff;}
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 {color: #666;}
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 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: #999;padding-top: 10px;}
p.table-key {color: #666;font-style: italic;padding-bottom: 6px;padding-top: 15px;}
div.corbat-container p.introBig {padding-left: 0;padding-right: 0%;}
div.corbat-container {padding-left: 19.5%;padding-right: 19.5%;}
div.centered-pic-container {padding: 0 19.5%; margin-bottom: 1.6em;}
.charts {text-align: center;}
.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(https://uat.citigroup.com/rcs/citigpa/storage/public/Annual_Report/2017/images/page-break.gif) repeat-x 0 1px;}
#letterMain, #bankingMain, #institutionalMain, #citizenshipMain, #stockholderMain {/*padding-bottom: 3em;*/}
ul.view-bio {margin:0;padding:0;}
ul.view-bio li {padding: 14px 0px; display: inline-block; width: 50%; float: left; font-family: Arial, Helvetica, sans-serif;}
ul.view-bio li span {display: block; padding:0; color: #333; font-weight: bold; font-size: 14px; padding-top: 4px}
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: #0f6cae!important; padding: 13px 38px; color: #fff; font-weight: bold; display: inline-block; font-family: Arial, Helvetica, sans-serif; border-radius: 10px; font-size: 1em;}
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 {font-size: 0.4em; 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, #letter h3, #banking h3, #institutional h3, #citizenship h3, #stockholder h3{padding-top: 4em; padding-bottom: 1.5em; font-weight: bold; text-transform: uppercase; letter-spacing: -1px;}
#letter h3.intro {padding-top:0;}
#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;}


/** 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: 628px; 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:#008CE6; text-decoration: underline;}


/***************  MEDIA QUERIES  ^^^^^^2560px^^^^^^ ************************************/
@media only screen and (max-width: 2048px) {}
@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: 530px;}
}
@media only screen and (max-width: 1400px) {}
@media only screen and (max-width: 1366px) {}
@media only screen and (max-width: 1280px) {}
@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(https://uat.citigroup.com/rcs/citigpa/storage/public/Annual_Report/2017/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) {}
@media only screen and (max-width: 961px) {
	div.span_1_of_1 p, div.corbat-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 {padding-left: 11%; padding-right: 11%;}
}
@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;}
}
@media only screen and (device-width: 768px) and (device-height: 1024px) {
  div.hero-four-wide div.img {height:490px; background-size:cover;}
}
@media only screen and (max-width: 720px) {
	.content-img.progresslrg {height: 380px;}
}
@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.corbat-container, h3, h3.intro, div.three-col-callout h3, div.lightcyan-large h3, div.centered-pic-container, div.progress-container, div.fin-container {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;}
	#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;}
}
@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;}
}
@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;}
}