@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
	height: 100%;
}

body {
	background: #222;
	/* background-image: url("/portfolio/images/bg.jpg"); */
	font-family: 'PT Sans', sans-serif;
	font-size: 1em;
	min-width: 1024px;
}

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

img {
	max-width: 100%;
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
}

input:not([type=submit]):not([type=file]), textarea {
   	border: 1px solid #111; 
    padding: 15px;
    background: #fff;
    margin: 0 0 20px 0;
}

button {
	background: #555;
	border: 0;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 2.4em;
	outline: 0;
	padding: 0 30px;
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

button:hover {
	background: #222;
	color: #fff;
}

/* fix bug in chrome that shrinks images with max-width in tables */
td img {
	max-width: none;
}

a {
	color: #000; text-decoration: none;
}

a:hover {}

hr {}

.table {
	display: table;
}

.row {
	display: table-row;
}

.column {
	display: table-cell;
}

/* For modern browsers */
.clear:before,
.clear:after {
    content:"";
    display:table;
}

.clear:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clear {
    zoom:1;
}

#body {
	margin-top: 3.2em;
}

body > header, footer {
	background: #2a2a2a; /* Old browsers */
	background: -moz-linear-gradient(top,  #2a2a2a 0%, #222 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2a2a), color-stop(100%,#222)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2a2a2a 0%,#222 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2a2a2a 0%,#222 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2a2a2a 0%,#222 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #2a2a2a 0%,#222 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#222',GradientType=0 ); /* IE6-9 */
	margin: 0 auto;
}

body > header {
	border-bottom: 1px solid #111;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

#header {
	position: relative;
	padding: .5em 20px;
}

#header h1 {
	font-family: 'Press Start 2P', sans-serif;
	font-size: 2em;
	margin: 0;
	padding: 3px 0 0 0;
	font-weight: normal;
	color: #009dff !important;
}

nav {
	position: absolute;
	bottom: 0;
	right: 20px;
}

nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

nav li, nav h2 {
	display: inline;
}

nav li {
	margin: 0 20px 0 0;
}

nav li:last-child {
	margin: 0;
}

nav li a {
	color: #fff;
	font-size: .6em;
	line-height: 2em;
	letter-spacing: 1px;
	text-transform: uppercase;
}

nav li a:hover {
	border-bottom: 2px solid #009dff;
}

nav a:hover {
	color: #fff;
}

.container {
	background: #f9fdff;
	/* background: #f0f9ff; */
	color: #000;
}

.content {
	margin: 0 auto;
	max-width: 1200px;
	padding: 20px;
	line-height: 2em;
}

.content a:hover {
	border-bottom: 1px solid #009dff;
}

.container > header {
	background: #009dff; /* Old browsers */
	background: -moz-linear-gradient(top,  #009dff 0%, #0099d0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009dff), color-stop(100%,#0099d0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #009dff 0%,#0099d0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #009dff 0%,#0099d0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #009dff 0%,#0099d0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #009dff 0%,#0099d0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009dff', endColorstr='#0099d0',GradientType=0 ); /* IE6-9 */
	padding: 7px 20px 0 20px;
	border-bottom: 1px solid #0099d0;
	font-size: 1.5em;
	letter-spacing: 1px;
	line-height: 2.5em;
	font-weight: bold;
	text-align: center;
	color: #000;
}

.content > article > header > a {
	font-size: .8em;
}

.imgRight {
	float: right;
	width: 50%;
	padding: 0 0 10px 10px;
}

.center {
	text-align: center;
}

form {
	width: 80%;
	margin: 0 auto;
}

.table, input[type="text"], #message {
	width: 100%;
}

.client-row:not(:last-child) {
	padding-bottom: 2em;
}

.column {
	width: 49%;
}

.column:first-child {
	padding-right: 1%;
}

.column:last-child {
	padding-left: 1%;
}

.client img {
	border: 1px solid #ccc;
}

#message {
	height: 300px;
}

#messageConfirmed {
	margin: 0 auto;
	border: 3px solid black;
	padding: 10px;
	width: 80%;
}

footer {
	color: #fff;
	line-height: 3em;
	text-align: center;
}



@media (min-width: 1px) {
	body {
		min-width: 320px;
	}
}



@media (max-width: 560px) {
	#header {
		padding: .5em 0 0 0;
	}
	#body {
		margin-top:4.7em;
	}

	nav {
		position: static;
		top: auto;
		right: auto;
		margin-top: 0;
	}

	#header h1, nav {
		display: block;
		text-align: center;
		/* line-height: 2em; */
	}

	.table, .row, .column {
		display:block;	/* Converts a table, table row, table column and table column:before into a block element */
		width: 100%;
	}

	.column:first-child {
		padding-right: 0;
	}

	.client-row {
		padding-bottom: 0 !important;
	}

	.client {
		padding-bottom: 4em;
	}

	.column:last-child {
		padding-left: 0;
	}

	.imgRight {
		float: none;
		padding: 0;
		width: 100%;
	}
}