body {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: Verdana, Tahoma, sans-serif;
}
#id_background{
  z-index: 0; position: fixed; height: 100vh; width: 100vw;
  background-image: url(../img/background.jpg);}

#contenedor_carga {
  z-index: 100000;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  position: fixed;
  transition: all 1s ease;
}
#carga {
  z-index: 999999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 15px solid #ccc;
  border-top-color: #f4266a;
  border-top-style: groove;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  animation: girar 1.5s linear infinite;
}
@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---- particles.js container ---- */

#particles-js {
  z-index: 0;
  user-select: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

/*Fuentes*/


.titulo,
.sub-titulo {
  font-family: "Coda", cursive;
}

.pacifico {
  font-family: "Pacifico", cursive;
  line-height: 1.2em !important;
}
p {
  font-family: "Lato", sans-serif;
  text-align: left;
  color: grey;
  white-space: pre-line;
}

a {
  text-decoration: none;
}

/*================== Cabecera ==================*/

.fotos {
  display: flex;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition: all 0.5s ease;
}
.fotos img {
  width: 500px;
}

.hide-fotos {
  transform: translateY(-100%);
  transition: all 0.5s ease;
}

#foto-perfil-big img {
  border-radius: 5%;
}

/*======================= Triangulos ===========================*/

.t-abajo {
  left: calc(50%);
  
  border-right: 25px solid transparent;
  border-top: 18px solid #000;
  border-left: 25px solid transparent;
  border-bottom: 18px solid transparent;
  transition: all 0.5s ease;
}

.t-derecha {
  z-index: 1;
  position: absolute;
  right: -35px;
  border-right: 18px solid transparent;
  border-top: 25px solid transparent;
  border-left: 18px solid #000;
  border-bottom: 25px solid transparent;
}



.triangulo-small-color-abajo {
  position: absolute;
  border-right: 8px solid transparent;
  border-top: 8px solid;
  border-left: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.cabecera-triangulo {
  display: flex;
  justify-content: center;
  width: 100%;
}

/*======================= Base ===========================*/

.base {
  display: flex;
  justify-content: center;
  background-color: aqua;
}

.contenedor-hv {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  width: 800px;

  margin-top: 20px;

  margin-bottom: 40px;

  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.9);
  border-radius: 8px;

  overflow: hidden;
}

.cabecera {
  display: flex;
  width: 100%;
}

#perfil{ width: calc(100% - 271px);}
.perfil-profesional {
  z-index: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background-position: bottom;
  background-size: cover;
  
}

.perfil_profesional_titulo,
.perfil_profesional_sub-titulo{
  font-family: 'coda', sans-serif;
  font-size: 1.5em;
}
.perfil_profesional_sub-titulo{ font-size:.9em;}

.perfil-profesional p {
  margin: 0 40px;
  margin-right: 70px;
  font-size: .9em;
  line-height: 1em;
}

/*======================= cuerpo ===========================*/

.cuerpo {
  display: flex;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.lateral,
.central {
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
}

.lateral {
  width: 410px;
  border-radius: 0 0 0 8px;
  transition: all 0.5s ease;
  padding-bottom: 272px;
  box-sizing: border-box;
}

/*========= Bloques =========*/

.lateral_box {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  height: auto;
  padding: 0 8%;
  font-size: 1em;
  line-height: 1em;
  
}
.lateral_titulo {
  margin-bottom: 10px;
  color: grey;
  font-size: 1.3em;
  line-height: 1em;
  padding-bottom: 5px;
  border-bottom: 2px dotted grey;
}

.lateral_box  { color: rgba(0, 0, 0, 0.9);}
.lateral_box a{ color: rgba(0, 0, 0, 0.9);}


.lateral_box a:hover{ 
  opacity: 0.5;
  -khtml-opacity: 0.5;
  -moz-opacity:0.5;
  filter: alpha(opacity=50);
  }


/*========= Sobre mi =========*/
/*Scrollbar*/
.sobre-mi::-webkit-scrollbar {
  width: 0.2em;
}
.sobre-mi::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}

#sobre_mi_box{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
}

.sobre-mi {
  width: 100%;
  height: 140px;
  margin-top: 3px;
  padding: 30px 5px 0px 5px ;
  overflow: hidden;
  overflow-y: scroll;
  transition: all 0.3s ease;
  
  box-sizing: border-box;
}
.sobre-mi-titulo {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1em;
}
span.sobre-mi-destacado {
  display: block;
  height: auto;
  margin-bottom: 10px;
  word-break: break-word;
  font-style: italic;
  font-size: 1em;
  line-height: 1em;
  text-align: center;  
}

.dicho-por {
  display: inline-block;
  width: 100%;
  margin: 0;
  font-size: 0.8em;
}

p.sobre-mi-descripcion {
  margin: 0;
  font-size: 0.9em;
  text-align: center;
}

.sobre-mi-abrir {
  height: min-content;
  overflow-y: hidden;
  transition: all 0.3s ease;
} /*auto no anima la abierta*/

.ver-mas-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}

a.ver-mas-top {
  width: 100%;
  height: 10px;
}
a.ver-mas {
  text-transform: lowercase;
  color: #fff;
  width: 100%;
  padding: 4px 0;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/*========= video =========*/

#video-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: auto;
  margin: 15px 0;
  /*==== borrar ===*/
  
}
#video-poster{ 
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 8px 8px 0 0;
}
#video-play{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
a#link-video{ 
  position: absolute;
  width: 100%;
  height: 100%;
}
      a#link-video:hover{ background-color: rgba(0, 0, 0, 0.5);}

#video-barra{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 30px;
  margin-top: 3px;
  color: #fff;
  background-color: grey;
  border-radius: 0 0 8px 8px;
}

#video-barra::before{
  content: '';
  width: 20px;
  height: 60%;
  margin-right: 10px;
  background-image: url(../iconos/video.svg);
  background-size: cover;
  background-position: center;
}
#video-barra::before img {width: 100%;}

/*======== Contacto ======*/

.contacto div{
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  }

  .contacto img{
    width: 20px;
    margin-right: 8px;
    opacity: .6;
  -khtml-opacity: 0.6;
  -moz-opacity:0.6;
  filter: alpha(opacity=60);
  }

/*========= Redes Sociales =========*/

.redes_sociales {
  display: flex;
  width: 100%;
  height: auto;
  max-height: 25px;
}
.redes_sociales img {
  width: 20px;
  margin-bottom: 5px;
  margin-right: 8px;
}

/* ===========  mi web ===========*/

#web-box{
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 3px;
  transition: all .3s ease;
  }
  #web-box:hover{ background-color: rgba(0, 0, 0, 0.5);}

#web-box svg {
  width: 22px;
  height: auto;
  margin: 3px;
  margin-right: 8px;

  flex-wrap: nowrap;
  fill: #fff;
}
span.prenombre_web{margin-right: 3px;}

/* =========== competencias ===========*/

.habilidades_texto{ opacity: .8;}

.punto{
  padding: 6px 0px 6px 8px;
  border-bottom: 1px dotted rgba(0, 0, 0, .1);
  box-sizing: border-box;
}
.punto::before{
  position: absolute;
  display: inline-block;
  content: ' ';
  width: 6px;
  height: 6px;
  margin-left: -15px;
  margin-top: 4px;
  background-color: red;
  border-radius: 50%;
}

/*========= Intereses =========*/

#interes_box1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: auto;
  margin-bottom: 5px;

}
.interes_texto{ width: 80%;
  opacity: .8;}
.interes_icon{
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.interes_icon svg {width: 35px; height: 35px;}


/* =========== Medios y Publicaciones ===========*/

#medios_box{font-size: .9em; margin-bottom: 8px;}
.medios_portada{margin-bottom: 0px;}
.medios_portada img{width: 100%; height:100%;}
#card-titulo{line-height: 1em;}


/*========= Desarrollos Empresariales =========*/

#desarrollos_empresariales{
  display: flex;
  flex-wrap: wrap;
}
/* buscar en css card*/



/*========= Books =========*/
.info-bloques-books {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.info-bloques-books span {
  margin: 1px;
  width: 48.5%;
  filter: grayscale(100%);
  opacity: 0.5;
  -khtml-opacity: 0.5;
  -moz-opacity:0.5;
  filter: alpha(opacity=50);

  transition: all 0.5s ease;
}

.info-bloques-books span:hover {
  filter: grayscale(0%);
  opacity: 1;

  transition: all 0.8s ease;
}

.info-bloques-books img {
  width: 100%;
  height: auto;
}

.books-center img{width: auto; margin-right: 5px; box-shadow: 0 0 5px rgba(0,0,0, .5); border-radius: 8px;}
.books-center img:hover{
   transform: rotate(2deg);
   transform: translateY(-10px);
   transition: all .2s ease;
}

/*========= Publicaciones =========*/

.info-bloques-cards img {
  display: flex;
  margin-top: 10px;
  filter: grayscale(50%);
  
  opacity: 0.5;
  -khtml-opacity: 0.5;
  -moz-opacity:0.5;
  filter: alpha(opacity=50);
  
  transition: all 0.2s ease;
  transition-delay: 0.3s;
}
.info-bloques-cards img:hover {
  filter: grayscale(0%);
  opacity: 1;

  transition: all 0.2s ease;
  transition-delay: 0.1s;
}

/* ====== New Movies ======*/

#movies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

#movies-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 500px;
}
#movies-poster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 96px;
  margin: 2px;
}

#movies-poster img {
  width: 100%;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#movies-poster span {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
  line-height: 1em;
  box-sizing: border-box;
  white-space: pre-line;
}

#movies-poster img:hover {
  transform: scale(1.1);
  transition: all 0.3s ease;
}



/*================ Chart ================*/

/*================== Estructura central =======================*/

.central {
  color: grey;
  width: 100%;
  padding: 0;
}

.columna-central {
  padding-top:0;
}

.cabecera-titulo {
  width: 60%;
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
  font-size: 1.5em;
  border-bottom: 1px solid grey;
  line-height: 1em;
  padding-bottom: 10px;
}
.cabecera-subtitulo {
  width: 60%;
  margin: 0 auto;
  margin-top: 15px;
  text-align: center;
  font-size: .9em;
  line-height: 1em;
  padding-bottom: 10px;
}

.caja {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 15px 0;
  box-sizing: border-box;
}

.caja-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 15px 0;

}

.caja-otros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 20px;
}

/* =========== Servicios ===========*/
#servicios_box,
#servicios,
#servicios_item_box,
#item,
#servicios_boton
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#servicios_box{
  height: auto; min-height: 50px;
  padding: 0 8px;
  text-align: center;}

#servicios_portada{
max-height: 100px;
overflow: hidden;
border-radius: 5px;
margin-bottom: 8px;
}

#servicios_portada img{ width: 100%; height: auto; }

.servicios_sub{ 
  font-family: 'pacifico';
  font-size: 1.2em;
  color: grey;
}


#item{
  flex-wrap: nowrap; 
  align-items: flex-start; 
  justify-content: flex-start; 
  margin-bottom: 5px;
}

#servicios_item{
  max-width: 85%;
  padding: 10px;
  margin: 10px;
  font-size: .9em;
  text-align: left;
  line-height: 1.1em;
  background-color: rgba(0, 0, 0, .02);
  border-top: 1px dotted grey;
  border-bottom: 1px dotted grey;
  border-radius: 5px;
}

#servicios_bulet{
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background-color: red;
  border-radius: 50%;
}

#servicios_boton a {
  width: auto;
  padding: 5px 15px;
  margin: 8px;
  border-radius: 5px;
  color: #fff;
  line-height: 1em;
  background-color: rgba(100,100,100, 1);
}

#servicios_logo { width: 150px;}
#servicios_logo img {width: 100%; height: auto; transition: all .3s ease;}
#servicios_logo img:hover { cursor: pointer; transform: scale(.9); transition: all .3s ease;}


/* =========== Formacion Académica ===========*/

.caja-formacion{
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  width: 80%;
  height: auto;
  padding: 8px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}

.caja-formacion .texto,
.cientificos-box .texto,
.especializaciones-box .texto{
  width: auto;
  margin: 0;
  font-size: 0.9em;
  line-height: 1em;
}

.formacion-fecha{
display: block;
width: 100%;
padding: 0 0 5px 0;}

  .caja-formacion .entidad,
  .cientificos-box .entidad,
  .otros_e_box .entidad,
  .especializaciones-box .entidad{
    display: block;
    width: 100%;
    font-size: 0.9em;
    margin: 5px 0 0 0px;
    line-height: 1em;
  }

/* =========== Diplomados ===========*/


#diplomados-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  width: 80%;
  height: auto;
  padding: 5px 0;
  
  /* border:1px solid turquoise; */
  box-sizing: border-box;
}

.diplomado_fecha,
.diplomado_texto p,
.diplomado_entidad p {
  
  margin: 0;
  padding: 0;
  font-family: 'coda';
  font-size: 0.9em;
  line-height: 1em;
}



.diplomado_fecha {
  width: 100%;
  margin-right: 5px;
  margin-top: 5px;
  font-size: .9em;
  line-height: 1.3em;

  
  /* border:1px solid magenta; */
  box-sizing: border-box;
}

.diplomado_texto {
  width: 100%;
  height: auto;
  padding: 8px;
  border-left: 1px dotted grey;
  
  /* border:1px solid rgba(74,255,74); */
  box-sizing: border-box;
}

.diplomado_entidad{
  width: auto;
  max-width: 60%;
  height: auto;
  padding:0 5px 0 5px;
  border-left: 1px dotted rgba(0, 0, 0, 0.5);

  /* border:1px solid gold; */
  box-sizing: border-box;
}
.diplomado_entidad p {
  color: rgba(0, 0, 0, .4);}

.diplomado_link_pdf a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px;
  /* border:1px solid purple; */
  box-sizing: border-box;
  transition: all .3s ease;
}
.diplomado_link_pdf img{
  width: auto;
  height: 100%;
}

.diplomado_link_pdf a:hover{
  transform: translate(10px);
  transition: all .3s ease;
}

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

.fecha {
  font-size: 0.9em;
  text-align: right;
  width: auto;
  margin-right: 10px;
  line-height: .9em;
}

.texto {
  width: 100%;
  height: auto;
}
.texto p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1em;
  margin-bottom: 5px;
  padding: 8px;
}
.diplomado_entidad{
  color: red;
}

.linea-abajo {border-bottom: 1px dotted rgba(100, 100, 100, .2);}

/* =========== Archivos iconos ===========*/
.pdf, .jpg, .word, .web {
  display: block;
  width: 16px;
  height: 16px;
  background-size: cover;
  margin-top: 0px;
  padding-bottom: -55px;
  margin-left: 5px;
  cursor: pointer;
}


.pdf {
  background-image: url(../iconos/pdf.svg);}
  
  .pdf::after {
  display: block; 
  content: '.pdf';
  margin-left:-1px;
  font-size: .66em;
  color: red;
  }

.jpg {background-image: url(../iconos/jpg.svg);}
.jpg::after {
  display: block; 
  content: '.jpg';
  margin-left:-1px;
  font-size: .66em;
  color: grey;
}

.word {background-image: url(../iconos/word.svg);}
.word::after {
  display: block; 
  content: '.word';
  margin-left:-1px;
  font-size: .66em;
  color: rgb(0, 119, 255);
}

.web {background-image: url(../iconos/chrome.svg);}
.web::after {
  display: block; 
  content: '.web';
  margin-left:-1px;
  font-size: .66em;
  color: grey;
}

/*================ Articulos cientificos =====================*/

.caja-cientificos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
}

.cientificos-box{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  width: 80%;
  height: auto;

  margin: 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px dotted rgba(100, 100, 100, .2);
}

.cientificos-box .fecha{ width: auto; height: auto; font-size: .9em;}
.cientificos-box .texto{ width: 100%;}
.cientificos-box .entidad{ width: 60%;}

.web_icon{ display: flex; width: auto;}

.web_icon a{
  display: block;
  width: 20px;
  height: 20px;
}
.web_icon img {
  width: 100%; 
  height: 100%; 
  margin-right: 0; 
  padding: 0;}

/*================ Especializaciones =====================*/

.especializaciones{ display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center; width: 100%; height: auto; min-height: 10px;}
.especializaciones-box{ display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;   width: 80%;  border-bottom: 1px dotted rgba(0100 0100 0100 .2); padding-bottom: 5px;}

.especializaciones-box .fecha{ width: auto; height: auto; min-width: 70px; font-size: .9em;}
.especializaciones-box .texto{ width: 100%; height: auto; margin: 5px 0; border-left: 1px solid grey; padding-left: 5px;}
.especializaciones-box .entidad{ width: 60%; height: auto; border-left: 1px dotted red; padding-left: 5px;}


/*================ Estudios =====================*/
.caja-estudios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

/*================ Otros Estudios =====================*/

.otros_e{
  width: 80%; height: auto; min-height: 50px;
}

.otros_e_box{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px dotted rgba(0,0,0, .2);
}

.otros_e_box .fecha{
  width: 100%; max-width: 75px;
  height: auto; max-height: 20px;
  text-align: right;
  margin-right: 5px;
  font-size: .9em;
}

.otros_e_box .texto{
  padding: 5px;
  width: 100%; height: auto;
  border-left: 1px solid rgba(0,0,0, .2);
  padding-left: 10px;
}

  .otros_e_box .entidad{
    width: 60%;
    height: auto;
    border-left: 1px solid rgba(0,0,0, .2);
    padding-left: 5px;
  }

  .otros_e_box .fecha,
  .otros_e_box .texto,
  .otros_e_box .entidad{
    font-size: .9em;
    line-height: 1.1em;
  }
  .otros_e_box .fecha{font-size: .9em;}


/*================ Nuevo Trabajo =====================*/

.triangulo-small {
  margin-top: 2px;
  border-right: 8px solid transparent;
  border-top: 8px solid transparent;
  border-left: 8px solid grey;
  border-bottom: 8px solid transparent;
}

#work-box,
#work-dato,
#work-empresa{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

#work-box{
  flex-wrap: nowrap;
  width: 80%;
  height: auto; min-height: 100px;
  margin-top: 15px;
}
      #work-dato{
      justify-content: flex-end;
      width: 30%;
      height: auto; min-width: 50px;
      padding-right: 20px;
      font-size: .9em;
      text-align: right;
      }
          #work-fecha{ width: 100%; margin-bottom: 5px; font-size: .9em;}
          #work-cargo{ line-height: 1em; }

      #work-empresa{
        position: relative;
        justify-content: flex-start;
        width: 100%;
        height: auto; 
        min-height: 50px;
        
      }
          #work-nombre{
            width: auto; min-width: 50px;
            padding: 0 15px;
            font-size: 0.9em;
            border-radius: 3px;
          }
          #work-texto p{
            height: auto;
            margin-bottom: 30px;
            font-family: 'lato';
            font-size: 0.9em;
            line-height: 1em;
            
          }
          #work-web a{
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            position: absolute;
            right: 0;
            bottom: 0;
            text-align: right;
            font-size: 0.81em;
            transition: all 0.5s ease;;
          }
          #work-web a:hover {
            padding: 0 10px;
            right: 5px;
            border-radius: 3px;
            transition: all 0.5s ease;
          }

          .work_link_icon svg  {width: 15px; height: auto; margin-left: 3px; margin-bottom: -2px; }
          .work_link_icon path {fill:grey}


          hr.work-linea_new {
            display: block;
            width: 100%;
            height: 0;
            margin: 15px 20% 0 20%;
            border: 2px dotted rgba(0, 0, 0, .1);
            border-top: none;
            border-left: none;
            border-right: none;
            
          }

          .empresa-web { word-break: break-all;}
          


/*================ reconocimientos =====================*/


 .reconocimiento-box {
   display: flex;
   flex-wrap: nowrap;
   width: 80%;
   margin: 0 6%;
   padding: 8px 0;
   border-bottom:1px dotted grey;
   white-space: pre-line;
 }

 .reconocimiento-box .premio-icon{ 
   display: flex;
   align-items: flex-start;
   align-items: center;
   width: 15px; 
   margin-top: 0;
   margin-left: 5px;}
  
  .reconocimiento-box .premio-icon img { width: 100%;}

.reconocimiento-box .fecha{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: auto; min-width: 35px;
  font-size: .9em;}

  .reconocimiento-box .texto{
    display: flex;
    align-items: center;
    width: 100%; max-width: 100%;
    font-size: .9em;
    line-height: 1.05em;
    white-space: pre-line;
    padding: 0 8px;
    border-left: 1px solid grey;
  }

  .reconocimiento-box .entidad{
    display: flex;
    align-items: center;
    width: 60%;
    font-size: .9em;
    text-align: left;
    line-height: 1em;
    padding-left: 8px;
    border-left: 1px dotted rgba(0, 0, 0, 0.5);
  }



/*============ clientes logos ====================*/

.clientes-logos {
  width: 100%;
  padding: 0 3%;
  opacity: 0.7;
  -khtml-opacity: 0.7;
  -moz-opacity:0.7;
  filter: alpha(opacity=70);
}

.clientes-logos img {
  width: 100%;
  border-radius: 8px;
}

/*============ Firma ====================*/

#firma_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 90%;
  padding: 0 ;
  margin: 0 0 0 10px;
} 

#firma{ width: 140px; height: auto;}
#firma img{ width: 100%; height: auto; }
#firma_box p{
  width: 100%;
  margin: 0;
  margin-top: -20px;
  padding-bottom: 8px;
  line-height: 1em;
}


/* =========== Modo Visibilidad reducida ===========*/

/*================ Transform lateral ================*/
button#cerrar {
  display: none;
  z-index: 99;
  position: fixed;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.5s ease;
  
}
button#cerrar img {
  margin-left: -14px;
  margin-top: 3px;
  width: 20px;
  height: 20px;
  opacity: .8;

  border-radius: 50%;
}

.open{
  width: 1px;
  height: 1px;
  margin-top: calc(50vh - 110px);
  left: calc(50% - 132px);
  border-radius: 50%;
  border:1px solid red;
}
.open-hide{
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.hide {
  width: 0;
  opacity: 0;
  transition: all 0.5s ease;
}


.redondo img {
  border:3px solid red;
}

.ancho-cien {
  width: 100%;
  transition: all 0.5s ease;
}
.mover-izquierda {
  transform: translateX(calc(50% - 277px));
  transition: all 0.5s ease;
}
.mover-izquierda img {
  transform: rotate(-45deg);
}

.delay {
  transition-delay: 0.8s;
}

/* =========== END ===========*/

#banner {
  position: absolute;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  width: 250px;
  height: calc(100vh - 100px);
}
#barra {
  position: absolute;
  display: flex;
  justify-content: space-between;
  padding: 0 3%;
  bottom: 260px;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 0.8em;
}
#banner-imagen {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: auto;
}
#banner-imagen img {
  width: 99%;
}

#publicaciones-centro,
#publicaciones-centro div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#publicaciones-centro {
  width: 60%;
  height: auto;
}
#publicaciones-centro div {
  width: 210px;
  padding-bottom: 10px;
}
#publicaciones-centro span {
  font-size: 0.8em;
  line-height: 11px;
  text-align: center;
  margin: 0;
  padding: 0;
}

#anuncio{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 600px;
}
.anuncio img{ width: 100%; height: auto; }
.anuncio-hide img{ width: 1px; height: 100%; transition: all .8s ease;}
#anuncio a:hover{opacity: 1;}

#anuncio-titulo{
  height: auto;
  padding: 3px;
  padding-left: 15px;
  border-radius: 5px 5px 0 0;
  background-color: rgba(0, 0, 0, .2);
}