#biblioteca {
float: left;
width: 80%;
padding: 4% 10%;
background: #fff;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr)
}

#biblioteca .item {
width: 100%;
float: left;
margin: 0%;
padding: 0%;
background: #edefee
}

#biblioteca .item:hover {
box-shadow: 0 0 10px rgba(0,0,0,.2)
}

#biblioteca .item a {
float: left;
display: block;
width: 90%;
color: #525252;
text-decoration: none;
padding: 5%;
}

#biblioteca .item a img {
width: 100%
}

#biblioteca .item a .foto {
float: left;
width: 100%;
margin: 0%
}

#biblioteca .item a .foto img {
margin: 5% 41% 2%;
width: 48px;
align-items: center
}

#biblioteca .item a .texto {
float: left;
width: 94%;
padding: 0% 3% 4%;
margin-bottom: 2%
}

#biblioteca .item a .texto h2 {
text-decoration: none;
font-weight: normal;
margin: 0% 2%;
text-align: center;
align-items: center;
font-size: 1em
}

#biblioteca .item a .texto span {
position: absolute;
margin-left: 150px;
margin-top: -55px;
background: #078930;
color: #ffffff;
padding: 1px 0px;
border-radius: 20px;
width: 30px;
text-align: center
}

#biblioteca-section {
float: left;
width: 80%;
padding: 0% 10%
}

#biblioteca-section .categories {
float: left;
width: 24%;
padding: 2% 0%;
margin: 0%;
position: -webkit-sticky;
position: sticky;
top: 0
}

#biblioteca-section .categories div.title {
display: none ;
}

#biblioteca-section .categories .categorie {
float: left;
width: 100%;
padding: 0%;
margin: 0%;
background: #f7f7f7;
font-size: 0.9em
}

#biblioteca-section .categories .active {
background: #f8e9b3 !important;
}

#biblioteca-section .categories .categorie:hover {
background: #eef5f0 !important;
}

#biblioteca-section .categories .categorie:nth-of-type(2n) {
background: #fff
}

#biblioteca-section .categories .categorie a {
float: left;
display: block;
width: 90%;
color: #525252;
text-decoration: none;
padding: 0px 5%;
}

#biblioteca-section .categories .categorie a .foto {
float: left;
width: 14%;
padding: 3px 1%;
margin: 0%;
text-align: center;
display: none
}

#biblioteca-section .categories .categorie a .foto img {
height: auto;
width: 55%;
margin: 0%;
}

#biblioteca-section .categories .categorie a .texto {
float: left;
width: 84%;
padding: 0%;
margin: 0%;
}

#biblioteca-section .categories .categorie a .texto h3 {
float: left;
width: 80%;
overflow: hidden;
padding: 10px 0%;
margin: 0%;
font-size: 1.1em;
font-weight: normal
}

#biblioteca-section .categories .categorie a .texto span {
float: left;
width: 20%;
text-align: right;
padding: 10px 0%;
color: #8899a6
}

#biblioteca-section .ads {
float: left;
width: 72%;
margin-left: 2%;
padding: 0%;
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(3, 1fr)
}

#biblioteca-section .ads .articulo {
float: left;
width: 98%;
padding: 1%;
margin: 0%;
height: auto;
background: #f7f7f7
}

#biblioteca-section .ads .articulo:hover {
background: #eef5f0 !important;
}

#biblioteca-section .ads .articulo:nth-of-type(2n) {
background: #fff
}

#biblioteca-section .ads .articulo h2 {
float: left;
width: 92%;
overflow: hidden;
padding: 0% 4%;
margin: 2% 0% 1%;
font-size: 1.1em;
font-weight: bold
}

#biblioteca-section .ads .articulo h2 a {
color: #7c7b7b;
text-decoration: none;
display: block
}

#biblioteca-section .ads .articulo h2 a:hover {
text-decoration: underline
}

#biblioteca-section .ads .articulo .direccion {
padding: 10px 5%;
float: left;
width: 90%;
margin: 0%;
font-size: 0.8em;
/* background: url("../img/iconAddress.png") 9% center no-repeat; */
background-size: 5%
}

#biblioteca-section .ads .articulo h3 {
padding: 5px 2%;
float: left;
width: 90%;
margin: 5px 3%;
font-size: 0.8em;
text-align: center;
color: #fff !important;
background: #078930;
border-radius: 5px;
line-height: 12px
}

#biblioteca-section .ads .articulo .foto {
float: left;
max-height: 360px;
overflow: hidden;
text-align: center;
border:none
}

#biblioteca-section .ads .articulo .foto a {
display: block
}

#biblioteca-section .ads .articulo .foto a img {
height: auto;
width: auto;
margin: 0%;
max-height: 180px
}

#biblioteca-section .ads .articulo p {
float: left;
width: 98%;
margin: 0%;
padding: 1%
}

#biblioteca-section .ads .articulo .fecha {
color: #ffa800
}

#biblioteca-section .ads .articulo .descripcion {
margin: 0% 5%;
float: left;
width: 90%
}

#biblioteca-section .ads .articulo:nth-child(1) .descripcion {
float: left;
width: 40%;
overflow: hidden
}

#biblioteca-section h4 {
float: left;
width: 100%;
text-align: center;
margin: 0%;
padding: 1% 0%;
background: #258b23
}

#biblioteca-section h4 a {
text-decoration: none;
color: #fff
}

#biblioteca-section .publicar {
background: #edefee;
padding: 2% 10%;
width: 80%;
text-align: center;
float: left;
}

#biblioteca-section .publicar span {
float: left;
width: 100%;
margin-top: 10px
}

#biblioteca-section .publicar a {
background: #da121a;
color: #fff;
padding: 1% 3%;
text-decoration: none;
border-radius: 8px;
margin-left: 10px;
}

#biblioteca-section .publicar a:hover {
background: #258b23;
}

.content-biblioteca {
float: left;
width: 97%;
padding: 2% 0%;
margin-left: 3%
}

.content-biblioteca img {
width: 100%;
float: left;
margin-top: 1%
}

.content-biblioteca p {
width: 100%;
float: left;
padding: 2% 0% 0%;
margin: 0%
}

.content-biblioteca h2 {
color: #da121a;
margin: 0.83em 0px 10px !important;
font-size: 1.5em;
float: left;
width: 100%
}

.content-biblioteca .seccion {
color: #da121a
}

.content-biblioteca .fecha {
color: #ffa800
}

.content-biblioteca h2 {
padding: 1% 0%;
float: left;
width: 100%;
margin: 2% 0% 1%;
font-size: 1.4em;
background: url(../img/bgH2.png) no-repeat center right;
color: #258b23;
border-bottom: 1px dotted #258b23
}

.content-biblioteca h3 {
padding: 1% 0%;
float: left;
width: 100%;
margin: 2% 0% 1%;
font-size: 1.2em;
background: url(../img/bgH3.png) no-repeat center right;
color: #da121a;
border-bottom: 1px dotted #da121a
}

.content-biblioteca #mapaempresa {
width: 100%;
height: 300px;
float: left
}

.content-biblioteca #redes, #left .redes {
float: left;
width: 100%;
margin-top: 2%
}

.content-biblioteca #redes #share, #left .redes #share {
text-align: center;
padding: 10px 0px;
float: left;
width: 100%;
background: #f8f8f8;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc
}

#item-biblioteca {
float: left;
width: 72%;
padding: 0% 2%;
}

#item-biblioteca .foto {
float: left;
width: 30%;
margin: 0% 2% 2%;
overflow: hidden;
text-align: center
}

#item-biblioteca .foto a {
display: block
}

#item-biblioteca .foto a img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto
}

#item-biblioteca .contenido {
width: 60%;
float: left
}

#item-biblioteca .contenido p {
width: 100%;
float: left;
margin: 0%;
padding: 2% 0%;
font-size: 1em;
}

#item-biblioteca h2 {
padding: 0%;
float: left;
width: 100%;
margin: 0% 0% 2%;
font-size: 1.2em;
background: url(../img/bgH2.png) no-repeat center right;
color: #258b23;
}

#item-biblioteca h3 {
padding: 1% 0%;
float: left;
width: 100%;
margin: 2% 0% 1%;
font-size: 1em;
background: url(../img/bgH3.png) no-repeat center right;
color: #da121a;
border-top: 1px dotted #da121a;
border-bottom: 1px dotted #da121a
}

#item-biblioteca h4 { width: 40%; margin: 2% 20%; padding: 6px 10%; border-radius: 10px; color: #fff }

#item-biblioteca #fotos {
float: left;
width: 96%;
margin: 2% 0% 1%;
padding: 2%;
background: #f7f7f7
}

#item-biblioteca #fotos h2 {
width: 96%;
padding: 1% 0%;
margin: 0% 2% 1%;
background: url(../img/bgH3.png) no-repeat center right
}

#item-biblioteca #fotos #galeria {
float: left;
width: 96%;
margin: 1% 2% 2%;
padding: 0%;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(3, 1fr)
}

#item-biblioteca #fotos #galeria a {
float: left;
width: 100%;
margin: 0%;
display: block
}

#item-biblioteca #fotos #galeria a img {
width: 100%
}

#item-biblioteca #redes #share {
text-align: center;
padding: 10px 0;
float: left;
width: 100%;
border-top: 1px dotted #ccc
}

#item-biblioteca #tags {
float: left;
width: 85%;
padding: 10px 5% 10px 10%;
background: #f7f7f7 url(../img/icons/iconTags.png) no-repeat 5% center;
background-size: 3%;
border-top: 1px dotted #ccc
}

#item-biblioteca #tags a {
color: #da121a;
text-decoration: none;
background: #f7f7f7;
border-radius: 10px;
padding: 5px 10px;
margin: 0px 5px
}

.info {
float: left;
width: 100%;
margin: 10px 0%;
padding: 0%;
background: #fff;
border-radius: 5px;
}

.info h2 {
padding: 1% 5% 1% 0%;
float: left;
width: 85%;
margin: 2% 5% 1%;
font-size: 1.4em;
background: url(../img/bgH2.png) no-repeat right center;
color: #258b23;
border-bottom: 1px dotted #258b23
}

.info .contacto {
float: left;
width: 98%;
margin: 0% 1% 1%;
padding: 10px 0%;
border: none !important
}

.info .contacto #data {
float: left;
width: 100%;
margin: 0%
}

.info .contacto #data a {
color: #da121a
}

.info .contacto #data .phone {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconPhone.png") 4% center no-repeat;
background-size: 7%;
font-size: 1em
}

.info .contacto #data .mobile {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconMobile.png") 4% center no-repeat;
font-size: 1em;
background-size: 7%
}

.info .contacto #data .whatsapp {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconWhatsApp.png") 4% center no-repeat;
font-size: 1em;
background-size: 7%
}

.info .contacto #data .web {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconWeb.png") 4% center no-repeat;
background-size: 7%;
font-size: 1em
}

.info .contacto #data .facebook {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconFacebook.png") 4% center no-repeat;
background-size: 7%;
font-size: 1em
}

.info .contacto #data .instagram {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconInstagram.png") 4% center no-repeat;
background-size: 7%;
font-size: 1em
}

.info .contacto #data .email {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconEmail.png") 4% center no-repeat;
background-size: 7%;
font-size: 1em
}

.info .contacto #data .address {
float: left;
width: 81%;
padding: 2% 7% 2% 12%;
background: url("../img/iconAddress.png") 4% center no-repeat;
background-size: 7%;
font-size: 1em
}

#mapaempresa {
float: left;
width: 97.5%;
margin: 0% 0% 1%;
padding: 1%;
border: 2px dashed #ccc
}

#item-biblioteca .relacionados {
float: left;
width: 100%;
margin: 10px 0%;
padding: 0% 0% 1%;
border-radius: 5px;
}

#item-biblioteca .relacionados h2 {
padding: 1% 2%;
float: left;
width: 96%;
margin: 2% 0% 1%;
font-size: 1.4em;
background: url(../img/bgH2.png) no-repeat 98% center;
color: #258b23;
border-bottom: 1px dotted #258b23
}

#item-biblioteca .relacionados ul {
float: left;
width: 100%;
padding: 0%;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr)
}

#item-biblioteca .relacionados ul .item {
width: 100%;
float: left;
margin: 0%;
padding: 0%;
background: #fff;
list-style: none;
}

#item-biblioteca .relacionados ul .item:hover {
box-shadow: 0 0 10px rgba(0,0,0,.2)
}

#item-biblioteca .relacionados ul .item a {
float: left;
display: block;
width: 100%;
color: #525252;
text-decoration: none;
padding: 0%;
}

#item-biblioteca .relacionados ul .item a .foto {
float: left;
width: 96%;
margin: 2% 2% 0%
}

#item-biblioteca .relacionados ul .item a .foto img {
margin: 0%;
width: 100%;
align-items: center
}

#item-biblioteca .relacionados ul .item a .texto {
float: left;
width: 96%;
padding: 0% 2%
}

#item-biblioteca .relacionados ul .item a .texto h3 {
text-decoration: none;
font-weight: normal;
margin: 2% 0% 1% !important;
text-align: center;
align-items: center;
font-size: 0.9em !important;
background: none !important;
padding: 3% 0% !important;
line-height: 18px;
height: 36px;
justify-content: center;
display: flex;
}

#item-biblioteca .relacionados ul .item a .texto p {
float: left;
margin: 0% 0% 4%;
width: 100%;
text-align: center
}

@media only screen and (max-width: 959px) {
#biblioteca {
float: left;
width: 100%;
padding: 2% 0%;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr)
}

#biblioteca .item a .foto img {
margin: 5% 37% 2%
}

#biblioteca .item a .texto span {
margin-left: 90px
}

#biblioteca .item a .texto h2 {
font-size: 0.9em;
}

#biblioteca-section .categories {
width: 100%;
position: relative;
}

#biblioteca-section .categories div.title {
display: block;
color: #000;
padding: 2% 5% 2% 15%;
width: 80%;
border-radius: 10px 10px 0px 0px;
}

#biblioteca-section .categories div.title {
background: #f8c747 url(../img/arrow-more-select.png?v=2021) no-repeat 4% center
}

#biblioteca-section .categories div.arrow-less {
background: #f8c747 url(../img/arrow-less-select.png?v=2021) no-repeat 4% center
}

#biblioteca-section .categories .toggle {
display: none;
}

#biblioteca-section .ads {
width: 100%;
margin: 2% 0% 0%;
}

#biblioteca-section .ads .articulo .foto {
width: 29%;
}

#biblioteca-section .ads .articulo h2 {
width: 62%;
}

#biblioteca-section .ads .articulo .direccion {
width: 62%;
padding: 0px 0% 12px 8%;
margin: 0%;
background: url(../img/iconAddress.png) 5% 25% no-repeat;
background-size: 5%;
}

#biblioteca-section .ads .articulo h3 {
display: none;
}

#item-biblioteca {
width: 100%;
padding: 0%;
grid-template-columns: repeat(1, 1fr)
}

#item-biblioteca .relacionados ul {
grid-template-columns: repeat(1, 1fr)
}
}