.citiLogo {
	width: 180px;
	height: 52px;
	display: block;
	background-image: url(images/citibankLogo.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

ul.citiVideoList { width: 940px;}
li.citiVideoItem { width: 26%; float: left; margin-left:56px;}
video.citiVideo {      
	width: 100%;
    border-radius: 40px;
    border: solid 12px #000;
   } 

.videoShell {
/*
    background: url(images/Citi_PhoneShell.png) no-repeat;
    width: 354px;
    height: 324px;
    position: absolute;
*/
   }


@media only screen and (min-width:0px) and (max-width:499px) {	
	.citiApp_bb { display:none!important; }
}	

@media only screen and (min-width:500px) and (max-width:767px) {	
	.citiApp_bb {
		display: block;
		width: 580px;
		height: 143px;
		background-image: url(images/citiApp_bb.png);
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		right: -120px;
		bottom: -2px;
   }
}

@media only screen and (min-width:768px) and (max-width:1004px) {	
	.citiApp_bb {
	    display: block;
	    width: 790px;
	    height: 561px;
	    background-image: url(images/citiApp_bb.png);
	    background-repeat: no-repeat;
	    background-size: contain;
	    position: absolute;
	    right: 0px;
	    bottom: -62px;
    }
}

@media only screen and (min-width:1005px) and (max-width:2259px) {	
	.citiApp_bb {
	    display: block;
	    width: 790px;
	    height: 561px;
	    background-image: url(images/citiApp_bb.png);
	    background-repeat: no-repeat;
	    background-size: contain;
	    position: absolute;
	    right: 0px;
	    bottom: -62px;	    } 
	}

@media only screen and (min-width:2260px) {	
	.citiApp_bb {
	    display: block;
	    width: 790px;
	    height: 511px;
	    background-image: url(images/citiApp_bb.png);
	    background-repeat: no-repeat;
	    background-size: contain;
	    position: absolute;
	    right: -40px;
	    bottom: -62px;		   
		   } 
		   
		.citiLogo {
		    width: 180px;
		    height: 52px;
		    display: inline-block;
		    background-image: url(images/citibankLogo.svg);
		    background-repeat: no-repeat;
		    background-size: contain;
		}
	}
	
@media only screen and (max-width:700px){ 
	.mainImgContainer .mainImg {display:none;}
	.hello {height: 330px !important;}
	section.hello {background-image:none !important;}

	.citiLogo {
	    width: 180px;
	    height: 52px;
	    display: inline-block;
	    background-image: url(images/citibankLogo.svg);
	    background-repeat: no-repeat;
	    background-size: contain;
    }
}
	section.hello {
		background-color:#0e5aa4;
		height: 700px!important;
	}


/*abstract section*/
	section.abstract { 
		font-family: interstate, sans-serif; /* font-weight: 100; */ font-style: normal; width:100%; padding:72px 0; background-color:#fbfbfb; clear:both;			
		
		@media only screen and (min-width:701px) and (max-width:970px){
		width:auto; max-width:100%; padding:24px 24px; background-color:#fbfbfb; clear:both;
		}
		
		@media only screen and (max-width:700px) {
		width:auto; padding:24px 24px; background-color:#fbfbfb; clear:both;
		}
	}

	section.abstract p {font-size:14px!important; margin:0 0 8px!important; padding:0;}
    section.abstract h3 {margin:0 auto 48px!important;}
    section.abstract ul {
	    @media only screen and (min-width:971px) {width:970px;}
		@media only screen and (min-width:701px) and (max-width:970px) {width:98%;}
		@media only screen and  (max-width:700px) {width:98%;}
		}
/*     section.abstract ul {width:1180px; margin-top:0;} */

 /*abstract-list*/   
    .abstract-list {
	    @media only screen and (min-width:971px) { 
			width: 46.764%; display: block; float: left;		    
		    }
		
		@media only screen and (min-width:701px) and (max-width:970px) { 
			width: 100%; display: block; float:none;		    
			}
		
		@media only screen and (max-width:700px) {
			width: 100%; display: block; float:none;		    
			 }
    }

    
	.abstract-list:nth-child(even){margin-left:40px; width:48.764%;

	    @media only screen and (min-width:971px) { 
			margin-left:40px; 
		    }
		
		@media only screen and (min-width:701px) and (max-width:970px) {
			width: 100%;
			margin-left:0; 
			}
		
		@media only screen and (max-width:700px) {
			width: 100%;
			margin-left:0; 
			}

	}
	
	/*abstract-list h*/	
    section.abstract h3 {margin:0 auto 48px!important;}
/*abstract-list p*/	
	@media only screen and (max-width: 700px) {
		section.abstract p {font-size:14px!important; margin:0 0 8px!important; padding:0!important;}
	}
	@media only screen and (min-width: 701px) and (max-width: 970px) {
		section.abstract p {font-size:14px!important; margin:0 0 8px!important; padding:0!important;}
	}
	@media only screen and (min-width: 971px) {
		section.abstract p {font-size:14px!important; margin:0 0 8px!important; padding:0!important;}
	}
    
 /*oneCol*/   
	.oneCol {width:auto; max-width: 640px; padding:0; margin: 0 auto; text-align: left!important; }

	 @media only screen and  (max-width:700px) {
		.oneCol {width: auto; margin: 0 auto; text-align: left!important;}	
		 }
		 
	@media only screen and (min-width:701px) and (max-width:970px) {
/* 		.oneCol {width: auto; margin: 0 auto; text-align: left!important;}	 */
		}

	@media only screen and (min-width:971px) {
/* 		.oneCol {width: auto; margin: 0 auto; text-align: left!important;}	 */
		}


 /*twoCol*/	
	.twoCol{width:480px!important; float:left;}
	
	@media only screen and (min-width:971px) {
		.twoCol{width:440px!important; float:left;}
	}
	
	@media only screen and (min-width:971px) {
		.twoCol:nth-child(even) {width:480px!important; margin-left:32px; float:right;}
	}
	
	@media only screen and (max-width:700px) {
		.twoCol:nth-child(odd), .twoCol:nth-child(even) {
			margin-left:0;
			float:none;
			width:auto!important;
		}
	}


	.threeUp { width:30.859%!important;}



	

.iPhone_LH {
	width: 480px;
	height: 768px;
	background-image: url('images/iPhone_LH.png');
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	float: left;
	background-size: cover;
	bottom: -92px;
	margin-right:64px;
}

.macbook {
	width: 865px!important;
    height: 504px;
    background: url(images/macbook.png) no-repeat;
    position: relative!important;
    background-size: contain;
    top: 45px;
   }

@media only screen and (max-width:700px) {
 .macbook {
	 width:auto;
	 height:auto;
	 max-width:100%;
	 display:none;
 }	
 .macbook img {
	 width:inherit;
	 height: inherit;
 }
}

@media only screen and (max-width:700px) {
	.anmShell-iph {
		display:none;
/*
		width:auto;
		max-width:100%;
		height:auto;
*/
	}
	
/*
	.anmShell-iph img {
		height:inherit;
	}
*/
}


/*gif animation positioning*/
	.Classic {position: absolute; left:175px; top:36px;}
	.Classic img {width:229px!important; height:413px!important;}

	.CE-cards {position:relative; padding-top:124px; margin-left:32px;}
	.CE-cards img {width:890px!important; height:auto!important;}

/*macbook*/
	ul.ux li:nth-child(even) img.dt  {
    width: 635px!important;
    height: auto!important;
    position: absolute;
    left: 104px;
    top:16px;
/*     top: 38px; */
    }


	.blueBand-citiApp h1 {
	    font-size: 32px;
	    line-height: 40px;
	    text-align: left;
	    font-weight: 700;
	    font-style: normal;
	    color: #ffffff;
	    margin: 24px 0 24px;
	    padding: 0;
	    display: block;
		max-width: 660px;
		width: auto;
    	}

	.blueBand-citiApp p {
		font-family: interstate, sans-serif;
		font-style: normal;
/* 		font-weight: 100;     */
		margin:24px 0 24px;
		max-width:472px;
		width:auto;
		font-size:16px;
		line-height:24px;
	}
	
	.blueBand-citiApp a {
		font-family: interstate, sans-serif;
		font-style: normal;
/* 		font-weight: 100;     */
		margin-top:64px;
		color:#ffffff;
		text-decoration: none;
		font-weight: 600;
		display:block;
		font-size:16px;
		line-height:24px;
	}
	
	section.hello .intro{display:none;}
	.mainImgContainer {display:block;}
	.blueBand-citiApp {color: #ffffff;width: 100%;display:block!important;clear: left;padding-top: 20px!important;height: auto;clear: both;margin-top: 10px;}	
	.blueBand-Canda,.blueBand-CheFar,.tealBand-ESapp,.blueBand-MyAcc, .blueBand-AFinder, .greenBand-Handf, .redBand-Nittsu{display:none;}	

@media only screen (min-width:701px) and (max-width:970px) {
	h2.white.charcoal {text-align: center!important; font-weight: 600!important; } 
}
	.sticky {background-color:rgba(14,90,164,.98)!important;}
	.dropdownbox li a {color:#38a3d9!important;}
	
/*Case study deepdive*/
.uxCS-Btn {
    width: fit-content;
    margin: 24px auto!important;
}

a.pill {
	color:#f5f5f5;
	font-size:16px;
	font-family: interstate, sans-serif;
	font-weight: 400;
	display: inline-block;
	margin:0 auto;
	padding:8px 16px;
	width:auto; min-width:120px;
	border-radius:40px;
	background-color:rgba(0,0,0,.98);
	text-align: center;
	border:none;
	position: relative;
	cursor:hand;
	text-decoration: none;
}