@media only screen and (max-width:700px){ 
	.mainImgContainer .mainImg {display:none;}
}

section.hello {
		background-color:#EAFF36;
		height: 700px!important;
	
	    @media only screen and (min-width:971px) { 
		    }
		
		@media only screen and (min-width:701px) and (max-width:970px) { 
			
			}
		
		@media only screen and (max-width:700px) {

	}
}


.hello {
/*
	    @media only screen and (min-width:971px) { 
		    }
		@media only screen and (min-width:701px) and (max-width:970px) { 
			}
		
		@media only screen and (max-width:700px) {
			height:724px!important;
			}
*/
}


	.wmgLogo {
		width: 80px;
		height: 80px;
		background: url(images/WMG_Logo_Black.svg);
		background-size:80px;
		background-repeat: no-repeat;
		display:block;
		clear:both;
	}
	
@media only screen and (min-width:0px) and (max-width:499px) {	
	.wmgAmp_bb { display:none!important; }
}	

@media only screen and (min-width:500px) and (max-width:767px) {	
	.wmgAmp_bb {
		display: block;
		background-image:none;
   }

}

@media only screen and (min-width:768px) and (max-width:1004px) {	
	.wmgAmp_bb {
		display: block;
		
		background-image:none;
    }
}

@media only screen and (min-width:1005px) and (max-width:1270px) {	
.wmgAmp_bb {
        display: block;
        width: 860px;
        height: 675px;
        background-image: url(images/AMP-Mobile-Hero4.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: -364px;
        top: 195px;
    }
}


@media only screen and (min-width:1271px) {	
	.wmgAmp_bb {
        display: block;
        width: 1060px;
        height: 975px;
        background-image: url(images/AMP-Mobile-Hero4.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: -364px;
        top: 195px;
		   } 		
		
	}
	
@media only screen and (max-width:700px){ 
	.mainImgContainer .mainImg {display:none;}
	.hello {height: 330px !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 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: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;}


/*abstract*/

	section.abstract p {font-size:14px!important; margin:0 0 8px!important; padding:0;}
	
	 @media only screen and  (max-width:700px) {
	}
	
	@media only screen and (min-width:701px) and (max-width:970px){
	}



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


	.yellowBand-wmgAmp 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;
		max-width: 660px;
		width: auto;
    	}

	.yellowBand-wmgAmp 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;
	}
	
	.yellowBand-wmgAmp 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;
	}
	
	section.hello .intro{display:none;}
	.mainImgContainer {display:block;}
	.yellowBand-wmgAmp {color: #000000;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,.blueBand-citiApp {display:none;}	

	nav li a { color: #000000!important;}


@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(234,255,54,.98)!important;}
	.dropdownbox li a {color:#EAFF36!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;
}

.grey-box {
	background-color:#f5f5f5!important;
}


/*text-align*/
.lAlign {text-align: left!important;}
p.lAlign {padding-left:0!important;}
.rAlign {text-align: right!important;}
.cAlign {text-align: center!important;}