/*HTML5 ✰ Boilerplate*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}                  
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:''; content:none;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins{background-color:#ff9; color:#000; text-decoration:none;}
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted; cursor:help;}
/* tables still need cellspacing="0" in the markup */
table{border-collapse:collapse; border-spacing:0;}
hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}
input,select{vertical-align:middle;}
/* END RESET CSS */
/* fonts.css from the YUI Library:developer.yahoo.com/yui/
   Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages

  There are three custom edits:
   * remove arial, helvetica from explicit font stack
   * we normalize monospace styles ourselves
   * table font-size is reset in the HTML5 reset above so there is no need to repeat
*/
body{font:13px/1.231 sans-serif; *font-size:small; background:url(/img/bgnoise.gif) 0 0 repeat #f8f8f8;} /* hack retained to preserve specificity */
select, input, textarea, button{font:99% sans-serif;}
/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp{font-family:monospace, sans-serif;}
/* 
 * minimal base styles 
 */
body, select, input, textarea{
  /* #444 looks better than black:twitter.com/H_FJ/statuses/11800719859 */ 
  color:#444; 
  /* set your base font here, to apply evenly */
  font-family:'Open Sans', arial, serif;
  text-shadow:1px 1px 0 #fff;
}
/* Headers (h1,h2,etc) have no default font-size or margin,
   you'll want to define those yourself. */ 
h1,h2,h3,h4,h5,h6{font-weight:normal;}
/* always force a scrollbar in non-IE */ 
html{overflow-y:scroll;}
/* Accessible focus treatment:people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active, a:focus{outline:none;}
a{color:#555;}
a:hover{}
ul, ol{margin-left:1.8em;}
ol{list-style-type:decimal;}
/* Remove margins for navigation lists */
nav ul, nav li{margin:0;} 
small{font-size:85%;}
strong, th{font-weight:bold;}
td, td img{vertical-align:top;} 
sub{vertical-align:sub; font-size:smaller;}
sup{vertical-align:super; font-size:smaller;}
pre{
  padding:15px; 
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space:pre; /* CSS2 */
  white-space:pre-wrap; /* CSS 2.1 */
  white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap:break-word; /* IE */
}
textarea{overflow:auto;} /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend{margin-left:-7px;} /* thnx ivannikolic! */
/* align checkboxes, radios, text inputs with their label
   by:Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"]{vertical-align:text-bottom;}
input[type="checkbox"]{vertical-align:bottom;}
.ie7 input[type="checkbox"]{vertical-align:baseline;}
.ie6 input{vertical-align:text-bottom;}
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button{cursor:pointer;}
/* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea{margin:0;}
/* colors for form validity */
input:valid, textarea:valid{}
input:invalid, textarea:invalid{}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid{background-color:#f0dddd;}
/* These selection declarations have to be separate.
   No text-shadow:twitter.com/miketaylr/status/12228805301 
   Also:hot pink. */
::-moz-selection{text-shadow:none;}
::selection{text-shadow:none;} 
/*  j.mp/webkit-tap-highlight-color */
a:link{-webkit-tap-highlight-color:#ff9102;} 
/* make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button{width:auto; overflow:visible;} 
/* bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img{-ms-interpolation-mode:bicubic;}

/* 
 * Non-semantic helper classes 
 */
/* for image replacement */
.ir{display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; text-align:left; direction:ltr;}
/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden{display:none; visibility:hidden;} 
/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden{position:absolute !important;    
  clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip:rect(1px, 1px, 1px, 1px);}
/* Hide visually and from screenreaders, but maintain layout */
.invisible{visibility:hidden;}
/* >> The Magnificent CLEARFIX:Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after, .clearer:before, .clearer:after{content:"\0020"; display:block; height:0; visibility:hidden;}
.clearfix:after, .clearer:after{clear:both;}
/* Fix clearfix:blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix, .clearer{zoom:1;}
.clearer, .clearer{clear:both;}





 /* Primary Styles ******************************************************************************************************************************************************
    Author:nye.cat
 ************************************************************************************************************************************************************************/

header, section, footer{}

a, a:active, a:visited{-webkit-transition:color 0.2s ease-in-out 0s; -moz-transition:color 0.2s ease-in-out 0s; -o-transition:color 0.2s ease-in-out 0s; transition:color 0.2s ease-in-out 0s;}

blockquote{margin:20px 5px 0 5px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#777; quotes:"\201C" "\201D";}
blockquote:before{content:open-quote; font-weight:bold;}
blockquote:after{content:close-quote; font-weight:bold;}
blockquote .autor{float:right; margin-top:10px; display:block; clear:both;}

.txt{line-height:150%;}
.txt p{margin-bottom:5px;}

p{font-family:Georgia, "Times New Roman", Times, serif;}

.antseg{color:#ccc !important;}
.back, .top, .antseg a{text-decoration:none; color:#999 !important;}
.back{background:url(/img/icons.png) 0 -343px no-repeat; padding-left:15px;}
.back:hover, .top:hover, .antseg a:hover{text-decoration:underline;}

a.rss{background:url(/img/icons.png) 1px -318px no-repeat scroll transparent; padding-left:18px;}

.shadow{-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 0 0 8px rgba(0, 0, 0, 0.06), 0 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow:0 0 0 8px rgba(0, 0, 0, 0.06), 0 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(0, 0, 0, 0.06) inset; box-shadow:0 0 0 8px rgba(0, 0, 0, 0.06), 0 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(0, 0, 0, 0.06) inset; margin-bottom:20px; overflow:hidden;}
.shadow2{-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 0 0 8px rgba(0, 0, 0, 0.06), 0 0 3px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow:0 0 0 8px rgba(0, 0, 0, 0.06), 0 0 3px 0 rgba(0, 0, 0, 0.3); box-shadow:0 0 0 8px rgba(0, 0, 0, 0.06), 0 0 3px 0 rgba(0, 0, 0, 0.3); margin-bottom:20px; overflow:hidden;}
html.no-boxshadow .shadow{border:5px solid #eee;}
html.no-boxshadow .shadow2{border:5px solid #eee;}

/*******************************************************************************************************************
* HEADER
********************************************************************************************************************/
body>header{height:68px; display:block; margin-bottom:25px;}

body>header .fn{display:none;}
body>header #logo{margin:22px 0 0 28px; display:block;}
body>header #logo img{float:left;}

body>header #barra{height:5px;}
body>header aside nav{list-style:none; position:absolute; top:5px; right:22px;}
body>header aside nav li{display:block; float:left; margin-left:8px;}
body>header aside nav li a{height:18px; min-width:58px; padding:0 15px 0 15px; display:block; float:left; text-align:center; color:#fff; text-shadow:none; text-decoration:none; font-size:93%; border-top-style:solid; border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; -webkit-transition:all 0.1s ease-in-out 0.1s; -moz-transition:all 0.1s ease-in-out 0.1s; -o-transition:all 0.1s ease-in-out 0.1s; transition:all 0.1s ease-in-out 0.1s;}
body>header aside nav li a:hover{border-top-width:7px; color:#fff;}
body>header aside nav li a.actual{border-top-width:7px; color:#fff;}

body>header .globus{background:url(../img/tooltips.png) -185px 0 no-repeat; width:330px; height:98px; position:absolute; top:17px; left:85px; padding:11px 0 0 27px; line-height:18px; z-index:9999;}
body>header .globus .esq{float:left; width:155px;}
body>header .globus .dre{float:left; margin-left:20px;}
body>header .globus .tel{margin:2px 0 13px 0;}
body>header .globus .vcard-download a{margin:15px 0 0 0; padding:0 1px 0 35px; height:20px; display:block; background:url(/img/icons.png) 0 1px no-repeat; font-family:'Open Sans', arial, serif;}
body>header .globus h3{font-weight:bold;}
body>header .globus span{color:#999;}


section{padding:0 2px 0 22px; margin-bottom:45px;}

section>header{margin:0 10px 20px 7px;}
section>header h1{font-size:153.9% !important; margin:0 0 3px 0; text-shadow:1px 1px 0 #fff;}
section>header p{font-size:108%; line-height:19px; color:#666; margin:0 0 15px 0; text-shadow:1px 1px 0 #fff;}
section>header .lema-1:hover{color:#ff9102; -webkit-transition:color 0.2s ease-in-out 0s; -moz-transition:color 0.2s ease-in-out 0s; -o-transition:color 0.2s ease-in-out 0s; transition:color 0.2s ease-in-out 0s;}
section>header .lema-2:hover{color:#52a3e9; -webkit-transition:color 0.2s ease-in-out 0s; -moz-transition:color 0.2s ease-in-out 0s; -o-transition:color 0.2s ease-in-out 0s; transition:color 0.2s ease-in-out 0s;}
section>header .lema-3:hover{color:#96b314; -webkit-transition:color 0.2s ease-in-out 0s; -moz-transition:color 0.2s ease-in-out 0s; -o-transition:color 0.2s ease-in-out 0s; transition:color 0.2s ease-in-out 0s;}

section .back{float:right; margin:-45px 22px 20px 0;}

/*******************************************************************************************************************
* PORTFOLIO
********************************************************************************************************************/
section#portfolio article{background:url(../img/box.png) 0 0 no-repeat; width:373px; height:254px; display:block; float:left; margin:0 20px 16px 0; cursor:pointer; position:relative;}
section#portfolio article h2{margin:15px 0 0 13px; font-family:'Cabin', 'Open Sans', arial, serif; font-weight:bold; font-size:197%; color:#888888;}
section#portfolio article a{margin:0 0 0 14px; text-decoration:none;}
section#portfolio article .img{width:341px; height:167px; margin:8px 0 0 14px; display:block; position:absolute;}
section#portfolio article .img img{position:absolute; float:left; top:0; left:0;}

section#portfolio article .wip{width:auto; height:35px; position:absolute; bottom:12px; right:-5px; z-index:999;}
section#portfolio article .wip .w-left{background-repeat:no-repeat; background-position:0 -418px; width:25px; height:33px; position:absolute; top:0; left:0;}
section#portfolio article .wip .w-right{background-repeat:no-repeat; background-position:0 -278px; width:25px; height:33px; position:absolute; top:0; right:0;}
section#portfolio article .wip .w-cont{background-repeat:repeat-x; background-position:0 -348px; float:left; margin:0 25px 0 25px; padding:0 2px 2px 10px; line-height:28px; color:#fff; text-shadow:1px 1px 0 #666; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}

section#portfolio article .tags{width:auto; height:35px; position:absolute; bottom:12px; right:-5px; z-index:999; -moz-opacity:0; opacity:0;}
html.no-opacity section#portfolio article .tags{display:none;}
section#portfolio article .tags .r-left{background-repeat:no-repeat; background-position:0 -208px; width:25px; height:33px; position:absolute; top:0; left:0;}
section#portfolio article .tags .r-right{background-repeat:no-repeat; background-position:0 -68px; width:25px; height:33px; position:absolute; top:0; right:0;}
section#portfolio article .tags .r-cont{background-repeat:repeat-x; background-position:0 -138px; float:left; margin:0 25px 0 25px; padding:0 2px 2px 10px; line-height:28px; color:#fff; text-shadow:1px 1px 0 #666; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}

section#project article div.col{width:250px; display:block; float:left; margin:12px 0 30px 0;}
section#project article div.col h2{font-family:'Cabin', 'Open Sans', arial, serif; font-size:197%; font-weight:bold; color:#8e8e8e;}
section#project article div.col a{margin:0; text-decoration:none;}
section#project article div.col a:hover{text-decoration:underline;}
section#project article div.col .tags{color:#999; margin:6px 0 6px 0;}
section#project article div.col .txt{margin:15px 0 15px 0;}
section#project article div.col .colabora{color:#999; font-size:93%; margin:13px 0 13px 0;}
section#project article div.col .colabora a{color:#999; text-decoration:underline;}
section#project article div.col nav{display:block; margin:40px 0 20px 0;}
section#project article div.col nav .antseg{float:left;}
section#project article .back{margin-top:0;}

section#project article ul{list-style:none; margin:0 20px 0 0; float:left; display:block;}
section#project article ul li{margin-bottom:10px;}

/*******************************************************************************************************************
* PORTFOLIO
********************************************************************************************************************/
section#portfolio ul{display:block; margin:20px 0 30px 0;}
section#portfolio li{list-style:none; float:left;}
section#portfolio li a{margin:0 10px 10px 0; display:block; height:160px;}
section#portfolio li a img{float:left;}
section#portfolio h1{font-size:197%; margin:20px 0 0 0;}

/*******************************************************************************************************************
* LIFESTREAM
********************************************************************************************************************/
section#lifestream article{min-height:300px; float:left; display:block; margin:20px 25px 20px 0; font-family:Georgia, "Times New Roman", Times, serif;}
section#lifestream article h2 a{height:27px; display:block; text-indent:-99999px;}
section#lifestream article h2 a.tweets{background:url(/img/lifestream.png) 50% -27px no-repeat;}
section#lifestream article:hover h2 a.tweets{background-position:50% 0;}
section#lifestream article h2 a.fotos{background:url(/img/lifestream.png) 50% -90px no-repeat;}
section#lifestream article:hover h2 a.fotos{background-position:50% -63px;}
section#lifestream article h2 a.preferits{background:url(/img/lifestream.png) 50% -153px no-repeat;}
section#lifestream article:hover h2 a.preferits{background-position:50% -126px;}
section#lifestream article h2 a.musica{background:url(/img/lifestream.png) 50% -217px no-repeat;}
section#lifestream article:hover h2 a.musica{background-position:50% -190px;}

section#lifestream article#tweets{width:188px;}
section#lifestream article#fotos{width:238px;}
section#lifestream article#preferits{width:190px;}
section#lifestream article#musica{width:188px;}

section#lifestream article ol{list-style:none; margin:20px 0 0 -2px; padding:0;}
section#lifestream article ol li{background:#fff;}
section#lifestream article#tweets ol li{padding:10px;}
section#lifestream article#fotos ol li{width:auto; margin-left:auto; margin-right:auto;}
section#lifestream article ol li a{text-decoration:none; padding:10px; display:block;}
section#lifestream article ol li a img{float:left;}
section#lifestream article#tweets ol li a, section#lifestream article#fotos ol li a{padding:0;}
section#lifestream article ol li a:hover{text-decoration:underline;}
section#lifestream article ol li a.data{font-size:77%;}
section#lifestream article ol li.loader{width:100%; height:50px; background:url(/img/loading.gif) 50% 50% no-repeat; margin-top:-15px;}


/*******************************************************************************************************************
* INSPIRACIÓ
********************************************************************************************************************/
section#inspiration{padding-bottom:100px;}
section#inspiration .loader{width:100%; height:50px; background:url(/img/loading.gif) 0 0 no-repeat; margin:20px 0 20px 10px;}
section#inspiration .loader2{display:block; width:30px; height:50px; background:url(/img/loading.gif) 0 0 no-repeat; margin:20px 0 20px 10px; position:fixed; bottom:30px; left:50%; margin-left:-15px; z-index:999;}
section#inspiration .article{background:#fff; display:block; float:left; margin:10px; width:250px; min-height:15px;}
section#inspiration .article .txt{padding:10px; overflow:visible;}
section#inspiration .article a{vertical-align:baseline; font-family:Georgia, "Times New Roman", Times, serif;}
section#inspiration .article .img-holder{display:block; position:relative; float:left;}
section#inspiration .article .img-holder a img{display:block; vertical-align:baseline;}
section#inspiration .article .ombra{position:absolute; bottom:-12px; left:0; width:100%; height:12px;}

section#inspiration .article.link{padding:10px 10px 10px 35px; width:205px; background:url(/img/icons.png) 9px -431px no-repeat #fff;}
section#inspiration .article.link .txt{padding:10px 0 0 0; margin-left:-20px;}
section#inspiration .article.link .txt img{max-width:220px;}

section#inspiration a.vols-mes{color:#fff; display:block; width:230px; padding:10px; text-align:center; margin:60px auto 20px auto; text-shadow:none; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

.isotope, .isotope .isotope-item{
  /* change duration value to whatever you like */
  -webkit-transition-duration:0.8s;
     -moz-transition-duration:0.8s;
          transition-duration:0.8s;
}

.isotope{
  -webkit-transition-property:height, width;
     -moz-transition-property:height, width;
          transition-property:height, width;
}

.isotope .isotope-item{
  -webkit-transition-property:-webkit-transform, opacity;
     -moz-transition-property: -moz-transform, opacity;
          transition-property:      transform, opacity;
}

/*******************************************************************************************************************
* ON TROBAR-ME
********************************************************************************************************************/
section#findme{padding-bottom:100px; max-width:1000px;}
section#findme article{background:#fff; margin:10px; display:table;}
section#findme article a{padding:10px 25px 10px 25px; display:block; text-decoration:none; text-align:center;}
section#findme article a span{display:block; margin-top:7px;}

section#findme article a.twitter:hover{color:#52A3E9;}
section#findme article a.facebook:hover{color:#3B5998;}
section#findme article a.flickr:hover{color:#ff2f96;}
section#findme article a.delicious:hover{color:#3274D0;}
section#findme article a.spotify:hover{color:#4DA400;}
section#findme article a.blog:hover{color:#ff9102;}
section#findme article a.linkedin:hover{color:#006699;}
section#findme article a.github:hover{color:#000;}
section#findme article a.vimeo:hover{color:#2786C2;}
section#findme article a.tumblr:hover{color:#2C4762;}
section#findme article a.skype:hover{color:#00AFF0;}

section#findme article a.google em{font-style:normal;}
section#findme article a.google:hover em.g{color:#5991ed; font-style:normal;}
section#findme article a.google:hover em.o{color:#f74345;}
section#findme article a.google:hover em.oo{color:#ffc412;}
section#findme article a.google:hover em.gg{color:#5991ed;}
section#findme article a.google:hover em.l{color:#00ae19;}
section#findme article a.google:hover em.e{color:#f74345;}
section#findme article a.google:hover em.plus{color:#000;}


/*******************************************************************************************************************
* CONTACTE
********************************************************************************************************************/
section#contact{padding-bottom:100px; max-width:1000px;}
section#contact .back{margin-top:0;}
section#contact h1{font-size:167%; margin:20px 0 0 0;}
section#contact h2{font-size:138.5%; margin:15px 0 10px 0;}
section#contact p{margin:10px 0 10px 0; line-height:20px;}
section#contact .url{background:url(/img/icons.png) 0 -101px no-repeat; padding:2px 2px 2px 20px; line-height:22px; width:18px; height:18px;}
section#contact .email{background:url(/img/icons.png) 0 -184px no-repeat; padding:2px 2px 2px 20px; line-height:22px;}
section#contact .tel{background:url(/img/icons.png) 0 -226px no-repeat; padding:2px 2px 2px 20px; line-height:22px;}
section#contact .tel span{color:#999;}
section#contact .x-twitter{background:url(/img/icons.png) 0 -139px no-repeat; padding:2px 2px 2px 20px; line-height:22px;}
section#contact .x-skype{background:url(/img/icons.png) 0 -117px no-repeat; padding:2px 2px 2px 20px; line-height:22px; display:block;}
section#contact .vcard-download{padding:0 1px 3px 35px; height:20px; background:url(/img/icons.png) 0 0 no-repeat;}
section#contact .box{width:270px; float:left; margin:0 50px 30px 0;}
section#contact .vcard{width:400px;}

section#contact form{width:266px;}
section#contact form legend{margin:0 0 20px 0; padding:10px 0 0 0; width:266px;}
section#contact form #response{line-height:22px; color:#fe5851; margin-top:8px; font-weight:normal; font-style:normal;}
section#contact form #human{display: none; visibility: hidden;}
input, input:focus, textarea, textarea:focus{padding:7px; margin:7px 0 7px 0; border:solid 1px #E5E5E5; outline:0; font:normal 13px/100% Georgia, "Times New Roman", Times, serif; width:250px; background:#FFFFFF left top repeat-x; box-shadow:rgba(0,0,0, 0.1) 0px 0px 4px; -moz-box-shadow:rgba(0,0,0, 0.1) 0px 0px 4px; -webkit-box-shadow:rgba(0,0,0, 0.1) 0px 0px 4px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;}
textarea{width:250px; min-width:250px; max-width:250px; height:110px; min-height:50px; max-height:240px; line-height:150%; font-family:Georgia, "Times New Roman", Times, serif;}
input:hover, textarea:hover, input:focus, textarea:focus{border-color:#C9C9C9; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 0px 8px;}
input.submit{width:auto; padding:7px 11px; background:#a5a19c; border:0; font-size:12px; color:#fff; font-weight:bold; text-shadow:none; -moz-border-radius:5px; -webkit-border-radius:5px; float:right; font-family:'Open Sans', arial, serif;}
input::-moz-focus-inner{border:0;}
input.submit:hover{background:#8e8a85;}
input.submit.ok{background:#96b314;}
input.submit.error{background:#fe5851;}
section#contact form .placeholder, ::-webkit-input-placeholder{color:#AAA;}
section#contact form #nom, section#contact form #nom:focus{background:url(/img/icons.png) 8px -264px no-repeat #fff; padding-left:30px; width:227px;}
section#contact form #mai, section#contact form #mai:focus{background:url(/img/icons.png) 8px -179px no-repeat #fff; padding-left:30px; width:227px;}
section#contact form #tel, section#contact form #tel:focus{background:url(/img/icons.png) 8px -221px no-repeat #fff; padding-left:30px; width:227px;}


/*******************************************************************************************************************
* AVÍS LEGAL
********************************************************************************************************************/
section#legal{padding-bottom:100px; max-width:1000px;}
section#legal h1{font-size:167%; margin:20px 0 0 0;}
section#legal h2{font-size:138.5%; margin:15px 0 10px 0;}
section#legal p{margin:10px 0 10px 0; line-height:130%;}


/*******************************************************************************************************************
* CONDICIONS
********************************************************************************************************************/
section#conditions{padding-bottom:100px; max-width:1000px;}
section#conditions h1{font-size:167%; margin:20px 0 0 0;}
section#conditions h2{font-size:138.5%; margin:15px 0 10px 0;}
section#conditions .version{font-size:12px !important; color:#BBB;}
section#conditions p{margin:10px 0 10px 0; line-height:130%;}
section#conditions .nota{margin:80px 0 20px; font-size:85%;}


/*******************************************************************************************************************
* NOT FOUND
********************************************************************************************************************/
section#not_found h1{font-size:289%; margin:20px 0 0 0;}
section#not_found h2{font-size:197%; margin:10px 0 10px 0;}


/*******************************************************************************************************************
* FOOTER
********************************************************************************************************************/

footer{position:fixed; _position:relative; z-index:9999; top:auto; bottom:0; left:0; right:0; background:url(/img/footer-fons.png) 0 0  repeat-x #fff; padding:10px 0 7px 0;}
footer p{font-family:'Open Sans', arial, serif; line-height:20px; float:right; margin-right:22px;}
footer a{color:#555; text-decoration:underline;}
footer span{color:#999;}
footer .sep{margin:0 4px 0 4px;}
footer ul{list-style:none;}
footer ul li{float:left; margin-right:15px;}
footer iframe{width:20px !important; height:22px !important; margin-right:-20px !important; opacity:0; filter:alpha(opacity=0); display:block; float:left; overflow:hidden; z-index:1;}

.Uu .KF{-webkit-transition:all 0.2s ease-in-out 0s; -moz-transition:all 0.2s ease-in-out 0s; -o-transition:all 0.2s ease-in-out 0s; transition:all 0.2s ease-in-out 0s;}
.Uu a.KF:active{background:#444 !important; opacity:1; filter:alpha(opacity=1);}
.Uu a.KF:hover{background:#444 !important; opacity:1; filter:alpha(opacity=1);}

#langs{background:url(../img/tooltips.png) 0 -37px no-repeat; width:185px; height:54px; position:fixed; right:13px; bottom:30px; z-index:9999;}
#langs ul{list-style:none; margin:12px 0 0 12px;}
#langs ul li{display:block; float:left; margin:0 3px 0 3px;}
#langs ul li a{display:block; float:left;}
#langs ul li a.actual{text-decoration:none;}

/************************************************************************************************************************************************************************/
 
/*
 * Media queries for responsive design
 * These follow after primary styles so they will successfully override. 
 */

@media all and (orientation:portrait){
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape){
  /* Style adjustments for landscape mode goes here */
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this:www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width:480px){
  
  body>header #logo{margin:20px 0 0 20px;}
  
  body>header aside nav{left:20px; top:65px;}
  body>header aside nav ul{margin:0;}
  body>header aside nav li{float:none; border-bottom:1px solid; margin:0;}
  body>header aside nav li:last-child{border-bottom:none;}
  body>header aside nav li:first-child a{border-radius:7px 7px 0 0; -moz-border-radius:7px 7px 0 0; -webkit-border-radius:7px 7px 0 0;}
  body>header aside nav li:last-child a{border-radius:0 0 7px 7px; -moz-border-radius:0 0 7px 7px; -webkit-border-radius:0 0 7px 7px;}
  body>header aside nav li a{float:none; text-align:left; padding:5px 15px; border-top:none; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}
  body>header aside nav li a:hover{border-top-width:0;}
  body>header aside nav li a.actual{border-top-width:0;}
  
  section{margin-top:140px;}
  section>header{margin-left:0;}
  
  section#portfolio article{width:92%; background:#fff; border:1px solid rgba(0,0,0, 0.1);  box-shadow:rgba(0,0,0, 0.1) 4px 4px 4px; -moz-box-shadow:rgba(0,0,0, 0.1) 4px 4px 4px; -webkit-box-shadow:rgba(0,0,0, 0.1) 4px 4px 4px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;}
  section#portfolio article .img{width:90%;}
  section#portfolio article .img img{width:100%;}
  section#portfolio article .wip{right:-11px;}

  section#project article .gal li img{width:100%;}
  section#project article div.col{width:92%;}
  
  section#lifestream article#tweets{width:92%;}
  section#lifestream article#fotos{width:92%;}
  section#lifestream article#preferits{width:92%;}
  section#lifestream article#musica{width:92%;}
  
  section#inspiration a.vols-mes{width:92%; margin:60px 0 20px 0; padding-left:3px; padding-right:2px;}
  
  section#contact .url{background-position:0 -96px;}
  section#contact .email{background-position:0 -180px;}
  section#contact .x-skype{background-position:0 -112px;}
  
  footer{position:static; height:100px; text-align:center;}
  footer ul{clear:both;}
  footer p{margin-top:40px; float:none; margin-right:0;}
  footer .lbm, footer .lbm2, footer .alang{display:none;} 
  
  #langs{display:block !important; position:static; text-align:center; background:none; bottom:0; right:0; left:0; width:100%; margin:-25px 0 0 0;}
  #langs ul{margin:0 0 0 9px;}
  #langs ul li{float:none; display:inline;}
  #langs ul li a{float:none; display:inline;}
  
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust 
  html{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} */
}

@media screen and (max-device-width:854px) and (orientation:landscape){
  body>header #logo{margin:40px 0 0 28px;}
  
  section{margin-top:20px;}
  
  section#project article .gal li img{width:100%;}
  section#project article div.col{width:92%;}
  
  footer{position:static; height:100px; text-align:center;}
  footer p{float:none; display:block !important; clear:both; text-align:center; background:none; width:100%; padding-top:15px;}
  footer .lbm, footer .lbm2, footer .alang{display:none;} 
  
  #langs{display:block !important; position:static; text-align:center; background:none; bottom:0; right:0; left:0; width:100%; margin:-15px 0 0 0;}
  #langs ul{margin:0 0 0 9px;}
  #langs ul li{float:none; display:inline;}
  #langs ul li a{float:none; display:inline;}
}

@media screen{
  div#preloader{
    position:absolute;
		left:-9999px;
		top:-9999px;
  }
	
  div#preloader img{
    display:block;
  }
}

/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print{
  *{background:transparent !important; color:#444 !important; text-shadow:none !important;}
  a, a:visited{color:#444 !important; text-decoration:underline;}
  a:after{content:" (" attr(href) ")";} 
  abbr:after{content:" (" attr(title) ")";}
  .ir a:after{content:"";}  /* Don't show links for images */
  pre, blockquote{border:1px solid #999; page-break-inside:avoid;}
  thead{display:table-header-group;} /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img{page-break-inside:avoid;}
  @page{margin:0.5cm;}
  p, h2, h3{orphans:3; widows:3;}
  h2, h3{page-break-after:avoid;}
  img{max-width:100% !important;}
  
  div#preloader, div#preloader img{visibility:hidden; display:none;}
}