/* @group Reset browser value */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
:focus { outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0;}
/* @end Reset browser value */


html {
	background-image: url(body-background.jpg);
}
body {
	background-image: url(background.jpg);
	font: 90%/150% Palatino, Georia, serif;
	color: #503105;
	position: relative;
}

/* @group Header */
body > header {
	padding-top: 20px;
	padding-bottom: 40px;
	overflow: hidden;
	position: relative;
}
body > header:before {
	content: "";
	display: block;
	width: 420px;
	height: 177px;
	position: absolute;
	top: -90px;
	left: 50%;
	margin-left: 200px;
	background: url(dotted-circle.png) no-repeat;
}
body > header:after {
	content: "";
	display: block;
	width: 249px;
	height: 148px;
	position: absolute;
	top: -40px;
	left: 50%;
	margin-left: -400px;
	background: url(dotted-triangle.png) no-repeat;
}


body > header > h1 {
	height: 0px;
	padding-top: 70px;
	width: 90%;
	max-width: 320px;
	overflow: hidden;
	background: url(sandbox-heading.png) no-repeat center center;
	background-size: 100%;
	margin-right: auto;
	margin-left: auto;
}
body > header > h2 {
	height: 0px;
	padding-top: 40px;
	width: 90%;
	max-width: 320px;
	overflow: hidden;
	background: url(playground-heading.png) no-repeat center center;
	background-size: 100%;
	margin-right: auto;
	margin-left: auto;
}


/* @end Header */

/* @group Branding objects */

.ball {
	display: none;
}
.ball-shadow {
	display: none;
}
.ball-shine {
	display: none;
}
.bucket {
	display: none;
}
.shovel {
	display: block;
	background: url(dotted-triangle.png) no-repeat center center;
	position: absolute;
	width: 250px;
	bottom: 310px;
	right: 50%;
	margin: 0 -125px 0 0;
}

.shovel img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/* @end */

/* @group Project list */

#projects {
	margin-bottom: 260px;
}
#projects a,
#projects a:hover {
	text-decoration: none;
	color: #503105;
}

#projects > section {
	margin: 0 auto 30px;
	width: 300px;
	display: block;
	border-radius: 6px;
	padding: 7px;
	background-image: url(shadow.png);
}

#projects a {
	margin: 0;
	display: inline-block;
	position: relative;
	width: 100%;
	background-color: white;
	border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}
.no-borderimage #projects > li a{
	border: 3px dotted #a5bd8b;
}

#projects a:hover {
	
}

#projects header {
	height: 50px;
	position: relative;
	background: url(noise-black.png) #b7c78e;
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	width: 100%;
	display: block;
}
#projects header > h2{
	font-size: 150%;
	margin-bottom: 10px;
	display: block;
	position: absolute;
	top: -15px;
	left: 10px;
	padding: 5px 10px;
	color: white;
	text-shadow: 0 1px 1px #000000;
	background: url(noise-white.png) #6a4d37;
	width: auto;
	line-height: 110%;
}

#projects .description {
	margin: 10px;
	height: 110px;
}

#projects footer .date {
	letter-spacing: 1px;
	font: 70%/200% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #a0a0a0;
	display: block;
	width: 100%;
}
#projects footer {
	margin-left: 10px;
	margin-right: 10px;
	border-top: 1px solid #e6e6e6;
	padding-bottom: 5px;
	display: block;
}



#projects > section:nth-child(5n-5) header > h2{
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}
#projects > section:nth-child(5n-4) header > h2 {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#projects > section:nth-child(5n-3) header > h2 {
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}
#projects > section:nth-child(5n-2) header > h2 {
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}
#projects > section:nth-child(5n-1) header > h2 {
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}


#projects > section:nth-child(5n-4) header {	
	background-color: #b7c78e;
}
#projects > section:nth-child(5n-3) header {
	background-color: #74c4cc;
}
#projects > section:nth-child(5n-2) header {
	background-color: #df6444;
}
#projects > section:nth-child(5n-1) header {
	background-color: #e9ca3d;
}
#projects > section:nth-child(5n-5) header {
	background-color: #a78ec7;
}

/* @end Project list */

/* @group Footer */

body > footer {
	padding: 190px 20px 40px;
	position: relative;
	background: url(footer.png) repeat-x;
	display: block;
	overflow: hidden;
}

body > footer:before {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	height: 190px;
	background: url(playfull.png) repeat-x left top;
	top: 20px;
}
body > footer .copyrights {
	text-align: center;
	color: #69542c;
	text-shadow: 0 2px 1px rgba(255, 255, 255, 0.35);
}

/* @end */

@media (min-width: 600px) {


#projects section {
	margin-bottom: 60px;
}

}

@media (min-width: 800px) {

body > header {
	padding-top: 40px;
	padding-bottom: 100px;
}


#projects {
	margin-bottom: 40px;
}


.ball {
	display: block;
	position: absolute;
	margin: 0;
	left: 20px;
	top: 40px;
	z-index: 10;
	width: 10px;
	height: 10px;
}

.ball > .object {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.ball > .object {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	height: 148px;
	
	-webkit-animation-name: bounce;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: both;
	-moz-animation-name: bounce;
	-moz-animation-duration: 10s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-fill-mode: both;
}
.ball > .shadow {
	position: absolute;
	top: 125px;
	left: -25px;
	-webkit-animation-name: bounce-shadow;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: both;
	-moz-animation-name: bounce-shadow;
	-moz-animation-duration: 10s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-fill-mode: both;
}
.ball > .shine {
	z-index: 20;
	position: absolute;
	left: 35px;
	top: -10px;
	-webkit-animation-name: bounce-shine;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: both;
	-moz-animation-name: bounce-shine;
	-moz-animation-duration: 10s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-fill-mode: both;
}

.bucket {
	display: block;
	position: absolute;
	top: 80px;
	right: 20px;
	margin: 0;
}
.shovel {
	display: block;
	background: none;
	margin: 0;
	width: 117px;
	height: 185px;
	position: absolute;
	top: 0;
	right: 100px;
}

.shovel img {
	margin: 0;
}
#projects {
	width: 720px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding-top: 20px;
	margin-top: -20px;
	padding-left: 40px;
}

#projects > section {
	float: left;
	margin-right: 40px;
}
	
}

@media (min-width: 1250px) {

.bucket {
	right: 10%;
}
.shovel {
	right: 17%;
}
.ball {
	left: 10%;
}
body > footer:before {
	background: url(playfull.png) no-repeat center top;
}

}

/* @group Animation */


@-webkit-keyframes bounce {
	0% {top:0px;
		height: 148px;
		width: 148px;
	}
	62% {top:0px;
		height: 148px;
		width: 148px;
	}
	66% {top:0px;}
	68% {height: 148px;
	width: 148px;}
	72%{top: -100px;}
	78%{height: 148px;
	width: 148px;
	top: 0px;}
	80%{top:15px;
		height: 132px;
		width: 148px;
	}
	82%{top:0px;
	height: 148px;
	width: 148px;}
	88%{top: -85px;}
	96%{top: 0px;
		height: 148px;
		width: 148px;
	}
	98%{top:15px;
		height: 132px;
		width: 148px;
	}
	100%{top:0px;
		height: 148px;
		width: 148px;
		}
}
@-webkit-keyframes bounce-shine {
	0% {top:-10px;}
	62% {top:-10px;}
	66% {top:-10px;}
	72%{top: -100px;}
	78%{top: -10px;}
	82%{top:-10px;}
	88%{top: -85px;}
	96%{top: -10px;}
	100%{top:-10px;}
}

@-webkit-keyframes bounce-shadow {
	62% {left:-25px;
		opacity: 1;}
	67% {left:-25px;
		opacity: 1;}	
	72%{left: -120px;
		opacity: 0.1;
	}
	79% {left:-25px;
		opacity: 1;}
	83% {left:-25px;
			opacity: 1;}
	87%{left: -120px;
		opacity: 0.1;
	}
	96% {left:-25px;
		opacity: 1;}
	100%{left:-25px;
		opacity: 1;
		}
}


@-moz-keyframes bounce {
	0% {top:0px;
		height: 148px;
		width: 148px;
	}
	62% {top:0px;
		height: 148px;
		width: 148px;
	}
	66% {top:0px;}
	68% {height: 148px;
	width: 148px;}
	72%{top: -100px;}
	78%{height: 148px;
	width: 148px;
	top: 0px;}
	80%{top:15px;
		height: 132px;
		width: 148px;
	}
	82%{top:0px;
	height: 148px;
	width: 148px;}
	88%{top: -85px;}
	96%{top: 0px;
		height: 148px;
		width: 148px;
	}
	96%{top:15px;
		height: 132px;
		width: 148px;
	}
	100%{top:0px;
		height: 148px;
		width: 148px;
		}
}
@-moz-keyframes bounce-shine {
	0% {top:-10px;}
	62% {top:-10px;}
	66% {top:-10px;}
	72%{top: -100px;}
	78%{top: -10px;}
	82%{top:-10px;}
	88%{top: -85px;}
	96%{top: -10px;}
	100%{top:-10px;}
}

@-moz-keyframes bounce-shadow {
	62% {left:-25px;
		opacity: 1;}
	67% {left:-25px;
		opacity: 1;}	
	72%{left: -120px;
		opacity: 0.1;
	}
	79% {left:-25px;
		opacity: 1;}
	83% {left:-25px;
			opacity: 1;}
	87%{left: -120px;
		opacity: 0.1;
	}
	94% {left:-25px;
		opacity: 1;}
	100%{left:-25px;
		opacity: 1;
		}
}



/* @end */