/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
@font-face {
    font-family: 'Arvo';
    src: url('../fonts/Arvo-Regular-webfont.eot');
    src: url('../fonts/Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-Regular-webfont.woff') format('woff'),
         url('../fonts/Arvo-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-Regular-webfont.svg#ArvoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Arvo';
    src: url('../fonts/Arvo-Italic-webfont.eot');
    src: url('../fonts/Arvo-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-Italic-webfont.woff') format('woff'),
         url('../fonts/Arvo-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-Italic-webfont.svg#ArvoItalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Arvo';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/Arvo-Bold-webfont.eot');
    src: url('../fonts/Arvo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-Bold-webfont.woff') format('woff'),
         url('../fonts/Arvo-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-Bold-webfont.svg#ArvoBold') format('svg');


}
@font-face {
    font-family: 'Arvo';
    font-weight: bold;
    font-style: italic;
    src: url('../fonts/Arvo-BoldItalic-webfont.eot');
    src: url('../fonts/Arvo-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/Arvo-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-BoldItalic-webfont.svg#ArvoBoldItalic') format('svg');


}

	body {
		background: #525252 url(../images/rock-bg.jpg) no-repeat top center;
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: underline;
		color: inherit;
	}

	header, #header {
		margin: 20px auto 0px;
		width: 50%;
		min-width: 320px;
		height: 90px;
		overflow: hidden;
/* 		background-color: #ffffff; */

	}
	h1 {
		text-indent: -200%;
		background: #ffffff url(../images/logo.gif) no-repeat center center;
		text-align: center;
		overflow: hidden;
		margin: auto;
		height: 90px;
		outline: #ededed solid 1px;
		outline-offset: -5px;
		position: fixed;
		width: 50%;
				-webkit-box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
        box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
        top:50;
	}
	h2  {
		color: #0979b2;
		font: 36px/1.25em 'Arvo', Arial, sans-serif;
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.75);
		margin: 0 0 0 0;
		padding: 0 252px 0 0;
	}
	.container {
		background-color: #efefef;
		width: 80%;
		min-width: 640px;
		margin: 0  auto;	
		-webkit-box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
        box-shadow:  0px 0px 9px 0px rgba(0, 0, 0, 0.75);
	}
	#content {
		background-color: #efefef;
		padding: 40px 0 40px 40px;
		min-height: 255px;
	}

	#services {
		color: #b2b2b2;
		font: 21px/1.25em 'Arvo', Arial, sans-serif;
		background-color: #efefef;
		padding: 20px 0 20px 40px;
		min-width: 560px;
		margin: 30px auto;
		display: block;
		overflow: hidden;
	}
	#services a {
		text-decoration: none;
	}
	#services a:hover {
		color: #0979b2;
	}
	#services li {
		display: block;
		float: left;
		padding: 10px 0;
	}

	.picture {
		/* outline: solid #0979b2 2px;  */
		outline: solid rgba(9, 121, 178, 0.75) 10px;		

		outline-offset: -10px;
		float: right;
		margin-right: -8%;

	}
	#headshot {
		background: transparent url(../images/headshot.jpg) no-repeat center center;
		width: 252px;
		height: 252px;
	}
	.picture img {
		display: block;
	
	}
	.pvc {
		white-space:nowrap;
	}
	.mih {
		font-weight: bold;
	}
	
	
	
	#link-linkedin {
		width: 20%;
	}
	#link-twitter {
		width: 16%;
	}
	#link-portfolio {
		width: 18%;
	}
	#link-blog {
		width: 12%;
	}
	#link-dribbble {
		width: 18%;
	}
	#link-email {
		width: 12%;
	}

	#services a {
		color: inherit;
	}
	#services li:last-child {
		margin-right: 0;
		padding-right: 0;
	}
	
/*
	.one {
		color: #6298b2;
	}
	.two {
		color: #8fa7b2;
	}
*/

/* ============================= */
/* ! Layout for tablet version   */
/* ============================= */

@media screen and (max-width: 960px) and (min-width: 641px) {

	body {
		
	}

}

@media screen and (max-width: 820px) {
	h2 {
		margin-right: 4%;
		padding-right: 272px;
	}
	.picture {		
		position: absolute;
		right: 4%;
		float: none;
		margin-right: 0;
		}

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


	body {
		
	}

}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media screen and (max-width: 640px) {

	body {
		
	}
	h1 {
		background-size: 200px 40px;
	}
	#services li:nth-child(1n) {
		width: 33%;
		}
	#services li:nth-child(1) {
		width: 34%;
		}
	#services li:nth-child(4n) {
		clear: left;
		width: 34%;
		}
/*
	.container {
		width: 100%;
		min-width: 600px;
	}
*/
}


/* ========================================== */
/* ! Provide higher res assets for Retina Display   */
/* ========================================== */

@media (-webkit-min-device-pixel-ratio: 2), (device-pixel-ratio: 2) { 

h1 {
		background: #ffffff url(../images/logo2x.gif) no-repeat center center;
		background-size: 271px 54px;
}
	#headshot {
		background: transparent url(../images/headshot2x.jpg) no-repeat center center;
		background-size: 252px 252px;
	}
}