#actividad{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:  flex-start;
  background: #EEEDEB;
}
#actividad > div:first-child{
  width: calc(50% - 40px);
  padding: 10px 30px;
}
#actividad img{
  width: 100%;
}
#actividad > div:last-child{
  margin-left: 10px;
  width: calc(35% - 50px);
  padding: 10px 20px;
}
#calendario{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.visor-calendario{
  width: 90%;
  **position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border: 0.5px solid #eee;
  background: white;
}
.visor-calendario .calendario{
  width: 45%;
  max-width: 550px;
}
.visor-calendario .calendario > div{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.visor-calendario .calendario > div > div{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 15px 15px 0 15px;
  text-transform: uppercase;
  }
.visor-calendario .calendario > div > div span{
  display: flex;
  align-items: center;
  color: var(--c-enlace);
  font-weight: 100;
  font-size: 0.8em;
  padding: 3px 7px;
  border: 1px solid #F4F4F4;
  border-radius: 3px;
  cursor: pointer;
}
.visor-calendario .calendario > div > div span:hover{
  background: #eee;
}
.visor-calendario .calendario > div > div h3{
  position: relative;
  top: -0.7em;
  text-align: center;
  width: 100%;
  padding-bottom: 1.3em;
}
.visor-calendario .calendario ol{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 0.5px solid #eee;
}
.visor-calendario .calendario ol li{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.5px solid #D6DBDF ;
  height: 80px;
  font-size: 0.8em;
  font-weight: bold;
}
.visor-calendario .calendario ol .i-punto:before{
  position: absolute;
  font-size: 3em;
  padding-top: 0.7em;
  color: var(--c-enlace);
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: white;
}
.visor-calendario .calendario .i-izquierda, .i-derecha{
  font-size: 1.5em;
}
.visor-calendario .calendario ol .dia-sel{
  background: var(--c-enlace);
}
.visor-calendario .calendario ol .dia-m:hover{
  background: #D5DBDB;
}
.visor-calendario .calendario .nom-dia{
  background: #eee;
  font-weight: bold;
}
.visor-calendario .calendario .dia_inactivo{
  color: #CCD1D1;
}
/* Eventos */
.visor-calendario .eventos{
  width: 55%;
  padding: 50px;
}
.visor-calendario .eventos .cont-eventos{
  width: 100%;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 30px;
}
.visor-calendario .eventos .cont-eventos h2{
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding: 10px;
  font-size: 0.7em;
  color: #545454;
}
.visor-calendario .eventos .cont-eventos .dia-evento{
padding: 15px 10px;
border: 0.5px solid orange;
border-radius: 3px;
}
.tarjeta{
  margin: 40px 0px;
  padding: 20px;
  background: white;
  border-radius: 3px;
  width: 100%;
}
/* .tarjeta > div > *{
  padding: 15px 20px;
  text-align: center;
} */
.min-tarjeta{
  margin: 15px 15px;
  padding: 10px 5px;
  background: #F7F7F7;
  color: #626262;
  display: flex;
  flex-direction: row;
}
.tarjeta .min-tarjeta div h4{
  display: flex;
  flex-direction: column;
  text-align: left;
  margin: 10px;
}
.tarjeta .min-tarjeta > div > h4, p{
  padding-left: 10px;
}
/* .min-tarjeta  > div{
  margin: 0px 5px;
} */

.marco{
  margin: 15px;
  padding: 15px;
  border: 0.5px solid #F7F7F7;
  display: flex;
  flex-direction: row;
}
.marco > div{
  margin: 3px 7px;
}
.l-division{
  width: 100%;
  /* border: 1px solid #EFEFEF; */
  border: 1px solid   #d6dbdf;
  margin: 20px 0px;
}
.visor-calendario .eventos .cont-eventos .listado-eventos{
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  padding: 10px;
}
.visor-calendario .eventos .cont-eventos .listado-eventos .fila-evento {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-bottom: 10px;
}
.visor-calendario .eventos .cont-eventos .listado-eventos .fila-evento div {
  display: flex;
  flex-direction: column;
  margin-right: 15px;
}
.visor-calendario .eventos .cont-eventos .listado-eventos .fila-evento div>*{
  margin-top: 0.5em;
}
.visor-calendario .eventos .cont-eventos .listado-eventos .fila-evento div > p{
  color: var(--c-enlace);
  font-weight: 100;
}
.visor-calendario .eventos .cont-eventos .listado-eventos .fila-evento div > a ,h5{
  color: #545454;
}
.visor-calendario .eventos .cont-eventos .listado-eventos .fila-evento div > a:hover{
  color: var(--c-enlace);
  font-weight: 700;
  cursor: pointer;
}
.visor-calendario .eventos .cont-eventos .listado-eventos .fila-evento .img-cont{
  height: 80px;
  width: 60px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.btn-cal{
  text-transform: uppercase;
  margin: 10px 20px;
  padding: 10px 20px;
  border-radius: 3px;
  border: 1px solid black;
  display: inline-block;
  text-decoration: none;
  color: black;
  font-size: 0.7em;
}
.btn-cal:hover{
  background: #545454;
  color: white;
}

.c-redes{
  display: flex;
  justify-content: center;
  flex-direction: row;
  color: white;
  padding: 2em 20px;
}
.c-fb{  background: #3B5996;} .c-fb:hover{  background: #28385C;}
.c-tw{  background: #00ACEE;} .c-tw:hover{  background: #0087BD;}
.c-wa{  background: #25D366;} .c-wa:hover{  background: #23AC55;}
.c-co{  background: #FF5D5E;} .c-co:hover{  background: #CC4949;}
.c-naranja{
  color: var(--c-enlace);
  padding: 5px;
}
@media screen and (max-width: 760px){
  .visor-calendario{
    width: 95%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  .visor-calendario .calendario, .visor-calendario .eventos{
    width: 100%;
  }
}