@charset "UTF-8";
/* © Juan Carlos Murillo • Spheric.es */


body {margin: 0px auto;
background-color: #ffffff;
width: 1200px;
}

html {-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-msi-text-size-adjust:none;}

.cargando { background-color: white;padding: 20px; width: 200px;height: auto;border-radius: 50px;border:1px solid rgb(196, 196, 196);margin:0px auto 0px auto;font-family: Arial,Helvetica,sans-serif;
}

#imgLOAD {position: fixed; top:0;left: 0; width: 100%;display: block;background-color: rgba(255, 255, 255, 0.85);text-align: center;padding: 200px 0px 100% 0px;z-index: 2000} 

h1 {font-family:Gloria Hallelujah;
    font-size: 50px;
/*    letter-spacing: 0.1px;*/
}

h1, h2 {
    -webkit-margin-before: 0.1em;
    -webkit-margin-after: 0.2em;
    line-height: 125%;
}

h2
{font-family:Gloria Hallelujah;
    font-size: 35px;
    letter-spacing: 0.5px;
}

h3
{font-family:The Girl Next Door;
    font-size: 23px;
    letter-spacing: 0.5px;
}

p {
    text-align: justify;
    line-height: 200%;
    font-size: 24px;
    letter-spacing: 0.5px;
}


/*CABECERA*/
#cabeceraBox {
/*    background-color: bisque;*/
    padding: 30px 0px;
    border-bottom: 1px solid #E5E5E5;
}

.cabecera{
/*background-color: beige;*/
    margin: 0 auto;
    text-align: center;
}

.cabecera svg{width: 300px;}
.cabecera svg path{fill: #000000;}


/*PIE*/

.pie {
    background-color: #e8e8e8;
    padding: 25px 0;
    border-bottom: 1px solid #E5E5E5;
    margin: 0 auto;
    height: auto;
    text-align: center;
    width: 100%;
    float: left;
    color: #767676;
    font-family:Indie Flower;font-size: 22px;
    letter-spacing: 0.6px;
}

.pie spam {font-size: 18px;}


/*MENU*/

#menuBox{
    background-color: #e8e8e8;
    padding: 15px 0px;
    border-bottom: 1px solid #E5E5E5;
}


nav {
/*    background-color: chartreuse;*/
    margin: 0 auto;

}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:Gloria Hallelujah;font-size: 21px;
    letter-spacing: 0.3px;
}

nav li {display: inline;
    cursor:pointer;
    color: #454545;
    text-align: center;
    padding: 15px 30px;
    text-decoration: none;

}

nav li a {
    display: inline;
    color: #454545;text-align: center;
    padding: 15px 30px;
    text-decoration: none;
}

nav a:hover {
/*background-color: #4CAF50;*/
border-bottom: 5px solid #cecece;
}


nav li:hover {
/*background-color: #4CAF50;*/
border-bottom: 5px solid #cecece;
}

.menu {text-align: center;}

/*PRESENTACIÓN*/

#presentacion {
/*background-color: bisque; */
padding: 10px 0 0; 
display:  none;
visibility: hidden;
}

.introduccion {
/*background-color: deepskyblue;*/
margin: 10px auto;
text-align: center;
}

.animaTop{position:relative;animation:animatetop 2s}@keyframes animatetop{from{top:-800px;opacity:0} to{top:0;opacity:1}}

.cita {
font-family:Indie Flower;
font-size: 26px;
font-weight:bolder;
font-style: italic;
text-align: center;
margin:  30px auto 10px;
letter-spacing: 0.3px;
color: #4d4d4d;
line-height: 125%;


}


#biografia {
/*background-color: #e6e6e6;*/
margin:  100px auto;

}

.delCuento{
/*background-color: rgb(237, 237, 237);*/
margin:50px auto;
padding: 0 65px;
font-family:The Girl Next Door;
text-align: justify;float: left;
}


.delCuentoRitaCulla {float: left;text-align: center;width: 35%}

.delCuentoTitular {width: 65%; float: left;padding: 70px 0;text-align: left}


.miquelFarre {margin:10px 40px 0 0px; float: left;}

.rataMama{margin-left: 20px; float: right;height: 140px; position: relative;top:-10px;left: 30px}

/*.rataTrabajadora{margin-right: -20px; float: left;height: 180px; position: relative;top:-10px;right: 50px}*/

.rataTrabajadora{
    margin-left: 0px; 
    float: right; 
    position: relative;
    top:-110px;
    right: -10px;
    height: 100px;}

.titularMujerHoy{width: 650px;
    padding: 20px 0 20px;
    text-align:justify;
}
        


.mujerHoy1
{
    width: 120px; 
    float: right;
    transform: rotate(-20deg);
    margin-bottom: 60px;
    position: relative;
    top: -20px;
    height: 150px
}
.mujerHoy2
{
    width: 200px; 
    float: right;
    margin-right: 20px;
    transform: rotate(20deg);
    margin: 0 10px 60px 50px;
    position: relative;
    top: -10px;
    height: 150px}


.rapatu {
    float: right;
    transform: rotate(-25deg);
    position: relative;
    top:-50px;
    padding-right: 120px;
    margin: 35px 0;
}

.desigs {
    float: right;
    transform: rotate(10deg);
    position: relative;
    z-index: 1;
    top:-10px;
    margin: 15px 0 ;
    
}

.ritaCuina {
    float: right;
    transform: rotate(-20deg);
    position: relative; 
    margin: 15px 0 40px;
    
}

.evaTia {
    float: right;
    transform: rotate(15deg);
    position: relative;
    top:-30px;
    padding-left: 100px;
    margin: 40px 0 60px;
}


.correo {
    float: right;
    transform: rotate(15deg);
    position: relative; 
    margin: 45px 120px 0 0;
    z-index: 1
}

.internet {
    float: right;
    transform: rotate(-20deg);
    position: relative; 
    margin: 30px 0;
    
}

.temps {
    float: right;
    transform: rotate(-10deg);
    position: relative; 
    margin: 40px 0 60px 150px;
    
}


.caganer {
 float: right;
    transform: rotate(15deg);
    position: relative; 
    margin: 35px 0;
    z-index: 1
}




.sello1 {
    float: right;
    transform: rotate(-5deg);
   
    margin: 20px 10px;
    
}

.sello2 {
    float: right;
    transform: rotate(20deg);
     
    margin: 30px 10px;
    
}

.sello3 {
    float: right;
    transform: rotate(-10deg);
    margin: 20px 10px 0 60px;
}


.drets {
    float: left;
    transform: rotate(-5deg);
    position:relative;
    left: -50px;
    margin: -5px 5px 0 40px;
}


.gegants {
position: relative;
    top:-60px;
float: right;
margin: 0 0 0px 30px;
height: 220px;
    
}

.premi2003
{
    width: 730px; 
    float: left;
    margin: 25px 0 70px ;
    
}

.premi {
    float: left;
    margin: 0 40px 0px 80px;
    position: relative;
    top:-10px;
    height: 180px;
    
    
}


.pintora {
  
    float: left;
    margin: 0 40px 60px 60px;
}


.panteres{
    float: right;
    width: 650px;
    margin: 10px 0;
}


.familia {
   margin: 0 auto;
    width: 600px;
    text-align: center  
}

.culla{
    width: 130px;
    position: relative;
    float: right;
    right: 30px
    
}

#firmaCulla path{fill:#1d1d1d;}












.llibres {
    margin:  100px auto 5px;
    text-align: center;
    float: left
    
}

#catalogo {
    margin:  0 auto 80px;
    text-align: center;
    height: auto;
    float: left;
    
}


#tapa {
    position:absolute;
    height: 100%;
    z-index: 2;
    width: 1200px;
    margin: 0 auto;
    background-color: rgba(169, 169, 169, 0.54);
    display: none;
}


.editoriales {
	width: 698px;
    height: 200px;
    float: left;
    border:1px solid rgb(196, 196, 196);
    margin: 10px;
}


.editorial {
    width: 218px;
    height: 200px;
    float: left;
    border:1px solid rgb(196, 196, 196);
    margin: 10px;
    cursor:pointer;
}


.clicaLibros {background-color: rgb(255, 0, 0);color: white;font-family:The Girl Next Door;letter-spacing: 1px;text-align: center;margin: 0 auto 6px;padding: 5px 0 0 0;border-radius: 0px; font-size: 20px;width: 1178px;
    border:1px solid rgb(196, 196, 196);
}

.clicaPinturas {background-color: rgb(33, 110, 186);color: white;font-family:The Girl Next Door;letter-spacing: 1px;text-align: center;margin: 0 auto 6px;padding: 5px 0 0 0;border-radius: 0px; font-size: 20px;width: 1178px;
    border:1px solid rgb(196, 196, 196);
}

/*.editorial:hover {cursor:pointer}*/



.pintures {
    margin:  100px auto 5px;
    text-align: center;float: left;
}

#catalogoPintures {
    margin:  0 auto 80px;
    text-align: center;
    height: auto;
    float: left;
}

.pinturasExpo {
    width: 378px;
    height: 378px;
    float: left;
    border:1px solid rgb(196, 196, 196);
    margin: 10px;
    background-repeat: no-repeat;background-position:center;
	cursor:pointer;
}


.pinturasExpo00 {background-image: url("/images/pinturas/expomini/00.jpg");background-size: 100%;}
.pinturasExpo01 {background-image: url("/images/pinturas/expomini/01.jpg");background-size: 100%;}
.pinturasExpo02 {background-image: url("/images/pinturas/expomini/02.jpg");background-size: 100%;}
.pinturasExpo03 {background-image: url("/images/pinturas/expomini/03.jpg");background-size: 100%;}
.pinturasExpo04 {background-image: url("/images/pinturas/expomini/04.jpg");background-size: 100%;}
.pinturasExpo05 {background-image: url("/images/pinturas/expomini/05.jpg");background-size: 100%;}
.pinturasExpo06 {background-image: url("/images/pinturas/expomini/06.jpg");background-size: 100%;}
.pinturasExpo07 {background-image: url("/images/pinturas/expomini/07.jpg");background-size: 100%;}
.pinturasExpo08 {background-image: url("/images/pinturas/expomini/08.jpg");background-size: 100%;}
.pinturasExpo09 {background-image: url("/images/pinturas/expomini/09.jpg");background-size: 100%;}
.pinturasExpo10 {background-image: url("/images/pinturas/expomini/10.jpg");background-size: 100%;}
.pinturasExpo11 {background-image: url("/images/pinturas/expomini/11.jpg");background-size: 100%;}
.pinturasExpo12 {background-image: url("/images/pinturas/expomini/12.jpg");background-size: 100%;}
.pinturasExpo13 {background-image: url("/images/pinturas/expomini/13.jpg");background-size: 100%;}
.pinturasExpo14 {background-image: url("/images/pinturas/expomini/14.jpg");background-size: 100%;}
.pinturasExpo15 {background-image: url("/images/pinturas/expomini/15.jpg");background-size: 100%;}
.pinturasExpo16 {background-image: url("/images/pinturas/expomini/16.jpg");background-size: 100%;}
.pinturasExpo17 {background-image: url("/images/pinturas/expomini/17.jpg");background-size: 100%;}
.pinturasExpo18 {background-image: url("/images/pinturas/expomini/18.jpg");background-size: 100%;}
.pinturasExpo19 {background-image: url("/images/pinturas/expomini/19.jpg");background-size: 100%;}
.pinturasExpo20 {background-image: url("/images/pinturas/expomini/20.jpg");background-size: 100%;}
.pinturasExpo21 {background-image: url("/images/pinturas/expomini/21.jpg");background-size: 100%;}
.pinturasExpo22 {background-image: url("/images/pinturas/expomini/22.jpg");background-size: 100%;}
.pinturasExpo23 {background-image: url("/images/pinturas/expomini/23.jpg");background-size: 100%;}
.pinturasExpo24 {background-image: url("/images/pinturas/expomini/24.jpg");background-size: 100%;}
.pinturasExpo25 {background-image: url("/images/pinturas/expomini/25.jpg");background-size: 100%;}
.pinturasExpo26 {background-image: url("/images/pinturas/expomini/26.jpg");background-size: 100%;}
.pinturasExpo27 {background-image: url("/images/pinturas/expomini/27.jpg");background-size: 100%;}
.pinturasExpo28 {background-image: url("/images/pinturas/expomini/28.jpg");background-size: 100%;}
.pinturasExpo29 {background-image: url("/images/pinturas/expomini/29.jpg");background-size: 100%;}



#overlay {
    height: 100%;
    width: 0%;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 1s;
/*    -webkit-transition: 10s;*/
    
    
}

#overlay a {text-decoration: none;}

.closebtn {
    position: absolute;
    top: 20px;
    right: 52px;
    font-size: 80px;
    color: #e3e3de;
    z-index: 5;
}


#overlay a:hover, #overlay a:focus {
    color: darkorange;
    text-decoration: none;
    
}


#paseFotos {
    text-align: center;
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.67); 
    margin: 0 auto;

}

#imagenPaseFotos {
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    background-image: url("/images/llibres/logos/edebe.png");background-size:auto 100%;background-repeat: no-repeat;background-position:center; 
}


#cajaTitol {
    width: 100%;
    margin: 0 auto;
    color: darkorange;
    text-align: center;
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto;
    position: relative;
    float: left;
    padding: 0 0 8px;
   
}

#cajaTitolInf {
    width: 100%;
    margin: 0 auto;
    color: darkorange;
    text-align: center;
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto;
    position: relative;
    float: left;
    padding: 0 0 8px;
}

#pausa {
    position: absolute;
    width: auto;
    height: auto;
    bottom:50px;right: 45px;  
    z-index: 10;

}

#pausa:hover {cursor:pointer}

/*#pausa:hover path{fill:darkorange;};*/

/*#botonPausa:hover path{fill:darkorange;} OTRA FORMA */

/*#colorPath:hover {fill:blue;};*/

#botonPausa {}

/*#botonPausa path:hover{fill:darkorange;} /*ACTUA SOBRE TODOS ID de SVG*/ 
#botonPausa path:nth-child(1){fill:#e3e3de;} /*ACTUA SOBRE EL Nº DE ORDEN ID de SVG*/
#botonPausa path:nth-child(2){fill:#e3e3de;} /*ACTUA SOBRE EL Nº DE ORDEN ID de SVG*/
#botonPausa path:nth-child(3){fill:#e3e3de;} /*ACTUA SOBRE EL Nº DE ORDEN ID de SVG*/

/*#botonPausa path:hover{fill:darkorange;} /*ACTUA SOBRE TODOS POR SEPARADO*/

/*#botonPausa path:nth-child(3):hover{fill:darkorange;} /*ACTUA SOBRE EL Nº DE ORDEN ID de SVG*/

/*#botonPausa path:hover{fill:darkorange;}*/

#avance {   
    position: absolute;
    width: auto;
    height: auto;
    right: 50px;  
    z-index: 10;
    display:none;
}

#avance:hover {cursor:pointer}

#retroceso {   
    position: absolute;
    width: auto;
    height: auto;
    left: 50px;  
    z-index: 10; 
    display:none;
}

#retroceso:hover {cursor:pointer}

/*#botonAvance #botonRetroceso path{fill:#0dff4e;} */

#retroceso path{fill:#e3e3de;}
#avance path{fill:#e3e3de;}




#cerrar {   
    position: fixed;
    top: 50px;
	right: 50px;
    z-index: 30;
    display:none;
	cursor: pointer;
}

#botonCerrar path{fill:#ffffff;} 


#infoDatos {position: fixed;
    z-index: 100;
    width: 20%;
    height: auto;
    top:10px;
    left: 50px;
    background-color: antiquewhite;
    text-align: center;
    padding: 10px;
    
}


#scrollMenu {
  position: fixed;
  top: 0;
  right: 10px;
  bottom: auto;
  width: auto;
  z-index: 100;
  display: none;
    
}


.subir {
    margin: 15px 0px;
    width: 20px;
     height: 20px;

     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;

     background: #cecece;
	cursor:pointer;
}





#ocell{
	
	position: fixed;
	top: 240px;
	width: 90px;
	height: 90px;
/*
	border-style:solid;
	border-width: 1px;
*/
	z-index: 110;
	right: -80px;
/*	background-image: url("/images/animaciones/ocell/1.png");*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90%;
	display: none;
	
}


#arana{
	position: fixed;
/*	top: -40px;*/
	width: 80px;
	height: 40px;

/*	border-style:solid;
	border-width: 1px;*/

	z-index: 105;
	right: 500px;
	background-image: url("/images/animaciones/arana/1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100;
	display: none;
	
}



#hiloArana {
position: fixed;
/*	top: -60px;*/
	width: 40px;
	height: 20px;
	right: 500px;

	border-left: 1px solid black;

	z-index: 105;
	display: none;
	
}



#fotoGaleria {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: rgba(145, 200, 229, 0.9);
	background-repeat: no-repeat;
	background-position:center;
    transition-duration:1s;
	
}