@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap");

:root {
  --red: #c11d2c;
  --yellow: #ffc832;
  --white: #fdfdfd;
  --lightgrey: #f2f2f2;
  --grey: #e4e4e4;
  --darkgrey: #aaaaaa;
  --blue1: #004077;
  --blue2: #005baa;
  --blue3: #0072d6;
  --blue4: #0088ff;
  --blue5: #25a8ff;
  --blue6: #deeaf5;

  --lightblue: #9dc4ea;
}

.blue1 {
  background-color: var(--blue1);
}
.blue2 {
  background-color: var(--blue2);
}
.blue3 {
  background-color: var(--blue3);
}
.blue4 {
  background-color: var(--blue4);
}
.blue5 {
  background-color: var(--blue5);
}

.blue1:hover {
  border: 3px solid var(--blue1);
}
.blue2:hover {
  border: 3px solid var(--blue2);
}
.blue3:hover {
  border: 3px solid var(--blue3);
}
.blue4:hover {
  border: 3px solid var(--blue4);
}
.blue5:hover {
  border: 3px solid var(--blue5);
}

body {
  margin: 0;
}

.bluebg {
  width: 100%;
  background-color: rgb(179, 179, 179);
  background-image: url(../img/jpg/kenan-sulayman-aBvg_3yBcUI-unsplash.jpg);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  height: 240px;
}

.greybg {
  background-color: var(--grey);
}

.lightgreybg {
  background-color: var(--lightgrey);
}

.whitebg {
  background-color: var(--white);
}

.blue5bg {
  background-color: var(--blue5);
}
.blue6bg {
  background-color: var(--blue6);
}

.fixedmenu {
  background-color: var(--grey);
  height: 140px;
  border-bottom: solid 3px var(--blue1);
}

.floatingwrapper {
  position: relative;
}

.floatingcontent {
  position: absolute;
  top: 40px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: Nunito, Verdana, Geneva, Tahoma, sans-serif;
  color: var(--white);
  max-width: 1170px;
  text-shadow: #222 2px 0 12px;
}

.floatingcontent span {
  color: var(--yellow);
}

.floatingcontent h1 {
  font-size: 50px;
  color: white;
}

#section1 h2 span {
  font-size: 0.65em;
}

h1,
h2,
h3,
h4,
h5,
li,
p {
  font-family: Nunito, Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
  font-size: 46px;
  margin: 20px 0;
  color: var(--blue1);
}

h2 {
  font-size: 34px;
  color: var(--blue1);
}

h3 {
  font-size: 22px;
  padding: 5px;
  color: var(--blue1);
}

h4 {
  font-size: 18px;
  margin: 15px 0;
  text-transform: uppercase;
  text-align: justify;
  font-weight: bold;
}

h5 {
  font-size: 16px;
  padding: 5px;
  text-transform: uppercase;
  color: var(--blue1);
  /**color: var(--white);**/
}

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

/** PARTE SUPERIOR DEL HEADER (ENCIMA DEL MENU PRINCIPAL) .top  **/

header > div {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}

.topheader {
  display: flex;
  align-items: center;
}

.topheader form h4 {
  margin: 4px auto;
  font-size: 10px;
  text-align: right;
}

#logo {
  /* define estilos del contenedor del logo */
  padding: 12px 0;
  height: 54px;
  flex: 2;
}

.logo {
  padding-bottom: 10px;
}

header img {
  /* estilos para el logotipo en el header */
  top: 20px;
  height: 60px;
  z-index: 4;
  width: unset;
}

figure {
  margin: 0; /* reseteo a 0 de posible margen en la etiqueta figure */
}

/** RESPONSIVE MENU STYLES **/

/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
  font-family: Nunito, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.topnav .dropdown .dropbtn,
.topnav .contactbtn {
  font-size: 1.15em;
}

/* removes residual margin on mobile for topnav backgrund color */
.topnav ul {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

/* Style the links inside the navigation bar */
.topnav li {
  color: #f2f2f2;
  text-align: center;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}

.topnav a,
.topnav .dropbtn {
  display: inline-block;
  width: 100%;
  /*background-color:  var(--blue);*/
  /*background:linear-gradient(var(--lightblue), var(--blue));*/
  text-decoration: none;
  font-weight: bold;
  min-height: 45px;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
/*
.dropdown-content a{
    background: #005094;
}*/

.topnav a {
  height: 40px;
  color: #f2f2f2;
}

.contactbtn {
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #04aa6d;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topheader .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  border: none;
  outline: none;
  color: white;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: relative;
  width: 100%;
  margin: auto;
  /* background-color: var(--blue);*/
  z-index: 90;
}

.dropdown-content ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 98%;
  margin: auto;
}

/* Style the links inside the dropdown */
.dropdown-content li {
  float: none;
  width: 100%;
  color: black;
  padding: 3px 0;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dropdown-content li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #f2f2f2;
  /*border: 3px solid var(--blue);  */ /* ELIMINAR BORDE ON HOVER */
  box-sizing: border-box;
  color: #000000;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: var(--white);
  /*background-color: var(--lightblue);*/
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: table;
}

/** PAGE CONSTRUCTION (GENERAL) - Estilos generales para secciones, y los principales elementos comunes a todas las paginas, mensaje principal y separadores **/

main {
  margin-top: 140px;
}

.container {
  /* contenedor general para la mayoria de secciones del sitio web */
  margin: auto;
  max-width: 1200px;
  width: 90%;
  /*width: 80%;*/
  min-width: 280px;
}

@media screen and (max-width: 768px) {
  .container {
    width: 90%;
  }
}

.separator {
  width: 45%;
  height: auto;
  min-width: 200px;
  margin: 10px auto 50px auto;
  text-align: center;
  background-color: var(--grey);
  border-left: 10px solid var(--blue1);
  border-right: 10px solid var(--blue1);
}

section {
  /* margen generico superior e inferior para las seccioens */
  /*margin: 0 auto 10px auto;*/
  padding: 60px 0;
}

#section0 {
  padding: 0;
}

#section2,
#section4 {
  margin-bottom: 0;
  padding: 80px 0;
}

#section1 a {
  color: #000000;
  display: block; /* Solucion firefox */
}
#section1 a:hover {
  color: var(--blue2);
}

#section1 a,
#section2 a,
#section4 a {
  text-decoration: none;
}

#section2 .cards .col1,
#section4 .cards .col1 {
  background-color: var(--blue6);
  /*border: 2px solid var(--blue1);*/
  border-radius: 15px;
  width: 100%;
  /* width: 80%; */
}

#section2 .cards .col1 div,
#section4 .cards .col1 div {
  padding: 40px 10px;
  text-decoration: none;
}

#section2 .cards .col1:hover,
#section4 .cards .col1:hover {
  background-color: var(--blue1);
}

#section2 .cards .col1:hover i,
#section4 .cards .col1:hover i,
#section2 .cards .col1:hover h3,
#section4 .cards .col1:hover h3 {
  color: var(--white);
}

/** WRAPPERS **/

.wrapper {
  /* estilo (desktop first) de los contenedores .wrapper en modo flex y row. Como norma general cambiará a column en Móviles */
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 30px;
}

.col1 {
  /* tamaños de los elementos flex */
  flex: 1;
}
.col2 {
  flex: 2;
}
.col3 {
  flex: 3;
}
.col4 {
  flex: 4;
}
.col5 {
  flex: 5;
}
.col6 {
  flex: 6;
}

.col100 {
  flex: 90%;
}

.col75 {
  flex: 73%;
}

.col50 {
  flex: 49%;
}
.col33 {
  flex: 30%;
}
.col25 {
  flex: 23%;
}

#section1 .wrapper {
  align-items: center;
}

#section1 .container,
#section3 .container {
  background-repeat: no-repeat;
  background-position: left;
  background-size: 300px 300px;
}

#section1 .container {
  background-image: url(..//img/svg/magnifying-glass-solid.svg);
}

#section3 .container {
  background-image: url(..//img/svg/microscope-solid.svg);
}

#section1 h2 {
  margin: 20% auto;
  text-align: right;
}

#section1 li h4 {
  font-size: 0.95em;
}

.arrow {
  display: block;
  float: right;
}

#presentation {
  padding: 50px 0 50px 0;
}

#presentation h3,
#containerdivulgacion h3 {
  border-left: 5px solid var(--blue1);
  border-right: 5px solid var(--blue1);
  padding: 10px 40px;
  margin: auto;
  text-align: justify;
}

#section1 {
  padding-top: 20px;
}

#section1 i,
#section3 i,
.cards i,
#about6 i {
  font-size: 60px;
  color: var(--blue1);
}

.cards div {
  text-align: center;
}

.cards ul {
  list-style: none;
  padding-inline-start: 0;
}

.service ul {
  padding-inline-start: 20px;
  padding-bottom: 10px 0;
}

.cleancard {
  padding: 20px 5px;
  /*background-color: #ffffff;*/
  box-sizing: border-box;
}

.contactlnk {
  padding: 5px 10px;
  background-color: var(--blue1);
  color: #fff;
  font-family: Nunito, Verdana, Geneva, Tahoma, sans-serif;
  text-decoration: none;
}

.ctaleft h2 {
  margin-top: 0;
}

.ctaleft h4,
.ctaleft div {
  text-align: right;
}

.contactlnk:hover {
  cursor: pointer;
  color: var(--blue1);
  background-color: #fff;
  border: 2px solid var(--blue1);
}

/***************************************/
/************** FOOTER *****************/
/***************************************/

/* JORGE */

footer {
  padding: 30px 0;
  background-color: var(--blue1);
}

.footernavbtn {
  text-decoration: none;
  color: var(--white);
  padding: 3px;
  margin: 2px 0;
  font-weight: 600;
}

.footernavbtn:hover {
  color: black;
  background-color: var(--white);
}

footer ul {
  padding-inline-start: 0;
}

footer address {
  font-size: 0.8em;
}

.menufooter {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menufooter ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 1.1em;
}

.logosfooter {
  display: flex;
  flex: 75%;
  flex-direction: row;
}

.divlogosfooter {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 80%;
  align-items: center;
  margin: 40px auto;
  justify-content: center;
}

.divlogosfooter img {
  width: 30%;
  max-width: 30%;
}

.divgeotransferfooter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
}

.divgeotransferfooter img {
  width: 65%;
}

footer .socialicons ul {
  width: 80%;
  justify-content: flex-start;
}

@media screen and (max-width: 768px) {
  /* .footermov {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      text-align: center;
    } */
  .menufooter {
    flex: 100%;
    width: 100%;
  }
  .menufooter ul {
    gap: 10px;
  }
  .logosfooter {
    flex: 100%;
    width: 90%;
    flex-direction: column;
    justify-content: space-around;
  }
  .divlogosfooter img {
    width: 70%;
    max-width: 70%;
  }
  .divgeotransferfooter {
    width: 100%;
    gap: 40px;
  }
  footer .wrapper {
    align-items: center;
    text-align: center;
  }
  footer .socialicons ul {
    width: 80%;
    justify-content: space-evenly;
    margin: auto;
  }
}

.socialicons ul {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding-inline-start: 0;
  width: 60%;
  min-width: 300px;
}

.socialicons li {
  list-style-type: none;
}

.socialicons i {
  font-size: 3em;
  color: var(--white);
}

/* .socialicons i {
    font-size: 3em;
    color: var(--blue1);
  }  */

#footer li {
  padding: 5px 0;
  color: var(--blue1);
  list-style-type: none;
}

.legal ul {
  text-align: center;
  margin-top: 20px;
}

#footer .legal li {
  display: inline;
  padding: 0 10px;
  border-right: 2px solid var(--blue1);
  font-size: 0.9em;
}

#footer .legal li:last-child {
  border-right: none;
}

/***************************************/
/****** LINEAS DE INVESTIGACION ********/
/***************************************/

#divbotones {
  width: 100%;
  /* min-height: 10vh; */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  text-decoration: none;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

#divbotones a {
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: var(--lightblue);
  height: 7vh;
  border-radius: 5%;
  border: 2px solid var(--grey);
  width: 10%;
  text-decoration: none;
  color: var(--blue1);
  margin: 5px;
}

#divbotones h4,
#divbotones p {
  text-align: center;
  font-size: 16px;
}

#divbotones h4:hover {
  border: 0;
}

#divbotones :hover {
  background-color: var(--blue1);
  /* border: 2px solid var(--grey); */
  color: white;
}

@media screen and (max-width: 768px) {
  #divbotones {
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  #divbotones a {
    width: 90%;
  }
}

#investigacion1 article img {
  max-width: 800px;
}

#line1,
#line2,
#line3,
#line4,
#line5,
#line6,
#line7,
#laboratorios {
  scroll-margin-top: 190px;
}

/* #investigacion1 h3,
#proyectos1 h3,
#publicaciones1 h3,
#trabajosdirigidos1 h3 {
  background-color: var(--blue1);
} */

#lineasinvestigacion article {
  background-color: white;
}

#lineasinvestigacion {
  background-color: var(--lightgrey);
}

article {
  border: 2px solid var(--blue1);
  /* background-color: var(--grey); */
  margin-bottom: 40px;
}

article .lineinvtitle,
article .lineinvobjtitle,
article .lineinvobjtitle {
  margin: 0;
}

article .lineinvdesc,
article .lineinvtitle h4,
article .lineinvobjtitle h5 {
  padding: 10px 20px 10px 20px;
  margin: 0;
}

article .lineinvtitle h4,
article .lineinvobjtitle h5 {
  color: var(--white);
  background-color: var(--blue1);
  margin: 0;
}

section article .titleinv {
  color: var(--yellow);
}

article .gallery {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

article .gallery figure {
  text-align: center;
}

article img {
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: auto;
  display: inline-block;
}

#sectiondivulgacion article img {
  min-width: 100%;
}

/***************************************/
/***************** PROJECTS ************/
/***************************************/

#proyectos1 h4 {
  font-size: 1.2em;
  margin: 2px 0;
  color: var(--blue1);
}

#proyectos1 h4 span {
  font-size: 0.8em;
  color: var(--blue1);
}

#proyectos1 .wrapper,
#trabajosdirigidos1 .wrapper {
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.project {
  max-width: 30%;
  flex: 100%;
  border: 2px solid var(--blue1);
  background-color: var(--white);
}

.projecttitle {
  background-color: var(--lightgrey);
}

.projectdescription,
.projecttitle {
  padding: 8px;
}

.projectdescription {
  list-style-type: none;
}

.projectdescription li {
  margin-bottom: 6px;
}

/***************************************/
/************ PUBLICACIONES ************/
/***************************************/

#publicaciones1 .panel .separator {
  margin: 15px 0px 20px 0px;
  width: 12%;
  text-align: left;
  background-color: var(--lightgrey);
  border: 2px solid var(--blue1);
  box-sizing: border-box;
  width: 75px;
  min-width: 75px;
}

#publicaciones1 .panel h5 {
  padding: 10px 0px 10px 15px;
  color: var(--blue1);
}

/* .accordion .button {
} */

.accordion {
  font-family: Nunito, sans-serif;
  font-weight: bold;
  background-color: var(--lightgrey);
  color: var(--blue1);
  cursor: pointer;
  padding: 8px 18px;
  width: 100%;
  min-width: 250px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  margin-bottom: 10px;
}

.active,
.accordion:hover {
  background-color: var(--blue1);
  color: var(--white);
}

.accordion:after {
  content: "\002B";
  color: var(--blue1);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion:hover:after {
  color: var(--white);
}

.active:after {
  content: "\2212";
}

.panel {
  margin-top: 15px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}
.panel li {
  border-bottom: 2px solid var(--blue1);
}
.panel li:last-child {
  border-bottom: none;
}

/***************************************/
/******* TRABAJOS DIRIGIDOS  ***********/
/***************************************/

#trabajosdirigidos1 li {
  list-style: none;
}

#trabajosdirigidos1 .projecttitle h4 {
  color: var(--blue1);
  background-color: unset;
  margin: 5px 0;
  font-size: 1em;
}
#trabajosdirigidos1 .projecttitle h4:last-child {
  border-top: 2px solid var(--blue1);
  padding: 10px 0 2px 0;
  margin-top: 12px;
  font-size: 0.9em;
}

.separatortfg {
  margin: 15px 0px 20px 0px;
  width: 14%;
  text-align: left;
  background-color: var(--lightgrey);
  border: 2px solid var(--blue1);
  box-sizing: border-box;
  /*  width: 75px; */
  /* min-width: 75px; */
  min-width: 160px;
  padding: 10px 15px 10px 15px;
  color: var(--blue1);
}

/***************************************/
/*************   MIEMBROS   ************/
/***************************************/

#miembros1 .wrapper {
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .card img {
    height: auto;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: 10px auto 20px auto;
  text-align: center;
  flex: 30%;
  background-color: var(--lightgrey);
  height: 100%;
}

#about1 .card {
  border: 2px solid var(--blue2);
}

.card h3,
.card h5 {
  margin: 0 auto;
  padding: 1px 0;
  text-transform: none;
  background-color: unset;
  color: var(--blue1);
  border: unset;
}

.card h3 {
  font-size: 20px;
}
.card h5 {
  font-size: 14px;
}

.cardtitle {
  color: var(--white);
  font-size: 18px;
  margin: 10px auto;
  background-color: var(--darkgrey);
}

.carddata {
  margin: 2px 3% 10px 3%;
  font-size: 14px;
}

.card button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  margin-top: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card a {
  text-decoration: none;
  font-size: 16px;
  color: var(--white);
}

.card i {
  font-size: 22px;
  padding: 2px 10px;
  color: var(--white);
}

.card button:hover,
.card a:hover {
  opacity: 0.5;
}

.cardcontact {
  background-color: #000;
  height: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Nunito, sans-serif;
}

/**JORGE**/

.listMiembros {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#listaantiguos h3 {
  text-align: center;
}

.listMiembros li {
  margin-left: 2.5rem;
}

@media screen and (max-width: 768px) {
  .listMiembros {
    display: block;
  }
}

/***************************************/
/***************** DIVULGACION *********/
/***************************************/

/* JORGE */

#containerdivulgacion {
  margin-bottom: 60px;
}

.divulgacion article {
  /*   background-color: var(--grey); */
  margin-top: 0;
  border: 0;
}

.divulgacion .accordion {
  margin-bottom: 0;
}

.divulgacion li {
  border-bottom: none;
}

.divulgacion article figure p {
  width: 85%;
  margin: auto;
}

#ofertatecnica {
  font-size: 1.1em;
}

/***************************************/
/***************** ABOUT US ************/
/***************************************/

#about2,
#about3,
#about4,
#about5 {
  padding: 60px 0;
}

#about1 figure {
  width: 200px;
  height: 200px;
}

#about1 .col1 *,
#about5 .cards,
#about6 li {
  margin: auto;
  text-align: center;
}

#about1 .cards {
  padding-top: 20px;
}

/* #about2 div {
  width: 70%;
  margin: auto;
} */

address {
  font-family: Nunito, sans-serif;
}

#about2 address {
  text-align: center;
}

#about3 .socialicons ul,
#about5 .cards {
  margin: auto;
  justify-content: space-evenly;
}

#about3 .socialicons i {
  color: var(--blue1);
}

#about3 .socialicons i:hover {
  color: black;
  /* background-color: var(--blue6); */
}

.researchgate figure {
  width: 50%;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .researchgate figure {
    width: 90%;
  }
}

.researchgate * {
  text-align: center;
}

.researchgate img {
  padding-bottom: 10px;
}

.researchgate #researchgatelink:hover {
  border-bottom: 4px solid #40ba9b;
}

#about5 .cards {
  width: 60%;
}

#about5 h4 {
  margin: 5px 0;
}

#about5 a {
  padding: 5px;
  text-decoration: none;
  color: var(--blue1);
}

#about5 a:hover {
  color: var(--white);
  background-color: var(--blue1);
}

/* #about5 ul {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
} */

/* JORGE */

#ulmemoria {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  grid-gap: 20px;
}

#about6 ul {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
  margin-bottom: 50px;
  list-style-type: none;
  padding-inline-start: 0;
}
#listaantiguos ul {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
  margin-bottom: 50px;
  list-style-type: none;
  padding-inline-start: 0;
}

#about6 li {
  margin-bottom: 15px;
  height: auto;
  break-inside: avoid-column;
  background-color: var(--grey);
  padding: 5px;
}
#listaantiguos li {
  margin-bottom: 15px;
  height: auto;
  break-inside: avoid-column;
  background-color: var(--grey);
  padding: 5px;
  text-align: center;
}

/* DAVID SLIDER */

.slideshow-container {
  position: relative;
  display: block;
  width: 100%;
  height: 240px; /* ALTURA DEL SLIDER */
  margin: 0 auto;
}

.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 72s infinite;
  animation: fade 72s infinite;
}

.slide1 {
  background-image: url("../img/banner/banner1.jpg");
  animation-delay: 0s; /* Ajuste  */
}

.slide2 {
  background-image: url("../img/banner/banner2.jpg");
  animation-delay: 6s;
}

.slide3 {
  background-image: url("../img/banner/banner3.jpg");
  animation-delay: 12s;
}

.slide4 {
  background-image: url("../img/banner/banner4.jpg");
  animation-delay: 18s;
}

.slide5 {
  background-image: url("../img/banner/banner5.jpg");
  animation-delay: 24s;
}

.slide6 {
  background-image: url("../img/banner/banner6.jpg");
  animation-delay: 30s;
}

.slide7 {
  background-image: url("../img/banner/banner7.jpg");
  animation-delay: 36s;
}

.slide8 {
  background-image: url("../img/banner/banner8.jpg");
  animation-delay: 42s;
}

.slide9 {
  background-image: url("../img/banner/banner9.jpg");
  animation-delay: 48s;
}

.slide10 {
  background-image: url("../img/banner/banner10.png");
  animation-delay: 54s;
}

.slide11 {
  background-image: url("../img/banner/banner11.png");
  animation-delay: 60s;
}

.slide12 {
  background-image: url("../img/banner/banner12.png");
  animation-delay: 66s;
}

.sliderMargin {
  right: 10%;
}

/* DAVID */

/***************************************/
/***************** CONTRATOS ***********/
/***************************************/

/* JORGE */

#contenedorcontratos ul {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 30px;
  margin-bottom: 50px;
  list-style-type: none;
  padding-inline-start: 0;
}

@media screen and (max-width: 768px) {
  #contenedorcontratos ul {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

#contenedorcontratos li {
  background-color: white;
  border: 2px solid var(--blue1);
  margin-bottom: 50px;
  height: auto;
  break-inside: avoid-column;
  padding: 0;
}

#contenedorcontratos h4 {
  background-color: var(--lightgrey);
  margin-top: 0;
  font-size: 1em;
  color: var(--blue1);
}
#contenedorcontratos h4,
#contenedorcontratos p {
  padding: 10px;
}
/* ANIMACIONES DAVID */

/* https://www.devtwins.com/blog/css-cross-fading-images*/

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  5.56% {
    opacity: 1;
  }
  8.33% {
    opacity: 0;
  }
  97.78% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  5.56% {
    opacity: 1;
  }
  8.33% {
    opacity: 0;
  }
  97.78% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ANIMACIONES DAVID */

/* CORRECCIÓN TAMAÑO TEXTO MENU TOP ENTRE 769 y 1170 (Uno de los botones ocupa 3 lineas de texto) */
/* OTRAS CORRECCIONES EN ESE TAMAÑO INTERMEDIO */

@media screen and (min-width: 769px) and (max-width: 1170px) {
  .topnav {
    font-size: 12px;
    line-height: 0.98em;
  }

  .floatingcontent h1 {
    font-size: 34px;
  }

  .project {
    max-width: 47%;
  }
  .contactbtn {
    font-size: 12px;
  }

  .card {
    flex: 45%;
  }

  #about6 ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
  #listaantiguos ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }

  h1 {
    font-size: 33px;
  }

  .floatingcontent h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 28px;
  }

  section {
    margin-bottom: 20px auto;
  }

  #section1 .container {
    background-position: top;
  }

  #section1 .container > div:last-child {
    border: none;
    border-top: 2px solid var(--blue1);
    padding: none;
  }

  #section1 h2 span {
    font-size: 1em;
  }

  .arrow {
    display: none !important;
  }

  #section1 h2 {
    text-align: center;
    margin: 5% auto;
  }

  header > div {
    position: relative;
  }
  .fixedmenu {
    height: 80px;
  }

  main {
    margin-top: 0;
  }
  .topnav {
    margin-bottom: 15px;
    background-color: var(--grey);
    height: 0%;
    /* left: 200px; */
    left: 0px;
    position: relative;
    /*border-bottom: 3px solid var(--blue1);*/
  }

  .topnav li,
  .dropdown .dropbtn {
    display: none;
  }
  .topheader .icon {
    float: right;
    display: block;
  }
  .topnav .wrapper,
  #section1 .wrapper,
  #section2 .wrapper,
  #section3 .wrapper,
  #section4 .wrapper {
    flex-direction: column;
  }
  #section4 * {
    text-align: center;
  }

  .hamburguer i {
    padding-left: 20px;
    font-size: 2em;
    color: var(--blue1);
  }
  header img {
    height: 40px;
    margin-top: 10px;
  }
  .floatingcontent {
    top: 20px;
  }

  .sliderMargin {
    right: 50px;
  }

  .project {
    max-width: 95%;
    margin: auto;
  }

  .separator {
    width: 85%;
    height: auto;
    min-width: 250px;
    margin: 10px auto 50px auto;
    text-align: center;
  }

  /*  .researchgate {
    width: 90%;
  } */

  #about6 ul {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }

  #listaantiguos ul {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }

  .divlogosfooter {
    flex-direction: column;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .topnav.responsive {
    position: relative;
    padding-bottom: 20px;
    width: 90%;
    height: fit-content;
    transition: position 0.5s;
    margin: auto;
    padding: 5%;
    left: 0;
  }

  .topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    height: 100%;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
  }
}

/***************************************/
/***************** MODAL ***************/
/***************************************/

/* JORGE */

.imgmodal {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.imgmodal:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal {
  font-family: Nunito, Arial, Helvetica, sans-serif;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding-top: 22vh; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(30, 30, 30, 0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  height: 65%;
  width: auto;
  max-width: 90%;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 90%;
  max-width: 900px;
  text-align: center;
  color: var(--white);
  padding: 10px 0;
  height: 150px;
  font-size: 0.8em;
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 20vh;
  right: 7vh;
  color: var(--white);
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  filter: drop-shadow(2px 2px 3px #222222);
}

.close:hover,
.close:focus {
  color: var(--blue4);
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 768px) {
  .modal-content {
    width: 100%;
    height: auto;
  }
}

@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
    U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2")
    format("woff2");
}

select {
  font-family: "Twemoji Country Flags", sans-serif;
  font-size: 14px !important;
}

select option {
  font-family: "Twemoji Country Flags", sans-serif;
  font-size: 15px !important;
  line-height: 30px !important;
}

/*Oferta tecnica v2*/

.divofertatecnica {
  display: flex;
  flex-direction: row;
  width: full;
  justify-content: space-between;
}

#ofertatecnica .wrapper img {
  min-width: 100%;
}

#ofertatecnica article {
  background-color: white;
}

#galeriagrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(20, 5vw);
  grid-gap: 15px;
  margin: 1%;
}
#ofertatecnica #galeriagrid img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 6;
}

.foto1 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 6;
}

.foto3 {
  grid-column-start: 6;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6;
}

.foto4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 11;
}

.foto5 {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 16;
  grid-row-end: 21;
}

.foto8 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 11;
}

.foto6 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 11;
  grid-row-end: 16;
}

.foto7 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 11;
  grid-row-end: 16;
}

@media only screen and (max-width: 768px) {
  .divofertatecnica {
    flex-direction: column;
    justify-content: center;
  }

  #galeriagrid {
    width: 65%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(1, 5vw);
    margin-left: 18%;
    margin-right: 18%;
    margin-top: 10%;
    /* place-items: center; */
  }

  #galeriagrid > * {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    &:first-child {
      grid-row-start: 1;
      grid-row-end: 3;
    }
  }
}