.jumbotron.parallax {
	background-image: url("/commercialbank/sa/covid-19/assets/img/jumbotron/jumbotron.jpg");
}
#article-1 {
	background-image: url("/commercialbank/assets/home/img/thumbs/article-1.jpg");
}
#article-2 {
	background-image: url("/commercialbank/assets/home/img/thumbs/article-2.jpg");
}
#article-3 {
	background-image: url("/commercialbank/assets/home/img/thumbs/article-3.jpg");
}
.background-forest [id^="home-press-"] a {
	color: #fff;
}
.background-forest [id^="home-press-"] a:hover {
	color: #00bdf2;
}

@media (max-width: 767px) {
.jumbotron.parallax {
	padding-top: 100px;
}
}

@media (max-width: 991px) {
.jumbotron.parallax {
	padding-top: 180px;
}
}

@media only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 1.25dppx) {
.jumbotron.parallax {
	background-image: url("/commercialbank/sa/covid-19/assets/img/jumbotron/jumbotron-2x.jpg");
}

/*HOVER BOXES*/
/*thumb nail hover    */
a.hover-thumb>div {
	background: #005aa1!important;
}
a.hover-thumb img {
	display: block!important;
	max-width: 100%!important;
	-webkit-transition: -webkit-transform 0.35s!important;
	transition: transform 0.35s!important;
	-webkit-transform-origin: 50% 50%!important;
	transform-origin: 50% 50%!important;
	-webkit-backface-visibility: hidden!important;
}
a.hover-thumb:hover img {
	-webkit-transform: scale3d(0.9, 0.9, 1) rotate(0.01deg)!important;
	transform: scale3d(0.9, 0.9, 1) rotate(0.01deg)!important;
}
a.hover-thumb figcaption {
	background: #eee!important;
}
a.hover-thumb h2 {
	font-size: 1.325rem !important;
}
a.hover-thumb span {
	color: #53565a!important;
}
a.hover-thumb:hover h2, a.hover-thumb:hover span {
	color: #00bdf2!important;
}
.no-underline {
	text-decoration: none !important;
}
.relationships_box h3 a {
	color: inherit;
	text-decoration: none;
}
.display-block {
	display: block;
}
.img-center {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.relationships_box > a.img-center {
	margin-top: 1em;
	margin-bottom: 1em;
	width: 85px;
	height: 85px;
}
.relationships_box h3 a {
	color: inherit;
	text-decoration: none;
}
.relationships_box h3 a:hover, .relationships_box h3 a:focus {
	color: #00bdf2;
}
.relationships_box p {
	text-align: center;
}
.relationships_box_border {
	border-right: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
}

/*FLEX BOX    */

.display-flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.row-eq-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.row-eq-height > *, .flex-column {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-right: -0.25px !important;
	margin-left: -0.25px !important;
}
.flex-dir-row {
	-webkit-box-direction: row;
	-moz-box-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flex-dir-row-reverse {
	-webkit-box-direction: row-reverse;
	-moz-box-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.flex-dir-column {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.flex-grow-1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-grow: 1;
}
.justify-center {
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.justify-align-center {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.flex-align-center {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	-moz-box-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.flex-auto {
	-webkit-box-flex: auto;
	-webkit-flex: auto;
	-moz-box-flex: auto;
	-ms-flex: auto;
	flex: auto;
}
.min-height-1 {
	min-height: 1%;
}

@media (max-width: 767px) {
.row-eq-height > *, .flex-column {
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.flex-dir-row-xs {
	-webkit-box-direction: row;
	-moz-box-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flex-dir-row-reverse-xs {
	-webkit-box-direction: row-reverse;
	-moz-box-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
}

@media (min-width: 576px) {
.row-eq-height > .col-xs-offset-0 {
	margin-left: 0 !important;
}
.row-eq-height > .col-xs-offset-1 {
	margin-left: 8.33333333% !important;
}
.row-eq-height > .col-xs-offset-2 {
	margin-left: 16.66666667% !important;
}
.row-eq-height > .col-xs-offset-3 {
	margin-left: 25% !important;
}
.row-eq-height > .col-xs-offset-4 {
	margin-left: 33.33333333% !important;
}
.row-eq-height > .col-xs-offset-5 {
	margin-left: 41.66666667% !important;
}
.row-eq-height > .col-xs-offset-6 {
	margin-left: 50% !important;
}
.row-eq-height > .col-xs-offset-7 {
	margin-left: 58.33333333% !important;
}
.row-eq-height > .col-xs-offset-8 {
	margin-left: 66.66666667% !important;
}
.row-eq-height > .col-xs-offset-9 {
	margin-left: 75% !important;
}
.row-eq-height > .col-xs-offset-10 {
	margin-left: 83.33333333% !important;
}
.row-eq-height > .col-xs-offset-11 {
	margin-left: 91.66666667% !important;
}
.row-eq-height > .col-xs-offset-12 {
	margin-left: 100% !important;
}
}

@media (min-width: 768px) {
.row-eq-height > .col-sm-offset-0 {
	margin-left: 0 !important;
}
.row-eq-height > .col-sm-offset-1 {
	margin-left: 8.33333333% !important;
}
.row-eq-height > .col-sm-offset-2 {
	margin-left: 16.66666667% !important;
}
.row-eq-height > .col-sm-offset-3 {
	margin-left: 25% !important;
}
.row-eq-height > .col-sm-offset-4 {
	margin-left: 33.33333333% !important;
}
.row-eq-height > .col-sm-offset-5 {
	margin-left: 41.66666667% !important;
}
.row-eq-height > .col-sm-offset-6 {
	margin-left: 50% !important;
}
.row-eq-height > .col-sm-offset-7 {
	margin-left: 58.33333333% !important;
}
.row-eq-height > .col-sm-offset-8 {
	margin-left: 66.66666667% !important;
}
.row-eq-height > .col-sm-offset-9 {
	margin-left: 75% !important;
}
.row-eq-height > .col-sm-offset-10 {
	margin-left: 83.33333333% !important;
}
.row-eq-height > .col-sm-offset-11 {
	margin-left: 91.66666667% !important;
}
.row-eq-height > .col-sm-offset-12 {
	margin-left: 100% !important;
}
.flex-dir-row-sm {
	-webkit-box-direction: row;
	-moz-box-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flex-dir-row-reverse-sm {
	-webkit-box-direction: row-reverse;
	-moz-box-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
}

@media (min-width: 992px) {
.row-eq-height > .col-md-offset-0 {
	margin-left: 0 !important;
}
.row-eq-height > .col-md-offset-1 {
	margin-left: 8.33333333% !important;
}
.row-eq-height > .col-md-offset-2 {
	margin-left: 16.66666667% !important;
}
.row-eq-height > .col-md-offset-3 {
	margin-left: 25% !important;
}
.row-eq-height > .col-md-offset-4 {
	margin-left: 33.33333333% !important;
}
.row-eq-height > .col-md-offset-5 {
	margin-left: 41.66666667% !important;
}
.row-eq-height > .col-md-offset-6 {
	margin-left: 50% !important;
}
.row-eq-height > .col-md-offset-7 {
	margin-left: 58.33333333% !important;
}
.row-eq-height > .col-md-offset-8 {
	margin-left: 66.66666667% !important;
}
.row-eq-height > .col-md-offset-9 {
	margin-left: 75% !important;
}
.row-eq-height > .col-md-offset-10 {
	margin-left: 83.33333333% !important;
}
.row-eq-height > .col-md-offset-11 {
	margin-left: 91.66666667% !important;
}
.row-eq-height > .col-md-offset-12 {
	margin-left: 100% !important;
}
.flex-dir-row-md {
	-webkit-box-direction: row;
	-moz-box-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flex-dir-row-reverse-md {
	-webkit-box-direction: row-reverse;
	-moz-box-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
}

@media (min-width: 1200px) {
.row-eq-height > .col-lg-offset-0 {
	margin-left: 0 !important;
}
.row-eq-height > .col-lg-offset-1 {
	margin-left: 8.33333333% !important;
}
.row-eq-height > .col-lg-offset-2 {
	margin-left: 16.66666667% !important;
}
.row-eq-height > .col-lg-offset-3 {
	margin-left: 25% !important;
}
.row-eq-height > .col-lg-offset-4 {
	margin-left: 33.33333333% !important;
}
.row-eq-height > .col-lg-offset-5 {
	margin-left: 41.66666667% !important;
}
.row-eq-height > .col-lg-offset-6 {
	margin-left: 50% !important;
}
.row-eq-height > .col-lg-offset-7 {
	margin-left: 58.33333333% !important;
}
.row-eq-height > .col-lg-offset-8 {
	margin-left: 66.66666667% !important;
}
.row-eq-height > .col-lg-offset-9 {
	margin-left: 75% !important;
}
.row-eq-height > .col-lg-offset-10 {
	margin-left: 83.33333333% !important;
}
.row-eq-height > .col-lg-offset-11 {
	margin-left: 91.66666667% !important;
}
.row-eq-height > .col-lg-offset-12 {
	margin-left: 100% !important;
}
.flex-dir-row-lg {
	-webkit-box-direction: row;
	-moz-box-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flex-dir-row-reverse-lg {
	-webkit-box-direction: row-reverse;
	-moz-box-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
}
/*bounce animation     */
@keyframes bounce {
 0%, 100%, 20%, 50%, 80% {
 -webkit-transform: translateY(0);
 -ms-transform:     translateY(0);
 transform:         translateY(0)
}
 40% {
 -webkit-transform: translateY(-30px);
 -ms-transform:     translateY(-30px);
 transform:         translateY(-30px)
}
 60% {
 -webkit-transform: translateY(-15px);
 -ms-transform:     translateY(-15px);
 transform:         translateY(-15px)
}
}
div {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
}
#box1:hover {
	cursor: pointer;
	animation-name: bounce;
	-moz-animation-name: bounce;
}
#box2:hover {
	cursor: pointer;
	animation-name: bounce;
	-moz-animation-name: bounce;
}
#box3:hover {
	cursor: pointer;
	animation-name: bounce;
	-moz-animation-name: bounce;
}
/* ---------------------------------------- CCB HOVER ---------------------------------------- */
a.hover-thumb:hover h2, a.hover-thumb:hover span {
	color: #005aa1 !important;
	opacity:0.8 !important;
}
/* ---------------------------------------- CUSTOM CAROUSEL ---------------------------------------- */

	.left.carousel-control, .right.carousel-control {
    background-image: none;
    /*background-color: #ffffff;*/
    width: 30px;
}

.carousel-control {
    background-color: #005aa1;
    position: absolute;
    top: 35%;
    bottom: 0px;
    left: 0px;
    width: 30px;
	height: 60px;
    font-size: 20px;
	padding-top:18px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
    /*background-color: rgba(0,0,0,0);*/
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.carousel-control:hover, .carousel-control:active, .carousel-control:visited {
	color:#00bdf2;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.carousel-indicators li {
    background-color: #005aa1;
}

.carousel-indicators li.active {
    background-color: #eeeeee;
}
.reposition-indicators {position:relative;}
.carousel-indicators {position:absolute;  margin-top:-55px; z-index:100}

.section-article-thumb {
	/*height:300px;*/

}

.section-article-inner {
	background-color: rgba(0, 45, 114, .9);
}

.section-article-inner.carousel-purple {
	background-color: rgba(107, 48, 119, .9);
}

.section-article-inner.carousel-plum {
	background-color: rgba(137, 12, 88, .9);
}

.section-article-inner.carousel-gray {
	background-color: rgba(51, 51, 51, .9);
}
.pr-45 {padding-right:45px !important}


	#carousel-home .item {
	background-position: center center;
	background-size:cover;
}

		/* USE THIS CLASS ONLY WHEN CAROUSEL BACKGROUND BACKGROUND IMAGE DOESN'T WORK WELL, SUCH AS, IF IT HAS TEXT, OR LOGOS */
		.background-off {
			background-image:none !important
		}

		.background-off .section-article-inner {
	background-color: rgba(0, 45, 114, 1);
}
		.background-off .section-article-inner.carousel-purple {
	background-color: rgba(107, 48, 119, 1);
}
		.background-off .section-article-inner.carousel-plum {
	background-color: rgba(137, 12, 88, 1);
}
		.background-off .section-article-inner.carousel-gray {
	background-color: rgba(83, 86, 90, 1);
}




/* carousel media queries */

/* push out carousel buttons on wide screen view only */
/* lg */
@media (min-width: 1200px) {
		/*.carousel h4 {padding-left:45px}
		.carousel-heading h4 {padding-left:0}
		.carousel p {padding-left:45px}*/

}
/* md */
@media (max-width: 1199px) {
		/*.carousel h4 {padding-left:45px}
		.carousel-heading h4 {padding-left:0}
		.carousel p {padding-left:45px}*/
}
/* sm */
@media (max-width: 991px) {
		/*.carousel h4 {padding-left:0px}
		.carousel p {padding-left:0px}*/
.carousel-control {
	top: 25%;}

}
/* xs */
@media (max-width: 767px) {
		/*.carousel-heading {margin-right:0}
		.carousel-heading h4 {font-size:.75em}*/

}
/* xxs */
@media (max-width: 575px) {
.carousel-control {
	top: 0;}

}

@media (min-width: 1340px) {
		.left.carousel-control {left: -60px;}
		.right.carousel-control {right: -60px;}
}


/* ---------------------------------------- CUSTOM BOXES ---------------------------------------- */

  .insights-img {background-image: url("https://uat.citi.com/tts/assets/home/img/insights-thumb-v.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height:238px;}
  @media only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 1.25dppx) {
    .insights-img {
      background-image: url("https://uat.citi.com/tts/assets/home/img/insights-thumb-v-2x.jpg");
    }
  }
  .background-citi-light-blue {
	background-color: #00bdf2 !important;
	color: #fff;
}
