@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
@font-face {
    font-family: 'trajanpro';
    src: url('../fonts/trajan/TrajanPro-Bold.eot');
    src: url('../fonts/trajan/TrajanPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/trajan/TrajanPro-Bold.woff') format('woff'),
         url('../fonts/trajan/TrajanPro-Bold.ttf') format('truetype'),
         url('../fonts/trajan/TrajanPro-Bold.svg#museo300') format('svg');
    font-weight: normal;
    font-style: normal;

}

img, object, embed, video {
	max-width: 100%;
	}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}
.body {
	margin:0;	
}
a {
	font-size: 12px;
	font-weight: lighter;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #2C334F;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
h1{
	font-family: trajanpro;
	color: #2C334F;
	letter-spacing: 0.3em;
	font-size: 20px;
	font-weight: normal;
}
h2{
	font-family: trajanpro;
	color: #2C334F;
	letter-spacing: 0.3em;
	font-size: 16px;
	font-weight: normal;
}


/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		10;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
#cabecera, #contenido {
	margin-right: auto;
	margin-left: auto;
}
#contenido {
	clear:both;
}
#cabecera {
	margin-top:0.5%;
}
#logotipo {
	text-align:center;
	width: 100%;
}
#menu {
width: 100%;
clear: both;
margin-left: 0;
margin-top:5.5%;
}
#menu li {
	font-family: trajanpro;
	color: #2C334F;
	letter-spacing: 0em;
	font-size: 0.8em;
	font-weight: normal;
	position: relative;
	line-height: 27px;

	text-align: center;
}
#menu li:hover {
	color: #9599a7;
	cursor: default;
}
#menu li a:hover   {
	color: #9599a7;
	text-decoration: none;
}
.submenu{
	display: none;
	position: absolute;
	top: 18px;
	z-index: 99999;
	color: #2C334F;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;;
	padding-left: 10px;
	margin: 0px;
	border-top-width: 6px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	background-image:url(../images/fondo-menu.png);
}


.itemFilosofia {
	width:150px;
	right:-78px;
	
}
.itemProyectos {
	width:180px;
	right:-103px;
}
.itemCreaciones {
	width: 58px;
	right: 8px;
}
.itemContacto {
	width:150px;
	right:-5px;
}





#menu .submenu li{
	/*background-color:#999;*/
	text-decoration: none;
	height: 22px;
	line-height: 22px;
	list-style-type: none;
	text-align: left;
	letter-spacing: 0em;
	clear: both;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

#menu .submenu li a{
	color: #2C334F;
	width: 221px;
	height: 18px;
	line-height: 18px;
}
#menu  .submenu  li a:hover {
	color: #9599a7;
}

#filosofía {
width: 21.0526%;
margin-left: 0;
}
#proyectos {
width: 21.0526%;
/*margin-left: 5.2631%;*/
margin-left: 3.2631%;
clear: none;
}
#creaciones {
width: 21.0526%;
/*margin-left: 5.2631%;*/
margin-left: 4.2631%;
/*padding-right:5.2631%;*/
padding-right: 0.2631%;
clear: none;
}
#contacto {
width: 21.0526%;
/*margin-left: 5.2631%;*/
margin-left: 2.2631%;
clear: none;
}
#collage {
	margin-top:15%;
}
#formizda, #formdcha {
	margin-top:8%;
	font-family:'Quicksand';
	font-size:1.1em;
}
#formizda #nombre, #formizda #email, #formizda #telefono, #formizda #mensaje {
	border: 1px solid #CCC;
	width: 60%;
}
#formizda .botones {
	width:69%;
	text-align:right;
	padding-top:15px;
}
#formizda #reset, #formizda #submit {
	font-family:'Quicksand';
	font-size:1.1em;
	border: none;
	background:none;
	color: #2C334F;
	letter-spacing: 0em;
	font-size:15px;
	padding:5px;
}
#formdcha a {
	color: #2C334F;
	letter-spacing: 0em;
	font-size:15px;
}
#formdcha a:hover {
	text-decoration:underline;
	color:#aaa;
}
.etiqueta, .campo {
	margin-top:2px;
	margin-bottom:2px;
}

#colizda {
width: 100%;
margin-top:12%;
}
#coldcha {
width: 100%;
margin-top:8%;
clear: both;
margin-left: 0;
font-family:'Quicksand';
font-size:16px;
text-align:justify;
}
#coldcha p, #coldcha h1 {
margin-left:25px;
padding-top:0;
margin-top:0;	
}
.contenedorgaleria {
	/*padding-top:7.5%;*/
	padding-top:15.5%;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	display:none;
}
#oculta{
	
	width:185px;
	overflow:visible;
	z-index:99999;
	background-color:#fff;
	position:absolute;
	opacity:0.7;"
}
#despliega {
padding:0;
background: none;
background-color:transparent;
border:none;
position:absolute;
left:0;
top:40px;
}
#menulateral {
margin:0px;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
}

#menulateral li{
	display:block;
	font-family: trajanpro;
	color: #2C334F;
	line-height: 16px;
	/*font-size: 12px;*/
	font-size:10px;
	font-weight: normal;
	/*min-height:26px;*/
	min-height:20px;
	padding-left:-5px;
}
#menulateral li:hover {
	color: #9599a7;
	cursor: default;
}
#menulateral li a {
	color: #2C334F;
}
#menulateral li a:hover   {
	color: #9599a7;
	text-decoration: none;
}
.nohay{
	font-family: trajanpro;
	color: #2C334F;
	line-height: 16px;
	font-size: 12px;
	font-weight: normal;
}
#titulogaleria {
	font-family: trajanpro;
	color: #2C334F;
	letter-spacing: 0em;
	font-size: 1.5em;
	font-weight: normal;
	/*padding-top:20px;*/
	padding-top:10px;

	text-align: center;
}
#formizda {
width: 100%;
}
#formdcha {
width: 100%;
clear: both;
margin-left: 0;
}
.etiqueta {
width: 100%;
margin-left: 0;
}
.campo {
width: 100%;
clear: both;
margin-left: 0;
}
.botones {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

.correo{float:left; width: 76%;text-align: center;}
.correo h2{font-size:14px;}

@media screen and (orientation:portrait) {
.contenedorgaleria {padding-top:22.5%}

.itemFilosofia {
	width:150px;
	/*right:-30px;*/
	right:-91px;
	
}
.itemProyectos {
	width:180px;
	/*right:-50px;*/
	right:-123px;
}
.itemCreaciones {
	/*width:150px;
	right:-43px;*/
	width: 57px;
	right: -4px;
}
.itemContacto {
	width:150px;
	right:-22px;
}

}

/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */




@media only screen and (min-width: 481px) {

.gridContainer {
	width: 91.14%;
	padding-left: 0.93%;
	padding-right: 0.93%;
	clear: none;
	float: none;
	margin-left: auto;
}
#logotipo {
width: 18.3673%;
}
#menu {
width: 79.5918%;
margin-left: 2.0408%;
clear: none;
}
#menu li {
	text-align: right;
	font-size: 1em;
}
#menulateral li{min-height:26px; font-size: 12px;}
#filosofía {
width: 23.0769%;
margin-left: 0;
}
#proyectos {
width: 23.0769%;
clear: none;
margin-left: 2.5641%;
}
#creaciones {
width: 20.5128%;
padding-right:2.5641%;
clear: none;
margin-left: 2.5641%;
}
#contacto {
width: 23.0769%;
clear: none;
margin-left: 2.5641%;
}

/** submenu**/

.itemFilosofia {
	width:150px;
	right:-30px;
	
}
.itemProyectos {
	width:180px;
	right:-50px;
}
.itemCreaciones {
	width:150px;
	right:-43px;
}
.itemContacto {
	width:150px;
	right:-22px;
}


/************/


#collage {
}
#colizda {
width: 100%;
}
.coldcha {
}
#coldcha {
width: 100%;
clear: both;
margin-left: 0;
}
.contenedorgaleria {
	padding-top:7.5%;
}
#formizda {
width: 100%;
}
#formdcha {
width: 100%;
clear: both;
margin-left: 0;
}
.etiqueta {
width: 100%;
margin-left: 0;
}
.campo {
width: 100%;
clear: both;
margin-left: 0;
}
.botones {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */

@media only screen and (min-width: 481px) and (orientation:portrait) {

.contenedorgaleria {padding-top:10.5%}

.itemFilosofia {
	width:150px;
	/*right:-30px;*/
	right:-73px;
	
}
.itemProyectos {
	width:180px;
	/*right:-50px;*/
	right:-93px;
}
.itemCreaciones {
	/*width:150px;
	right:-43px;*/
	width: 57px;
	right: 15px;
}
.itemContacto {
	width:150px;
	right:-15px;
}	
	
	}


@media only screen and (min-width: 769px) {


.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#cabecera, #contenido {
	margin-right: auto;
	margin-left: auto;
	max-width:1012px;
}
#logotipo {
width: 18.3673%;
}
#menu {
width: 79.5918%;
clear: none;
margin-left: 2.0408%;
}
#menu li {
	letter-spacing: 0.2em;
	font-size: 1.2em;
}
#menulateral li{min-height:26px; font-size: 12px;}
#filosofía {
width: 23.0769%;
margin-left: 0;
}
#proyectos {
width: 23.0769%;
clear: none;
margin-left: 2.5641%;
}
#creaciones {
/*width: 23.0769%;*/
width: 20.5128%;
padding-right:2.5641%;
clear: none;
margin-left: 2.5641%;
}
#contacto {
width: 23.0769%;
clear: none;
margin-left: 2.5641%;
}

/** submenu**/

.itemFilosofia {
	width:150px;
	right:-30px;
	
}
.itemProyectos {
	width:180px;
	right:-50px;
}
.itemCreaciones {
	width:150px;
	right:-43px;
}
.itemContacto {
	width:150px;
	right:-22px;
}


/************/

#collage {
}
#colizda {
width: 28.5714%;
}
.coldcha {
}
#coldcha {
width: 69.3877%;
margin-left: 2.0408%;
clear: none;
}
.contenedorgaleria {
	padding-top:7.5%;
}
#formizda {
width: 48.9795%;
}
#formdcha {
width: 48.9795%;
margin-left: 2.0408%;
clear: none;
}
.etiqueta {
width: 16.6666%;
margin-left: 0;
}
.campo {
width: 79.1666%;
margin-left: 4.1666%;
clear: none;
}
.botones {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}