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

/***** 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%;}
.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; }
ul{overflow:hidden;}
/* 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:18px;}
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; height:60px; margin:0 auto 30px 0;}
header h1{ color:#deba08; font-size:36px; text-shadow:#211a00 2px 2px 0; margin:0;font-family: 'NewBrilliantt';}
header h1 span{ color:#fff;font-family: 'NewBrilliantt';}
header h5{ color:#997b00;margin:0;text-shadow:#211a00 2px 2px 0;font-family: 'QlassikBoldRegular';}
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;}
section#about ,section#resume ,section#portfolio , section#contact{ display:none;}
section#about 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;}

/***** 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-family: 'YanoneKaffeesatzLight'; font-weight:400; font-size:36px; 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';}
.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;font-family: 'YanoneKaffeesatzLight';}
.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;}/*Progress stars - max width 165px */
ul.info li.skills.progress span.p-70{width:135px;}/*Progress stars - plus or minus 15px */
ul.info li.skills.progress span.p-50{width:105px;}
ul.info li.skills.progress span.p-30{width:75px;}

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

ul.portfolio{ width:755px; margin:10px 0 20px 0; padding:0;}
ul.portfolio li{ width:249px; height:150px; margin:0 3px 3px 0; float:left;}
ul.portfolio li a{width:249px; height:150px; padding:0;display:block; position:relative; overflow:hidden;}
ul.portfolio li a span{ width:249px; padding:10px; background: url(../images/tr-png.png); font-size:14px; color:#f8f8f8; position: absolute; bottom:0; left:0; line-height:1.2em;font-family: 'YanoneKaffeesatzLight';}
ul.portfolio li.last { margin-right:0;}


/***** 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;}
.tweets{width:550px; 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 a{color:#657089; font-style:italic; font-weight:bold;}

/***** 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/dribbble.png) 0 0 no-repeat;}
ul.socicon li a.facebook { background:url(../images/facebook.png) 0 0 no-repeat;}
ul.socicon li a.twitter { background:url(../images/twitter.png) 0 0 no-repeat;}
ul.socicon li a.flickr { background:url(../images/flickr.png) 0 0 no-repeat;}
ul.socicon li a.linkedin { background:url(../images/linkedin.png) 0 0 no-repeat;}
ul.socicon li a.vimeo{ background:url(../images/vimeo.png) 0 0 no-repeat;}
ul.socicon li a.google{ background:url(../images/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; }


#bg {
    position: fixed;
    top: 0;
    z-index: -1;
}
#overlay {
    background: url(../images/fondo2.png) repeat scroll 0 0 transparent;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 0;
}
.jspPane .margensup{
	margin-top:15px;
}
.span-18{
	font-size:18px;
}