html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0;padding: 0;border: 0;font-size: 100%;font-weight: normal;vertical-align: baseline;background: transparent;}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
html {box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
img,object,embed {max-width: 100%;}
html {overflow-y: scroll;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
small {font-size: 85%;}
strong {font-weight: bold;}
b {font-weight: bold;}
td, td img {vertical-align: top;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable,label,input[type=button],input[type=submit],input[type=file],button {cursor: pointer;}
button, input, select, textarea {margin: 0;}
button, input[type=button] {width: auto; overflow: visible;}
.ie7 img {-ms-interpolation-mode: bicubic;}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/*=====================================================================*/

h1#logo {
    top:54px;
    left:20px;
    font-size:30px;
    font-weight:normal;
    color:#fff;
	height:123px;
}

html, body {
   outline: 0;
   font-family:'Asap', calibri;
   font-size:13px;
   position:relative;
   
}

body {
	margin:0;
	padding:0;
	width:100%;
	outline: 0;
	background-color:#411A53;
	background-image: url(../images/fondo_fichas.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:top;
}

html {
	padding:0;
	margin:0;
	outline: 0;
}

img {display:block; border:none;}

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

.tipodegrade {
box-shadow: 0px 0px 5px 2px rgba(100, 100, 100, 0.2);
-webkit-box-shadow: 0px 0px 5px 2px rgba(100, 100, 100, 0.2);
-moz-box-shadow: 0px 0px 5px 2px rgba(100, 100, 100, 0.2);
}



/******************/
/*  HEADER MENU   */
/******************/

#header_resize {
   background-color:#E6E6E6;
   box-shadow: 5px 5px 10px 10px rgba(100, 100, 100, 0.2);
   -webkit-box-shadow: 0px 0px 5px 2px rgba(100, 100, 100, 0.2);
   width:100%;
   height:30px;
   background-image: url('../images/fondoheader.jpg');
   background-size:auto 100%;
   position:relative;
   z-index:100;}
#cabecera {width:960px; margin:0 auto;}
.logo_bibliote {height:30px; float:left; color:#FFF; padding-top:5px; text-align:left; padding-left:0px;}
.buscador {float:right; height:30px; text-align:left; margin:3px 0px 0 0;}
.buscador #buscar {width:200px; margin:0; padding:0 0 0 5px; border-style:solid; border-color:#FFF; height:23px; color:#484848; font-size:13px; display: block; float: left; font-size:12px;}
.buscador #boton {width:32px; height:23px; padding:0; background:url('../images/lookup.png'); background-color: transparent;color: transparent; border: none; outline: none; cursor: pointer; margin-left:-24px; display: block; float: left;}
.logo {margin:-8px auto 0 auto; float:none; width:300px;}
.logo img {width:300px; border:none;}
.tarjetas {width:120px; position:absolute; top:10px; right:0px; height:51px; overflow:hidden; box-shadow:1px 1px 0px #fbf302;}
.tarjetas img {margin-top:-5px;}
.tarjetas:hover img {filter:brightness(1.2);}
  



#contenido {width:960px;text-align:left; margin:0 auto;}

#fichas_home {width:100%; background:#332f2a; text-align:center;}

#footer {
   height: 35px;
   text-align:center;
   background-color:#000;
   color:#9E9EA2;
   font-size:12px;
   line-height:35px;
}

#corte {clear:both; padding-top:32px;}


#menu {
	padding:0;
	margin:0 auto;
	width:610%;
	background-color:#f2f2f2;
	height:100px;
	list-style:none;
}
#menu div:hover {background-color:#0397DD;}

#menu div.activado {background-color:#0397DD;}

#menu div a {
	color:#000;
	font:normal 14px calibri, Helvetica, sans-serif;
	text-decoration:none;
	text-transform:uppercase;

}

#menu div a.activado {
	color:#FFF;
	font:normal 14px calibri, Helvetica, sans-serif;
	text-decoration:none;
	text-transform:uppercase;
}


#menu a:hover {
background-image: url(../imagenes/menu_hover.jpg);
height: 54px;
width: 132px;
list-style-type: none;
cursor:hand;
display:block;
}

.headert_text_resize {
	width:960px;
	padding:5px 0 0 0;
	margin:0 auto;
}
.headert_text_resize img {
	float:left;
	margin:0;
	padding:30px 0 0 20px;
}
.headert_text_resize .textarea {
	width:720px;
	margin:0;
	padding:20px 0 0 5px;
	float:right;
	background:top no-repeat;
}
.headert_text_resize .textarea h2 {
	border-bottom:1px dashed #ccc;
	font:normal 26px calibri, Helvetica, sans-serif;
	color:#626262;
	padding:10px 0;
	margin:0;
}
.headert_text_resize .textarea h2 span {
	color:#1d9ad6;
}
.headert_text_resize .textarea a {
	font:bold 16px calibri, Helvetica, sans-serif;
	color:#1d9ad6;
	text-decoration:none;
}


#cssmenu {
  width: 100%;
  float:none;
  margin:0 auto; 
  padding-bottom:30px;
}
#cssmenu > ul {
	display:flex;
	justify-content:space-around;
}
#cssmenu li {
  margin: 0;
  padding: 0;
}
#cssmenu a {
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu a {
  text-decoration: none;
}
#cssmenu > ul > li {
  float: left;
  /*margin-left: 15px;*/
  position: relative;
}
#cssmenu > ul > li > a {
  color: #FFF;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  border-right:none;
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
  text-shadow: black 0.1em 0.1em 0.2em;

}
#cssmenu li .sep {
	width:2px; 
	background:white; 
	height:15px;
	box-shadow: black 0.5px 0.5px 2px;
}
#cssmenu > ul > li > a:hover {
  color:#FEDA00;
}
#cssmenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: #000;
  text-align: center;
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -85px;
  width: 170px;
  -webkit-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  border-style:solid;
  border-color:#FFF;
  border-width:2px;
  z-index:100;
}
#cssmenu > ul > li:hover > ul {
  opacity: 1;
  top: 30px;
  visibility: visible;
}
#cssmenu > ul > li > ul:before {
  content: '';
  display: block;
  border-color: transparent transparent #fafafa transparent;
  border-style: solid;
  border-width: 10px;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}
#cssmenu > ul ul > li {
  position: relative;
}
#cssmenu ul ul a {
  color: #fff;
  /*font-family: calibri, 'Lucida Grande';*/
  font-size: 13px;
  background-color: #000;
  display: block;
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;

}
#cssmenu ul ul a:hover {
  color: #FEDA00;
}
#cssmenu ul ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  width: 180px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);

}
#cssmenu ul ul > li:hover > ul {
  opacity: 1;
  left: 190px;
  visibility: visible;
}
#cssmenu ul ul a:hover {
  color: #FEDA00;
}

/*segundo menu */


#cssmenu2 ul {
  margin: 0;
  padding: 0;
}
#cssmenu2 li {
  margin: 0;
  padding: 0;
}
#cssmenu2 a {
  margin: 0;
  padding: 0;
}
#cssmenu2 ul {
  list-style: none;
}
#cssmenu2 a {
  text-decoration: none;
}
#cssmenu2 {
  height: 30px;
  width: 960px;
  align:center;
}
#cssmenu2 > ul > li {
  float: left;
  /*margin-left: 15px;*/
  position: relative;
 width:50%;
}

#cssmenu2 > ul > li > a {
  color: #FFF;
  /*font-family: Calibri,Verdana, 'Lucida Grande';*/
  font-size: 14px;
  line-height: 30px;
  /*padding: 15px 20px;*/
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
  text-shadow: black 0.1em 0.1em 0.2em;


}
#cssmenu2 > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu2 > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  padding: 10px 0 10px 0;
  background-color: #000;
  text-align: center;
  position: absolute;
  top: 55px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  z-index:100;
  border:2px solid white;;
}
#cssmenu2 > ul > li:hover > ul {
  opacity: 1;
  top: 35px;
  visibility: visible;
}
#cssmenu2 > ul > li > ul:before {
  content: '';
  display: block;
  border-color: transparent transparent #fafafa transparent;
  border-style: solid;
  border-width: 10px;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}
#cssmenu2 > ul ul > li {
  position: relative;
}
#cssmenu2 ul ul a {
  color: #fff;
  /*font-family: calibri, 'Lucida Grande';*/
  font-size: 13px;
  background-color: #000;

  display: block;
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;

}
#cssmenu2 ul ul a:hover {
  color: #FEDA00;
}
#cssmenu2 ul ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  width: 180px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);

}
#cssmenu2 ul ul > li:hover > ul {
  opacity: 1;
  left: 190px;
  visibility: visible;
}
#cssmenu2 ul ul a:hover {
  color: #FEDA00;
}


/* segundo carrusel */

#carousel {
    width:700px;
    height: 310px;
    margin:0 auto;
  }
  #carousel img {
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */
  }

/* segundo carrusel */

#segundocarrulsel {
	background-image:url('../images/fondo_carrousel.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-position:top center;
}


#raya {
width:85%;
color:#7B7C7D;
background-color:#7B7C7D;
height:1px;
margin:10px auto;
border-style:none;
}

#navlist {width:100%; background-image:url("../images/fondoheader.jpg"); background-size:auto 100%; height:30px;}
#navlist ul {list-style:none; margin:0;	padding:0; width:100%;}
#navlist ul li {display:inline; background-image:url("../images/fondoheader.jpg"); background-size:auto 100%;}
#navlist ul li a{
    display:block;
    padding:7px 0;
    margin-left:0;
    background:inherit;
    color:#260041;
    text-transform:uppercase;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	width:50%;
	float:left;
}
#navlist ul li a:hover {color:#260041; background:#F9A61C;}
#navlist ul li .active {color:#260041; background:#F9A61C;}

.breadcrumbs {line-height:30px; width:100%; background-color:#222021; color:#FFF; padding:0 3%;}
.breadcrumbs span {padding:0 10px;}

#content {
 width:100%;
 height:100%;
 background-color:#D5DEE7;
 overflow:hidden;
 /*overflow:auto;*/
}

#titulo {
 color:#2F0B3B;
 font-weight:bold;

}

#rayablanca {
width:90%;
color:#FFF;
background-color:#FFF;
height:1px;
border-style:none;
}

#panelizq {
width:75%;
float:left;
height:100%;
display: flex;
flex-wrap: wrap;
 /*background-color:#D5DEE7*/
}
#panelizq.con_notas {padding-right:3%; display:block;}
#panelizq.sin_notas {width:100%;  display:block;}

#sepv {
width:20px;
float:left;
height:40px;
 /*background-color:#D5DEE7*/
}

#panelder {
width:25%;
float:left;
height:100%;
background-color:#F1F2F6;
}

.infografia {
margin-right:4%;
margin-bottom:20px;
width:46%;
height:335px;
box-shadow: 3px 3px 6px #999;
-webkit-box-shadow: 3px 3px 6px #777;
}

#imageninfo {
max-width:100%;
height:auto;
position:relative;
}

.descinfo {
   padding:20px; width:100%;
}

#tituloinfog{
color:#4D5055;
font-weight:bold;
text-transform:uppercase;
border-left:6px solid #f9a61c;
line-height:20px;
margin-bottom:5px;
padding-left: 5px;
}

#textoinfog{
color:#4D5055;
font-style:italic;
font-size:13px;

}

#titulonotas {
color:#f9a61c;
font-weight:bold;
}

#titulorelacionadas {
color:#f9a61c;
font-weight:bold;
font-size:15px;
}

.titulonota {
color:#4D5055;
font-weight:bold;
border-left:6px solid #f9a61c;
line-height:1;
margin-bottom:5px;
padding: 4px 0 4px 5px;
}

#textonota{
color:#4D5055;
font-style:italic;
font-size:13px;
margin-bottom:5px;
}

#vermasnotas{
color:#4D5055;
font-weight:bold;
font-size:13px;
text-align:right;
}

#vermasnotas:hover {color:#f9a61c;}

#rayanotas {
width:90%;
color:#CED2D5;
background-color:#CED2D5;
height:1px;
border-style:none;
margin:15px auto;
}

#seph {
width:100%;
height:15px;
}


/*========= VIDEOS ==========*/
.play_button {position:absolute; top:50%; left:50%; transform: translate(-32px,-32px);}
#arribavideo {width:100%;}
#abajovideo {width:100%;}
#ventanavideo {width:60%; float:left; padding-right:4%;}
   #framevideo {width:100%; height:360px;}
#descripcionvideo {width:40%; float:left;}
   #titulovideo {color:#4D5055; font-weight:bold; text-transform:uppercase; border-left:6px solid #f9a61c; line-height:20px; margin-bottom:5px; padding-left: 5px;}
   #textovideo {color:#4D5055;font-size:13px;}

#rayanegra {width:90%; margin:15px auto; color:#808080;background-color:#808080;height:1px;border-style:none; box-shadow: none;}



.lista {width:100%; margin-bottom:15px;}

.titulolistaanimales {
color:#807772;
font-weight:bold;
display:block;
width:100%;
border-bottom:2px solid #807772;
padding-bottom:4px;
font-size:16px;
}

.listaanimales {color:#807772; font-weight:bold; text-decoration:none; text-align:center; text-transform:uppercase; display:block;}
.listaanimales:hover {color:#F69F2B;}
.listaanimales img {margin:0 auto 4px auto;}

/*========= FICHAS ==========*/
#datos {width:100%; padding:15px 0 15px 0;}
#datos p {padding-bottom:10px;}
#datos p#tituloinfog {padding-bottom:0; margin-bottom:15px;}
#datos #epigrafe {width:100%; color:#4D5055; font-size:12px; padding:4px 0 0 0;}
#datos #sabiasque {background-color:#f9a61c; padding:10px;}

.texto_ficha {color:#4D5055;font-size:13px;}

.ficha-infog {clear:both; margin-bottom:30px;}
.ficha-infog a {display:inline-block;  text-decoration:none;}
.ficha-infog a p {font-weight:bold; color:#4D5055; font-size:14px; margin-bottom:5px;}
.ficha-infog a img {display:block;}


.tabla {font-size:13px;}
.tabla tr td {width:20%; padding:5px; height:22px;}

.tablaflex {font-size:13px; display:flex; flex-direction: row; flex-wrap: wrap;}
.tablaflex div {width:20%; padding:6px 5px; height:auto;}


.menu_movil_sombra {background:rgba(0,0,0,0.5); width:100%; height: 100%; position: fixed; filter: blur(1.2); top:0; left:0;}
.menu_movil_sombra.closed {display:none;}

.menu_movil_boton {position:absolute; top:10px; left:2.5%; width:32px; height:32px; background:url('../images/menu_mobile_1.png') no-repeat; background-size: 100% 100%; cursor:pointer; z-index:9999; display: none;}

.menu_movil { position:absolute; left:0; top:0; transition:all 0.3s ease; background:#794e83; padding:48px 10px 0 0; z-index: 999; display: none;}
.menu_movil.closed {transform:translateX(-100%);}

.menu_movil ul {padding:5px 0 5px 15px;}
.menu_movil ul li {padding:0 0 5px 0;}
.menu_movil ul li a {color:#feed00; text-decoration: none;}


.titulo_slider {position:absolute; top:0; left:0;}








/*=================================*/
/*            RESPONSIVE           */
/*=================================*/

@media (max-width:1000px) {

	/*CONTENEDOR DE 760px*/

	#cabecera {width:95%; margin:0 2.5%;}
	.buscador {margin-right:0px;}

	#contenido {width:760px;}

	#cssmenu {}
	#cssmenu > ul > li > a {}
	#cssmenu > ul > li:hover > ul {}

	#cssmenu2 {width:100%;}

	.tablaflex div {width:25%;}

	.infografia {height:325px;}
	.infografia .descinfo {padding:15px;}

	#ventanavideo {width:100%; padding-right:0; padding-bottom:15px;}
	#framevideo {width:100%; height:390px;}
	#descripcionvideo {width:100%;}

}


@media (max-width:768px) {

   /*CONTENEDOR DE 100%*/

   .logo_bibliote { padding-left:0px;}
   
   .tarjetas {right:20px;}

   #contenido {width:100%;}
/*
   #cssmenu > ul > li {width:16.666%; text-align: center; border-right:2px solid white;}
   #cssmenu > ul > li:last-child {border:none;}
   #cssmenu > ul > li > a {padding:0; border:none; font-size:12px;}
   #cssmenu > ul > li > ul {width:100px; margin-left:-50px; padding:10px 0;}*/
   #raya {margin:5px auto;}


   #carousel {width:100%; overflow: hidden;}
   #carousel img {width:250px}

   .tablaflex div {width:33.3333%;}

   #panelder {width:100%; margin:0 auto 30px auto; max-width:240px; float:none; }
   #panelizq {width:100%; float:none;}
   #panelizq.con_notas {padding-right:0;}

   #framevideo {height:320px;}

}


@media (max-width:600px) {

   .logo_bibliote {width:25px; overflow:hidden;}
   .logo_bibliote img {width:219px; max-width: none;}
   
   .tarjetas {width:80px; right:2.5%; height:33px;}
   
   .logo {width:250px;}

   .menu_movil_boton {display:block;}
   .menu_movil {display:block;}
   #cssmenu {display:none;}

   .tablaflex div {width:50%;}

   #footer {font-size:10px;}

   .infografia {/*width:300px; margin:0 auto 20px auto; float:none;*/ height:auto; }
   .infografia #textoinfog {display:none;}
   .infografia #tituloinfog {margin-bottom:0; line-height:16px;}

   #framevideo {height:260px;}

}