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

/*@FONT-FACE*/
@font-face {
    font-family: GraublauWeb;
    src: url(GraublauWeb.otf) format(truetype);}
@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url(GraublauWebBold.otf) format(truetype);}
    
/*GRILLA*/
body{margin:0; padding:0; text-align:center}

.grid_0{width:960px; margin:0 auto; text-align:left; overflow:hidden}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12
{float: left; margin-left:10px; margin-right:10px}

.grid_1 {width:60px}
.grid_2 {width:140px}
.grid_3 {width:220px}
.grid_4 {width:300px}
.grid_5 {width:380px}
.grid_6 {width:460px}
.grid_7 {width:540px}
.grid_8 {width:620px}
.grid_9 {width:700px}
.grid_10 {width:780px}
.grid_11 {width:860px}
.grid_12 {width:940px}

/*ENLACES*/
a{outline:none; -webkit-transition:color .25s linear}
a img, header img{border:none}

p a, li a{text-decoration:none; color:#F84E95; font-weight:bold}
p a:hover, li a:hover{color:#fff; border-bottom:2px solid #F84E95}

h2 a{text-decoration:none; color:#fff}
h2 a:hover, .item:hover h2 a{color:#F84E95}

/*FOOTER*/
.end{margin-top:80px}
.end img{width:100%}

/*FORMULARIO*/
#form ol, #form li{list-style-type:none; margin-left:0; padding-left:0}
#form li{padding-bottom:10px}
#form label{display:block; font-weight:bold}
input[type=text], textarea{width:630px; padding:5px; border:2px solid #423F46}
input:focus{border-color:#CFD0D4}
#btnSubmit{text-transform:uppercase; font-size:1.2em; padding:5px 10px; background:#F84E95; color:#1d1c20; border-radius:5px; border-color:#B98BBA; outline:none; font-weight:bold}
#btnSubmit:hover{cursor:pointer}

/*GENERALES*/
.recuadro{background:rgba(0,0,0,.25); padding:20px}

/*HEADER*/
header img{float:left}

nav ul{margin:0; padding:30px 0 0 0}
nav li{display:inline}
nav a{display:block; margin:0 10px; float:right; font-size:1.5em}

/*HTML5*/
header, footer{display:block}

/*HELLO*/
#hello{margin-top:40px; margin-bottom:40px; padding-bottom:20px; background:url(linea.png) repeat-x left bottom}
#hello .grid_3{font-size:6em; color:#423F46; font-weight:bold; padding-top:5px; letter-spacing:-2px; text-shadow:0 -1px 1px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2)}
#hello p{font-size:1.8em; letter-spacing:normal}

/*LISTADO*/
.item{margin-bottom:40px; background:url(linea.png) repeat-x left bottom; padding-bottom:40px}
.item img{margin-bottom:10px; border:1px solid #000; padding:4px; background-color:#1d1c20; -webkit-transition:background-color .25s linear}
.item:hover{cursor:pointer}
.item:hover img{background-color:#F84E95; -webkit-box-shadow: rgba(0,0,0,0.5) 0 5px 5px}

/*MEDIA*/
.image{background:url(linea.png) repeat-x left bottom; padding-bottom:20px; margin-bottom:20px}
.media .image:last-child, .stats .image{background:url(none); padding-bottom:0; margin-bottom:0}

/*PORTFOLIO*/
body{background:#28272C url(body-bg.png); color:#CFD0D4}
.back{margin-top:40px}
.project{margin-top:60px}
.stats{clear:both; margin-top:40px} 

/*TEXTO*/
body, input, textarea{font:62.5% Arial, Helvetica, sans-serif}

h1, h2, #hello, #hello-wide, #btnSubmit, .texto .type, nav{font-family:GraublauWeb, Arial, Helvetica, sans-serif}

p, label, input, textarea{font-size:1.4em; line-height:1.5; letter-spacing:.05em}

h1{margin:0 0 5px 0; font-size:3.2em; color:#fff; line-height:1; text-shadow:0 -1px 1px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2)}
h2{margin:0; font-size:1.6em; font-weight:normal}

.intro{font-size:1.8em}
.es{color:#6b6b6f}
.date{font-size:1em}
.type, .tag{margin:0}
.project .type, .tag{font-size:1.8em; text-transform:uppercase; background:url(linea.png) repeat-x left bottom; padding-bottom:20px; margin-bottom:20px}

/*SLIDER*/
#gallery-count{display:none}
#gallery-navigation{position:relative}
#next-image:hover, #previous-image:hover, #next-image img, #previous-image img{border:none}
#previous-image{position:absolute; left:0; top:200px; width:31px; height:63px; z-index:99}
#next-image{position:absolute; left:589px; top:200px; width:31px; height:63px; z-index:98}

/*JAVASCRIPT*/
div#image-wrapper {overflow: hidden; width: 620px; }
div#image-wrapper div#image-holder {width: 100000000px; }
div#image-wrapper div#image-holder div.image { float: left; width: 620px; }

body.js-enabled .image { display: none}
body.js-enabled div#media div.image:first-child { display: block}