@media only screen and (max-width:1000px) { .baAppBB {display:none!important; } }
@media only screen and (min-width:1001px) and (max-width:2200px) {	
	.sypiBB { 		    
			width: 627px;
		    height: 515px;
		    background-image: url(images/SYPI_BB.png);
		    background-repeat: no-repeat;
		    background-size: contain;
		    position: absolute;
		    right: 0!important;
		    bottom:0;
 }
}	
@media only screen and (min-width:2201px) {	
		.sypiBB {
		    width: 627px; height: 515px;
		    background-image: url(images/SYPI_BB.png);
		    background-repeat: no-repeat;
		    background-size: contain;
		    position: absolute;
		    right: 512!important;
		    bottom:0;
		} 
	}
@media only screen and (max-width:749px){
	.mainImgContainer .mainImg {display:none;}
	.hello {height: 330px !important;}
	section.hello {background-image:none !important;}
	}
	section.hello {
		background-color:#042098;
		height: 800px!important;
	}

 	.SYPI_cols {
			width:970px!important;		
	}
	
	.SYPI_cols li {
			width:450px!important;
	}

	section.hello .intro{display:none;}
	
	.syncLogo {
		width: 132px;
		height: 40px;
		background-image: url('images/synchrony-logo.svg');
		background-repeat: no-repeat;
		display: block;
		clear: both;
		background-size: contain;
	}
    .bandContainer {
	    width:auto;
	    max-width:970px;
	    margin:100px auto 0;
    }
	@media only screen and (max-width:700px) {
		section.hello {
			height:auto!important;
			padding-bottom:48px!important;
		}
	}
	.arrow {
		width:24px; height:24px;
		background:url('images/arrow_black.svg') no-repeat;
		display: inline-block;
		background-size: contain;
		vertical-align: middle;
		margin-left:8px;
	}
@media only screen and (min-width:971px) {
	.mainContent ul { width:1480px; margin: 24px auto 0!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%;}
		}

 /*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:46.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 section*/
    section.abstract {
	    font-family: interstate, sans-serif;
/* 	    font-weight: 100; */
	    font-style: normal;
	    width:100vw; padding:72px 0; background-color:#fbfbfb; clear:both;}
	    
    @media only screen and (max-width:700px) {
   		section.abstract ul {
	   		width:auto;
	   		max-width: 100%; 
	   		margin-top:0;
	   		padding:24px 24px;
	   		}
    }
    
    @media only screen and (min-width:1001px) and (max-width:2200px) {
 		section.abstract ul {width:970px; margin-top:0;}
   	}
    
	@media only screen and (min-width:2201px) {	
   		section.abstract ul {width:1180px; margin-top:0;}
    }
    
	.oneCol {width:640px!important; margin:0 auto; text-align: center!important;}
	.twoCol{width: 49%!important; float:left;}
	.twoCol:nth-child(even) {margin-left:16px; float:right!important; padding-right:0!important;}
	.threeCol { width:30.859%!important;}
	.fourCol{width: 23%!important; float:left;}
	.fourCol:nth-child(2) {padding-right:24px!important;}
	.fourCol:nth-child(4) {padding-right:0!important;}
/*
	.abstract-list { width: 46.764%; display: block; float: left;}
	.abstract-list:nth-child(even){margin-left:40px; width:46.764%%;}
*/

	@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;}
	}

	@media only screen and (max-width:700px) {
		.abstract-list {width:auto!important; max-width:100%; float:none!important;}
		.abstract-list:nth-child(2),.abstract-list:nth-child(3) {margin-left:0!important;}
	}
	section.abstract p {font-size:14px!important; margin:0 0 8px!important;}

.iPhone_LH {
	width:480px;
	height:768px;
	background-image: url(images/iPhone_LH.png);
	background-repeat: no-repeat;
	position:relative;
	display:block;
	float:none;
	background-size: cover;
	bottom:-72px;
	margin:56px auto 0;
}
	@media only screen and (max-width:700px) {
	.iPhone_LH {     
		background-image: none;
	    margin: 0 auto!important;
		padding: 0 0 48px;
    	width: auto!important;
	    max-width: 100%!important;
	    height: auto!important;
	    position: static;
	    float: none;
	    }
	}
.greyBox ul {
	width:auto; max-width:100%;
	height:auto!important;
}
@media only screen and (min-width: 971px) {
.greyBox { padding-bottom:72px!important; }
}
@media only screen and (min-width:971px) {
	.greyBox ul.ux li  {
		width: 23.168%;
		display: inline-block;
		float: none;
		padding-right: 24px;	
		}
}	
@media only screen and (max-width:700px) {
	.greyBox img {
		width: auto!important;
		max-width: 279px!important;
		margin:0 auto!important;
		height: auto;
		display: block;
		float: left;
	}
}
@media only screen and (max-width:700px) {
		.greyBox ul.ux li, .fourCol:nth-child(2) {
			width: auto!important;
			max-width: 100%!important;
			float: none!important;
			padding: 0!important;		
	    }
	}
	.Classic {position: absolute; left: 150px; top: 34px;}
	@media only screen and (max-width:700px) { .Classic {position:static;}}
	.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;}
/*persona*/
	.PB {border-radius: 4px; 
		padding:24px; 
		border:1px solid #dddddd; 
		min-height: 460px; 
		margin-top:16px;
		}
	.PBimg {
		margin:0 auto; 
		width:120px;
	}
	.PBp {
    text-align: center!important;
    clear: left;
    padding: 24px;
    margin: 0;
    border-top: 1px solid #ccc;	
   }
.blueBand-SYPI h1 {
    font-size: 32px;
    line-height: 40px;
    text-align: left;
    font-weight: 700;
    font-style: normal;
    color: #000000;
    margin: 24px 0 24px;
    padding: 0;
    display: block;
    width:auto;
    max-width: 660px;
}
	.blueBand-SYPI p {
		color:#000000;
		font-family: interstate, sans-serif;
		font-style: normal;
/* 		font-weight: 100;     */
		margin:24px 0 24px;
		width:auto;
		max-width:472px;
		font-size:16px;
		line-height:24px;
	}
	.blueBand-SYPI a {
		font-family: interstate, sans-serif;
		font-style: normal;
/* 		font-weight: 100;     */
		margin-top:64px;
		color:#000000;
		text-decoration: none;
		font-weight: 600;
		display:block;
		font-size:16px;
		line-height:24px;
	}
	.mainImgContainer {display:block;}
	.blueBand-SYPI {color: #ffffff; width: 100%; display:block !important; clear:left; padding-top:40px;}
	.tealBand-ESapp, .blueBand-CheFar, .blueBand-AFinder, .blueBand-Canda, .greenBand-Handf, .redBand-Nittsu, .blueBand-MyAcc {display:none;}	
	nav li a { color: #7182ff!important;}
	
	.sticky {background-color:rgba(4, 12, 135,.98)!important;}
	.dropdownbox li a {color:#9aa1ff!important;}

/*toggleSlide*/
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;
}

.uxCS-Btn {
	width:fit-content;
	margin:24px auto!important;
}

.dc_art {
	width: 92px;
    height: 92px;
    background: url(images/DC_art.svg) no-repeat;
    background-size: contain;
    display: block;
    margin: 0 auto;
    position:relative;
    top:48px;
 }
 
.sypi_DC_art {
	width:100%;
	height:550px;
	background:url(images/sypi_DC_art.png) no-repeat;
	background-size: cover;
	color:#f5f5f5!important;
} 
 
@media only screen and (max-width:700px) {
	p.caseStudy { max-width:auto!important; margin:0 auto!important;}  
} 

@media only screen and (min-width:701px) and (max-width:969px){
	p.caseStudy { max-width:640px!important; margin:0 auto!important;}  
}

@media only screen and (min-width:970px) {
	p.caseStudy { max-width:640px!important; margin:0 auto!important;}  
}


ul.storBdg {width:auto;}

ul.storBdg li a { float:left; display:inline-block;}

.iOS_bdg img {width: auto; height: 48px; padding: 12px 12px 12px 0;}
.an_bdg img {width:auto; height:72px;}