/*
Reglas de CSS

1- se definen los estilos para etiquetas html: header, footer... etc
2- se definen los identificadores (id), los id son elementos únicos en html... #nombre-id{ estilos } y en html se llaman mediante el atributo <div id="publicidad"> </div>
3- Al final se definen los estilos para las clases (class), las clases son elementos que se pueden repetir "n" veces en el html, en el css se declaran con el símbolo "."    .nombre-clase{ estilos } y en el html se llaman mediente el atributo class, <div class+"borde-logos"> </div>
4- Todos los estilos se ordenan conforme van apareciendo en la disposición del html, teniendo en cuenta la prioridad anterior. Primero etiquetas html, luego id´s y al final las clases (class)
5- Los atributos se declaran: { atributo1:valor1; atributo2:valor2;......;atributoN:valorN; }
6- Todos los atributos se ordenan alfabéticamente... color, display, width.
7- Si tenemos etiquetas para las etiquetas para el comodín "*" (todos los elementos), o para las etiquetas html y/o body, estos son los primeros en definirse.
8- En el body se debe declarar un tamaño de fuente global. 
9- Si tenemos estilos para resetear elementos html, éstos irán antes que cualquier estilo. 

*/

* {	
	margin: 0;
	padding: 0;
}

.fade {
	margin: 35px 35px;
}

.image {
	margin: 35px 35px;
}


/*
article, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
*/

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

body {
	background: #000;
	font-size: 0.5em;
	font-family: helvetica_neue_lt_st25ultraLt, Helvetica;
	max-width: 100%;
	text-align: center;
/*	16px = 12pt = 100% = 1em
*/
}

figcaption {
	font-size: 0.8em;
	padding: 0;
	text-align: center;
}

img, video {
	max-width: 100%;
}

header, section#contenido{
	/*
	background: #F60;
	border-radius: 0.5em;
	*/
	font-family: helvetica_neue_lt_st25ultraLt, Helvetica;
	margin-top: 0;
	padding: 2em;
	text-align: center;
}

nav {
	display: inline-block;
	font-family: helvetica_neue_lt_st25ultraLt, Helvetica;
	margin: 0.3em;
	max-width: 1000px;
	text-align: center;
	vertical-align: middle;
}

h1 {
	display: inline-block;
	margin-top: 0px;
	margin: 0.3em;
	text-align: left;
	vertical-align: middle;
}

/*
h1, nav {
	*/
	/*
	display: inline-block;
	*/
	/*
	color: #F60;
	font-family: HelveticaLTStd-Cond, Helvetica;
	*/
	/*
	margin:0,25em auto;
	*/
	/*
	max-width: 1100px;
	*/
	/*	
	padding: 0.25em;
	*/
	/*
	text-align: center;
	text-shadow: 5px 5px 10px rgba(255,255,255,0.5);
	vertical-align: middle;
}
*/

nav ul{
	border: 1px;
	font-family: helvetica_neue_lt_st25ultraLt, Helvetica;
	margin-top: -30px;
	padding: 0.3em;
	word-spacing: 0;
	list-style: none;
}

nav li{
	display: inline-block;
	padding: 0.1em;
	vertical-align: middle;
}

nav a{
	border-radius: 0;
	padding: 0.3em;
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	/* 	
		transition: para todos los atributos que pueden tener atributos - all
		luego viene el tiempo en segundos: 0.5s
		al final del tipo de aceleración: ease-in 

		para que la transición se lea en los 5 navegadores:
		-ms- es microsoft
		-moz- firefox mozilla
		-o- Opera
		-webkit- 
	*/
}

a{
	font-style: normal;
	/*
	text-align: left;
	*/
	text-decoration: none;
}

a#artesplasticas {
	background: #ffffff;
	display: block;
	height: 150px;
	width: 150px;
	vertical-align: middle;

	/*TEXTO*/

	color: #3f3f3f;
	font: 12px/270px bold helvetica_neue_lt_st25ultraLt, helvetica;
	/*el 50px anterior se refiere al line-height: 50px;*/
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	word-spacing: 0.4em;
}

a#creacionsonora{
	background: #292929;
	display: block;
	height: 150px;
	width: 150px;
	vertical-align: middle;

	/*TEXTO*/

	color: #292929;
	font: 12px/270px bold helvetica_neue_lt_st25ultraLt, helvetica;
	/*el 50px anterior se refiere al line-height: 50px;*/
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	word-spacing: 0.4em;
}

a#cv{
	background: #292929;
	display: block;
	height: 150px;
	width: 150px;
	vertical-align: middle;

	/*TEXTO*/

	color: #292929;
	font: 12px/270px bold helvetica_neue_lt_st25ultraLt, helvetica;
	/*el 50px anterior se refiere al line-height: 50px;*/
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	word-spacing: 0.4em;
}

a#publicaciones{
	background: #292929;
	display: block;
	height: 150px;
	width: 150px;
	vertical-align: middle;

	/*TEXTO*/

	color: #292929;
	font: 12px/270px bold helvetica_neue_lt_st25ultraLt, helvetica;
	/*el 50px anterior se refiere al line-height: 50px;*/
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	word-spacing: 0.4em;
}

p#mauriciobejarano {
	font-family: bold helvetica_neue_lt_st25ultraLt, helvetica;
	color: #9f9f9f;
	font-size: 1.6em;
	letter-spacing: 0.12em;
}

p#correo{
	font-family: bold helvetica_neue_lt_st25ultraLt, helvetica;
	color: #4f4f4f;
	font-size: 1.4em;
	letter-spacing: 0.12em;
}



a#plasticasonoraindex{
	display: inline-table;
	/*
	height: 130px;
	width: 130px;
	*/
	vertical-align: top;

	/*TEXTO*/
	/*el 50px anterior se refiere al line-height: 50px;*/
	margin: 0px 25px;
	max-width: 300px;
}

p#plasticasonoratextosindex {
	text-align: left;
	margin: 5px 35px;
	color: #5a5a5a;
	font: 11px bold helvetica_neue_lt_st25ultraLt, helvetica;
	text-decoration: none;
	text-align: left;
	letter-spacing: 0.05em;
	word-spacing: 0.1em;
}

p#plasticasonoratextosindextitulos {
	color: #000000;
	font: 14px bold helvetica_neue_lt_st25ultraLt, helvetica;
	text-align: left;
	margin: -10px 35px;
	text-transform: uppercase;
	width: 300px;
}

a#plasticasonoraindex:hover {
	opacity: 0.5;
	-ms-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

nav a:hover {
	/*
	background: #212121;
	*/
	/*
	border: 0.14em dashed #F60;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	color: #FFF;
	font-size: 1em;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	*/
	padding: 0.3em;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

nav a#artesplasticas:hover {
	color: #3f3f3f;
	background: #ffffff;
}

nav a#creacionsonora:hover{
	color: #3f3f3f;
	background: #ffffff;
}

nav a#cv:hover{
	color: #3f3f3f;
	background: #ffffff;
}

nav a#publicaciones:hover{
	color: #3f3f3f;
	background: #ffffff;
}

section#principal {
	background: #FFF;
	margin: 0em;
	max-width: 850px;
	min-height: 200px;
	text-align: left;
	vertical-align: top;
	width: 100%;
}

section#contenido {
	/*	
	background: #FFF;
	*/	
	border-radius: 0;
	margin: 0.5em auto;
	margin-top: -2.5em;
	max-width: 850px;
	padding: 0;
	text-align: left;
}

article#galeria-inicio{
	/*
	background: #FFF;
	*/
	border-radius: 0em;
	min-height: 300px;
	text-align: left;
}

aside{
	width: 0%;
}

aside img{
 	/* para la imagen redondeada */
	border-radius: 0;
}

footer{
	margin-top: 50px;
	font-family: helvetica_neue_lt_st25ultraLt, helvetica;
	text-align: center;
}

p#correo:hover{
	color: #9f9f9f;

	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

/*
.fade{
	-ms-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	opacity: 1;
	filter:alpha(opacity=10);
}

.fade:hover{
	-ms-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	opacity: 0.7;
	filter:alpha(opacity=7);
}
*/

/*
@media(min-width: 1081px) {
	header h1{
		text-align: left;
		width: 35%;
	}
	nav {
		text-align: right;
		width: 60%;
	}
}
*/


@media(max-width: 600px) {
	nav li{
		display: inline-block;
		margin: 0px;
		width: 98%;
	}
	section#principal, aside {
		display: block;
		margin-bottom: 0.2em;
		width: 95%;
	}
}