@import url('http://fonts.googleapis.com/css?family=Open+Sans');

@import url('bootstrap.css');
@import url('animate.css');
@import url('icons.css');
@import url('misc.css');

body {
	color: #333;
	font-size: 16px;
	background: #f1f1f1;
}

#home {
	color: #fff;
	padding: 30px 0px;
	min-height: 500px;
	text-align: center;
	background: #2c3e50;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .25);
	
	background-size: 100%;
	background-color: #34495e;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('../img/home.jpg');
}

#home h5 {
	font-size: 16px;
	padding: 20px 0px;
	font-weight: bold;
}

#home .btn {
	color: #fff;
	padding: 10px 20px;
	background: #16a085;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .25);
	
	-webkit-box-shadow: 0px 2px 0px #137e69;
	-moz-box-shadow: 0px 2px 0px #137e69;
	-o-box-shadow: 0px 2px 0px #137e69;
	box-shadow: 0px 2px 0px #137e69;
}

#logo {
	float: left;
}

#nav {
	padding: 0px;
	float: right;
	margin: 15px 0px 0px 0px;
}

#nav li {
	float: left;
	list-style: none;
	margin: 0px 30px 0px 0px;
}

#nav li a {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
	
	-webkit-transition: color 250ms;
	-moz-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

#nav li a:hover,
#nav li a:focus {
	color: #1abc9c;
	text-decoration: none;
}

#nav li.current a {
	-webkit-box-shadow: 0px 2px 0px #1abc9c;
	-moz-box-shadow: 0px 2px 0px #1abc9c;
	-o-box-shadow: 0px 2px 0px #1abc9c;
	box-shadow: 0px 2px 0px #1abc9c;
}

#home .btn:hover,
#home .btn:active {
	background: #1abc9c;
}

.section {
	padding: 50px 0px;
}

.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 {
	line-height: 1.5;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
}

#portfolio {
	text-shadow: 0px 1px 0px #fff;
}

#portfolio-projects {
	padding-top: 40px;
	text-align: center;
}

#portfolio-projects .portfolio-project {
	padding: 10px;
	background: #fff;
	position: relative;
	margin: 0px 15px 30px;
	display: inline-block;
	vertical-align: middle;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
	
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
	-o-box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
}

#portfolio-projects .portfolio-project img {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}

#portfolio-projects .portfolio-project .portfolio-project-image {
	width: 400px;
	height: 300px;
	overflow: hidden;
	position: relative;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}

#portfolio-projects .portfolio-project .portfolio-project-info {
	left: 0px;
	right: 0px;
	bottom: -300px;
	height: 300px;
	padding: 10px;
	font-size: 12px;
	text-align: left;
	text-shadow: none;
	position: absolute;
	background: rgba(255, 255, 255, .9);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	
	border-radius: 4px;
}

#portfolio-projects .portfolio-project .portfolio-project-info h4 {
	margin: 0px;
	text-align: left;
	padding: 0px 0px 10px 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#portfolio-projects .portfolio-project .portfolio-project-info .label {
	color: #fff;
	font-weight: bold;
	background: #16a085;
	padding: 2px 4px 3px 4px;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .25);
}

#about {
	color: #fff;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .25);
	
	background-size: 100%;
	background-color: #e74c3c;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-image: url('../img/about.jpg');	
}

#skills {
	text-align: center;
}

#skills .skill {
	width: 240px;
	vertical-align: top;
	display: inline-block;
	padding: 20px 0px 0px 0px;
}

#skills .skill .skill-icon {
	width: 128px;
	height: 128px;
	color: #e74c3c;
	font-size: 64px;
	background: #fff;
	text-shadow: none;
	line-height: 114px;
	text-align: center;
	display: inline-block;
	margin: 0px 0px 20px 0px;
	
	-webkit-border-radius: 64px;
	-moz-border-radius: 64px;
	-o-border-radius: 64px;
	border-radius: 64px;
	
	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
	-o-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

#skills .skill .skill-list-wrapper {
	text-align: left;
	vertical-align: top;
	display: inline-block;
}

#skills .skill .skill-list-wrapper ul {
	margin: 0px;
	text-align: left;
	display: inline-block;
	padding: 0px 0px 0px 26px;
}


#contact {
	text-shadow: 0px 1px 0px #fff;
}

#contact-buttons {
	text-align: center;
}

#contact-buttons a {
	width: 64px;
	height: 64px;
	font-size: 42px;
	text-shadow: none;
	display: inline-block;
	margin: 0px 8px 0px 0px;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	-o-transition: all 500ms;
	transition: all 500ms;
}

#contact-buttons a.btn-dribbble { color: #ea4c89; }
#contact-buttons a.btn-dribbble:hover,
#contact-buttons a.btn-dribbble:active {
	color: #fff;
	background: #ea4c89;
}

#contact-buttons a.btn-twitter { color: #00aced; }
#contact-buttons a.btn-twitter:hover,
#contact-buttons a.btnr-twitter:active {
	color: #fff;
	background: #00aced;
}

#contact-buttons a.btn-github { color: #8e44ad; }
#contact-buttons a.btn-github:hover,
#contact-buttons a.btn-github:active {
	color: #fff;
	background: #8e44ad;
}

#contact-buttons a.btn-behance { color: #393935; }
#contact-buttons a.btn-behance:hover,
#contact-buttons a.btn-behance:active {
	color: #fff;
	background: #393935;
}

#contact-buttons a.btn-email { color: #1abc9c; }
#contact-buttons a.btn-email:hover,
#contact-buttons a.btn-email:active {
	color: #fff;
	background: #1abc9c;
}

.color-turquoise,
.color-turquoise:hover,
.color-turquoise:active {
	color: #1abc9c;
}

.color-twitter,
.color-twitter:hover,
.color-twitter:active {
	color: #00aced;
}

.color-github,
.color-github:hover,
.color-github:active {
	color: #8e44ad;
}

.color-dribbble,
.color-dribbble:hover,
.color-dribbble:active {
	color: #ea4c89;
}