* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-text-size-adjust: none;
}

html {
	
}

body {
	background-color:#4B4521;
	margin:0;
	padding:0;
	font-size:0.75em;
	font-family:verdana, arial, sans-serif;
	color:#4B4521;
	overflow-x:hidden;
}

h2 {
	margin:0 0 1em;
}
#main {
	background-color: #4B4521;
}

#content {
	//margin:3em 5% 30%;
	background:url(../img/bg_main.jpg) no-repeat center bottom #fdfdfd;
	padding-bottom:400px;
	position:relative;
}

#content > img {
	width:30%;
	min-width:160px;
	max-width:312px;
	height:auto;
	margin:1em 10% 0;
	display:block;
}

nav {
	/* border-bottom:1px dashed #8F1C6D; */
	overflow:hidden;
	margin-left:0;
	background:url(../img/color.gif) repeat-x 3em 1.8em;
}

nav ul {
	padding:0;
	list-style-type:none;	
	overflow:hidden;
	float:right;
	margin:0;
	background-color:#fff;
}

nav li {
	float:left;
	margin:0.7em 1em;
	background: no-repeat center center;
	height:25px;
	width:25px;
}

nav a {
	text-indent:-9999em;
	display:block;
	height:100%;
}

nav .quiz {
	background-image: url(../img/icon_quiz.png);
}

nav .design {
	background-image: url(../img/icon_design.png);
}

nav .contact-icon {
	background-image: url(../img/icon_mail.png);
	display:none;
}

nav a {
	color:#fff;
	text-decoration:none;
}

section {
	margin:0 10% 3em;
}

a {
	color:#8F1C6D;
}

.about-me,
.contact {
	width:39%;
	float:left;
	margin-right:0;
}


.skills {
	clear:both;
	overflow:hidden;
}

dl {
	float:left;
	margin:0 4em 0.8em 0;
	min-height:150px;
}

dt {
	display:inline;
}

dd {
	margin:0 0 1em;
	padding:0;
	background:url(../img/icon.png) no-repeat top left;
	width:80px;
	overflow:hidden;
	height:20px;
}

dd span {
	display:none;
}

.icon-5of6 {
	background-position: -13px top;
}
.icon-4of6 {
	background-position: -26px top;
}
.icon-3of6 {
	background-position: -39px top;
}
.icon-2of6 {
	background-position: -52px top;
}
.icon-1of6 {
	background-position: -65px top;
}
.icon-0of6 {
	background-position: -80px top;
}

.last {
	margin-right:0;
}

.qr-code {
	float:left;
	margin: 0 0.3em 0 0;
}

.vcard {
	margin: 6em 0 0 13em;
}

#myCanvasContainer {
	text-align:center;
	float:left;
	margin-top:-40px;
}

#myCanvasContainer ul {
	margin:0;
	padding:0;
}

@media screen and (min-width:900px) {
	#content {
		width:900px;
		margin:0 auto;
		-moz-box-shadow: 0px 0px 6px #000;
		-webkit-box-shadow: 0px 0px 6px #000;
		box-shadow: 0px 0px 6px #000;
	}
	
	nav {		
		margin-left:3em;
	}
	
	nav ul {
		padding:0 2em;
	}
}

@media screen and (max-width:600px) {
	
	.about-me,
	.contact {
		width:auto;
		float:none;
	}
	
	canvas {
		margin-left:-30px;
	}
	
	nav .contact-icon {
		display:inline;
	}
	
	
	.contact {
		position:absolute;
		bottom:0;
		text-align:right;
		margin:0;
		right:3em;
	}
	
	.contact > *, .contact a {
		color:#DFE3EC;
	}
	
	.label,
	.qr-code {
		display:none;
	}
	
	.vcard {
		margin:0 0 1em;
	}
}

@media screen and (max-width:500px) {
	.skills p {
		clear:both;
	}
	
	dl {
		min-height:auto;
	}

}

@media screen and (max-width:300px) {
	canvas {
		margin-left:-60px;
	}
}