/***** Import Reset File *****/

@import url("reset.css");

/***** Import @FontFace File *****/

@import url("fonts.css");

/***** General *****/

html, body {margin:0px; padding:0px;font-family: Trebuchet MS,Arial,Helvetica,sans-serif; color:#394c5e; text-align:left; height: 100%; background:#e5e9ea url(../images/bg.png);}
.wrappage { width:100%; height: 100%;margin:0 auto; padding:0; position:relative;}
.container{width:830px; margin:-225px auto auto -415px; position:fixed; top:50%; left:50%;}
.left { float:left;}
.right {float:right;}
.center{ text-align:center;}
.divider{ width:100%; min-height:1px; margin:0; background: url(../images/divider.png) 170px 70% no-repeat; display:inline-block;}
.divider-s{ width:100%; min-height:1px; margin:0; background: url(../images/divider.png) 130px 60% no-repeat; display:inline-block;}
.no-float{ float:none;}
a, img , button { outline: none; }
/* http://sonspring.com/journal/clearing-floats */
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
}
button:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
border: 0;
}

/***** Typography & Element *****/

h1 {font-size:36px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:18px;}
h5 {font-size:16px;}
h6 {font-size:14px;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
p {font-size:15px; height:auto;line-height: 1.4em; padding:0; margin:0;}
.image-left {float: left;margin: 5px 20px 10px 0;}
.image-right {float: right;margin: 5px  0 10px 20px;}

/***** Header *****/

header {width:830px; min-height:60px; margin:0 auto 30px 0;}
.logo {width:830px; display:inline-block;}
header h1 a{ color:#657089; font-size:33px; text-shadow:#b0b2b1 2px 2px 0; margin:0;}
header h1 a span{ color:#ffffff;}
header h5{ color:#657089;margin:0;text-shadow:#ffffff 2px 2px 0;}
a.vcard{ width:48px; height:48px; margin:0; padding:0; background:url(../images/vcard.png) 0 0 no-repeat; display:block;}
a.vcard:hover{ background-position:0 -48px;}

/***** Section *****/

section {width:790px; height:350px; margin:0 auto; padding:20px 20px 30px 20px; background: url(../images/bg-section.png);border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; position:relative; float:left;}
section ul{overflow:hidden;}
section#about ,section#resume ,section#portfolio , section#contact{ display:none;}
section#about a,section#blog a{ color:#d15600;}
section#resume a{ color:#73880a;}
section#portfolio a{ color:#3f4c6b;}
section#contact a{ color:#d01f3c;}
section.menu{width:830px; height:230px; margin:0 auto; padding:0; background:none;}
a.close{ width:32px; height:64px; position:absolute; top:16px; right:-32px; z-index:999; display:block; background:url(../images/bg-close.png) right top no-repeat;}
a.close_blog{ width:32px; height:64px; position:absolute; top:16px; right:-32px; z-index:999; display:block; background:url(../images/bg-close.png) right top no-repeat;}

/***** Menu  *****/

.menu-cont{ width:830px; height:230px; position:relative; overflow: hidden;}
.menu-cont a{ width:230px; height:140px; padding:90px 0 0 0; position:absolute; top:0; left:0; z-index:4;font-weight:400;color:#efeff1; text-align:center;text-shadow:#657089 1px 1px 0;}
.menu-cont a span{width:230px; height:230px;position:absolute; top:0; left:0; z-index:5; display:block;}
.menu-cont a.about{ left:0; z-index:4; background:url(../images/a-orange.png) 0 0 no-repeat;}
.menu-cont a.resume{ left:200px; z-index:3;background: url(../images/a-olive.png) 0 0 no-repeat ;}
.menu-cont a.portfolio{ left:400px; z-index:2; background: url(../images/a-blue.png) 0 0 no-repeat ;}
.menu-cont a.contact{ left:600px; z-index:1;background: url(../images/a-crimson.png) 0 0 no-repeat ;}
.menu-cont a:hover{ z-index:100;}

/***** Section page*****/

.block{width:760px; height:350px; padding:0 20px 0 10px; margin:0 auto; overflow: auto;}
.block-12{width:362px; margin:0 30px 0 0;}
.block-12.last{ margin:0;}
.block h1{text-shadow:#d1d1d1 1px 1px 0; margin:0 0 20px 0; line-height:35px; text-transform: capitalize;font-family: 'YanoneKaffeesatzLight';font-weight:400;}
.block h1.about{ color:#d15600;}
.block h1.resume{ color:#73880a;}
.block h1.portfolio{ color:#3f4c6b;}
.block h1.contact{ color:#d01f3c;}
.block h3{text-shadow:#d1d1d1 1px 1px 0; margin:0 0 10px 0;color:#394c5e;font-family: 'YanoneKaffeesatzLight'; font-weight:400;}
.block p{ margin:0 0 15px 0;}
.block blockquote { background: url(../images/quote.png) right bottom no-repeat ; padding: 0 30px; font-style:italic; font-size:16px; display:block; font-weight:bold; }
section#about .block img {float: left;margin: 5px 20px 10px 0;}
.wp-caption {}.wp-caption-text {}.sticky {}.gallery-caption {}.bypostauthor {}.alignright {}.alignleft {}.aligncenter{}
.jspVerticalBar{width: 10px;background: none;}
.jspTrack{width: 1px; background:#e5e9ea;}
.jspDrag{width: 10px; background:#e5e9ea;left:-4px;border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;}

/***** About *****/

ul.info{ width:362px; margin:5px 0 0 0;}
ul.info li{font-size:15px; margin:0 0 7px 0; line-height:15px;font-family: 'YanoneKaffeesatzLight';}
ul.info li.where{font-size:15px; width:247px; padding:0; margin:0 0 8px 0;}
ul.info li.where span{color:#d15600; text-shadow:#ffffff 1px 1px 0;}
ul.info li.where.progress{width:100px; padding:0; margin:0 0 3px 0;}
ul.info li.where.progress span{font-size:13px; display:block;margin:0; text-align: center; border:1px #d9dce1 solid; padding:1px 0;font-family: 'QlassikBoldRegular';border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}

/***** Resume *****/

ul.info li.check{ padding:0 0 0 25px; width:337px; background:transparent url(../images/check.png) no-repeat 0 1px; }
ul.info li.check span{color:#73880a; text-shadow:#ffffff 1px 1px 0;}
ul.info li.skills{font-size:15px; width:182px; padding:0; margin:0 0 7px 0;}
ul.info li.skills span{color:#73880a; text-shadow:#ffffff 1px 1px 0;}
ul.info li.skills.progress{width:165px; padding:0; margin:0 0 7px 0;}
ul.info li.skills.progress span{ height:15px; display:block; background: url(../images/skills.png) repeat-x; padding:0; margin:0;}
ul.info li.skills.progress span.p-100{width:165px;}
ul.info li.skills.progress span.p-90{width:135px;}
ul.info li.skills.progress span.p-80{width:120px;}
ul.info li.skills.progress span.p-70{width:105px;}
ul.info li.skills.progress span.p-60{width:90px;}
ul.info li.skills.progress span.p-50{width:75px;}
ul.info li.skills.progress span.p-40{width:60px;}
ul.info li.skills.progress span.p-30{width:45px;}
ul.info li.skills.progress span.p-20{width:30px;}
ul.info li.skills.progress span.p-10{width:15px;}

/***** Portfolio *****/

ul.portfolio{ width:755px; margin:10px 0 20px 0; padding:0;}
ul.portfolio li{ margin:0 1px 1px 0; padding:0; float:left; position:relative; overflow:hidden;}
ul.portfolio li a{width:250px; height:150px; padding:0;display:block; position:relative; overflow:hidden;}
ul.portfolio li a.zoom {width:30px; height:30px;background:url(../images/zoom-icon.png) no-repeat top center; position:absolute; top:60px; left:-30px; z-index:9999;opacity:0;}
ul.portfolio li a.link{width:30px; height:30px;background:url(../images/link.png) no-repeat top center; position:absolute; top:60px; right:-30px; z-index:9999;opacity:0;}
ul.portfolio li .description{ width:230px; padding:10px;position:absolute; bottom:0px; left:0px; z-index:9999; font-size:16px;background: url(../images/tr-png.png); color:#f8f8f8;}
ul.portfolio li .video-post{width:250px; height:150px; z-index:10; overflow:hidden;}
ul.portfolio li.last { margin-right:0;}
.nivo-caption p {padding:15px;margin:0;}
ul#portfolio-filter{ margin:0; padding: 0 0 10px 0;float: left; }
ul#portfolio-filter li{ display: inline;font-family: 'PT Sans Narrow', sans, serif;  margin:0 5px 0 0; float:left;}
ul#portfolio-filter a{ margin-right:10px; padding:0 0 3px 0;display:block;font-size: 13px; text-align:center; color: #3F4C6B; text-decoration: none; text-transform:uppercase; }
ul#portfolio-filter a:hover { border-bottom:1px #3F4C6B solid;color:#3F4C6B; }
ul#portfolio-filter li a.currents{ border-bottom:1px #3F4C6B solid; color: #3F4C6B;}


/***** Contact Form *****/

#style-form{ margin:0; padding:0; position:relative;}	
.wrapper-block label{ padding:0; display:block;text-align:left; width:70px; float:left; font-size:17px; font-family: 'YanoneKaffeesatzLight'; color:#d01f3c;}
.small-label{ display:block; font-size:11px; font-weight:normal; text-align:left; width:70px; line-height:10px;color:#394c5e;}
.wrapper-block [type="text"]{ font-size:12px; padding:8px 4px; border:solid 1px #d9dce1; width:272px; margin:2px 0 20px 10px;border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.wrapper-block textarea{ padding:8px 4px; border:solid 1px #d9dce1; width:272px; margin:2px 0 20px 10px; font-size:12px; overflow:hidden;border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
input:focus, textarea:focus {-moz-box-shadow:0px 0px 5px #cadce4; -webkit-box-shadow:0px 0px 5px #cadce4; box-shadow:0px 0px 5px #cadce4;}
a.btn-form, input.btn-form{ width:136px; margin:0 0 5px 80px; padding:6px 20px 6px 20px; display:inline-block; font-size:14px; color:#fff; border:1px solid #657089; background:#657089; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; cursor:pointer;font-family: 'QlassikBoldRegular';}
#form .error-input {border-color: #d01f3c;}
.sending{margin:0; padding:3px;font-size:12px; display:none; position:absolute; bottom:30px; right:10px;}
.mess {display: none; padding:40px 0 40px 0;}
.mess h5{ font-weight:400; padding:10px;}

/***** Contact info*****/

ul.contact{ margin:0;}
ul.contact li{ font-size: 17px; margin:0 0 5px 0; padding:0;font-family: 'YanoneKaffeesatzLight'; line-height:19px;}
ul.contact li span{ font-size:17px;}
ul.contact li span a{color:#657089;font-weight: normal;}
ul.contact li a.vcard{ width:200px; height:36px; padding:12px 0 0 70px; margin:0 0 13px 0; background:url(../images/vcard.png) left top no-repeat;}
ul.contact li a.vcard:hover{ background-position:0 -48px;}

/***** Footer *****/

footer{width:830px; height:50px; margin:40px auto 0 auto; padding:10px 0 0 0; background:url(../images/footer-bg.png) top center no-repeat; float:left;}
.copyright{width:500px; height:39px; padding:10px 0 0 0; font-size:13px; line-height:16px;color:#657089; overflow:hidden;}
.tweets{width:500px; height:44px; padding:5px 0 0 50px; background:url(../images/tweets.png) 0 5px no-repeat; font-size:12px; line-height:16px;color:#657089; overflow:hidden;}
.tweets ul li,.tweets p {font-size:12px; line-height:16px;color:#657089;}
.tweets ul li a{font-style:italic; font-weight:bold;font-size:12px;color:#657089;}

/***** Social link*****/

ul.socicon {margin:0;}
ul.socicon li{ display:block; padding:0; margin:0 5px 0 0; float:left;}
ul.socicon li a{ width:32px; height:32px; display:block; padding:0; margin:0;}
ul.socicon li a.dribbble { background:url(../images/social/dribbble.png) 0 0 no-repeat;}
ul.socicon li a.facebook { background:url(../images/social/facebook.png) 0 0 no-repeat;}
ul.socicon li a.twitter { background:url(../images/social/twitter.png) 0 0 no-repeat;}
ul.socicon li a.flickr { background:url(../images/social/flickr.png) 0 0 no-repeat;}
ul.socicon li a.linkedin { background:url(../images/social/linkedin.png) 0 0 no-repeat;}
ul.socicon li a.vimeo{ background:url(../images/social/vimeo.png) 0 0 no-repeat;}
ul.socicon li a.google{ background:url(../images/social/google.png) 0 0 no-repeat;}
ul.socicon li a:hover { background-position:0 -32px;}
ul.socicon li.last{ margin-right:0;}

/***** Tipsy plugin *****/

.tipsy { padding: 5px; background-repeat: no-repeat;opacity: 0.8; filter: alpha(opacity=80);  background-image: url(../images/tipsy.gif);}
.tipsy-inner { padding: 5px; background-color: #3f4c6b; font-size: 13px; color: #f8f8f8; max-width: 170px; text-align: center; line-height:1.3em;}
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px;border-radius: 3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }

/***** 404 Page *****/

.centered_div{ width:368px; height:400px; position:absolute; top:50%; left:50%; margin-left:-184px; margin-top:-200px; }
.error-404{ margin:30px 0 0 0; padding:0; height:95px;font-size:90px; line-height:75px; }
.error{ padding:0 0 30px 0; font-size:200px; line-height:150px; }
.error-link{ padding:0 0 20px 0; font-size:34px; }
.centered_div a:link{ color:#d15600; text-decoration:none; outline:0; }
.centered_div a:visited{ color:#d15600; text-decoration:none; outline:0; }
.centered_div a:active{ color:#d15600; text-decoration:none; outline:0; }
.centered_div a:hover{ color:#d15600; text-decoration:underline; outline:0; }
.centered_div a:focus{ -moz-outline-style:none; }

/***** Blog *****/

section#about a.my_blog{ font-size:14px; padding:5px 10px; position:absolute; top:-15px; right:0px;background:#d46518; z-index:700; color:#f8f8f8;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius: 3px;}
section#about a.my_blog_close{ width:32px; height:64px; position:absolute; top:16px; right:-32px; z-index:999; display:block; background:url(../images/bg-close.png) right top no-repeat; display:none;}
section#about .post_block img{ margin:0 0 10px 0;}
#blog_page{ display:none;}
.col1 { width: 215px; float: left; padding: 10px; margin-right:20px; border:1px #e5e9ea solid;-moz-box-shadow: 0 0 10px #e5e9ea;-webkit-box-shadow: 0 0 10px #e5e9ea;box-shadow: 0 0 10px #e5e9ea;}
.col2 { width: 215px; float: left;  padding: 10px; margin-right:20px; border:1px #e5e9ea solid;-moz-box-shadow: 0 0 10px #e5e9ea;-webkit-box-shadow: 0 0 10px #e5e9ea;box-shadow: 0 0 10px #e5e9ea; }
.col3 { width: 215px; float: left; padding: 10px; border:1px #e5e9ea solid;-moz-box-shadow: 0 0 10px #e5e9ea;-webkit-box-shadow: 0 0 10px #e5e9ea;box-shadow: 0 0 10px #e5e9ea; }
.post_top{ width:215px; margin:0 0 10px 0;}
.post_block .post_top h3{ display:block; font-size:18px; margin:0; width:135px; line-height:18px;}
.post_top ul.date_time li{ float:left;}
ul.date_time li.date{ display:block; background:#e5e9ea; padding:2px 5px; margin:0 2px 0 0; font-size:13px; font-style:italic;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius: 3px;}
#blog_page ul.date_time li.comments a{ display:block; background:#d46518; padding:1px 5px; color: #f8f8f8; font-size:13px;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius: 3px;}
#blog_page ul.date_time li.comments a:hover{ background: #e5e9ea; color:#394c5e;}
.post_content p { margin:0;}
.post_single_top { display:inline-block; width:755px; margin-bottom:5px;}
.post_single_top h3{ float:left; display:block;}
.post_single_top p.postmetadata{ float: right; display:block; color:#D15600; margin:7px 0 0 0;}
section#blog .post_single_top p.postmetadata a {  color:#394c5e;}
.post_single_top p.info_comm{ float: left; display:block;}
.meta-sep { margin:0 15px;}
.next_post,.prev_post { margin:0 0 20px 0;}
.post-comments {clear: both;margin-bottom: 30px; display:inline-block;}
.post-comments img {margin-bottom: 10px;border: 1px solid #d1d1d1;padding: 4px;}
.comments-list {padding-bottom: 30px;}
.comments-list ul {list-style: none;}
.comments-list h3 {text-align: left;margin-bottom: 30px;}
.comment {margin-bottom: 15px;}
.avatar {float: left;margin-right: 20px;border:1px #e5e9ea solid;padding: 5px;-moz-box-shadow: 0 0 10px #e5e9ea;-webkit-box-shadow: 0 0 10px #e5e9ea;box-shadow: 0 0 10px #e5e9ea;}
.comment-text {float: left;width: 658px;background: #ffffff;padding: 15px;border:1px #e5e9ea solid;position: relative;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius: 3px;-moz-box-shadow: 0 0 10px #e5e9ea;-webkit-box-shadow: 0 0 10px #e5e9ea;box-shadow: 0 0 10px #e5e9ea;}
.comment-text p{ margin-top:15px;}
.depth-2, .depth-3, .depth-4,.depth-5 {margin-top: 15px;padding-left: 65px;}
.depth-2 .comment-text {width: 593px; background:#f8f8f8;}
.depth-3 .comment-text {width: 526px;} 
.depth-4 .comment-text {width: 461px;}
.depth-5 .comment-text {width: 396px;} 
.comment-text cite {color: #d46518;font-style:normal;}
#blog .comment-text .comment-reply-link {position: absolute;top: 10px;right: 10px;background:#d46518;text-transform:lowercase;padding:2px 10px;font-size:13px;color:#f8f8f8;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius: 3px;}


/***** Comments Form *****/

.block-form{ width:690px; padding:0 0 0 65px;position:relative; display:inline-block;}
#comments-form {margin: 20px 0 10px 0;}
#comments-form .wrapper-block{ display:inline-block;}
#comments-form .wrapper-block label{ padding:0; display:block;text-align:left; width:70px; float:left; font-size:17px; font-family: 'YanoneKaffeesatzLight'; color:#d46518;}
#comments-form .wrapper-block [type="text"]{ font-size:12px; padding:8px 4px; border:solid 1px #d9dce1; width:272px; margin:2px 0 20px 10px;border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
#comments-form .wrapper-block textarea{ padding:8px 4px; border:solid 1px #d9dce1; width:544px; margin:2px 0 20px 10px; font-size:12px; overflow:hidden;border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
#comments-form .wrapper-block .error-input {border-color: #d46518;}
.sendings{margin:0; padding:3px;font-size:12px;  position:absolute; bottom:10px; left:300px; display:none;}
.sendmess {display: none; padding:40px 0 40px 0;}
.sendmess h5{ font-weight:400; padding:10px;}				
#post-comment{ float:left; width:136px; margin:0 0 5px 80px; padding:6px 20px 6px 20px; display:inline-block; font-size:14px; color:#fff; border:1px solid #657089; background:#657089; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; cursor:pointer;font-family: 'QlassikBoldRegular';}
#post-comment:hover {background: #d46518;}