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

*{ margin:0;
	padding:0;
	border:none;
	outline: none;
	}

 /*////////////
 ESTILOS DE LAS COLUMNAS
 ////////////*/
.contenedor{ font-size:0;
	max-width:1100px;
	margin:0 auto;/* para centrar*/
	}
.contenedor-fullscreen{ font-size:0;
	margin:0 auto;/* para centrar*/
	}

.columnas{ font-size:16px;
	display:inline-block;
	vertical-align:top;
	position:relative;
	} 
.col-1{ width:8.33%;
	}
.col-2{ width:16.66%;
	}
.col-3{ width:25%;
	}
.col-4{ width:33.33%;
	}
.col-5{ width:41.66%;

	}
.col-6{ width:50%;
	}
.col-7{ width:58.33%;
	}
.col-8{ width:66.66%;
	}
.col-9{ width:75%;
	}
.col-10{ width:83.33%;
	}
.col-11{ width:91.66%;
	}
.col-12{ width:100%;
	}

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m{ margin:0.3% 0.5%;
	}

.col-1-m{ width:7.33%;
	}
.col-2-m{ width:15.66%;
	}
.col-3-m{ width:24%;
	}
.col-4-m{ width:32.33%;
	}
.col-5-m{ width:40.66%;
	}
.col-6-m{ width:49%;
	}
.col-7-m{ width:57.33%;
	}
.col-8-m{ width:65.66%;
	}
.col-9-m{ width:74%;
	}
.col-10-m{ width:82.33%;
	}
.col-11-m{ width:90.66%;
	}
.col-12-m{ width:99%;
	}
	
 /***************************************************
			 ESTILOS scrollbar
***************************************************/

::-webkit-scrollbar{
  width: 8px;
  background: #000;
}
::-webkit-scrollbar-button{
  width:8px;
  height: 12px;
  }
::-webkit-scrollbar-track{
  background:#000;
  -webkit-border-radius: 10px;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb{
  background: #333;
  border-radius: 8px;
  webkit-border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover{
    background: #333;
}
/* Pseudo-clase */
::-webkit-scrollbar-thumb:window-inactive {
  background:  #000;
}	

 /***************************************************
			 ESTILOS GENERALES
***************************************************/
#portrait{ display:none;}
body{
	font-family: 'Roboto', sans-serif;
	color:#000;
	font-weight:400;
	background:#FFf;
	min-height:400px;
	}
	
a{color:#00f;
	text-decoration:none;
	}

a:hover{ font-weight:400;
	text-decoration:underline;
	}

#header, #footer {z-index:1100;
	}

#header{
	position:fixed;
	width:100%;
	height:150px;
	z-index:100;
	background: #FFF;
	/*background:linear-gradient(white, transparent);*/
	}
h1 {
	height:150px;
	width:100%;
	margin:0 auto;
	background: url(../img/logo-header.gif) no-repeat center;
	}	

h1 a{ 
	height:150px;
	width:150px;
	margin:0 auto;
	font-size:0;
	display:block; 
	text-decoration:none;
	}
	
h2, h3, h4{ color:#999;
	}
	h2{ font-family: 'Roboto Slab', serif;
		font-size:26px;
		font-weight:900;
		letter-spacing:0.1em;
		color:#00F;
		}


h3{ font-size:16px;
	font-weight:100;
	margin:2% 0;
	letter-spacing:0.05em;
		}

h3 span { color:#000;
font-weight:300;

}

h4{ font-size:14px;
	font-weight:300;
	/*margin:2%;*/
	letter-spacing:1px;
	}

.h3-hover{ letter-spacing:0.4em;
	font-weight:900;
	font-size:18px;
	line-height:25px;
	vertical-align:middle;
	color:#00f;
	}

.h3-hover span{ letter-spacing:0.4em;
	font-weight:400;
	font-size:15px;
	line-height:20px;
	}

p{ font-size:19px;
	font-weight:100;
	text-align:justify;
	letter-spacing:0.07em;
	color:#999;
	line-height:24px;
	}
p span{ font-weight:100;
	}
.p-petit{ font-size:14px;
	text-align: justify;
	line-height:18px;
	}
.txt-blanca{ color:#FFFF;
}
.txt-izq{ text-align:left;
}
.txt-der{ text-align: right;
}
.txt-centro{ text-align: center;
}
.top-150{ padding-top: 150px;
}
.bottom{ margin-bottom:90px;}

.fs0{
	font-size:0;}
.margin-t03{
	margin-top:0.3%;
	}	
.margin-t1{
	margin-top:1%;
	}
.margin-t2{
	margin-top:2%;
	}
.margin-t3{
	margin-top:3%;
	}
.margin-t4{
	margin-top:4%;
	}
.margin-t5{
	margin-top:5%;
	}
.margin-t10{
	margin-top:10%;
	}
.margin-t15{
	margin-top:15%;
	}

.margin-b1{
	margin-bottom:1%;
	}
.margin-b2{
	margin-bottom:2%;
	}
.margin-b3{
	margin-bottom:3%;
	}
.margin-b4{
	margin-bottom:4%;
	}
.margin-b5{
	margin-bottom:5%;
	}
.margin-b10{
	margin-bottom:10%;
	}
.margin-b15{
	margin-bottom:15%;
	}
.margin-b20{
	margin-bottom:20%;
	}
.margin-b30{
	margin-bottom:30%;
	}
.margin-l1{
	margin-left:1%;
	}
.margin-l3{
	margin-left:3%;
	}
.margin-l7{
	margin-left:7%;
	}

.margin-r1{
	margin-right:1%;
	}
.margin-r3{
	margin-right:3%;
	}
.margin-r7{
	margin-right:7%;
	}

	
.top-150-r{padding-top: 80px;
	}
	
.cien{ width:100%;
	}


/**************************************************
 				Empieza FOOTER 
 **************************************************/
#footer-r{ display:none;
	}

#footer{
	position:relative;
	width:100%;
	margin:0 auto;
	background: none;
	padding:2% 0;
	}



/**************************************************
 		Empieza INDEX 
 **************************************************/
/*
#mobilelandscape-view{
	display:none
	}*/
#index-r, #index-pro{
	display:none;
	}
#img-1-col{ display:none;
	}
	
#img-12-col{ display:block;
	}


 /**************************************************
 		Empieza MENU-IDEX 
 **************************************************/

.img-index {
	position:relative; 
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	
	}
	
.img-index img { 
	width:100%;
	left:0;
	transition:all ease 0.5s;
	cursor:pointer;
	border-radius: 12%;
	/*font-size:0;
	border:#0F9 solid 1px;*/
	}

.img-index:hover img { 

	-webkit-filter: brightness(1.1)  opacity(0) ;
	filter:  brightness(1.1)  opacity(0) ;
	}

.img-index figcaption { 
	position:absolute;
	bottom:-100%;
	font-weight:900;
	transition:all ease 0.5s;
	color:#000;
	text-align:center;
	width:100%;
	/*background:rgba(0,0,0,.7);
	padding:1%;*/
	
	}
	
.img-index:hover figcaption {
	bottom:40%;
	}


.img-index-cat figcaption { 
	position:absolute;
	bottom:-100%;
	transition:all ease 0.5s;
	text-align:center;
	width:100%;
	/*background:rgba(0,0,0,.7);
	padding:1%;*/
	
	}
	
.img-index-cat:hover figcaption {
	bottom:9%;
	}
	

/**************************************************
 		Empieza CONTACTO 
 **************************************************/
#contacto{ display:block}
#contacto-r{ display:none;}
p > a:hover{ font-weight:300;
	text-decoration:underline;
	} 

/**********************************************************************************************************
***********************************************************************************************************
***********************************************************************************************************
***********************************************************************************************************
***********************************************************************************************************
 		Empieza RESPONSIVE
***********************************************************************************************************
**********************************************************************************************************/

@media screen and (max-width: 2560px) {/*body { background: blue;}*/
	 
@media only screen  and (min-width: 1089px) and (max-width: 1500px) { /*body { background: red;}*/

}
		 
@media screen and (max-width: 1090px) { /*body {background:green;}*/

}

@media screen and (max-width: 1060px) { /*body { background: pink;}*/

}
@media screen and (max-width: 1040px) { /*body { background: orange;}*/

}

/*********IPAD PRO VERTICAL*********/
@media screen and (max-width: 1024px) and (orientation: portrait) {/*body { background: blue;}*/


}


}

/*********IPAD PRO HORIZONTAL*********/
@media screen and (max-width: 1366px) and (orientation: landscape) {/*body { background: blue;}*/


}
		 
/*********IPAD HORIZONTAL*********/
@media screen and (max-width: 1024px) and (orientation: landscape) {/*body { background: brown;}*/

}
	
@media screen and (max-width: 980px) { /*body { background: green;}*/


}



/*********IPAD VERTICAL*********/	 
@media screen and (max-width: 768px) { /*body { background: LightSalmon;}*/

}




/*********IPHONE 6 PLUS HORIZONTAL*******/	 
/*@media screen and (max-width: 736px) and (orientation:landscape){body { background: PapayaWhip;}
#header, button, .overlay .overlay-hugeinc,p, div, a, figure, figcaption,article,
#img-1-col,#img-12-col,#footer,#footer-r,.menu-proyectos, .menu-proyectos-r,.estudio, .estudio-r, .cien, .p-petit, h2, h3, h4,.contenedor, #contacto,#contacto-r, #noticias, #index, #index-r
	{
	display:none
	}

#mobilelandscape-view{ display:block; z-index:2000; top:0; overflow:hidden; width:100%;
}
 

}*/

/*********IPHONE 6 HORIZONTAL*******/	 
/*@media screen and (max-width: 667px) and (orientation:landscape){body { background: PapayaWhip;}
#header, button, .overlay .overlay-hugeinc,p, div, a, figure, figcaption,article,
#img-1-col,#img-12-col,#footer,#footer-r,.menu-proyectos, .menu-proyectos-r,.estudio, .estudio-r, .cien, .p-petit, h2, h3, h4,.contenedor, #contacto,#contacto-r, #noticias, #index, #index-r
	{
	display:none
	}

#mobilelandscape-view{ display:block; z-index:2000; top:0; overflow:hidden; width:100%;
}
 
}	*/ 
	 
		
@media screen and (max-width: 700px) { /*body { background: DarkKhaki;}*/
#img-1-col{ display:block}
#img-12-col{ display:none}
}
		 


@media screen and (max-width: 610px) { /*body { background: DeepSkyBlue;}*/
#img-1-col{ display:block}
#img-12-col{ display:none}

}

@media screen and (max-width: 530px) {/* body { background: DarkSlateGray;}*/
#img-1-col{ display:block}
#img-12-col{ display:none}

}


@media screen and (max-width: 500px) { /*body { background: RoyalBlue;}*/
#header, #footer {z-index:1100;
	}
#contacto{ display:none}
#contacto-r{ display:block;}

}

/*********IPHONE 8 PLUS VERTICAL*********/
@media screen and (max-width: 414px) {/* body { background: Goldenrod;}*/	
#img-12-col, #footer{ display:none}
#img-1-col{ display:block}

#header{
	height:80px;
	}
	
h1{
	height:80px;
	z-index:1001;
	background: url( "../img/logo-header-r-w.gif") no-repeat center;
	}

h1 a{
	height:80px;
	width:80px;
	}
h2{ 
	font-size:16px;
	}
p{ 
	font-size:16px;
	font-weight: 400;
	}
	
.margin-all{ margin:5%;
	}

		 
.h3-hover{ letter-spacing:0.1em;
	font-weight:400;
	font-size:12px;
	line-height:15px;
	vertical-align:middle;
	color:#00f;
	}

.h3-hover span{ letter-spacing:0.1em;
	font-weight:400;
	font-size:12px;
	line-height:15px;
	}


#menu {
	-moz-transform: translateX(33em);
	-webkit-transform: translateX(33em);
	-ms-transform: translateX(33);
	transform: translateX(33em);
	max-width: 100%;
	width: 33em;
	}
div > a.menuToggle{
	right:0;
	}
	

	
#footer-r{
	position:relative;
	width:100%;
	margin:0 auto;
	background: none;
	display: block;
	
		}

}
		 
/*********IPHONE 6 VERTICAL*********/
@media screen and (max-width: 375px){/* body { background: FireBrick;}*/
#img-1-col{ display:block}
#img-12-col, #index-pro, #index{ display:none}
#index-r{ display:block}

	}