#hero { 
	background-color: #3e3f3a;
	background-image: url(../img/web-vision-bg.jpg); 
	background-size: 100% auto; 
  background-attachment: fixed;
  background-position: center 40px;
  background-repeat: repeat;
  text-align: center; 
  border-bottom: 4px solid rgba(0,0,0,0.60);
}

#hero h1 { 
	color: white; 
	font-size: 40px;
	font-weight: 100;
	letter-spacing: 2px;
	padding: 60px 0;
	text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
	text-transform: uppercase;
}

#hero img { width: 60%; padding: 40px 0; }

#iphone {
	background-image: url(../img/white-iphone.jpg);
	background-size: 200px 407px;
	background-repeat: no-repeat;
	float: right;
	height: 407px;
	margin-top: -8px;
	overflow: hidden;
	width: 200px;
}

#screen { 
	width: 160px; 
	height: 230px; 
	background-color: black;
	margin: 96px auto 81px auto; 
	overflow-y: scroll;
	
}



#process { background-color: red; }

#web-vision img { padding: 0; }

.what-i-learned h2 { color: #BAB7B5; }
.what-i-learned p { color: white; }


#graybox {   
	border-top: 4px solid rgba(0,0,0,0.20);
}
#graybox img { padding: 0; margin-bottom: -8px }

#stripes {
	height: 20px;
	background-image: url(../img/stripes.png);
	background-size: auto 20px;
	background-position: center center;	
}

@media only screen and (max-width: 680px) { 
	#iphone { float: none; margin: 0 auto 32px auto; }
}

@media only screen and (max-width: 420px) {
}