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

* {margin:0px;padding:0px;}

body {background:#f3f2ee; text-align:left; color:#848484; font-size:18px;  height:100%; width:100%;  -webkit-font-smoothing: antialiased; font-family: 'FFDIN-Light'}

html{ height:100%}

ul li {margin:0px;padding:0px;}


@font-face {
  font-family: 'FFDIN-Light';
  src: url('../fonts/FFDIN-Light.eot?#iefix') format('embedded-opentype'),  url('../fonts/FFDIN-Light.woff') format('woff'), url('../fonts/FFDIN-Light.ttf')  format('truetype'), url('../fonts/FFDIN-Light.svg#FFDIN-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; list-style:none }
article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: block; }

.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }

/*Styles*/
h1 { font-size:35px; margin:0 0 23px 0}
h3 { font-size:19px; margin:10px 0; padding:0px; color:#848484; font-weight:lighter}

a {text-decoration:none; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; opacity:1; color:#848484}
a:hover { opacity:0.4}

#home a.home { font-weight:bold}
#obras a.obras { font-weight:bold}
#biografia a.biografia { font-weight:bold}
#contacto a.contacto { font-weight:bold}

.container { position:relative; width:100%;  float:left; }
.contenido { width:100%; max-width:1000px; margin:0 auto; position:relative}

.header { width:180px; text-align:left;	position: relative; float:left;	opacity: 1;	z-index: 97; box-sizing: border-box; margin:40px 0 10px 0}
.header .nav { float:left; position:relative; width:170px;}
.header .nav li { position:relative;  font-size:18px; float:left; clear:both }
.header .nav li a{padding:6px 0;  position:relative; float:left  }

.headerMobile { display:none}

.headerMobile { width:100%; text-align:left;	position: relative; float:left;	opacity: 1;	z-index: 9999; box-sizing: border-box; padding:0px 0 10px 20px; height:65px}
.headerMobile .nav { float:left; position:relative; width:400px; margin:0 0 0 -400px; z-index:20; height:65px; padding-top:10px; box-sizing:border-box;}
.headerMobile .nav li { position:relative;  font-size:18px; float:left; margin:6px 20px 0 0 }
.headerMobile .nav li a{padding:6px 0;  position:relative; float:left  }

.logoMobile { position:absolute; right:20px; top:5px}
.logoMobile img{ width:100px}

.headerMobile  span { background:url(../images/menu.png) no-repeat; width:31px; height:25px; cursor:pointer; text-indent:-9999px; display:block; position:absolute; left:20px; top:20px; z-indent:9999;-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; z-index:1}
.headerMobile  span:hover { opacity:0.4}
.headerMobile  a.btn-close{ background:url(../images/menu-close.png) no-repeat; width:31px; height:25px; cursor:pointer; text-indent:-9999px; display:block; position:absolute !important; right:40px; top:22px }

.imgPrincMobile { display:none}

.derecha { width:100%; max-width:820px; position:relative; float:left; padding:0 0 0 20px; box-sizing:border-box}
#biografia .derecha { padding:200px 0 0 140px; line-height:25px}
#contacto .derecha { padding:200px 0 0 140px;}

.obras { width:100%; position:relative; float:left}
.obras li { width:100%; margin-bottom:50px; text-align:right; font-size:14px; position:relative; float:left}
.obras li img{ height:550px; margin-bottom:10px; clear:both}
.obras li span{ float:right; clear:both}
.obras li span a{ width:38px; height:37px; margin-left:6px; float:left}

.obrasHome li { width:100%; margin-bottom:50px; text-align:right; font-size:14px}
.obrasHome li img{ width:100%; margin-bottom:10px;}
.obrasHome li span{ float:right}
.obrasHome li span a{ width:38px; height:37px; margin-left:6px; float:left}
a.facebook { background:url(../images/facebook.jpg);}
a.instagram { background:url(../images/instagram.jpg)}
a.pinterest { background:url(../images/pinterest.jpg)}
a.twitter { background:url(../images/twitter.jpg)}
a.google { background:url(../images/google.jpg)}


.caja { width:100%; float:left; position:relative}


.contacto input[type='submit']{ width:190px; height:40px; display:block; margin:10px 0 0 0px; cursor:pointer; float:left; position:relative; color:#fff; background:#86888a;  font-size:23px; text-align:center;  -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; border:none;font-family: 'FFDIN-Light';}
.contacto input[type='submit']:hover{ background:#5e5f5f; }

.error{ position: absolute; left:10px; top:30px; text-align:left; font-size:14px; color:#373737;}

.formulario { position:relative; float:left; width:295px; margin-bottom:30px}
.formulario p { position:relative; float:left; width:100%; clear:both;}

.form-div { position:relative; float:left; width:100%; margin-bottom:10px; }
.form-div input {  width:100%;  height:30px; border:none; padding-left:10px; color:#396e5c; font-size:16px; background:#FFF; font-family: 'FFDIN-Light'; outline:none}
.form-div textarea {  width:100%;  height:125px;  border:none; color:#396e5c; font-size:14px; background:#FFF; font-family: 'FFDIN-Light'; padding:10px 0 0 10px; resize:none; outline:none}

label { float:left; font-size:18px;font-family: 'FFDIN-Light'; text-align:left; width:100%;  padding-bottom:3px; color:#9a9d9d}

.datacontacto { position:relative; float:left; width:170px; margin-left:60px; font-size:14px}

/* RESPONSIVE */
@media only screen and (min-width: 200px) and (max-width: 700px) {
.header { display:none}
.headerMobile { display:block}

.derecha { padding:0px;}
#biografia .derecha { padding:50px 20px 0 20px; line-height:25px}
#contacto .derecha { padding:50px 20px 0 20px; box-sizing:border-box}

.imgPrincMobile{ display:block}
.imgPrinc { display:none}

.obrasHome li {  margin-bottom:20px; font-size:12px}
.obrasHome strong { clear:both; font-size:14px !important; position:relative; width:100%; text-align:right; float:left}
.obras li { width:100%; font-size:12px;}
.obras strong { clear:both; font-size:14px !important; position:relative; width:100%; text-align:right; float:left}
.obras li img{ height:auto; width:100%; margin-bottom:10px; clear:both}

.formulario {width:100%; margin-bottom:30px; box-sizing:border-box}
	
}
@media only screen and (min-width: 200px) and (max-width: 530px) {

.obras li { font-size:12px; }
.datacontacto {  width:100%; margin-left:0px;}

.headerMobile .nav {background:#f3f2ee; width:300px}
.headerMobile .nav li { position:relative;  font-size:14px; float:left; margin:6px 10px 0 0 }
.headerMobile  a.btn-close{ right:40px; top:18px }

}