/*Fuente especifica para el texto*/
@font-face {
  font-family: 'Bank Gothic Light BT';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/BGLBT.eot');
    src: url('../fonts/BGLBT.eot?#iefix') format('embedded-opentype'),
       url('../fonts/BGLBT.woff');
}
/*Estilos estructura de la web*/
body {
	margin: 0 auto;
	padding: 20px;
	overflow:hidden;
	background: rgb(36,36,36);
	color: rgb(210,210,210);
	font-family: 'Bank Gothic Light BT', sans-serif;
	text-align: justify;
}
img{image-rendering: optimizequality;}
a{
	color: rgb(210,210,210);
}
/*Área derecha (texto)*/
section{
	top: 0px;
	right: 0px;
	border: none;
	margin: 0px;
	margin-right:1%;
	width: 48%;
	float: right;
	position: fixed;
	z-index: 100;
	height: 95%;
	min-height: 300px;
	overflow:auto;
	border-bottom-right-radius: 3px;
}
section article{padding:120px 30px 15px;}
section article p, section article ul {font-size: 1.1em;}
section article p .area{font-size: 1.2em;}
/*Área izquierda (imagenes)*/
aside{
	position: relative;
	width:60%;
	float:right;
	border:none;
	margin:0px;
	margin-left:20px;
	top:0px;
	left:0px;
	position:fixed;
	height:95%;
	min-height: 300px;
	border-bottom-left-radius: 30px;
	overflow: hidden;
	max-height:650px;
}
/*Cada una de las imagenes de los direferentes trabajos*/
#slide_estudio img, #slide_obras img, aside > img{
	margin: 120px 12px 0px;
	border: medium none;
	border-radius: 0px 30px;
	width: 80%;
}
#slide_estudio, #slide_obras, #controlesnav{
	display:none;
	width: 95% !important;
}
/*Botones avance y retroceso de imagen*/
#prev2,#next2{
	position: absolute;
	top: 45%;
	font-size: 65px;
	color: white;
	z-index: 100;
	text-decoration: none;
}
#prev2 img,#next2 img{
	background: rgb(209, 210, 211);
	opacity: 0.4;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	padding: 7px;
}
#prev2 img:hover,#next2 img:hover{
	opacity: 1;
}
#prev2{
	left:5%;
}
#next2{
	right: 20%;
}


/*cabecera de la web (logo y menu)*/
header{
	position: absolute;
	width: 97%;
	top: 0px;
	z-index: 200;
	background: #242424;
	border: solid #242424;
}
header #logo{
	position:absolute;
	z-index:200;
	background: rgb(36, 36, 36);
	height:100px;
	width: 160px;
	overflow: hidden;
}
header #logo h1 span{
	display: block;
	border:0px;
}
header #logo h1 span img{
	height: 78px;
	border:none;
}
header nav{
    width: 100%;
    background:  rgb(153,153,153);
    border-top-right-radius: 30px;
    border-top-left-radius: 3px;
}
/*pie de la web (reconocimiento)*/
footer{
	position: absolute;
	width: 96%;
	bottom: 0px;
	background: transparent;
}
footer img{
	float:right;
	width: 15%;
	max-width:150px;
	border:none;
}

/**********************************************/
/*menu*/
/*Reinicio valores del menu*/
nav ul,nav ul ul,nav ul li,nav ul a {
    margin: 0;
    padding: 7px 0px 0px 0px;
    border: none;
    outline: none;
    left:0px;
}
/*Defino el ul identificado como menu*/
nav ul.menu {
    height: 50px;
}

/*Float para el menú principal*/
ul.menu > li {
    float: right;
}
ul.menu li{
    position: relative;
    list-style: none;
    display: block;
    height: 40px;
    margin-right:15px;
}
ul.menu li a {
    display: block;
    padding: 0px;
    height: 100%;
    text-decoration: none;
 
    font-family: 'Bank Gothic Light BT', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
 
    color: #3F3F40;
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

ul.menu li:hover > a { color: #FFFFFF; }

/*Menú de moviles*/
select#menumovil {
	padding: 1px;
	font-size: 0.8em;
	height: 30px;
	background-color: transparent;
	border-top-right-radius:1.2em;
	border:none;
	color: #3F3F40;
	display:none;
	font-weight:bold;
	font-family: 'Julius Sans One', sans-serif;
}

/*****************************************/
/*Otros*/
.datos{
	text-align:right;
	color:white;
	font-size:0.8em;
	margin-top: 5px;
	margin-right: 4%;
	font-family: 'Josefin Sans', sans-serif;
}
.datos span a{color:#58595A;}
.tit_servicios{
	border: 1px solid;
	display: inline-block;
	padding: 5px;
}
h2{
	text-align: center;
	font-size: 1.9em;
}
hr{
	width: 102%;
	margin-top: -21px;
}
#botonesmegusta{float:right;}
#botonesmegusta .twitter-share-button{margin-left:-30px;}
.limpiarlinea{clear:both;}

/*Inicialización de elementos*/
/*Pasafotos*/
#slideshow{display:none;}
#fotocargando{
	width:100%;
	text-align: center;
}
#fotocargando img{
	margin-top:50%;
	width:70px;
	height: 70px;
}
section article.trabajo{
	padding: 10px 30px 15px;
	margin:0px;
	height: 135px;
}
section article.trabajo a{
	text-decoration:none;
}
article.trabajo img{
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	border-radius: 3px 30px 3px 30px;
	/*Añadido para vivualización en línea*/
	width: 30%;
	float: left;
	margin-right: 20px;
	
}
article.trabajo a:hover img{
	border-radius:0;
}

article.trabajo h3{margin-top: 0px;}
article.trabajo a{
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	transition: all .5s ease 0s;	
	opacity:0.8;
}
article.trabajo a:hover{opacity:1;}

/*Estilos Contacto.php*/
#contacto_box{
	height: 420px;
	width:95%;
	margin:10px auto;
	margin-bottom:30px;
}
#mapa{
	margin-top: 20px;
	width: 100%;
	height: 200px
}
#mapa{
	border:1px solid;
	border-radius: 3px 30px 3px 30px;
}
#form_contacto{
	width:100%;
	margin-top: 20px;
}
#form_contacto input.boton{
	float:right;
	margin-right: 23px;
	font-family: 'Bank Gothic Light BT',sans-serif;
	color: rgb(63, 63, 64);
}
#text_contacto{
	width:94%;
	resize:none;
	height:200px;
}
#nombre{width: 50%;}
#mail{width: 30%;}
.warning{
	background: rgb(88, 89, 90);
	color:white;
	text-decoration: blink;
}
.nota{
	font-size: 0.7em;
	clear: both;
	padding-top: 20px;
}
#error{
	color: #D1D2D3;
	margin: 150px 40%;
	width:300px;
	text-align: center;
}
#error img{
	margin: 10%;
	width:80%;
}
div#auxiliar{
	display:block;
	height: 110px;
}
/******************************************************************************/
/*Responsive*/
/*Para casos que seqan sólo superiores a 1300 pixeles*/
@media screen and (min-width: 1300px) {
ul.menu li{margin-right: 80px;}
header{width: 98%;}
section article.trabajo{height: 170px;}
section{margin-right:5px;}
aside,section{max-height:850px;}
}
/*Para casos que seqan sólo superiores a 1500 pixeles*/
@media screen and (min-width: 1500px) {
section{margin-right:15px;}
}
/*Para casos que seqan sólo superiores a 600 pixeles*/
@media screen and (min-width: 600px) {
#botonesmegusta .twitter-share-button {margin-top: 5px;}
}
/*Menor de 850 pixeles y mayor de todo ello de ancho*/
@media screen and (max-width: 850px) {
ul.menu li a {font-size: 0.8em;}
ul.menu > li {margin-right: 35px;}
header{width: 96%;}
#prev2 {left: 10%;}
h3{font-size:1.1em}
#prev2, #next2 {top: 30%;}
}
/*Menor de 600 pixeles y mayor de todo ello de ancho*/
@media screen and (max-width: 700px) {
body{
	overflow: inherit;
	padding:5px;
}
header{
	margin-left: 5px;
	width: 95%;
}
header #logo{
	height: 60px;
	width:120px;
	top: 20px;
}
header #logo h1{margin-top: 0px;}
header #logo h1 span img{
	height: 60px;
}
.datos{font-size: 0.6em;}
.datos span{display:block;}
.menu{display:none;}
header nav {
	width: 97%;
	height: 30px;
}
select#menumovil{
	display:block;
	margin-left: 40%;
}
aside, section{
	position:static;
	width:95%;
	float: none;
	z-index: 200;
	height: auto;
	margin: 0px 5px 0px 5px;
	border-bottom-left-radius: 0px;
}
section{
	border-bottom-left-radius: 0px;
	max-height: none;
	overflow:show;
}
section article {
	padding: 0px 20px 10px;
	width: 88%;
}
section article p, section article ul {font-size: 0.9em;}
section article p .area{font-size: 1em;}
aside {width:95%;}
footer{position: static;}
#botonesmegusta .fb_iframe_widget{margin-bottom:-15px;}
#text_contacto{
	width: 90%;
	height:200px;
}
#slide_estudio, #slide_obras, #controlesnav {width: 100% !important;}
#slide_estudio, #slide_obras{height:550px !important;}
#slide_estudio img, #slide_obras img, aside > img {
	margin-top: 90px;
	width: 95% !important;
}
#error {width: 150px;}
}
/*Menor de 500 pixeles*/
@media screen and (max-width: 500px) {
section article.trabajo{
	height: 80px;
	font-size: 0.7em;
}
h2{font-size:1.3em}
#slide_estudio, #slide_obras{height:450px !important;}
}
/*Menor de 360 pixeles*/
@media screen and (max-width: 360px) {
header #logo {
    height: 40px;
    width: 80px;
    top: 40px;
}
header #logo h1 span img {height: 40px;}
#slide_estudio, #slide_obras{height:340px !important;}
#next2 {right: 10%;}
/*Menor de 240 pixeles y mayor de todo ello de ancho*/
@media screen and (max-width: 240px) {
header #logo {top: 52px;}
}