/* @override 
	http://nate.dev/css/styles.css */

.visuallyHidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }

body {
	text-align: center;
	background-image: url(../img/light_wool.png);
}
.vcard {
	text-align: left;
	max-width: 400px;
	margin-left: auto;
	margin-right:auto;
	padding: 0 13px;
	background-color: #26AAE1;
	position:relative;
	min-height: 400px;
	border: none !important;
}

	.textArea {
		margin-left: -20;
        padding-top: 42px;
		padding-left: 50px;
		padding-right: 70px;
	}
	
	
.vcard p {
	font: 15px/30px Dosis, sans-serif;
	color: white;
}

.vcard h1, .vcard h2, .vcard h3 {
	color: white;
	font: 17px "Droid Serif";
	font-style: italic;
	font-weight: 400;
	margin-bottom: 30px;
}
.textArea {
	padding: 30px 40px 20px;
}
.textArea a {
	color: white;
	text-decoration: underline;
}
.pictureArea {
	/*min-width: 400px;*/
	min-height: 400px;
	overflow: hidden;
	position: relative;
	background-color: gray;
}

.pictureArea .mainImg {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	position: absolute; 
	min-height: 400px;
	top: 0px; 
	left: 0px;
}
#one {
	background: url(../img/img-nate-headshot.jpg) center center no-repeat;
	background-size: 100%;
}
#two {
	background: url(../img/img-nate-engagement.jpg) center center no-repeat;
	background-size: 100%;
}
#three {
	background: url(../img/img-nate-tent.jpg) center center no-repeat;
	background-size: 100%;
}
#four {
	background: url(../img/img-nate-climbing.jpg) center center no-repeat;
	background-size: 100%;
}
#five {
	background: url(../img/img-nate-bike.jpg) center center no-repeat;
	background-size: 100%;
}

.socialMedia a {
	width: 20px;
	height: 20px;
	display: block;
	float: left;
	margin-right: 12px;
	background-size: 100%;
}
.socialMedia a:hover {
	opacity: .7;
}
.socialMedia a.facebook {
	background: url(../img/icon-facebook.png) left top no-repeat;
}
.socialMedia a.twitter {
	background: url(../img/icon-twitter.png) left top no-repeat;
}
.socialMedia a.linkedIn {
	background: url(../img/icon-linkedIn.png) left top no-repeat;
}
.socialMedia a.requestACall {
	display: block;
	width: auto;
	text-decoration: none;
	background-color: white;
	border-radius: 4px;
	color: #26AAE1;
	padding: 0 12px;
	font-size: 15px;
	line-height: 20px;
	font-family: Dosis;

}
@media only screen and (min-width: 30.063em) {
	.textArea {
		padding: 60px 30px 10px;
	}
	
	.vcard {
	}
	.mainImg {
		max-width: 400px;
	}
	
}

@media only screen and (min-width: 50em) {
	.vcard {
		max-width: 800px;
		width: 800px;
		padding: 0;
/*		background-color: green;*/
		min-height: 400px;
	}
	
}
@media only screen and (max-width: 50em) {
	.pictureArea {
		width: 100%;
		max-width: 100%;
		min-height: 50px;
		min-height: 50px;
		padding-bottom: 50%;
		padding-top: 50%;
		display: block;
		padding-left: 0;
		padding-right: 0;
	}
	.pictureArea .mainImg {
		width: 100%;
		padding-bottom: 50%;
		padding-top: 50%;
		min-height: 50px;
		display: block;
		margin: 0;
		position: absolute;
		top: 0px; 
		left: 0px; 
	}
	
	.textArea {
		padding-right: 35px;
		padding-top: 50px;
		padding-left: 35px;
		min-height: 400px;
	}
	.vcard .vcardInside{
		margin-left: -13px;
		margin-right: -13px;
	}
}
@media only screen and (max-width: 21.375em) {
	.textArea {
		padding-bottom: 45px;
	}
}

/* -----------------------------------------
   Retina stuff
----------------------------------------- */

@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi)
{ 
	body {
		background-image: url(../img/light_wool_@2X.png);
		background-size: 190px 191px;
	}
	.socialMedia a.facebook {
		background: url(../img/icon-facebook@2x.png) left top no-repeat;
		background-size: 100%;
	}
	.socialMedia a.twitter {
		background: url(../img/icon-twitter@2x.png) left top no-repeat;
		background-size: 100%;
	}
	.socialMedia a.linkedIn {
		background: url(../img/icon-linkedIn@2x.png) left top no-repeat;
		background-size: 100%;
	}
	#one {
		background: url(../img/img-nate-headshot@2x.jpg) center center no-repeat;
		background-size: 100%;
	}
	#two {
		background: url(../img/img-nate-engagement@2x.jpg) center center no-repeat;
		background-size: 100%;
	}
	#three {
		background: url(../img/img-nate-tent@2x.jpg) center center no-repeat;
		background-size: 100%;
	}
	#four {
		background: url(../img/img-nate-climbing@2x.jpg) center center no-repeat;
		background-size: 100%;
	}
	#five {
		background: url(../img/img-nate-bike@2x.jpg) center center no-repeat;
		background-size: 100%;
	}
}