/*This stylesheet contains some custom class rather than Bootstrap*/
		
.w30 {width: 30%; }
.w50 {width: 50%; }
.w70 {width: 70%; }

.CenterBox {display: table; }
.CenterContent {display: table-cell;vertical-align: middle;}

a.brand img {
	border-radius:50%;
	border:5px solid #fff;
}
#profile, #skills, #work, #resume {
	padding:30px 0;
	padding-top: 120px;
	min-height:500px;
}
#profile h2, #skills h2, #work h2, #resume h2 {
	font-weight:normal;
	color: #39D084;
}
#profile h2, #skills h2, #work h2, #resume h2 {
	border-bottom: 1px solid #39D084;
}
#resume .btn-center h2 {
	border: none;
} 
/***** Profile *****/
	#profile h1 {
	color:#39d084;
	font-weight: normal;
}
#profile h3 {
	color:#fff;
	font-weight: normal;
}
#profile p,
#work p {
	color:#fff;
	font-size:18px;
	line-height: 35px;
	margin-top: 30px;
}
#profile .container .span5 {
	padding:40px 0;
}
a.hire-me {
	display: inline-block;
 *display: inline;
	padding:20px 60px;
	background:#39d084;
	color:#fff;
	text-transform:uppercase;
	font-size:26px;
	margin:20px 0;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}
a.hire-me:hover {
	text-decoration:none;
	background:#11d170;
}
.social {
	padding-bottom:80px;
	margin-left: 0;
}
ul.social-icons {
	margin:20px 0;
}
ul.social-icons li {
	list-style:none;
	display:inline-block;
	margin:10px;
}
ul.social-icons li:first-child {
	margin-left:0;
}
ul.social-icons li a {
	opacity:0.8;
}
ul.social-icons li a:hover {
	opacity:1;
}
ul.social-icons.centered {
	text-align: center;
}
/***** Skills *****/
#skills .w50,
#skills .w30,
#skills .w70 {
	float: left;
	margin: 0;
	position: relative;
}
#skills .w30 {
	width: 110px;
}
#skills .w70 {
	padding-left: 30px;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
#skills .w70 h3 {
	margin-top: 20px;
}
#skills .w70 span {
	float: right;
	color: #336b94;
}
#skills .row {
	margin-top: 20px;
}
#skills .span3 {
	width:235px;
	overflow: hidden;
}
#skills .span5 {
	text-align:left;
	padding:47px 0;
}
#skills .ps, #skills .ai, #skills .html, #skills .css, #skills .js, #skills .jq,
#skills .framework, #skills .modernizr, #skills .cssgrid, #skills .rwd, #skills .mobileweb, #skills .cb,
#skills .cssless, #skills .git, #skills .php, #skills .cms, #skills .svg, #skills .wfont {
	width:110px;
	height:110px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-align:center;
	border: 4px solid #203748;
	float:right;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
#skills .svgicon:after {
	display: block;
	content: '';
	background: transparent url('../img/sprite-skills.png') no-repeat left top;
	width: 60px;
	height: 60px;
	position: relative;
}
#skills .ps {background:#30a5dc; }
	#skills .ps:after {position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -28px; }
#skills .ai {background:#ee742b; }
	#skills .ai:after {position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -31px;background-position: -80px 0; }
#skills .html {background:#f04949; }
	#skills .html:after {position: absolute;top: 50%;left: 50%;margin: -5px 0 0 -30px;background-position: -160px 0;height: 15px; }
#skills .css {background:#39d084; }
	#skills .css:after {position: absolute;top: 50%;left: 50%;margin: -9px 0 0 -30px;background-position: -160px -34px;height: 19px; }
#skills .js {background:#FD6500; }
	#skills .js:after {position: absolute;top: 50%;left: 50%;margin: -15px 0 0 -30px;background-position: -240px 0;height: 31px; }
#skills .jq {background:#0769AD; }
	#skills .jq:after {position: absolute;top: 50%;left: 50%;margin: -8px 0 0 -30px;background-position: -314px -35px;height: 20px; }
#skills .framework {background-color: #0081AA; }
	#skills .framework:after {position: absolute;top: 50%;left: 50%;margin: -24px 0 0 -30px;background-position: 0px -80px; }
#skills .modernizr {background-color: #D91E76; }
	#skills .modernizr:after {position: absolute;top: 50%;left: 50%;margin: -15px 0 0 -30px;background-position: -395px 0;height: 30px; }
#skills .cssgrid {background-color: #b0a4a4; }
	#skills .cssgrid:after {position: absolute;top: 50%;left: 50%;margin: -27px 0 0 -30px;background-position: -80px -80px; }
#skills .rwd {background-color: #C2DE1E; }
	#skills .rwd:after {position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -30px;background-position: -160px -80px; }
#skills .mobileweb {background-color: #696969; }
	#skills .mobileweb:after {position: absolute;top: 50%;left: 50%;margin: -27px 0 0 -30px;background-position: -230px -80px; }
#skills .cb {background-color: #E41A1A; }
	#skills .cb:after {position: absolute;top: 50%;left: 50%;margin: -27px 0 0 -30px;background-position: -293px -80px; }
#skills .cssless {background-color: #182F51; }
	#skills .cssless:after {position: absolute;top: 50%;left: 50%;margin: -9px 0 0 -30px;background-position: -160px -34px;height: 19px; }
#skills .git {background-color: #F34F29; }
	#skills .git:after {position: absolute;top: 50%;left: 50%;margin: -27px 0 0 -30px;background-position: -632px 0; }
#skills .php {background-color: #5A68A5; }
	#skills .php:after {position: absolute;top: 50%;left: 50%;margin: -9px 0 0 -30px;background-position: -314px 0;height: 24px; }
#skills .cms {background-color: #0076C0; }
	#skills .cms:after {position: absolute;top: 50%;left: 50%;margin: -28px 0 0 -30px;background-position: -706px 0; }
#skills .svg {background-color: #49A64B; }
	#skills .svg:after {position: absolute;top: 50%;left: 50%;margin: -10px 0 0 -30px;background-position: -475px 0;height: 25px; }
#skills .wfont {background-color: #7F4A16; }
	#skills .wfont:after {position: absolute;top: 50%;left: 50%;margin: -23px 0 0 -30px;background-position: -555px 0; }

#skills .ps:hover, #skills .ai:hover, #skills .html:hover, #skills .css:hover, #skills .js:hover, #skills .jq:hover,
#skills .framework:hover, #skills .modernizr:hover, #skills .cssgrid:hover, #skills .rwd:hover, #skills .mobileweb:hover, #skills .cb:hover,
#skills .cssless:hover, #skills .git:hover, #skills .php:hover, #skills .cms:hover, #skills .svg:hover, #skills .wfont:hover {
	border: 4px solid #fff;
}
#skills .ps h3, #skills .ai h3, #skills .html h3, #skills .css h3, #skills .js h3, #skills .jq h3,
#skills .framework h3, #skills .modernizr h3, #skills .cssgrid h3, #skills .rwd h3, #skills .mobileweb h3, #skills .cb h3,
#skills .cssless h3, #skills .git h3, #skills .php h3, #skills .cms h3, #skills .svg h3, #skills .wfont h3 {
	color:#fff;
	font-size: 3.4em;
	font-weight: normal;
	line-height: 85px;
}
#skills .html h3, #skills .css h3 {
	font-size: 2em;
}
.two-columns {
	width: 50%;
	float: left;
}
.expand-bg {
	background: none repeat scroll 0 0 #EAEDF2;
	border-radius:16px;
	height: 16px;
	margin-bottom: 15px;
	position: relative;
	padding: 0 2px;
}
.expand {
	border-radius: 10px;
	height: 12px;
	margin: 2px 0;
	padding: 4px 0 4px 5px;
	position: absolute;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
#skills .span5 h3 {
	font-size: 18.5px;
	line-height: 15px;
	font-weight:normal;
	text-transform:uppercase;
}
#skills .span5 h3 span {
	float:right;
}
.ps2 {
	width:98%;
	background:#30a5dc;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.ai2 {
	width:98%;
	background:#ee742b;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.html2 {
	width:90%;
	background:#f04949;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.css2 {
	width:90%;
	background:#39d084;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.js2 {
	width:25%;
	background:#FD6500;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.jq2 {
	width:50%;
	background:#0769AD;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.framework2 {
	width: 75%;
	background: #0081AA;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.modernizr2 {
	width: 50%;
	background: #D91E76;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.cssgrid2 {
	width: 80%;
	background: #b0a4a4;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.rwd2 {
	width: 80%;
	background: #C2DE1E;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.mobileweb2 {
	width: 70%;
	background: #696969;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.cb2 {
	width: 85%;
	background: #E41A1A;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.cssless2 {
	width: 40%;
	background: #182F51;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.git2 {
	width: 60%;
	background: #F34F29;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.php2 {
	width: 25%;
	background: #5A68A5;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.cms2 {
	width: 45%;
	background: #0076C0;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.svg2 {
	width: 75%;
	background: #49A64B;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}
.wfont2 {
	width: 85%;
	background: #7F4A16;
	-moz-animation:fullbar 2s ease-out;
	-webkit-animation:fullbar 2s ease-out;
}

@-moz-keyframes fullbar {
	0% 		{ width:0px; }
	100%	{ }
}

/**** Work container *****/
ul.work-images {
	margin: 0;
}
ul.work-images li {
	list-style:none;
	float: left;
	margin: 0;
	padding: 5px;
	width: 25%;
	text-align: center;
 	background: none;
 	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
ul.work-images li div {
	background-color: #212121;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
	position: relative;
	overflow: hidden;
}
ul.work-images li img {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

ul.work-images li:hover .hide {
	display: block;
	padding: 5px 10px;
	-moz-animation: GoTop 200ms ease-out;
	-webkit-animation: GoTop 200ms ease-out;
	opacity: .95;
}
@-moz-keyframes GoTop {
	0% 		{ bottom: -100px;opacity: 0; }
	100%	{ }
}

#work ul.work-images li .hide {
	position: absolute;
	bottom: 0;
}
#work ul.work-images li .hide h2 {
	color: #FFF !important;
	font-size: 20px;
	line-height: 25px;
	border: none !important;
}
#work ul.work-images li .hide p {
	color: #999;
	font-size: 12px;
	line-height: 16px;
	margin-top: 0;
}

/***** Resume container *****/
#resume h3 {
	margin:60px 0;
}
#resume .btn-center {
	text-align:center;
}
.footer {
	background:#355267;
}
.footer p {
	margin:20px 0;
}
.footer p a {
	color:#fff;
	text-decoration:none;
}
.footer p a:hover {
	color:#39d084;
}



.navbar-fixed-top {
	margin: 0;
}


@media (max-width: 979px) {
	.navbar .nav {width: 100%; }
	.navbar .nav > li {width: 100%;margin: 0;text-align: center; }
	#skills .w50 {width: 100%; }
	ul.work-images li {width: 33%;}
}

@media (max-width: 767px) {
	#skills .w30 {display: none; }
	#skills .w70 {width: 100%;padding-right: 30px; }
	#profile h2, #skills h2, #work h2, #resume h2 {padding: 0 30px; }
	ul.work-images li:first-child {margin: 0 !important; }
}

@media (max-width: 550px) {
	ul.work-images li {width: 50%;}
	#work ul.work-images li .hide {display: none;	}
}