/*
Description: CSS3 developed for laurajon.es
Version: 1.1
Author: Laura Jones
*/

/* ---------------------------------------------------------------------------- RESET -------------- */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input { margin: 0; padding: 0; }


/* ---------------------------------------------------------------------------- GLOBAL ------------- */
body {
	color: #41413e;
	background: #f1f1ef;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px; }

a:link { color: #41413e; }
a:visited { color: #41413e; }
a:hover { color: #53534d; }
a:active { color: #41413e; outline: none; }

img { border: 0; }

.clearIt { clear: both; display: block; }


/* ---------------------------------------------------------------------------- STRUCTURE ---------- */
#wrapper {
	margin: 25px auto;
	padding: 0 15px; }

#about, #work, #footer {
	margin: 0 auto;
	max-width: 625px; }

#footer {
	font-size: 11px;
	text-align: center; }


/* ---------------------------------------------------------------------------- CONTENT ------------ */
h1.name {
	color: #4bb4eb;
	font: normal 90px/75px "KnewaveRegular", Arial sans-serif;
	padding: 14px 0 28px;
	text-align: center;
	text-shadow: 0px 1px 2px #bbb; }

span.last { color: #008fcc; }

h1 {
	color: #086790;
	font: normal 35px "OstrichRegular", Verdana, Arial, sans-serif;
	padding: 10px 0 6px; }

img.pic {
	border: 7px solid #fff;
	box-shadow: 0 0 5px #bbb;
	float: right;
	margin: 0 0 0 12px; }

p { padding-bottom: 16px; }

.bullet { padding: 0 4px 0 0; }

#contact img { padding: 0 0 0 9px; vertical-align: middle;  }

#work h2 { font-size: 13px; padding: 0 0 3px 0; }

#work h2 a:after { content: " »"; }

#work ul { font-size: 11px; list-style: none; }

#work li { padding-bottom: 26px; }

#work img {	max-width: 100%; }

#work img.portfolio { box-shadow: 0 0 5px #bbb; }

a.top { float: right; padding-left: 15px; }

a.top img {
	opacity: 0.4;
	-webkit-transition: opacity .2s ease-in-out;
	-moz-transition: opacity .2s ease-in-out;
	-o-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
	width: 24px;
	height: 24px; }

a:hover.top img { opacity: 0.7; }


/* ---------------------------------------------------------------------------- RESPONSIVENESS -------- */
@media screen and (max-device-width: 480px), screen and (max-width: 600px) {

	html { -webkit-text-size-adjust: 100%; } /* Prevent font scaling in landscape */

	#wrapper { margin: 10px auto 20px; padding: 0 10px; }

	h1.name {
		font: normal 50px/40px "KnewaveRegular", Arial sans-serif;
		padding: 10px 0 20px; }
}

@media screen and (min-width: 600px) {

	#wrapper { padding: 0 20px; }

	#services1 {
		float: left;
		padding-right: 35px; }

	#services2 {
		float: left;
		margin-bottom: 17px; }
}

@media screen and (min-width: 1000px) {

	#wrapper { padding: 0 70px; }

	#about {
		padding-right: 23px;
		position: fixed;
		width: 290px; }

	#work, #footer {
		float: left;
		padding-left: 345px; }

	#footer {
		padding-bottom: 25px;
		text-align: left; }
}

@media screen and (min-width: 1200px) {

	#wrapper { padding: 0 120px; }
}


/* ---------------------------------------------------------------------------- FONTS -------- */
@font-face {
    font-family: 'KnewaveRegular';
    src: url('fonts/knewave-webfont.eot');
    src: url('fonts/knewave-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/knewave-webfont.woff') format('woff'),
         url('fonts/knewave-webfont.ttf') format('truetype'),
         url('fonts/knewave-webfont.svg#KnewaveRegular') format('svg');
    font-weight: normal;
    font-style: normal; }

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