@charset "utf-8";

/* CSS Document */

@import url(normalize.css);





@font-face { font-family: 'Papyrus-Regular'; src: url('/font/Papyrus-Regular.eot') format('embedded-opentype'); font-weight: normal; font-style: normal; }



/*resets*/

*{

	box-sizing:border-box;

	border:none;

	text-decoration: none;

}

ul, ol{

	margin: 0;

	

	padding: 0;

	list-style: none;

}



figure{

	margin: 0;

	display:block;

}





/*boton arriba*/

#IrArriba {

position: fixed;

bottom: 25px; /* Distancia desde abajo */

right: 25px; /* Distancia desde la derecha */

}



#IrArriba span {

width: 60px; /* Ancho del botón */

height: 60px; /* Alto del botón */

display: block;

background: url(imgs/arriba.png) no-repeat center center;

}



/*basicos*/



html{

	letter-spacing:0.1em;

	overflow-x:hidden;

}







body { 

	font-family: Century Gothic, sans-serif;

background:url(imgs/fondo.jpg) repeat-x #000;

}



p{ 

	font-family: Century Gothic, sans-serif;

/*	font-size:1.6em;
*/
	letter-spacing:0.1em;

	color:#000;

	/*padding:0 5em 0em 5em;*/

		}



.trayecto{ 

	font-family: Century Gothic, sans-serif;

	font-size:1.5em;

	color:#000;

	padding:0 18em 3em 0em;

		}

.blanco{ 

	font-family: Century Gothic, sans-serif;

	font-size:1.6em;

	letter-spacing:0.1em;

	color:#FFF;

	padding:0 5em 3em 5em;

		}

		

.blanco2{ 

	font-family: Century Gothic, sans-serif;

	font-size:1.6em;

	letter-spacing:0.1em;

	color:#FFF;

	padding:0 3em 3em 0em;

		}

		

			

h1 { 

	font-size:3.6em;

	letter-spacing:0.5em;

	font-weight:400;

	color:#FFF;

	}



h2 { font-size:3.2em;

font-weight:200;

color:#000000;

	}



h3 { font-size:1.3em;

font-weight:200;

color:#C00;

	}



h4 { font-size:1.3em;

	color:#fff;

	font-weight:normal;

	}

	



#container{

	margin: auto;

	max-width: 1000px;

	border: hidden dotted 1px #000000;

}



#container2{

	margin: auto;

	max-width:1366px;

	background-color:#B1B1B1;

	border: hidden dotted 1px #000000;

}



#container3{

	margin: auto;

	max-width:1366px;

	background-color:#000;

	border: hidden dotted 1px #000000;

}



#container4{

	margin: auto;

	max-width:1366px;

	background-color:#FFF;

	border: hidden dotted 1px #000000;

}



.img-responsive {

	width:100%;

	height:auto;

	

	}



.cleaner{

	clear: both;

}





/*MENU*/



.toogle-button { display:none;

	}



.botonera ul{

	font-family: Century Gothic, sans-serif;

	margin-top:1em;

	text-transform:none;

	text-decoration:none;

	width:100%;

	}

	

.botonera li{

	float:left;

	text-transform:none;

	text-decoration:none;

	text-align:left;

	display:block;

	width:auto;

	padding-right:5.5em;/*5*/

	margin-top:5em;

	margin-bottom:0.5em;

	}

	

		





.botonera a{

	padding:0;

  display:block;

	font-size:1.4em;

	color:#000;

	text-transform:none;

	text-decoration:none;

	}



.botonera a:hover {

	color:#fff;

	display:block;

	}





/*MENU FONDO NEGRO*/

.botonera2 ul{

	font-family: Century Gothic, sans-serif;

	margin-top:1em;

	text-transform:none;

	text-decoration:none;

	width:100%;

	}

	

.botonera2 li{

	float:left;

	text-transform:none;

	text-decoration:none;

	text-align:left;

	display:block;

	width:auto;

	padding-right:5.5em;/*5*/

	margin-top:5em;

	margin-bottom:0.5em;

	}

	

		





.botonera2 a{

	padding:0;

  display:block;

/*	font-size:1.4em;
*/
	color:#FFF;

	text-transform:none;

	text-decoration:none;

	}



.botonera2 a:hover {

	color:#CCC;

	display:block;

	}

		

/*MENU BLOG*/



.botonera3 ul{

	font-family: Century Gothic, sans-serif;

	margin-top:1em;

	text-transform:none;

	text-decoration:none;

	width:100%;

	}

	

.botonera3 li{

	float:left;

	text-transform:none;

	text-decoration:none;

	text-align:left;

	display:block;

	width:auto;

	padding-right:5em;/*5*/

	margin-top:5em;

	margin-bottom:0.5em;

	}

	

		





.botonera3 a{

	padding:0;

  display:block;

/*	font-size:1.4em;
*/
	color:#000;

	text-transform:none;

	text-decoration:none;

	}



.botonera3 a:hover {

	color:#222222;

	display:block;

	}

	

/**/

	

.portada{

	margin:auto;

	width:100%;

	padding:20em 0 5em 0;

}



.portada2{

	margin:auto;

	width:90%;

	padding:10em 0 5em 0;

}



.juliah{

	float: left;

	padding-bottom: 8em;

	width: 33.8%;

	}

.julia{

	float: left;

	padding-bottom: 8em;

	width: 20%;

	}



.julia2{

	float: left;

	padding-bottom: 2em;

	width: 20%;

	}	





.titulos{

	float: left;

	width: 50%;

	padding-top: 10em;

	padding-bottom: 8em;

	margin: 0 25% 0 25%;

}

.titulos2{
	width:100%;
	float:left;
	background-color:#EBEBEB;
	text-align:center;
	padding:0.5em;
	color:#000;
}

.titulotray{

	float: left;

	width: 40%;

	padding-top: 10em;

	padding-bottom: 5em;

	margin: 0 25% 0 0%;

}

.txt4{
	font-size:1.2em;
	color:#000;
	padding-top:1em;

}
.imagenesn{width:40%;

	margin:0.5em;

	float:left;


}
.obras{

	widht:80%;

	float:left;

	margin:0 10% 0 10%;

	font-family: Century Gothic, sans-serif;

	font-size:1.2em;

	letter-spacing:0.1em;

	color:#000;



}



.obras2{

	widht:90%;

	float:left;

	margin:0 5% 0 5%;

	font-family: Century Gothic, sans-serif;

	font-size:1.2em;

	letter-spacing:0.1em;

	color:#fff;



}

	

	

.materia{

	widht:72%;

	float:left;

	padding-bottom:15em;

}



.pie {

	font-family:Arial, Helvetica, sans-serif;

	text-align:center;

	font-size:1.2em;

	width:100%;

	margin:0.5em auto 0 auto;

	

	}

.pie a{

	text-decoration:none;

	text-transform:none;

	color:#FFFFFF;

	}

	

.logo{

	widht:10%;

	float:left;

		}



@media screen and (max-width: 1024px){

	

.portada{

	margin:auto;

	width:100%;

	padding:20em 2em 5em 2em;

}

	



}

	

@media screen and (max-width: 898px){

	

.portada{

	margin:auto;

	width:90%;

	padding:10em 0 5em 0;

	}

	

.julia{

	padding-bottom:5em;

	}



	.toogle-button { display:block;

	

	}



.toogle-button{

	display: block;

	width: 50px;

	margin:1em auto 1em auto;

	background-color: #000;

	border-radius: 10px;

	padding: 10px;

}

.toogle-button span{

	display: block;

	border-top: solid 2px #fff;

	border-bottom: solid 2px #fff;

	height: 16px;

	position: relative;

	text-indent: -9999px;

}

.toogle-button span:after{

	content: '';

	width: 100%;

	height: 2px;

	background-color: #fff;

	position: absolute;

	left: 0;

	top: 50%;

	margin-top: -1px;

}



.botonera ul{

	font-family: Century Gothic, sans-serif;

	font-size:1.2em;

	margin:auto;

	text-transform:none;

	text-decoration:none;

	width:100%;

	}

	

.botonera li{

	margin-top:0em;

	width:100%;

	border-bottom:#FFFFFF 1px solid;

	text-align:center;

	padding-right:0em;



	}







.botonera a{

	padding-top:1.5em;

  	padding-bottom:0;

	display:block;

	font-size:1.2em;

	color:#000;

	text-transform:none;

	text-decoration:none;

	height:48px;

	text-align:center;



		}



.botonera a:hover {

	background:none;

	color:#FFF;

	}

	

/*fondo negro*/

.botonera2 ul{

	font-family: Century Gothic, sans-serif;

	font-size:1.2em;

	margin:auto;

	text-transform:none;

	text-decoration:none;

	width:100%;

	}

	

.botonera2 li{

	margin-top:0em;

	width:100%;

	border-bottom:#FFFFFF 1px solid;

	text-align:center;

	padding-right:0em;



	}







.botonera2 a{

	padding-top:1.5em;

  	padding-bottom:0;

	display:block;

	font-size:1.2em;

	color:#FFF;

	text-transform:none;

	text-decoration:none;

	height:48px;

	text-align:center;



		}



.botonera2 a:hover {

	background:none;

	color:#CCC;

	}

	



	

/*BLOG*/

.botonera3 ul{

	font-family: Century Gothic, sans-serif;

	font-size:1.2em;

	margin:auto;

	text-transform:none;

	text-decoration:none;

	width:100%;

	}

	

.botonera3 li{

	margin-top:0em;

	width:100%;

	border-bottom:#FFFFFF 1px solid;

	text-align:center;

	padding-right:0em;



	}







.botonera3 a{

	padding-top:1.5em;

  	padding-bottom:0;

	display:block;

	font-size:1.2em;

	color:#000;

	text-transform:none;

	text-decoration:none;

	height:48px;

	text-align:center;



		}



.botonera3 a:hover {

	background:none;

	color:#222222;

	}

/**/

.julia2{

	float: left;

	padding-bottom: 2em;

	width: 100%;

	}




}



@media screen and (max-width: 466px){

	

.obras{

	widht:90%;

	margin:0 5% 0 5%;



}



.obras2{

	widht:90%;

	margin:0 5% 0 5%;



} 



p{ 

	font-family: Century Gothic, sans-serif;

	font-size:1.6em;

	letter-spacing:0.1em;

	color:#000;

	/*padding:0 1.5em 3em 1.5em;*/

		}

		

.blanco{ 

	font-family: Century Gothic, sans-serif;

	font-size:1.6em;

	letter-spacing:0.1em;

	color:#FFF;

	padding:0 1.5em 3em 1.5em;

		}	
		
		

.imagenesn{width:90%;

	margin:0.5em;

	float:left;

}


.julia2{

	float: left;

	padding-bottom: 2em;

	width: 100%;

	}

	}





@media screen and (max-width: 384px){

	

body { 



background:url(imgs/fondo2.jpg) repeat-x #000;

}



.titulos{

	float: left;

	width: 90%;

	margin: 0 5% 0 5%;

}


.julia2{

	float: left;

	padding-bottom: 2em;

	width: 100%;

	}


	

	}