@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{



	font-size: 10px;



	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 3em 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:5.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:80%;



	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%;



}







.titulotray{



	float: left;



	width: 40%;



	padding-top: 10em;



	padding-bottom: 5em;



	margin: 0 25% 0 0%;



}







.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;



	}



/**/





.juliah{



	float: left;



	padding-bottom: 5em;



	width:70%;



	}



.materia{



	widht:72%;



	float:left;



	padding-bottom:3em;



}

	

.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;





.juliah{



	float: left;



	padding-bottom: 5em;



	width:100%;



	}



.materia{



	widht:72%;



	float:left;



	padding-bottom:3em;



}

	

.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%;



}







.juliah{



	float: left;



	padding-bottom: 5em;



	width:100%;



	}



.materia{



	widht:72%;



	float:left;



	padding-bottom:3em;



}

	

.julia2{



	float: left;



	padding-bottom: 2em;



	width: 100%;



	}	



	}