/***** RESET *****/
html {font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
html, body, div, object, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, form, fieldset, input, textarea, select, label, legend, button, a, small, table, th, td {margin:0; padding:0; line-height:1.5;}
body {text-rendering:optimizeLegibility;}
html, fieldset, img, abbr {border:0;}
input, textarea, select, button {font-family:inherit;}
sup, sub {position:relative; top:-.4em; vertical-align:baseline;}
sub {top:.3em;}
table {border-collapse:collapse; border-spacing:0;}
th {text-align:left;}
code {white-space:pre;}
abbr {cursor:help;}
q:before, q:after {content:"";}
a, a:hover, a:active {outline:none;}
/***** GLOBAL *****/
.clearfix:before, .clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1;}

/* Global */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #444;
	background: #666;
}
h1 {
	margin: 10px 0 15px 0;
	padding-bottom: 5px;
	font-size: 24px;
	font-weight: normal;
	border-bottom: 1px solid #CCC;
}
h2 {
    margin: 10px 0;
    font-size: 20px;
    font-weight: normal;
}
h3 {
	
	font-size: 16px;
}
p {
	margin-bottom: 10px;
}
a {
	color: #0582BD;
	font-weight: bold;
	outline: none;
}
a:hover,
a:active {
	color: #FF7000;
}
.main-content {
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
    height: 700px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
	padding: 7px 20px 20px 20px;
	background-color: #FFF;
	border-radius: 7px;
	border: 5px solid #0582BD;
}
/* PORTFOLIO */
.portfolio {
	margin-bottom: 15px;
}
.portfolio-list {
	float: left;
	width: 47%;
	padding: 0 3% 0 0;
}
.portfolio-list:last-of-type {
	margin: 0;
}
.portfolio-list ul {
	margin: 0;
}
.portfolio-list ul li {
	margin: 0 0 15px 0;
	list-style: none;
}
.portfolio-list ul li:last-child {
	margin: 0;
}
.portfolio-list ul li a {
	font-size: 14px;
}
.portfolio-list ul li a span {
	display: block;
	padding-top: 3px;
	font-size: 12px;
	color: #333;
	font-weight: normal;
}
/* SKILLS */
.skills {
	margin-bottom: 15px;
}
.skills ul li {
	padding: 5px 0 0;
	margin-left: 15px;
	line-height: 22px;
}
.skills ul li:first-of-type {
	padding-top: 0;
}


/* MEDIA QUERIES */
@media all and (min-width: 500px) {
	.main-content {
        height: 550px;
	}
}
@media all and (min-width: 768px) {
	.main-content {
        width: 550px;
        height: 500px;
	}
	.intro p {
		width: 90%;
	}
	.portfolio-list {
		width: auto;
		margin-right: 50px;
		padding: 0;
	}
	.portfolio-list ul {
		margin: 0 0 5px 0;
	}
}