/* 320px
RESET
GRID
TYPOGRAPHY
__ BASE
__ HEADINGS
__ LISTS
__ LINKS
__ FIGURES & IMAGES
__ GENERAL
LAYOUT
MODERNIZR
MEDIA QUERIES
*/

/* _____ $RESET _________________________ */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, img, b, u, i, ol, ul, li,
figure, header, hgroup, section
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

figure, header, hgroup, section {display: block;}

/* _____ $GRID _________________________ */

/* clearfix */
.page:before,
.grid:before,
.col:before,
.wrap:before
{
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.page:after,
.grid:after,
.col:after,
.wrap:after
{
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}

.page,
.grid,
.col,
.wrap
{zoom: 1;}

.col {float: left; display: inline;}

/* _____ $TYPOGRAPHY _________________________ */

/* _______  $BASE _______ */

html {
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	background: #f1f1f1;
	font: 150%/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: rgb(255,255,255,0);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-shadow: 0 1px 0 #fff;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 4.5em 0;
	position: relative;
	top: 0;
	font-size: 50%;
	line-height: 1.5;
	text-align: left;
}

/* _______  $HEADINGS _______ */

h1 {
	position: absolute;
	top: -999em;
	left: -999em;
}

h2, h3, h4
{
	font-family: 'Ubuntu', sans-serif;
	font-weight: normal;
	clear: both;
	color: #666;
}

h2 em, h3 em, h4 em {color: #333;}

h2 {
	margin-top: .07692em;
	padding: .15384em 0 0 0;
	font-size: 3.25em;
	line-height: 1em;
	font-weight: bold;
}

h3 {
	margin: 0 0 .375em 0;
	padding: 1.125em 0 0 0;
	font-size: 2em;
	font-weight: bold;
}

h4 {
	padding: 1.2em 0 0 0;
	font-size: 1.6667em;
}

/* _______  $LISTS _______ */

ul {
	margin: 0;
	padding: .75em 0;
	list-style-type: disc;
}

ul ul {list-style-type: square;}
ul ul ul {list-style-type: circle;}
ul li {margin-left: 1em;}
li {padding: 0 .25em;}

/* _______  $LINKS _______ */

a.inline {
	padding: .08333em .375em .1696em 0.375em;
	-webkit-border-radius: .25em;
	-moz-border-radius: .25em;
	-o-border-radius: .25em;
	border-radius: .25em;
	font-size: .875em;
	background: #333;
/*	font-weight: normal;*/
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	text-shadow: none;
	position: relative;
}

a.inline:hover {background: #900;}
a.inline:active {top: 0.08333em;}

/* _______  $FIGURES & IMAGES _______ */

figure {
	margin: 0 .75em;
	padding: .75em;
}

figure img {max-width: 100%;}

img {
	max-width: 100% !important;
	page-break-inside: avoid;
}

/* _______  $GENERAL _______ */

em {
	font-style: normal;
	font-weight: bold;
}

p {
	margin: 0 .75em;
	padding: .75em;
	font-size: 1em;
	line-height: 1.5em;
}

/* selection highlighting */
::-webkit-selection,
::-moz-selection'
::selection
{
	background: rgb(23,119,175);
	color: rgb(250,250,250);
	text-shadow: none;
}

/* _____ $LAYOUT _________________________ */
/* screen size debug */
.screen:before {
	width: 5em;
	content: "320px";
	padding: .1875em 0;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background: #f00;
	font-weight: bold;
	text-align: center;
}

h2, h3 {text-transform: uppercase;}
h2, h3, h4, p, ul {text-align: center;}

/* header */
.banner {
	width: 100%;
	padding: 0 0 1.5em 0;
	background: #fff;
}

.vcard,
.main
{
	width: 26.6666em;
	margin: 0 auto;
}

.brand {
	width: 100%;
	margin: 3em 0;
}

.logo {
	width: 23.41667em;
	height: 12.1667em;
	margin: 0 auto;
	display: block;
}

.info {
	width: 100%;
	margin: 0 0 1.5em 0;
}

.given-name {color: #666;}
.family-name {color: #333;}

.role {
	margin: 0 1.125em;
	padding: .5625em .5625em 0 .5625em;
	font-size: 1.3333em;
	list-style-type: none;
}

.role li {
	margin: 0;
	padding: .0625em 0 .125em 0;
	text-transform: uppercase;
	font-weight: bold;
}

.adr {
	width: 40%;
	margin: .5625em 30% .9375em 30%;
	padding: 0;
	border-top: 1px solid #ccc;
	font-size: 1.3333em;
	color: #999;
}

/* work: slider */
.slider-wrap {
	width: auto;
	height: 31.5em;
	margin:  .75em 1.5em;
	padding: 0;
	background: #fff;
}

.bx-wrapper {
	height: 100%;
}

.slider {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.slider li {
	margin: 0;
	padding: 0;
}

.slider h4 {
	padding: .9375em 0 0 0;
	font-size: 1.3333em;
}

.slider p {padding-top: .41667em;}
.slides {border-bottom: 1px solid #ccc;}

.bx-next,
.bx-prev
{
	width: 2.25em;
	height: 2.25em;
	margin: 1.5em;
	float: left;
	display: block;
    position: absolute;
	bottom: 0;
	outline: 0 !important;
	-webkit-border-radius: .75em;
	-moz-border-radius: .75em;
	-o-border-radius: .75em;
	border-radius: 1.125em;
	background: #333;
}

.bx-next {right: 0;}

.bx-next:hover,
.bx-prev:hover
{background: #900;}

a.bx-next:active,
a.bx-prev:active,
a.bx-next:focus,
a.bx-prev:focus
{outline: 0 !important;}

a.bx-next:active,
a.bx-prev:active
{bottom: -.08333em;}

.bx-prev img {
	margin: .33333em 0 0 .58333em;
	display: block;
}

.bx-next img {
	margin: .33333em 0 0 .75em;
	display: block;
}

/* work: slideshows */
.flex-wrap {margin: 0 auto;}

/* skills */
.skills [class*="bar"] {
	margin: 0 0 .75em 0;
	padding: .75em 0 .75em .75em;
	border-left: .75em solid #666;
	position: relative;
	-webkit-border-radius: 0 .41667em .41667em  0;
	-moz-border-radius: 0 .41667em .41667em 0;
	-o-border-radius: 0 .41667em .41667em 0;
	border-radius: 0 .41667em .41667em 0;
	background: #333;
	font-weight: bold;
	text-shadow: none;
	color: #fff;
}

.skills [class*="bar"]:last-child {margin: 0;}

.skills .bar-1 {width: 100%;}
.skills .bar-2 {width: 55%;}
.skills .bar-3 {width: 90%;}
.skills .bar-4 {width: 85%;}
.skills .bar-5 {width: 65%;}
.skills .bar-6 {width: 50%;}
.skills .bar-7 {width: 85%;}
.skills .bar-8 {width: 100%;}

.skills .js {width: 75%;}
.skills .angular {width: 63%;}
.skills .php {width: 42%;}
.skills .ps {width: 91%;}
.skills .ai {width: 89%;}
.skills .awesome {width: 97%; margin: 0;}

/* contact */
.contact p {
	margin: 0;
	padding: .84375em 1.125em;
	font-size: 1.3333em;
	line-height: 1.6875em;
}

.contact ul {
	margin: 0 1.125em;
	padding: .84375em 0;
	font-size: 1.3333em;
	list-style-type: none;
}

.contact li {
	margin: 0;
	padding: 0;
	line-height: 1.6875em;
	text-transform: uppercase;
	font-weight: bold;
}

.email {
	margin: .75em .5em;
	padding: .25em .125em;
	display: block;
	-webkit-border-radius: .41667em;
	-moz-border-radius: .41667em;
	-o-border-radius: .41667em;
	border-radius: .41667em;
	font-size: 3em;
	font-weight: bold;
	background: #333;
	color: #fff;
	text-decoration: none;
	text-shadow: none;
	text-align: center;
	position: relative;
}

.email:hover {background: #900;}
.email:active {top: 0.08333em;}

/* _____ $MEDIA QUERIES _________________________ */

/* Print */
@media print {
	* {
		background: transparent !important;
		color: black !important;
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	@page {margin: .5cm;}

	h2, h3 {
		orphans: 3;
		widows: 3;
		page-break-after: avoid;
	}

	p {
		orphans: 3;
		widows: 3;
	}

	a, a:visited {
		color: #444 !important;
		text-decoration: underline;
	}

	a[href]:after {content: " (" attr(href) ")";}

	a[href^="javascript:"]:after,
	a[href^="#"]:after
	{content: "";}
}

/* 480px
assrtd phones
Ally (p)
iPhone (l)
*/
@media only screen and (min-width: 480px) {
	.screen:before {content: "480px";}

	.vcard,
	.main
	{width: 40em;}

	.adr {
		width: 26%;
		margin-right: 38%;
		margin-left: 38%;
	}

	.slider-wrap {height: 48em;}

	.flex-direction-nav li a {
		width: 39px;
		height: 39px;
		margin: -10px 0 0;
		background: url(../js/libs/flex-slider/theme/bg-direction-nav-med.png) no-repeat 0 0;
	}

	.flex-direction-nav li a.next {background-position: -39px 0;}

	.slider h4 {
		padding: 1.2em 0 0 0;
		font-size: 1.6667em;
	}

	.slider p {
		margin: 0;
		padding: .84375em 1.125em;
		font-size: 1.3333em;
		line-height: 1.6875em;
	}

	.contact p {
		padding: .9em .9em;
		font-size: 1.6667em;
		line-height: 1.8em;
	}

	.contact ul {
		margin: 0;
		padding: .9em .9em;
		font-size: 1.6667em;
		line-height: 1.8em;
	}

	.contact li {
		margin: 0;
		padding: 0;
		font-size: 1em;
		line-height: 1.8em;
	}
}

/* 600px
assrtd phones
Kindle3 (v)i
iPhone4 (v)
HTC Touch (l)
Blackberry Playbook (l)
*/
@media only screen and (min-width: 600px) {.screen:before {content: "600";}}

/* 768px
iPhone4 (l)
iPad (v)
Google Nexus, Galaxy (l)
Nokia N900 (l)
HTC (assrtd) (l)
Droid Incr (l)
Xoom Tablet (l)
Kindle3 (l)
Ally (l)
*/
@media only screen and (min-width: 992px) {
	.screen:before {content: "992px";}

	body {padding: 0 0 1.5em 0;}

	h3 {
		margin: 0 0 .27778em 0;
		padding: .72222em 0 0 0;
		font-size: 1.5em;
	}

	p, ul {text-align: left;}

	.banner {
		height: 12em;
		padding: 0;
	}

	.vcard,
	.main
	{
		width: 64em;
		margin: 0 auto;
		clear: left;
	}

	.brand {
		width: auto;
		margin: 1.5em;
		float: left;
	}

	.logo {
		width: auto;
		height: 9em;
	}

	.info {
		width: auto;
		margin: 1.1667em 0 0 0;
		float: left;
	}

	.info * {text-align: left;}

	.fn {
		margin: 0;
		padding: 0;
		font-size: 2em;
	}

	.role {
		margin: .28571em 0 0 0;
		padding: 0;
		font-size: 1.1667em;
	}

	.role li {
		padding: 0;
		line-height: 1.5em;
	}

	.adr {
		width: 10em;
		margin: .5em 0 0 0;
		padding: .25em 0 0 0;
		font-size: 1em;
		line-height: 1em;
	}

	section {
		width: 50%;
		float: left;
		display: inline;
	}

	.slider-wrap {height: 37.5em;}

	.slider h4 {
		padding: 1em 0 0 0;
		font-size: 1.5em;
	}

	.slider p {
		padding: 1.0714em 1.2857em;
		font-size: 1.1667em;
		line-height: 1.5em;
		text-align: center;
	}

	.skills [class*="bar"] {
		margin: 0 0 .5em 0;
		padding: .25em 0 .25em .5em;
	}

	.contact p {
		width: 13em;
		margin: 0 .75em;
		padding: .75em;
		float: left;
		font-size: 1em;
		line-height: 1.5em;
	}

	.contact ul {
		width: 13em;
		margin: 0 .75em;
		padding: .75em;
		font-size: 1em;
		float: left;
	}

	.contact li {
		margin: 0;
		padding: 0;
		line-height: 1.5em;
	}

	.email {
		width: 6.5em;
		margin: .375em 0 .75em .75em;
		padding: .375em 0;
		font-size: 2em;
		float: left;
	}
}

/* 992px */
/*
iPad (l)
Blackberry Playbook (v)
Desktop (15.5%)
Jan 2011
http://www.w3schools.com/browsers/browsers_display.asp
*/
@media only screen and (min-width: 992px) {
	.screen:before {content: "992px";}

	.vcard,
	.main
	{width: 80em;}

	.slider-wrap {height: 44.25em;}

	.slider h4 {
		padding: 1.2em 0 0 0;
		font-size: 1.6667em;
	}

	.slider p {
		padding-right: 1.125em;
		padding-left: 1.125em;
		font-size: 1.33333em;
		line-height: 1.6875em;
	}

	.skills [class*="bar"] {
		margin: 0 0 .75em 0;
		padding: .5em 0 .5em .5em;
	}

	.contact p {width: 17em;}

	.contact ul {
		width: 12.75em;
		margin: .375em .5625em;
		padding: 0 .5625em;
		font-size: 1.3333em;
	}

	.contact li {margin: 0 0 .1875em 0;}

	.email {
		width: 5.6666em;
		margin: .25em 0 .5em .5em;
		padding: .25em 0;
		font-size: 3em;
	}
}

/* 1200px
Android Xoom Tablet
Desktop (30.5%)
*/
@media only screen and (min-width: 1200px) {
	.screen:before {content: "1200px";}

	html {
		margin: 0;
		padding: 0;
		overflow-y: hidden;
	}

	h3 {
		margin: 0 0 .375em 0;
		padding: 1.125em 0 0 0;
		font-size: 2em;
	}

	.banner {
		width: 20.5em;
		height: 200em;
		padding-top: 5.25em;
		float: left;
	}

	.vcard {
		width: 100%;
		float: left;
	}

	.info {
		margin-left: 1.5em;
		clear: left;
	}

	.main {
		width: 78em;
		margin-left: 1.5em;
		float: left;
		clear: none;
	}

	.work {width: 40em;}
	.slider-wrap {height: 45.75em;}

	.skills,
	.contact
	{width: 38em;}

	.contact p {width: 16em;}
	.contact ul {width: 12em;}
}

/* 1382px
Desktop (43%)
*/
@media only screen and (min-width: 1382px) {
	.screen:before {content: "1382px";}
	.main {width: 93.1666em;}

	.skills,
	.contact
	{width: 53.1666em;}

	.contact p {
		width: 17.6875em;
		margin: 0 .5625em;
		padding: .5625em;
		font-size: 1.3333em;
		line-height: 1.3125em;
	}

	.contact ul {width: 17.6875em;}
	.email {width: 7.86111em;}
}

/* 2x */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
	.screen:after {
		width: 3em;
		content: "2x";
		padding: .1875em 0;
		display: block;
		position: absolute;
		top: 0;
		left: 5em;
		color: #fff;
		background: #000;
		font-weight: bold;
		text-align: center;
	}
}