/* CSS Document */
header { position:fixed; z-index:100;  }
header.shadow { box-shadow:0 0 15px #000,10px 0 15px #000,-10px 0 15px #000; }
@media only screen and (max-width:1200px) {
	body,html { min-width:0; }
	img { max-width:100%; min-width:0; }
	header,section,footer,.wrapper { max-width:100%; min-width:0; display:block; }
	.kerry-photo { width:72%; }
}
	
@media only screen and (max-width:960px) {
	#services { padding:0 0 60px 0; }
	#services div.wrapper { text-align:center; padding:0 20px; }
	.service { float:left; width:50%; margin-top:60px; }
	.service h3 { margin-bottom:4px; }
	.service p { margin-top:4px; }
	#bio p { font-size:20px; }
	.kerry-photo { right: 280px; left:initial; }
}

@media only screen and (max-width:800px) {	
	.website-img { max-width:45%; }
}

@media only screen and (max-width:768px) {	
	header { text-align:center; position:absolute; }
	header.shadow { box-shadow:none; }
	header h1 { float:none; }
	.header-right { float:none; top:initial; margin:10px 0; }
	.kerry-photo {
		width: 290px;
		background-color: #000;
		position: relative;
		left: 0;
		margin: 40px 40px 40px 0;
		padding: 10px 10px 0 10px;
	}
	.kerry-photo img { left:0; }
	.bio-right { float:none; width:auto; }
}

@media only screen and (max-width:700px) {	
	#services div.wrapper { padding:0; }
	.service { float:left; width:50%; margin-top:60px; }
	.kerry-photo { width: 230px; margin: 40px 40px 20px 0; }
}

@media only screen and (max-width:600px) {	
	.kerry-photo { display:none; }
	.bio-right { padding-bottom:0; }
	#bio .clear {
		width: 100%;
		height: 300px;
		position: relative;
		bottom:-6px;
		background-image: url(/images/kerry.png);
		background-size: contain;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
	.website-img {
		max-width: inherit;
		float: none;
		top: 0;
		display: inline-block;
		margin: 5px 0;
	}
}

@media only screen and (max-width:500px) {	
	.share { display:block; position:relative; margin-left:-40px; }
	.connect { display:block; position:relative; margin:10px 0 0 -72px; border:none; }
	.wrapper,#services div.wrapper { padding:0 20px; }
	.service { width:100%; float:none; }
	#skills { text-align:center; }
	#websites { text-align:center; }
}

@media only screen and (max-width:400px) {
	header h1 { font-size:44px; }
	#bio .clear { height: 267px; }
	footer { font-size:12px; }
}

@media only screen and (max-width:320px) {
	#websites h2 { font-size:40px; }
}