@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Abel|Montserrat:400,700);

body {
	margin: 0;
	padding: 0;
	font-family: 'Abel', sans-serif;
	font-size: 12px;
	background: #FFF;
}

html {-webkit-font-smoothing: antialiased;}

.fl {float: left;}
.fr {float: right;}
.cl {clear: both;}
.divider {width: 100%; margin: 0 auto; border-bottom: solid #CCC 1px;}

/* Navigation Start */

header {
	width: 100%;
	height: 60px;
	position: fixed;
	background: rgba(255, 255, 255, 1.0);
	top: 0;
	z-index: 20;
}

nav {font-family: 'Abel', sans-serif;}

nav #menu {margin: 0 auto; width: 960px; text-align: right;}

nav ul {
	width: 100%;
	list-style-type: none;
	margin: 0 50px 0 0;
	padding: 0;
}

#menu li {
	padding: 0 0 0 40px;
	height: 60px;
	text-align: center;
	font-size: 12px;
	text-transform: uppercase;
	display: inline-block;
}

#menu li a {
	text-decoration: none;
	color: #000;
	line-height: 60px;
}

#menu a:hover {color: #56dc6c;}

#menu .current a {
	color: #2c5e2e;
	border-bottom: solid #56dc6c 5px;
}

/* Navigation End */

/* Introduction Start */

#intro {
	width: 100%;
	height: 100vh;
	display: table;
	background: URL('../images/backgrounds/1.jpg') no-repeat fixed;
	background-position: center;
}

#intro .container {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	opacity: 0;
}

#intro h1 {
	margin: 0;
	padding: 2px 10px 2px 10px;
	color: #FFF;
	display: inline-block;
	font-size: 30px;
	font-weight: normal;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	border: solid #FFF 5px;
}

#intro h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	color: #FFF;
	padding: 0;
	margin: 0;
}

/* Introduction End */

/* About Start */

#about {
	width: 100%;
	height: 660px;
	display: table;
	text-align: center;
}

#about .content {
	margin: 0 auto;
	width: 960px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

#about .circular {
	width: 250px;
	height: 250px;
	margin: 20px auto;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: URL('../images/me.png') no-repeat;
}

#about .container {
	margin: 30px auto;
	width: 960px;
}

#about .inner {
	width: 70%;
	margin: 0 auto;
	text-align: left;
}

#about h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 25px;
	text-align: center;
	color: #56dc6c;
	margin: 0;
	padding: 0;
}

#about .inner p {
	width: 90%;
	margin: 10px auto 0 auto;
	font-size: 15px;
}

#skills {
	width: 100%;
	height: 300px;
	background: URL('../images/backgrounds/2.jpg') no-repeat fixed;
	background-position: center;
	display: table;
	text-align: center;
	color: #FFF;
}

#skills .content {
	margin: 0 auto;
	width: 960px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

#skills .container {
	margin: 30px auto;
	width: 960px;
}

#skills h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 35px;
	color: #fffff;
	text-align: center;
	margin: 0;
	padding: 0;
}

#skills .inner {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#skills .inner ul {
	list-style-type: none;
	display: inline-block;
	text-align: justify;
	margin: 20px 0 0 0;
}

#skills .inner li {
	display: inline-block;
	margin: 0 20px 0 0;
}

/* About End */

/* Portfolio Start */

#portfolio {
	width: 100%;
	min-height: 800px;
	display: table;
	text-align: center;
}

#portfolio .content {
	margin: 0 auto;
	width: 960px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

#portfolio .container {
	margin: 80px auto;
	width: 960px;
}

#portfolio h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 25px;
	color: #56dc6c;
	text-align: center;
	margin: 0;
	padding: 0;
}

#portfolio h3 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 25px;
	color: #2c3b49;
	text-align: center;
	margin: 0;
	padding: 0;
}

#portfolio .inner {
	width: 900px;
	margin: 0 auto;
	text-align: center;
}

#portfolio .stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
/*
#portfolio .circular {
	width: 250px;
	height: 250px;
	margin: 20px auto;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	overflow: hidden;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}

#portfolio .item {
	display: inline-block;
	vertical-align: top;
	width: 250px;
}

#portfolio a.overlay {
    display: inline-block;
    background: #d9f8ff;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	overflow: hidden;
    padding: 0;
}

#portfolio a.overlay img {
    display: block;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	overflow: hidden;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
	z-index: 4;
}

#portfolio a.overlay:hover img {opacity: 0.5;}

#portfolio a {color: #2c5e2e;text-decoration:none;border-bottom: dashed #2c5e2e 1px;}
*/

#portfolio .item {
	width: 300px;
	height: 200px;
	background: #000;
	padding: 0;
	margin: 0;
	display: inline-block;
	float: left;
	transition: all 1s ease;
}
#portfolio .item img {
	width: 100%;
}
#portfolio .item:hover .overlay {
	background: #FFF;
	opacity:0.8;
}
#portfolio .item:hover .button {
	width: 70px;
	height: 70px;
	margin: -131px auto 0 auto;
	background: URL('../images/icons/view.png') center center no-repeat #56dc6c;
	opacity: .7;
	transition: .5s;
	animation-delay: inherit; 
	cursor: pointer;
}
#portfolio .overlay {
	width: 100%;
	height: 100%;
	margin: -204px 0 0 0;
	background: #FFF;
	opacity:0;
	transition: all 1s ease;
}
#portfolio .button {
	width: 123px;
	height: 123px;
	margin: -157px auto 0 auto;
	background: URL('../images/icons/view.png') center center no-repeat;
	opacity: 0;
	border-radius: 50%;
	transition: all .2s ease;
}

@keyframes scale {
	0%   { transform:scale(1); }
	50%   { transform:scale(1.1); }
	100% { transform:scale(1); }
}


/* Portfolio End */

/* Postmortem Start */

#reflection {
	width: 100%;
	height: 250px;
	display: table;
	text-align: center;
	background: #FDFDFD;
}

#reflection .content {
	margin: 0 auto;
	width: 960px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

#reflection .container {
	margin: 30px auto;
	width: 960px;
}

#reflection .inner {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

#reflection h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 25px;
	text-align: center;
	color: #56dc6c;
	margin: 0;
	padding: 0;
}

#reflection .inner p {
	width: 90%;
	margin: 10px auto 0 auto;
	font-size: 15px;
}

/* Postmortem End */

/* Contact Start */

#contact {
	width: 100%;
	height: 400px;
	display: table;
	background: #2C3B49;
	text-align: center;
	color: #FFF;
}

#contact .content {
	margin: 0 auto;
	width: 960px;
	height: 100%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#contact .container {
	margin: 30px auto;
	width: 960px;
}

#contact .inner {
	width: 620px;
	margin: 0 auto;
}

#contact h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 25px;
	text-align: center;
	color: #FFF;
	margin: 0;
	padding: 0;
}

#contact input, textarea {
	background: transparent;
	font-family: 'Abel', sans-serif;
	font-size: 14px;
	color: #FFF;
	border: none;
}

#contact input[type=text], textarea {
	margin: 5px 0 5px 0;
	padding: 10px;
	background: #1b252e;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

#contact input[type=text] {width: 278px;}

#contact input[type=submit] {
	width: 60px;
	height: 30px;
	margin: 15px 10px 40px 0;
	display: table-cell;
	vertical-align: middle;
	background: #56dc6c;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-shadow: 1px 1px 0px #000;
	float: right;
}

#contact input[type=submit]:hover {background: #2fc247;}

#contact textarea {
	max-width: 580px;
	min-width: 580px;
	min-height: 250px;
}

#contact p.error, p.success {
	font-weight: bold;
	padding: 10px;
	border: 1px solid;
}

#contact p.error {
	background: #ffc0c0;
	color: #900;
}

#contact p.success {
	background: #b3ff69;
	color: #4fa000;
}

/* Contact End */

/* Footer Start */

footer {
	width: 100%;
	height: 100px;
	font-size: 15px;
	display: table;
	background: #222a32;
	text-align: center;
	color: #FFF;
}

footer .content {
	margin: 0 auto;
	width: 960px;
	height: 100%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

footer .container {
	margin: 20px auto;
	width: 960px;
}

footer .inner {
	width: 960px;
	margin: 0 auto;
}

/* Footer End */

/* Project Details Start */

#projectinfo {
	width: 600px;
	min-height: 100%;
	text-align: center;
}

#projectinfo h1 {
	color: #2c3b49;
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

#projectinfo h2 {
	color: #2c3b49;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
	margin: 0 0 10px 0;
	padding: 0;
}

#projectinfo .button {
	width: 100%;
	height: 28px;
	padding: 5px 0 0 0;
	display: inline-table;
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	background: #2fc247;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#projectinfo .button:hover {background: #56dc6c;}

/* Project Details End */