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

@media only screen and (min-width:500px) and (max-width:767px) {	
	.RefDev_bb {
		display: block;
		width: 580px;
		height: 143px;
		background-image: url(images/RefDev_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) {	
	.RefDev_bb {
	    display: block;
	    width: 790px;
	    height: 201px;
	    background-image: url(images/RefDev_bb.png);
	    background-repeat: no-repeat;
	    background-size: contain;
	    position: absolute;
	    right: -150px;
	    bottom: -2px;
    }
}

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

@media only screen and (min-width:2260px) {	
	.RefDev_bb {
			display:block;
		    width: 790px;
		    height: 291px;
		    background-image: url(images/RefDev_bb.png);
		    background-repeat: no-repeat;
		    background-size: contain;
		    position: absolute;
		    right: 530px;
		    bottom: -2px;
		   } 
	}
	
@media only screen and (max-width:700px){ 
	.mainImgContainer .mainImg {display:none;}
	.hello {height: 330px !important;}
	section.hello {background-image:none !important;}
}

	section.hello {
		background-color:#001EFF;
		height: 700px!important;
	}
	
	.refLogo {
		width:180px; height:37px;
		background-image:url('images/Ref_logo.svg');
		background-repeat: no-repeat;
		display:block;
		clear:both;
	}
	
/*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;}
    
    section.abstract ul {width:1180px; margin-top:0;}
    section.abstract h3 {margin:0 auto 48px!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;}


/*abstract*/

	section.abstract p {font-size:14px!important; margin:0 0 8px!important; padding:0;}
	
	 @media only screen and  (max-width:700px) {
		section.abstract { width:auto; padding:24px 24px; background-color:#fbfbfb; clear:both;}
	}
	
	@media only screen and (min-width:701px) and (max-width:970px){
		section.abstract { width:auto; max-width:100%; padding:24px; background-color:#fbfbfb; clear:both;}
	}



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


	.blueBand-RefDev 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-RefDev 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-RefDev 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-RefDev {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(16,0,255,.98)!important;}
.dropdownbox li a {color:#0371fa!important;}