@charset "UTF-8";
/* CSS Document */

body{background:url(../images/bot_bg.png) repeat #f7f7f7;margin:0 auto;font-family:'lato', Arial, Helvetica, sans-serif;color:#696969;}

/*HTML 5 specific*/
header,section,article,aside,footer, nav{
	display: block;
}

.container{margin:0 auto;width:968px;padding:10px 0;position:relative;overflow:hidden;}
header{
	background:url(../images/bot_bg.png) repeat #f7f7f7;
	width:100%;
	position:fixed;
	top:0;
	z-index:100;
	height:115px;
	border-bottom:8px solid #2ca4b0;
	padding-top:10px;
	}

nav#top-nav {
	height:85px;
	border:0px;
	padding-top:20px;
	width:968px;
	
}

nav#top-nav a.name{
	float:left;
	display:block;
	height:90px;
	width:35%;
}

nav#top-nav ul{
	float:right;
	width:35%;
	height:50px;
	margin-top:30px;
	text-align:right;
}

nav#top-nav ul li {
	display:inline-block;
	border-right:1px solid #696969 /*grey*/;
	height:20px;
	padding:0px 10px 5px 10px;
}

nav#top-nav ul li:last-child{
	border:0px;
}

nav#top-nav ul li a{
	color:#2ca4b0 /*turquoise*/;
	font-family: 'redressed', arial, helvetica, sans-serif;
	font-size:22px;
	/*text-shadow: -1px -1px #fff, 0.05em 0.05em #ccc;*/
}

nav#top-nav ul li a:hover{
	color:#c4532f /*orange*/;
}

#feature{
	background:url(../images/me_orange.png) repeat #c4532f;
	position:relative;
	border-bottom:8px solid #2ca4b0;
	padding-bottom:1px;
	margin-top:120px;	
	padding:20px 0;
}


#i-do h1, #i-am h1{
	font-family:'redressed', arial, helvetica, sans-serif;
	font-size:30px;
	color:#b4d5d9 /*turquoise*/;
	width:80px;
	text-transform:uppercase;
	margin-top:70px;
	
}

#i-am h1{
	margin-left:80px;
}
#i-do h1:first-child, #i-am h1:first-child{margin-top:20px;}

#i-do ul li, #i-am ul li{
	color:#fff;
	font-size:23px;
	margin:20px 0px;
	text-transform:uppercase;
	font-weight:300;
}

#i-do ul li span, #i-am ul li span{
	color:#b4d5d9 /*lightturquoise*/;
	font-weight:700;
}

#i-do, #i-am{
	width:50%;
	margin-top:10px;
	margin-left:0px;
	float:left;
	margin-bottom:30px;
}

#i-am{
	margin-left:0px;
	float:right;
}


#i-do ul {margin-left:20px;}
#i-am ul{margin-left:100px;}

#feature h2{
	text-align:center;
	color:#ffffff;
	font-size:22px;
	font-family:lato;
	font-weight:100;
	padding-bottom:20px;
}
#feature h2 a{
	color:#ffffff;
	font-weibht:400;
}
#feature h2 a:hover{
	color:#2ca4b0;
	font-weibht:400;
}

section#clients-skills{
	background:#ffffff;
	padding:20px 0px 30px 0;
}

#clients{
	width:65%;
	float:left;
}
#clients p{
	font-size:22px;
	line-height:28px;
	font-weight:200;
	margin-bottom:20px;
}



#skills{
	float:right;	
	width:28%;
}
#skills ul{
	margin-left:25px;

}
#skills ul li{
	font-size:16px;
	line-height:34px;
	font-weight:700;
	text-transform:uppercase;
}
	
#recent-projects{
	background:#e6e6dd;
	padding:20px 0px 0px;
}
#recent-projects .container{
		overflow:visible;
}
#recent-projects h1{
	padding-bottom:10px;}

#about{
	padding-top:20px;
	background:#2ca4b0;
}

#about img{
	float:left;
}

#about p{
	color:#ffffff;
	font-size:22px;
	font-weight:200;
	line-height:28px;
	margin-left:22%;
	margin-bottom:25px;
}

#about p.one{
	margin-top:-45px;
}

#about p a{
	font-weight:700;
	color:#ffffff;}
	
#about p a:hover{
	color:#c4532f /*orange*/;
}


#about h1{
	width:150px;
	color:#fff;
}




h1{
	font-family:'redressed', arial, helvetica, sans-serif;
	color:#c4532f /*orange*/;
	font-size:36px;
	margin-bottom:15px;}
	
.project{
	width:30%;
	background:#ffffff;
	padding:10px;
	float:left;
	margin-left:15px;
	min-height:600px;
	margin-bottom:20px;
}

.project h2{
	
	font-size:16px;
	font-weight:300;
	color:#696969;
	margin-left:10px;
	
}

.project h2 span{
	font-size:16px;
	margin:10px 0px 10px 10px ;
	color:#c4532f /*orange*/;
	font-weight:400;
}

.project a{
	color:#2ca4b0;
	font-weight:700;
	bottom:10px;
	display:block;
	margin-left:10px;
	margin-top:20px;
	font-size:18px;
	background:url(../images/arrow.png) no-repeat top right;
	padding:5px 0;
	width:60%;
	
}

.project a:hover{
	color:#c4532f;
	background:url(../images/arrow-over.png) no-repeat top right;

	
}

.more-projects{
	width:95%;
	background:#ffffff;
	padding:20px;
	margin:40px 0px;
	clear:both;
}

.more-projects div{
	float:left;
	width:50%;
	margin-bottom:20px;
}

.more-projects div.clear{clear:both;float:none;margin:0}

.more-projects a{
	color:#2ca4b0;
	font-weight:700;
	font-size:18px;
	margin-bottom:10px;

}

.more-projects a:hover{
	color:#c4532f /*orange*/;
}

.more-projects p{
	color:#696969;
	font-size:16px;
	font-weight:200;
	margin:5px 0;
	
}

.more-projects h1{
	font-size:27px;
	margin-bottom:20px;
}

.project p{
	font-size:18px;
	line-height:24px;
	font-weight:300;
	margin:20px 10px 10px 10px;
}

.project img{
	padding-bottom:10px;}

.first {
	margin-left:0px;
}

.drop-a-line h1{
	text-align:center;
	font-family:lato;
	font-size:22px;
	font-weight:400;
	color:#696969;
	clear:both;
}

.drop-a-line h1 a{
	color:#2ca4b0;
	text-transform:uppercase;
	font-weight:700;
}

.drop-a-line h1 a:hover{
	color:#c4532f /*orange*/;
}

	
footer{height:630px;}

.icon{
	display:inline-block;
	padding:5px;
	border-radius:5px;
	background:#c4532f;
	color:#fff !important;
	margin-right:10px;
}

.ux{
	background:#c4532f;
}

.ui {
	background:#2ca4b0;
}

.wd{
	background:#696969;
}
	
	
#contact {
	padding-top:20px;
}
#contact-me{
		margin-top:-45px;
padding-right:30px;
	margin-left:22%;
	clear:both;
}

#contact address {
	color:#2ca4b0 /*turquoise*/;
	font-family: 'redressed', arial, helvetica, sans-serif;
	font-size:24px;
	font-style:normal;
	/*text-shadow: -1px -1px #fff, 0.05em 0.05em #ccc;*/
}

#contact-me address a:hover{
	color:#c4532f /*orange*/;}
	
	
	
	
	input[type="text"], input[type="email"] { width: 100%;display:block; float:left;margin-top:0px;}
input[type="text"]:first-child{margin-right:6px;}
textarea { width:100%; height: 70px;}

input, textarea { background-color: rgba(255, 255, 255, 0.9); border: 3px solid rgba(79, 136, 138, 0.15); padding: 10px; color: #696969; font-size: 14px; -webkit-border-radius: 10px;border-radius: 5px; margin-bottom: 15px; margin-top: -5px;text-transform:uppercase;font-weight:200;}
input:focus, textarea:focus { border: 3px solid #c4532f; background-color: rgba(255, 255, 255, 1); color:#2ca4b0;}

input[type="submit"] { border: none; cursor: pointer; color: #fff; font-size: 12px; background-color: #2ca4b0; padding: 10px 25px 10px 25px; -webkit-border-radius: 10px; -moz-border-radius: 10px;  border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);
	
	
}

input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #c4532f;
	
	);
}

input[type="submit"]:active { position: relative; top: 1px; }

.