.layout {
  width: 92vw;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.welcomepage {
  width: 100vw;
  height: 800px;
  margin-bottom: 1px;
  padding-top: 50px;
  font-family: "InterTight", sans-serif;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--bg-color);
}

/*title model*/
:root {
  --bg-color: #5BC5AB;
  --typewriterSpeed: 1.7s;
  --typewriterCharacters: 5;
}

.Title {
  font-size: clamp(1rem, 3vw + 1rem, 4rem);
  position: relative;
  font-family: "Bricolage Grotesque", monospace;
  position: relative;
  width: max-content;
  top: 175px;
  font-size: 120px;
  margin: auto;
}


.dad {
  height: 45vw;
  background-color: #F3F3FA;
}

/*cards overview*/

.mkt-3dSlider {
  height: 500px;
  width: 83vw;
  margin-bottom: -120px;
  margin-left: 8%;
}

.card1 {
  position: relative;
  top: 50%;
  left: 17%;
  width: 350px;
  height: 300px;
  margin: -150px;
  float: left;
  perspective: 500px;
}

.card2 {
  position: relative;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 300px;
  margin: -150px;
  float: left;
  perspective: 500px;
}

.card3 {
  position: relative;
  top: 50%;
  left: 83%;
  width: 350px;
  height: 300px;
  margin: -150px;
  float: left;
  perspective: 500px;
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
  border-radius: 20px;
}

.card1:hover .content,
.card2:hover .content,
.card3:hover .content {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

.figuras {
  text-align: center;
}

.front {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(#D19152, #D27063);
  line-height: 300px;
  color: white;
  text-align: center;
  font-size: 60px;
  border-radius: 20px;
  backface-visibility: hidden;
}

.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #D27063;
  text-align: center;
  font-size: 15px;
  border-radius: 20px;
  backface-visibility: hidden;
  background: transparent;
  transform: rotateY(180deg);
}

.textCard1 {
  color: #D27063;
  line-height: 2;
  font-size: 23px;
  padding-top: 12px;
}

.textCard2 {
  color: #D27063;
  line-height: 2;
  font-size: 23px;
  padding-top: 60px;
}

.textCard3 {
  color: #D27063;
  line-height: 2;
  font-size: 23px;
  padding-top: 40px;
}

/*index*/

.sidebar {
  grid-area: sidebar;
  width: 400px;
  margin-top: 1%;
  height: 100%;
  position: sticky;
}

/*secciones*/
.secciones {
  grid-area: body;
  margin-top: 1%;
  width: 100vw;
  height: 100%;
}

.lado {
  position: relative;
  left: 20vw;
  width: 60vw;
  bottom: 19vw;
}


.ajuste_probelmas {
  margin-left: 14vw !important;
}

/*italicas */
.i {
  letter-spacing: 0px;
  padding: 1cm 0cm 1cm 0cm;
  font-size: 14px;
  font-style: italic;
  transition: all .2s ease-in-out;
}

.i:hover {
  transform: scale(1.0);
}


/*tooltips cosas */
.tooltipSignificadoBox {
  position: absolute;
  visibility: hidden;
  background-color: #493F4E;
  /* Cambiado el color de fondo predeterminado */
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  z-index: 500;
  text-align: center;
  width: 300px;
  /* Ancho automático para ajustarse al contenido */
  left: 50%;
  transform: translateX(-50%);
  /* Centrar horizontalmente */
  bottom: 100%;
  /* Colocar por encima de la palabra */
  opacity: 0;
  /* Inicialmente oculto */
  transition: opacity 0.5s, visibility 0.5s;
}

/*flecha que conecta el bloque con el texto */
.tooltipSignificadoBox::after {
  content: "";
  visibility: hidden;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 50%;
  /* Centrar horizontalmente */
  bottom: -7px;
  transform: translateX(-50%);
  /* Centrar la flecha horizontalmente */
  transition: 1s border-top;
}

.tooltipSignificado:hover .tooltipSignificadoBox::after {
  border-top: 10px solid #493F4E;
  transition-delay: 0.6s;
  visibility: visible;
}

.tooltipSignificado:hover .tooltipSignificadoBox {
  opacity: 1;
  /* Mostrar en hover */
  visibility: visible;
  transition-delay: 0.2s;
  margin-bottom: 8px;
  opacity: 95%;
}

.tooltipSignificado {
  position: relative;
  color: #5BC5AB;
  text-decoration: none;
  font-family: "Quicksand";
  transition: 1s color;
}

.tooltipSignificado:hover {
  color: #fff;
  margin-left: 1px;
  margin-right: 1px;
  transition-delay: 0.5s;
}

.tooltipSignificado:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 90%;
  height: 2px;
  color: #fff;
  background: #5BC5AB;
  transform-style: linear;
  transition-property: height, width;
  transition-delay: 0.3s, 0.3s;
  transition-duration: 0.5s;
}

.tooltipSignificado:hover:before {
  transition-property: width, height;
  width: 0px;
  height: 100%;
}

.tooltipSignificado:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #5BC5AB;
  padding-left: 3px;
  transform: scaleX(0);
  transition: 0.5s;
  transition-delay: 0s;
  transform-origin: left;
  z-index: -1;
}

.tooltipSignificado:hover:after {
  transform: scaleX(1);
  transition-delay: 0.8s;
}

/*botones */

.botones-redireccion {
  position: relative;
  margin: 150px auto;
}

.botones-redireccion div {
  height: 400px;
}

.contenedorBoton {
  width: 30px;
  margin: auto;
  height: 30px;
}

.logocontainer {
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  position: relative;
  z-index: 10;
}

@keyframes blink {
  0% {
    transform: scaleX(1) scaleY(1)
  }

  1% {
    transform: scaleX(1.3) scaleY(0.1)
  }

  2% {
    transform: scaleX(1) scaleY(1)
  }

  60% {
    transform: scaleX(1) scaleY(1)
  }

  61% {
    transform: scaleX(1.3) scaleY(0.1)
  }

  62% {
    transform: scaleX(1) scaleY(1)
  }

  100% {
    transform: scaleX(1) scaleY(1)
  }
}

#taffy1 {
  position: relative;
  top: 37%;
  left: 50%;
  width: 49%;
  transform: translate(-50%, -50%);
  z-index: -5;
}

#retina {
  width: 50%;
  margin: 0;
  position: absolute;
  top: 60%;
  left: 49%;
  z-index: -4;
  transform: translate(-50%, -50%);
}

.button-container {
  display: inline-block;
  width: 100vw;
  margin-bottom: 2vw;
  height: 607px;
  background: linear-gradient(#F2F2FAff, white);
}

/* Estilos para los botones en forma de div */
.methods {
  width: 180px;
  height: 180px;
  left: 35%;
  color: #C55B75;
  background-color: transparent;
  border: 5px solid #C55B75;
  border-radius: 50%;
  border-width: 30px;
  position: relative;
  transition: background-color 0.5s, transform 0.5s;
  overflow: hidden;
  z-index: 10;
}

.overview {
  top: 50%;
  left: -12%;
  width: 180px;
  height: 180px;
  color: #5BC5AB;
  background-color: transparent;
  border: 5px solid #5BC5AB;
  /* Borde en los div de los botones */
  border-radius: 50%;
  /* Hace que los div de los botones sean circulares */
  border-width: 30px;
  transition: background-color 0.5s, transform 0.5s;
  position: absolute;
}

.results {
  top: 50%;
  left: 80%;
  width: 180px;
  height: 180px;
  color: #447D9C;
  background-color: transparent;
  border: 5px solid #447D9C;
  /* Borde en los div de los botones */
  border-radius: 50%;
  /* Hace que los div de los botones sean circulares */
  border-width: 30px;
  transition: background-color 0.5s, transform 0.5s;
  position: absolute;
}

.button-content {
  position: absolute;
  top: 50%;
  height: fit-content;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 180px;
}

.overview:hover .button-content,
.methods:hover .button-content,
.results:hover .button-content {
  height: fit-content;
  top: 40%;
}


/* Efecto de crecimiento y cambio de fondo al pasar el cursor sobre los div de los botones */
.methods:hover {
  border: none;
  background-color: #C55B75;
  transform: scale(1.5);
}

.overview:hover {
  border: none;
  background-color: #5BC5AB;
  transform: scale(1.5);
}

.results:hover {
  border: none;
  background-color: #447D9C;
  transform: scale(1.5);
}

/* Estilo para el contenido de los div de los botones al pasar el cursor sobre ellos */
.methods:hover .tituloBoton,
.overview:hover .tituloBoton,
.results:hover .tituloBoton {
  font-size: 18px;
}

.methods:hover .contentBoton,
.overview:hover .contentBoton,
.results:hover .contentBoton {
  text-align: justify;
  color: white;
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding-bottom: 10px;
}

/* Estilo para el botón "Learn More" al pasar el cursor sobre los div de los botones */
.learnMore {
  background-color: transparent;
  border: 3px solid white;
  border-radius: 10px;
  color: white;
  padding: 5px 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  font-size: 10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.learnMore:active {
  margin-top: 3px;
  margin-left: 3px;
  box-shadow: none;
}

.learnMore:focus {
  outline: none;
}

.methods:hover .learnMore {
  display: inline-block;
  width: 80px;
  background-color: #C55B75;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.overview:hover .learnMore {
  display: inline-block;
  width: 80px;
  background-color: #5BC5AB;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.results:hover .learnMore {
  display: inline-block;
  width: 80px;
  background-color: #447D9C;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

/* Estilo para los títulos y contenido de los div de los botones */
.tituloBoton {
  font-size: 16px;
  font-weight: bold;
  align-items: center;
  margin: auto auto;
}

.contentBoton {
  font-size: 13px;
  display: none;
}

/* Efecto de sombra y transformación al pasar el cursor sobre los botones */
.methods:hover .tituloBoton,
.overview:hover .tituloBoton,
.results:hover .tituloBoton,
.methods:hover .contentBoton,
.overview:hover .contentBoton,
.results:hover .contentBoton {
  color: white;
  max-width: 100%;
  max-height: 100%;
  display: contents;
  height: 139px;
  width: 175px;
}

/*figuras*/
.pie_de_figura {
  height: fit-content;
  margin-top: 2vw;
}

/*introduccion*/
.introduction {
  text-align: center;
}

.introduction2 {
  text-align: center;
}

/*cosas del side bar index*/

.index1,
.index2,
.index3 {
  margin-left: 30px;
  width: 7vw;
  text-align: center;
  height: fit-content;
  border-radius: 20px;
  position: sticky;
  top: 150px;
}

.index1 {
  background: linear-gradient(#9dcfc2, #5BC5AB);
}

.index2 {
  background: linear-gradient(#eab0be, #C55B75);
}

.index3 {
  background: linear-gradient(#65bfef, #447D9C);
}

.navigation li {
  list-style: none;
}

.navigation li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 10px 10px;
  margin: 10px 0px 10px 0px;
  font-weight: 400;
  transition: all ease-out 250ms;
  border-radius: 10px;
}

.navigation li a:hover {
  margin: 2px, 5px, 2px, 5px;
  background-color: black;
  opacity: .4;
}

p {
  margin-left: 5%;
  margin-right: 5%;
}

h2::after,
h2::before {
  content: " ";
  text-align: center;
  display: block;
  border: 2px solid #5BC5AB;
  background-color: #f8f8f8;
}

.subtitleO,
.subtitleM,
.subtitleR {
  text-align: center;
  font-family: 'Bricolage Grotesque';
  font-size: 3vw;
  font-weight: 500;
  color: #302535;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-rows: 16px 0;
  grid-gap: 22px;
  align-items: center;
  max-width: 100%;
  padding-top: 10px;
}

.subtitleO:after,
.subtitleO:before {
  content: " ";
  display: block;
  border: 2px solid #5BC5AB;
  background-color: #f8f8f8;
}

.subtitleM:after,
.subtitleM:before {
  content: " ";
  display: block;
  border: 2px solid #C55B75;
  background-color: #f8f8f8;
}

.subtitleR:after,
.subtitleR:before {
  content: " ";
  display: block;
  border: 2px solid #447D9C;
  background-color: #f8f8f8;
}



.welcomepage {
  position: relative;
  text-align: center;
  background: linear-gradient(60deg, #5BC5AB 0%, rgba(0, 172, 193, 1) 100%);
  color: white;
}

.inner-header {
  height: 65vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

.flex {
  /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position: relative;
  width: 100vw;
  height: 15vh;
  margin-top: -150px;
  min-height: 442px;
  max-height: 150px;
}

/* Animation */

.parallax>use {
  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

.tituloContenido {
  margin-left: 43px;
}

.tituloContenido2 {
  margin-left: 43px;
}

.contenido {
  text-align: justify;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Quicksand';
  text-align: justify;
  line-height: 1.5;
  margin-left: 43px !important;
  color: black;
  max-width: 90%;
}

.contenido2 {
  text-align: justify;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Quicksand';
  text-align: justify;
  line-height: 1.5;
  margin-left: 14vw !important;
  color: black;
  max-width: 90%;
}


.Content {
  margin-left: 10px;
  height: fit-content;
  margin-right: 10px;
}

/*animación al pasar el cursor encima de las preguntas*/
.cta1 {
  position: relative;
  margin: span;
  padding: 8px 12px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  margin-left: 130px !important;
}

.cta1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
  border-radius: 50px;
  background: #61d3c4;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
}

.cta1 span {
  position: relative;
  font-family: 'Quicksand';
  font-size: 1.2rem;
  font-weight: 500;
  color: black;
}

.cta1 svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.cta1:hover svg {
  transform: translateX(0);
}

.cta1:active {
  transform: scale(0.95);
}

.cta1:hover:before {
  width: 75vw;
  background: #43f4e2;
}

.table1 {
  margin-left: 20%;
}

.table2 {
  margin-left: 30%;
}

/*animación de metodos de deteccion*/

.cta2 {
  position: relative;
  margin: span;
  padding: 8px 12px;
  transition: all 0.2s ease;
  border: none;
  background: none;
}

.cta2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
  border-radius: 50px;
  background: #e5715f;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
}

.cta2 span {
  position: relative;
  font-family: 'Quicksand';
  font-size: 2.2rem;
  font-weight: 500;
  color: black;
}

.cta2 svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.cta2:hover svg {
  transform: translateX(0);
}

.cta2:active {
  transform: scale(0.95);
}

.cta2:hover:before {
  width: 75vw;
  background: #e5715f;
}

/*cta3 cosas*/
.cta3 {
  position: relative;
  margin: span;
  padding: 8px 12px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  margin-left: 130px !important;
}

.cta3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
  border-radius: 50px;
  background: #447D9C;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
}

.cta3 span {
  position: relative;
  font-family: 'Quicksand';
  font-size: 2.2rem;
  font-weight: 500;
  color: black;
}

.cta3 svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #447D9C;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.cta3:hover svg {
  transform: translateX(0);
}

.cta3:active {
  transform: scale(0.95);
}

.cta3:hover:before {
  width: 75vw;
  background: #447D9C;
}


.table1 {
  margin-left: 20%;
}

.table2 {
  margin-left: 30%;
}

/*Tabla de las ecuaciones quimicas*/
* {
  margin: 0;
  padding: 0;
}

.table-wrap {
  max-width: 1300;
  margin: 50;
  overflow-x: auto;
}

table,
td,
th {
  /*   border: 1px solid #ddd; */
  text-align: left;
  font-size: 18px;
}

table thead tr {
  background-color: #071665;
  color: #fff;
}

table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 16px 16px 0px 0px;
  overflow: hidden;
}

table tbody tr td {
  border: 1px solid #ddd;
}

th,
td {
  padding: 15px;
  white-space: nowrap;
}

table tbody tr:nth-child(odd) {
  background: #b4b4b442;
  color: #000;
  font-weight: 500;
}

.box-wrap {
  padding: 0px 16px;
  position: relative;
  left: 21px;

}

table tbody tr td::last-child {
  background-color: red;
}

/*Boton desplegable de referencias*/
.accordion {
  width: 0%;
  max-width: 1000px;
  margin: 2rem auto;
  justify-self: center;
}

.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  width: 90%;
  justify-self: center;

}

.accordion-item {
  justify-self: center;
  background-color: #ffffff;
  color: #111;
  margin: auto;
  border-radius: 3px;
  box-shadow: 7px 7px #5BC5AB;
  width: 80%;
  margin-bottom: 20px;
  border: solid 0.5px #EBEBF1;

}


.accordion-item-header {
  min-height: 60px;
  font-size: 1.2rem;
  padding: 0.5rem 3rem 0.5rem 1rem;
  line-height: 1.5;
  font-weight: 500;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: 'Bricolage Grotesque';
  font-size: 1.5rem;
}

.accordion-item-header::after {
  content: "\002B";
  font-size: 1.5rem;
  position: absolute;
  right: 1rem;
}

.accordion-item-header.active::after {
  content: "\2212";
}

.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding-left: 20px;
  padding-right: 20px;

}

.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
  justify-content: center;
  font-weight: 600;
  font-family: 'Quicksand';
  text-align: justify;
  margin-left: 20px;
  margin-right: 20px;
}

/*cosas del diagrama IPTG induction*/

.diagramaIPTG {
  position: relative;
  z-index: 1;
}

/*tooltips cosas */
.tooltipSignificadoBoxDiagrama {
  position: absolute;
  visibility: hidden;
  background-color: #C55B75;
  /* Cambiado el color de fondo predeterminado */
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  z-index: 500;
  text-align: center;
  width: 300px;
  /* Ancho automático para ajustarse al contenido */
  left: 50%;
  transform: translateX(-50%);
  /* Centrar horizontalmente */
  bottom: 100%;
  /* Colocar por encima de la palabra */
  opacity: 0;
  /* Inicialmente oculto */
  transition: opacity 0.5s, visibility 0.5s;
}

/*flecha que conecta el bloque con el texto */
.tooltipSignificadoBoxDiagrama::after {
  content: "";
  visibility: hidden;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 50%;
  /* Centrar horizontalmente */
  bottom: -7px;
  transform: translateX(-50%);
  /* Centrar la flecha horizontalmente */
  transition: 0s border-top;
}

.tooltipSignificadoDiagrama:hover .tooltipSignificadoBoxDiagrama::after {
  border-top: 10px solid #C55B75;
  transition-delay: 0s;
  visibility: visible;
}

.tooltipSignificadoDiagrama:hover .tooltipSignificadoBoxDiagrama {
  visibility: visible;
  transition-delay: 0s;
  margin-bottom: 8px;
  opacity: 80%;
}

.tooltipSignificadoDiagrama {
  position: relative;
  color: transparent;
}

.tooltipSignificadoDiagrama:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 90%;
  height: 2px;
  color: #fff;
  transform-style: linear;
  transition-property: height, width;
  transition-delay: 0s, 0s;
  transition-duration: 0s;
}

.tooltipSignificadoDiagrama:hover:before {
  transition-property: width, height;
  width: 0px;
  height: 100%;
}

.tooltipSignificadoDiagrama:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding-left: 3px;
  transform: scaleX(0);
  transition: 0s;
  transition-delay: 0s;
  transform-origin: left;
  z-index: -1;
}

.tooltipSignificadoDiagrama:hover:after {
  transform: scaleX(1);
  transition-delay: 0s;
}


.imagenDiagrama {
  opacity: 90%;
  margin-left: 140px;
  position: relative;
  z-index: 1;
}

/*cosas del 1*/
.ciclo1 {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 18px;
  bottom: 270px;
  left: 453px;
}

.ciclo1:hover .azul1 {
  opacity: 300%;
}

.hilo_ondulante {
  position: relative;
  bottom: 15px;
  z-index: 3;
  height: 15px;
  left: 28px;
  width: 60px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}


.lacl_gene {
  border: 20px;
  height: 27px;
  z-index: 3;
  width: 75px;
  position: relative;
  bottom: 30px;
  right: 92px;
  box-shadow: 0 0 15px red;
  opacity: 0%;
}

/*cosas del 2*/
.ciclo2 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 275px;
  left: 549px;
  z-index: 3;
}

.ciclo2:hover .azul2 {
  opacity: 300%;
}

.hilo_ondulante2 {
  position: relative;
  bottom: 10px;
  height: 15px;
  right: 68px;
  width: 60px;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  border-radius: 20px;
}

.cosaAmarilla {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 12px;
  height: 29px;
  left: 30px;
  bottom: 29px;
  border-radius: 20px;
}

/*cosas del 3*/
.ciclo3 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 274px;
  left: 627px;
  z-index: 3;
}

.ciclo3:hover .azul3 {
  opacity: 300%;
}

.cosaAmarilla2 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 12px;
  height: 29px;
  right: 48px;
  top: -14px;
  border-radius: 20px;
}

.dosCosasAmarillas {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 29px;
  bottom: 43px;
  left: 47px;
  width: 25px;
  border-radius: 20px;
}

/*cosas del 4*/
.ciclo4 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 274px;
  left: 738px;
  z-index: 3;
}

.ciclo4:hover .azul4 {
  opacity: 300%;
}

.dosCosasAmarillas2 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 29px;
  top: -14px;
  right: 64px;
  width: 25px;
  border-radius: 20px;
}

.dosAmarillasRojas {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 48px;
  width: 24px;
  left: 57px;
  bottom: 57px;
  border-radius: 20px;
}

/*cosas del 5*/
.ciclo5 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 234px;
  left: 645px;
  z-index: 3;
}

.ciclo5:hover .azul5 {
  opacity: 300%;
}

.dosCosasAmarillas3 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 29px;
  bottom: 53px;
  left: 29px;
  width: 25px;
  border-radius: 20px;
}

.lacO1 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: 86px;
  width: 67px;
  height: 21px;
  bottom: 35px;
}

.lacO2 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 36px;
  bottom: 14px;
  right: 38px;
  width: 65px;
  border-radius: 20px;
}

.lacO3 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 20px;
  left: 25px;
  width: 65px;
  bottom: 78px;
}


/*cosas del 6*/
.ciclo6 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 213px;
  left: 839px;
  z-index: 3;
}

.ciclo6:hover .azul6 {
  opacity: 300%;
}

.dosAmarillasRojas2 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 48px;
  bottom: 89px;
  right: 45px;
  width: 25px;
  border-radius: 20px;
}

.lacO4 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 20px;
  right: 94px;
  width: 65px;
  bottom: 62px;
}

.lacO5 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 20px;
  left: 4px;
  width: 65px;
  bottom: 112px;
}

.lacO6Amarillos {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 60px;
  right: 6px;
  width: 65px;
  border-radius: 20px;
  bottom: 79px;
}

/*cosas del ciclo 7*/
.ciclo7 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 286px;
  left: 518px;
  z-index: 3;
}

.ciclo7:hover .azul7 {
  opacity: 300%;
}

.hilo_ondulante3 {
  position: relative;
  top: 3px;
  height: 15px;
  right: 37px;
  width: 60px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.circuloTachado {
  position: relative;
  bottom: 71px;
  height: 17px;
  right: 19px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

/*cosas del ciclo 8*/
.ciclo8 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 301px;
  left: 587px;
  z-index: 3;
}

.ciclo8:hover .azul8 {
  opacity: 300%;
}

.cosaAmarilla3 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 12px;
  height: 30px;
  right: 8px;
  top: 12px;
  border-radius: 20px;
}

.circuloTachado2 {
  position: relative;
  bottom: 86px;
  height: 17px;
  right: 13px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

/*cosas del ciclo 8*/
.ciclo9 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 296px;
  left: 708px;
  z-index: 3;
}

.ciclo9:hover .azul9 {
  opacity: 300%;
}

.circuloTachado3 {
  position: relative;
  bottom: 82px;
  height: 17px;
  left: 2px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.dosCosasAmarillas4 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 29px;
  right: 35px;
  top: 8px;
  width: 25px;
  border-radius: 20px;
}

.ciclo10 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 296px;
  left: 825px;
  z-index: 3;
}

.ciclo10:hover .azul10 {
  opacity: 300%;
}

.circuloTachado4 {
  position: relative;
  bottom: 99px;
  height: 17px;
  right: -10px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.dosAmarillasRojas3 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 48px;
  bottom: 6px;
  right: 31px;
  width: 25px;
  border-radius: 20px;
}

.ciclo11 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 86px;
  left: 245px;
  z-index: 3;
}

.ciclo11:hover .azul11 {
  opacity: 300%;
}

.tresBolasVerdes {
  position: relative;
  bottom: 3px;
  height: 41px;
  right: -34px;
  width: 38px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.muchasBolasVerdes {
  position: relative;
  bottom: 85px;
  height: 92px;
  right: 105px;
  width: 86px;
  box-shadow: 0 0 15px red;
  border-radius: 30px;
  opacity: 0%;
}

.ciclo12 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 124px;
  left: 654px;
  z-index: 3;
}

.ciclo12:hover .azul12 {
  opacity: 300%;
}

.dosBolasVerdes {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 41px;
  left: 20px;
  bottom: 18px;
  border-radius: 20px;
}

.dosBolasVerdes2 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 39px;
  left: -38px;
  bottom: 58px;
  border-radius: 20px;
}

.dosAmarillasDosBolas2 {
  position: relative;
  bottom: 42px;
  height: 41px;
  right: -15px;
  width: 38px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.lacO7 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: 48px;
  width: 67px;
  height: 39px;
  bottom: 197px;
  border-radius: 10px;
}

.ciclo13 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 117px;
  left: 833px;
  z-index: 3;
}

.ciclo13:hover .azul13 {
  opacity: 300%;
}

.dosBolasVerdes3 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 41px;
  left: 17px;
  bottom: 17px;
  border-radius: 20px;
}

.dosBolasVerdes4 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 39px;
  left: -41px;
  bottom: 56px;
  border-radius: 20px;
}

.lacO8 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: 64px;
  width: 67px;
  height: 21px;
  bottom: 37px;
}

.dosAmarillasRojasDosBolas {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 56px;
  bottom: 70px;
  right: -17px;
  width: 39px;
  border-radius: 20px;
}

.lacO9Amarillos {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 60px;
  right: -1px;
  width: 65px;
  border-radius: 20px;
  bottom: 245px;
}

.ciclo14 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 318px;
  left: 636px;
  z-index: 3;
}

.ciclo14:hover .azul14 {
  opacity: 300%;
}

.dosBolasVerdes5 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 41px;
  left: 5px;
  bottom: 8px;
  border-radius: 20px;
  transform: rotate(-35deg);
}

.dosBolasVerdes6 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 39px;
  left: 39px;
  bottom: 74px;
  border-radius: 20px;
  transform: rotate(-25deg);
}

.dosCosasAmarillas5 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 29px;
  bottom: 91px;
  left: 38px;
  width: 25px;
  border-radius: 20px;
}

.dosAmarillasDosBolas3 {
  position: relative;
  bottom: 153px;
  height: 41px;
  right: 15px;
  width: 38px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.ciclo15 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 330px;
  left: 758px;
  z-index: 3;
}

.ciclo15:hover .azul15 {
  opacity: 300%;
}

.dosBolasVerdes7 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 41px;
  left: 4px;
  bottom: 1px;
  border-radius: 20px;
  transform: rotate(-30deg);
}

.dosBolasVerdes8 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 15px;
  height: 39px;
  left: 38px;
  bottom: 67px;
  border-radius: 20px;
  transform: rotate(-30deg);
}

.dosAmarillasRojas4 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 48px;
  bottom: 110px;
  right: -36px;
  width: 25px;
  border-radius: 20px;
}

.dosAmarillasRojasDosBolas2 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 56px;
  bottom: 161px;
  right: 9px;
  width: 39px;
  border-radius: 20px;
}

.ciclo16 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 358px;
  left: 680px;
  z-index: 3;
}

.ciclo16:hover .azul16 {
  opacity: 300%;
}

.dosAmarillasDosBolas {
  position: relative;
  bottom: 36px;
  height: 41px;
  right: 57px;
  width: 38px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.circuloTachado5 {
  position: relative;
  bottom: 91px;
  height: 17px;
  right: -7px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.ciclo17 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 366px;
  left: 805px;
  z-index: 3;
}

.ciclo17:hover .azul17 {
  opacity: 300%;
}

.dosAmarillasRojasDosBolas3 {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 56px;
  bottom: 46px;
  right: 56px;
  width: 39px;
  border-radius: 20px;
}

.circuloTachado6 {
  position: relative;
  bottom: 99px;
  height: 17px;
  right: -13px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.ciclo18 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 138px;
  left: 443px;
  z-index: 3;
}

.ciclo18:hover .azul18 {
  opacity: 300%;
}

.hilo_ondulante4 {
  position: relative;
  bottom: 3px;
  z-index: 3;
  height: 15px;
  left: -32px;
  width: 60px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
  transform: rotate(67deg);
}

.cadena {
  position: relative;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: 101px;
  width: 243px;
  height: 21px;
  bottom: 66px;
}

.ciclo19 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 113px;
  left: 469px;
  z-index: 3;
}

.ciclo19:hover .azul19 {
  opacity: 300%;
}

.hilo_ondulante5 {
  position: relative;
  bottom: 28px;
  z-index: 3;
  height: 15px;
  left: -58px;
  width: 60px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
  transform: rotate(67deg);
}

.cosaVerde {
  position: relative;
  bottom: 34px;
  height: 44px;
  right: -21px;
  width: 34px;
  box-shadow: 0 0 15px red;
  border-radius: 26px;
  opacity: 0%;
}

.ciclo20 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 62px;
  left: 463px;
  z-index: 3;
}

.ciclo20:hover .azul20 {
  opacity: 300%;
}

.hilo_ondulante6 {
  position: relative;
  bottom: 79px;
  z-index: 3;
  height: 15px;
  left: -51px;
  width: 60px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
  transform: rotate(67deg);
}

.circuloTachado7 {
  position: relative;
  bottom: 9px;
  height: 17px;
  right: 21px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.ciclo21 {
  position: absolute;
  width: 10px;
  height: 18px;
  bottom: 47px;
  left: 519px;
  z-index: 3;
}

.ciclo21:hover .azul21 {
  opacity: 300%;
}

.circuloTachado8 {
  position: relative;
  bottom: -11px;
  height: 17px;
  right: 17px;
  width: 23px;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
}

.cosaVerde2 {
  position: relative;
  bottom: 103px;
  height: 44px;
  right: 28px;
  width: 34px;
  box-shadow: 0 0 15px red;
  border-radius: 26px;
  opacity: 0%;
}

/*ajuste de numero de las ecuaciones*/
.NumeroEcuacion {
  position: relative;
  bottom: 21px;
  left: 5px;
}


/*COSAS DEL DIAGRAMA DE VALORES*/
.valores_diagrama {
  height: 35vw;
  width: 80%;
  margin-left: 15vw;
  margin-bottom: -4vw;
}

.title_circulo1 {
  position: relative;
  top: 4vw;
  margin-left: 3.5vw;
  font-size: 2vw;
}

.title_circulo2 {
  position: relative;
  top: 5.5vw;
  margin-left: 1vw;
  font-size: 2vw;
}

.title_circulo3 {
  position: relative;
  top: 5.7vw;
  margin-left: 3vw;
  font-size: 2vw;
}

.title_circulo4 {
  position: relative;
  top: 5.6vw;
  margin-left: 3vw;
  font-size: 2vw;
}

.title_circulo5 {
  position: relative;
  top: 5.5vw;
  margin-left: 1vw;
  font-size: 2vw;
}

/*cosas de los circulos de valores*/


.public_health {
  background-color: #459e89;
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  top: 7vw;
  left: -2vw;
  position: relative;
  color: black;
  font-weight: bold;
}

.public_health:hover {
  transform: scale(2);
  position: relative;
  z-index: 1;
}

/*para que el titulo del boton no se vea en hover*/
.public_health:hover .title_circulo1,
.public_health:hover .title_circulo2,
.public_health:hover .title_circulo3,
.public_health:hover .title_circulo4,
.public_health:hover .title_circulo5 {
  visibility: hidden;
}


/*para que el texto no se vea y el titulo sin que este en hover*/
.relation1,
.relation2,
.relation3,
.relation4,
.relation5 {
  visibility: hidden;
}

.public_health:hover .relation1 {
  visibility: visible;
}

/*acomodar titulo y texto de relacion  */

.titulo_relation {
  position: relative;
  left: 4vw;
  bottom: 2vw;
  font-size: 0.5vw;
  width: fit-content;
}

.descripcionR {
  font-size: 0.35vw;
  position: relative;
  bottom: 2vw;
  right: 0.2vw;
  width: 10vw;
  text-align: justify;
}

/*para que el texto no se vea y el titulo sin que este en hover*/
.implementation1,
.implementation2,
.implementation3,
.implementation4,
.implementation5 {
  visibility: hidden;
}

.public_health:hover .implementation1 {
  visibility: visible;
}

/*para acomodar el titulo y texto de implementacion*/
.titulo_implementation {
  position: relative;
  left: 5vw;
  bottom: 2.5vw;
  width: fit-content;
  font-size: 0.5vw;
}

.descripcionI {
  font-size: 0.35vw;
  position: relative;
  bottom: 2.7vw;
  right: 0.2vw;
  width: 10.1vw;
  text-align: justify;
}


/*cosas del valor de anti waste*/

.anti_waste {
  background-color: rgb(89, 185, 162);
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  position: relative;
  left: 10vw;
  bottom: 8vw;
  color: black;
  font-weight: bold;
}

.anti_waste:hover {
  transform: scale(2);
  position: relative;
  z-index: 1;
}

/*para que el titulo del boton no se vea en hover*/
.anti_waste:hover .title_circulo1,
.anti_waste:hover .title_circulo2,
.anti_waste:hover .title_circulo3,
.anti_waste:hover .title_circulo4,
.anti_waste:hover .title_circulo5 {
  visibility: hidden;
}

/*para que se cambie a visible las cosas */
.anti_waste:hover .relation2 {
  visibility: visible;
}

.anti_waste:hover .implementation2 {
  visibility: visible;
}

/*cosas del boton integrity*/

.integrity {
  background-color: rgb(91, 197, 171);
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  position: relative;
  left: 22vw;
  bottom: 23vw;
  color: black;
  font-weight: bold;
}

.integrity:hover {
  transform: scale(2);
  position: relative;
  z-index: 1;
}

/*para que el titulo del boton no se vea en hover*/
.integrity:hover .title_circulo1,
.integrity:hover .title_circulo2,
.integrity:hover .title_circulo3,
.integrity:hover .title_circulo4,
.integrity:hover .title_circulo5 {
  visibility: hidden;
}

/*para que se cambie a visible las cosas */
.integrity:hover .relation3 {
  visibility: visible;
}

.integrity:hover .implementation3 {
  visibility: visible;
}

/*cosas del boton privaci*/

.privacy {
  background-color: rgb(129, 209, 191);
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  position: relative;
  left: 34vw;
  bottom: 38vw;
  color: black;
  font-weight: bold;
}

.privacy:hover {
  transform: scale(2);
  position: relative;
  z-index: 1;
}

/*para que se cambie a visible las cosas */
.privacy:hover .relation4 {
  visibility: visible;
}

.privacy:hover .implementation4 {
  visibility: visible;
}

/*para que el titulo del boton no se vea en hover*/
.privacy:hover .title_circulo1,
.privacy:hover .title_circulo2,
.privacy:hover .title_circulo3,
.privacy:hover .title_circulo4,
.privacy:hover .title_circulo5 {
  visibility: hidden;
}

/*cosas del boton sustainability*/

.sustainability {
  background-color: rgb(167, 220, 211);
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  position: relative;
  left: 45vw;
  bottom: 53vw;
  color: black;
  font-weight: bold;
}

.sustainability:hover {
  transform: scale(2);
  position: relative;
  z-index: 1;
}

/*para que el titulo del boton no se vea en hover*/
.sustainability:hover .title_circulo1,
.sustainability:hover .title_circulo2,
.sustainability:hover .title_circulo3,
.sustainability:hover .title_circulo4,
.sustainability:hover .title_circulo5 {
  visibility: hidden;
}

/*para que se cambie a visible las cosas */
.sustainability:hover .relation5 {
  visibility: visible;
}

.sustainability:hover .implementation5 {
  visibility: visible;
}

.implementation1,
.relation1 {
  margin-left: 0.5vw;
  margin-top: -2.5vw;
  margin-bottom: 4vw;
}

.implementation2,
.relation2 {
  margin-left: 0.5vw;
  margin-top: -0.5vw;
}

.implementation3,
.relation3 {
  margin-left: 0.6vw;
}

.implementation4,
.relation4 {
  margin-left: 0.5vw;
  margin-top: 0.4vw;
}

.implementation5,
.relation5 {
  margin-left: 0.5vw;
  margin-top: 0.4vw;
}


/*DIAGRAMA GOTAS*/
.diagrama_gotas {
  position: relative;
  margin-left: 3vw;
  max-height: 700px;
  transform: scale(0.5);
  margin-top: -8vw;
  margin-bottom: 5vw;
}


.titulo_gota1,
.titulo_gota2,
.titulo_gota3,
.titulo_gota4,
.titulo_gota5,
.titulo_gota6,
.titulo_gota7,
.titulo_gota8,
.titulo_gota9,
.titulo_gota10 {
  position: relative;
  rotate: -45deg;
  font-size: 15px;
  color: white;
  text-align: center;
  font-size: 1vw;
}

.titulo_gota1 {
  margin-left: 0vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 3vw;
}

.titulo_gota9 {
  margin-left: -1vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 3.5vw;
  font-size: 0.8vw;
}

.titulo_gota3 {
  margin-left: -1vw;
  margin-bottom: 1vw;
  margin-top: 7vw;
  padding-top: 3.5vw;
}

.titulo_gota4 {
  margin-left: -0.2vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 3vw;
}

.titulo_gota5 {
  margin-left: 0vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 2vw;
}

.titulo_gota6 {
  margin-left: 0vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 3vw;
}

.titulo_gota7 {
  margin-left: -0.5vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 3vw;
}

.titulo_gota8 {
  margin-left: 0.5vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 2vw;
}

.titulo_gota10 {
  margin-left: 0.5vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
  padding-top: 2vw;
}

.texto_gota1,
.texto_gota2,
.texto_gota3,
.texto_gota4,
.texto_gota5,
.texto_gota6,
.texto_gota7,
.texto_gota8,
.texto_gota9,
.texto_gota10
 {
  display: none;
  position: relative;
  font-size: 0.4vw;
  top: 1vw;
  left: 2vw;
  width: 4vw;
  rotate: -45deg;
}


.gota1 {
  background-color: #BC3F5C;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 7vw;
  left: -9vw;
  z-index: 2;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform-origin: left;
  transform: rotate(45deg) scale(3);
  top: -2vw;
}

.gota1:hover {
  transform: scale(5);
  rotate: 45deg;
  z-index: 3;
  transform-origin: left;
}

.gota1:hover .texto_gota1 {
  display: grid;
  rotate: 314deg;
  width: 5.3vw;
  margin-left: -1.4vw;
  margin-top: -2.5vw;
  font-size: 0.4vw;
  text-align: center;
  padding-top: 15px;
  color: white;
}

.gota1:hover .titulo_gota1 {
  display: none;
}

.gota2 {
  display: none;
}


.gota3 {
  background-color: #BA796C;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 21vw;
  left: 46.5vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
}

.gota3:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  top: -8vw;
  z-index: 3;
}

.gota3:hover .texto_gota3 {
  display: grid;
  rotate: 314deg;
  width: 5.3vw;
  margin-left: -1.2vw;
  margin-top: -2.5vw;
  font-size: 0.4vw;
  text-align: center;
  color: white;
}

.gota3:hover .titulo_gota3 {
  display: none;
}

.gota4 {
  background-color: #DE8551;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 23vw;
  left: 72.5vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
  top: -12vw;
}

.gota4:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  z-index: 3;
}

.gota4:hover .texto_gota4 {
  display: grid;
  rotate: 314deg;
  width: 5.7vw;
  margin-left: -1.1vw;
  margin-top: -2.5vw;
  font-size: 0.4vw;
  text-align: center;
  color: white;
  padding-top: -1vw;
}

.gota4:hover .titulo_gota4 {
  display: none;
}

.gota5 {
  background-color: #F6AE2D;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 1vw;
  left: 45vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
  top: -20vw;
}

.gota5:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  z-index: 3;
}


.gota5:hover .texto_gota5 {
  display: grid;
  rotate: 314deg;
  width: 6.2vw;
  margin-left: -1.7vw;
  margin-top: -2.5vw;
  font-size: 0.36vw;
  text-align: center;
  color: white;
}

.gota5:hover .titulo_gota5 {
  display: none;
}

.gota6 {
  background-color: #ABBA6D;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 1vw;
  left: 4.5vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
}

.gota6:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  z-index: 3;
}

.gota6:hover .texto_gota6 {
  display: grid;
  rotate: 314deg;
  width: 5.3vw;
  margin-left: -0.9vw;
  margin-top: -2.5vw;
  font-size: 0.35vw;
  text-align: center;
  color: white;
}

.gota6:hover .titulo_gota6 {
  display: none;
}

.gota7 {
  background-color: #5BC5AA;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 15vw;
  left: 31.5vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
  top: -9vw;
}

.gota7:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  z-index: 3;
}

.gota7:hover .texto_gota7 {
  display: grid;
  rotate: 314deg;
  width: 6.1vw;
  margin-left: -1.3vw;
  margin-top: -2.5vw;
  font-size: 0.4vw;
  text-align: center;
  color: white;
  padding-top: 0.4vw;
}

.gota7:hover .titulo_gota7 {
  display: none;
}

.gota8 {
  background-color: #5BE1E6;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 15vw;
  left: 59.5vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
  top: -17vw;
}

.gota8:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  z-index: 3;
}

.gota8:hover .texto_gota8 {
  display: grid;
  rotate: 314deg;
  width: 5.7vw;
  margin-left: -1.5vw;
  margin-top: -2.5vw;
  font-size: 0.4vw;
  text-align: center;
  color: white;
  font-size: 0.37vw;
  padding-top: 0.5vw;
}

.gota8:hover .titulo_gota8 {
  display: none;
}


.gota9 {
  background-color: #447D9C;
  position: relative;
  z-index: 2;
  width: 7vw;
  bottom: 58vw;
  left: 17.5vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
  top: -51vw;
}

.gota9:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  z-index: 3;
}

.gota9:hover .texto_gota9 {
  display: grid;
  rotate: 314deg;
  width: 5.6vw;
  margin-left: -1vw;
  margin-top: -2.5vw;
  font-size: 0.4vw;
  text-align: center;
  color: white;
  padding-top: -2.5vw;
}

.gota9:hover .titulo_gota9 {
  display: none;
}

.gota10 {
  background-color: #DF8A8A;
  position: relative;
  z-index: 2;
  width: 7vw;
  left: 87.5vw;
  height: 7vw;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  transform-origin: left;
  transform: rotate(45deg) scale(3);
  top: -33vw;
}

.gota10:hover {
  transform: scale(5);
  rotate: 45deg;
  transform-origin: left;
  z-index: 3;
}

.gota10:hover .texto_gota10 {
  display: grid;
  rotate: 314deg;
  width: 5.6vw;
  margin-left: -1.5vw;
  margin-top: -2.5vw;
  font-size: 0.4vw;
  text-align: center;
  color: white;
  padding-top: -2.5vw;
}

.gota10:hover .titulo_gota10 {
  display: none;
}





















/*ajuste tabla y colores*/
.tabla_chemicalReactios th,
.tabla_chemicalReactios td {
  border: 2px solid #C55B75;
}

.tabla_chemicalReactios th {
  background-color: #C55B75;
  color: #ffffff;
}


.INDEX {
  display: none;
}

.instructionDiagram {
  background-color: #C55B75;
  color: white;
  width: fit-content;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  height: 3vw;
  border-radius: 25px;
  margin-left: 20vw;
  margin-bottom: 43px;
  margin-top: 7vw;
}

.sectM,
.sectR {
  display: none;
}



.topcardscontainer {
  height: 393px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 20px;
}

.card {
  text-align: center;
  width: 300px;
  height: 200px;
  box-shadow: 0 0 70px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  transition: 0.7s;
  overflow: hidden;
}

.card-item {
  background-color: transparent;
  color: rgb(206, 206, 206);
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
}

.card-item h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: bold;
}

.card-item h4 {
  font-family: 'Bricolage Grotesque';
  color: #5BC5AB;
  font-size: 1.2rem;
}

.card-item:hover h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.card-text {
  background-color: #fff;
  padding: 15px 10px;
  text-align: justify;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: 1s ease-in-out;
}

.card-text p {
  margin-bottom: 30px;
  font-size: 1.4rem;
  text-align: center;
  transition: 1s ease-in-out;
  margin: 31px;
}

.card:hover {
  height: 420px;
  width: 21vw;
  overflow: auto;
}

.card:hover .card-item5 {
  background-color: #5BC5AB;
  color: white;
  height: 300px;
  width: 100%;
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
}

.card:hover .card-item1 {
  background-color: #D27063;
  color: white;
  height: 300px;
  width: 100%;
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
}

.card:hover .card-item2 {
  background-color: #447D9C;
  color: white;
  height: 300px;
  width: 100%;
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
}

.card:hover .card-item3 {
  background-color: #F6AE2D;
  color: white;
  height: 300px;
  width: 100%;
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
}

.card:hover .card-item4 {
  background-color: #A9BA6C;
  color: white;
  height: 300px;
  width: 100%;
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
}

.card:hover .card-text {
  height: 200px;
  left: 0;
  /* top: 40%; */
  bottom: 0;
  visibility: visible;
  opacity: 1;
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
  transition: 1.2s ease-in-out;
}

.ODS2 {
  background: transparent;
  width: 50%;
  max-width: 217px;
  height: auto;
  position: relative;
  top: 7vw;
  left: 13vw;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.ODS3 {
  background: transparent;
  top: 7vw;
  left: 16%;
  transform: translate(-50%, -50%);
  width: 50vw;
  max-width: 217px;
  height: auto;
  position: relative;
  z-index: 10;


}

.ODS12 {
  background: transparent;
  width: 50%;
  max-width: 217px;
  height: auto;
  position: relative;
  top: 7vw;
  left: 14vw;
  transform: translate(-50%, -50%);
  z-index: 10;

}

.ODS15 {
  background: transparent;
  width: 50%;
  max-width: 217px;
  height: auto;
  position: relative;
  top: 7vw;
  left: 15vw;
  transform: translate(-50%, -50%);
  z-index: 10;
}


.post_it_1 {
  background: transparent;
  top: 10vw;
  left: 22vw;
  transform: translate(-50%, -50%);
  width: 50vw;
  max-width: 300px;
  height: auto;
  position: relative;
  z-index: 10;
}

.post_it_2 {
  background: transparent;
  top: 10vw;
  left: 21vw;
  transform: translate(-50%, -50%);
  width: 50vw;
  max-width: 300px;
  height: auto;
  position: relative;
  z-index: 10;
}

.post_it_3 {
  background: transparent;
  top: 10vw;
  left: 20vw;
  transform: translate(-50%, -50%);
  width: 50vw;
  max-width: 300px;
  height: auto;
  position: relative;
  z-index: 10;
}

.graficas {
  background: transparent;
  top: 14vw;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1000px;
  height: auto;
  position: relative;
  z-index: 10;
}

.graficasDiagrama {
  height: 25vw;
}

.diagramaCadenaValor {
  height: 24vw;
}

.cadena_de_valor {
  background: transparent;
  left: 54%;
  transform: translate(-50%, -50%);
  max-width: 900px;
  top: 7vw;
  height: auto;
  position: relative;
  z-index: -1;
}

.card1 {
  background: transparent;
  top: 686%;
  left: 54%;
  transform: translate(-50%, -50%);
  max-width: 1000px;
  height: auto;
  position: absolute;
  z-index: 10;
}

.foto_antibioticos {
  margin-left: 14vw;
  max-width: 50vw;
}

.foto_pequeño_productor {
  margin-left: 14vw;
  max-width: 50vw;
}

.foto_leche {
  margin-left: 12vw;
  max-width: 50vw;
}

.foto_medicinas {
  margin-left: 14vw;
  max-width: 50vw;
}

.foto_delmar {
  margin-left: 14vw;
  max-width: 50vw;
}

.foto_collection {
  margin-left: 18vw;
  max-width: 50vw;
}

.foto_taffi_cartel {
  margin-left: 27vw;
  max-width: 50vw;
}

.foto_zoetis {
  margin-left: 14vw;
  max-width: 50vw;
}

.flecha_1 {
  margin-left: 10vw;
  max-width: 30vw;
}

.lado2 {
  position: relative;
  left: 25vw;
  bottom: 22vw;
  width: 57vw;
}

.lado3 {
  position: relative;
  left: 26vw;
  bottom: 10vw;
  width: 57vw;
}

.titulo_verde {
  background: #309b8d;
  color: white;
  border-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 17%;
  max-width: fit-content;
  margin-top: 5vw;
  margin-bottom: 5vw;
}

.contpapa2_1 {
  height: 120px;
  margin-top: 2vw;
  position: relative;
  width: 300px;
  overflow: hidden;
  margin-left: 11vw;
  background: #5BC5AB;
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.contpapa2_1:hover {
  height: 23.5vw;
  padding-bottom: 2vw;
}

.contpapa2_2 {
  height: 120px;
  bottom: 8.3vw;
  width: 300px;
  overflow: hidden;
  position: relative;
  left: 33vw;
  background: #447D9C;
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.contpapa2_2:hover {
  height: 16vw;
  padding-bottom: 2vw;
}

.contpapa2_3 {
  height: 120px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: #5BC5AB;
  left: 55vw;
  bottom: 16.6vw;
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.contpapa2_3:hover {
  height: 19vw;
  padding-bottom: 2vw;
}

.contpapa2_4 {
  height: 120px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: #447D9C;
  left: 11vw;
  bottom: 10.6vw;
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.contpapa2_4:hover {
  height: 17vw;
  padding-bottom: 2vw;
}

.contpapa2_5 {
  height: 120px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: #5BC5AB;
  left: 33vw;
  bottom: 18.9vw;
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.contpapa2_5:hover {
  height: 17vw;
  padding-bottom: 2vw;
}

.contpapa2_6 {
  height: 120px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: #447D9C;
  left: 55vw;
  bottom: 27.25vw;
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.contpapa2_6:hover {
  height: 14vw;
  padding-bottom: 2vw;
}

.contpapa2_1:hover .causetxt,
.contpapa2_2:hover .causetxt,
.contpapa2_3:hover .causetxt,
.contpapa2_4:hover .causetxt,
.contpapa2_5:hover .causetxt,
.contpapa2_6:hover .causetxt {
  margin-top: -2vw;
}


.decoracionAzul {
  color: #82CFB1;
}

.cause h1 {
  margin: auto;
  align-self: center;
  justify-self: center;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Quicksand";
}

.causetxt p {
  font-size: 1rem;
  font-family: 'Quicksand';
  text-align: center;
  color: black;
  width: 17vw;
  margin-left: 0.5vw;
}

.contcauses {
  max-height: 800px;
  width: 100%;
  padding: 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 70px;
  margin-bottom: 70px;
  background-color: #A7DCD3;
}

.contcauses h5 {
  font-size: 2rem;
  font-family: 'Quicksand';
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cause {
  display: flex;
  height: 120px;
  width: 300px;
  justify-content: center;
  overflow: hidden;
}

.instructionDiagram2 {
  background: linear-gradient(to right, #447D9C, #5BC5AB);
  color: white;
  width: fit-content;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  height: 3vw;
  font-size: 1vw;
  border-radius: 25px;
  margin: auto;
}

.causetxt {
  align-self: center;
  text-align: center;
  font-family: 'Quicksand';
  font-weight: 500;
  color: white;
  padding-left: 1vw;
  padding-right: 1.5vw;
}

.contpapa,
.contpapa_2,
.contpapa_3 {
  height: 120px;
  width: 300px;
  overflow: hidden;
  margin-left: 27vw;
  background: linear-gradient(#447D9C, #5BC5AB);
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}


.contpapa_4 {
  height: 120px;
  width: 300px;
  overflow: hidden;
  margin-left: 27vw;
  background: linear-gradient(#447D9C, #5BC5AB);
  transition: 1s;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.contpapa:hover {
  height: fit-content;
}

.contpapa_2:hover {
  height: fit-content;
  padding-bottom: 2vw;
}

.contpapa_3:hover {
  height: 19vw;
  padding-bottom: 2vw;
}

.contpapa_4:hover {
  height: 38vw;
  padding-bottom: 2vw;
}

.subtitulo {
  margin-left: 3vw;
}

.instructionDiagram {
  background-color: #C55B75;
  color: white;
  width: fit-content;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  height: 3vw;
  border-radius: 25px;
  margin-left: 20vw;
  margin-bottom: 45px;
}

.barChart {
  background: #fff;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  padding-left: 7%;
  padding-top: 2%;
  max-width: 500px;
  height: 375px;
  border-radius: 50px;
}

.graphTitle {
  font-size: 2vw;
  font-weight: normal;
  line-height: 10%;
  margin: 0 0 20px 0;
  color: #249081;
  padding-left: 100px;
}

.antibiotic {
  color: #309B8D;
}

/* Graph */
/* Containers */
#wrapper {
  min-width: 51vw;
  position: relative;
  margin: 2vw auto;
}

#figure {
  height: 380px;
  position: relative;
}

#figure ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.graph {
  height: 283px;
  position: relative;
}

/*cosas pasos proceso milk*/


.homeCardsContainer {
  width: 100vw;
  height: 40vw;
  padding-left: 6vw;

}



.cardContain {
  width: 80%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

.instructionDiagram2 {
  background: linear-gradient(to right, #447D9C, #5BC5AB);
  color: white;
  width: fit-content;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  height: 3vw;
  font-size: 1vw;
  border-radius: 25px;
  margin: auto;
}

.cardText {
  width: 35vw;
  height: fit-content;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
  gap: 2px;
  margin-right: 20px;
  margin-top: 13%;
  z-index: 100;
  transition: 0.3s;
  opacity: 0;
  transition-delay: 0;
}

.cardContain.active .cardText {
  opacity: 1;
  transition-delay: 0.3s;


}



.cardSub {
  width: 35vw;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
  padding-top: 15px;
  font-weight: 600;

}


.arrowSub {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: end;
  color: white;
  font-size: 2rem;
  padding: 10px 20px;
  animation: arrow 2.5s infinite;
}

@keyframes arrow {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0);
  }
}

.cardHomeTitle {
  font-size: 4rem;
  font-weight: 600;
  line-height: 4rem;
  margin: 0;
  padding: 0;
  width: 100%;
  color: black;
}

.cardHomeText {
  font-size: 1rem;
  line-height: 1.031;
  font-weight: 700;
  margin: 0;
  padding: 0;
  width: 100%;
  color: black;
}

.cardHomeTitle:hover,
.cardHomeText:hover {
  color: black;
}


.cardHome {
  width: 40vw;
  height: 40vw;
  display: flex;
  align-items: center;
  padding-left: 20px;
  position: relative;
}

.cardPos {
  width: 78%;
  height: 78%;
  transform: var(--rotate);
  transition: 0.5s;
  transition-delay: 0;
}

.cardContain.active .cardHome .cardPos {
  transform: rotate(0deg);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
  z-index: 1000;
}

.cardContain.hidden .cardHome .cardPos {
  transform: translateX(1200px) rotate(0);
  display: none;
  transition-delay: 0;
  z-index: 999;
}

.cardHomeIMG {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cardBackHome {
  width: 100vw;
  height: 40vw;
  position: absolute;
  left: 0;
  z-index: -55;
}

.cardBackHome.reverse {
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  .homeCardsContainer {
    padding-left: 0;
    height: 720px;
  }

  .cardContain {
    width: 100%;
    height: 720px;

  }

  .cardText {
    width: 100%;
    margin-right: 0;
    margin-top: 0;
    padding: 0 20px;
  }

  .cardSub {
    width: 100%;
    padding-top: 0;
  }

  .cardHomeTitle {
    font-size: 2rem;
    line-height: 2rem;
  }

  .cardHomeText {
    font-size: 1rem;
  }

  .cardHome {
    width: 80vw;
    height: 80vw;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
}

@media (max-width: 1250px) {
  .cardHomeTitle {
    font-size: 3rem;
    line-height: 3rem;
  }
}

@media (max-width: 500px) {
  .homeCardsContainer {
    padding-left: 0;
    height: 520px;
  }

  .cardContain {
    width: 100%;
    height: 520px;

  }

  .cardText {
    width: 100%;
    margin-right: 0;
    margin-top: 0;
    padding: 0 20px;
  }

  .cardSub {
    width: 100%;
    padding-top: 0;
  }

  .cardHomeTitle {
    font-size: 2rem;
    line-height: 2rem;
  }

  .cardHomeText {
    font-size: 1rem;
  }

  .cardHome {
    width: 100vw;
    height: 100vw;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}


/* Bar Graph Vertical */
.bar-graph .year {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
}

.bar-graph-vertical {
  margin-top: 8px;
  max-width: 47vw;
  margin-left: 5vw;
}

.bar-graph-vertical .bar-container {
  float: left;
  height: 150px;
  margin-right: 30px;
  position: relative;
  text-align: center;
  width: 10%;
}

.bar-graph-vertical .bar {
  border-radius: 3px;
  bottom: 40px;
  position: absolute;
  width: 45px;
}

.bar-graph-two .bar::after {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  color: #fff;
  content: attr(data-percentage);
  font-weight: 700;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: left;
  top: 24px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bar-graph-two .bar-one .bar {
  background-color: #61D3C4;
  -webkit-animation: show-bar-one-vertical 1.2s 0.1s forwards;
  -moz-animation: show-bar-one-vertical 1.2s 0.1s forwards;
  animation: show-bar-one-vertical 1.2s 0.1s forwards;
}

.bar-graph-two .bar-two .bar {
  background-color: #5DC4B6;
  -webkit-animation: show-bar-two-vertical 1.2s 0.2s forwards;
  -moz-animation: show-bar-two-vertical 1.2s 0.2s forwards;
  animation: show-bar-two-vertical 1.2s 0.2s forwards;
}

.bar-graph-two .bar-three .bar {
  background-color: #4DBBAD;
  -webkit-animation: show-bar-three-vertical 1.2s 0.3s forwards;
  -moz-animation: show-bar-three-vertical 1.2s 0.3s forwards;
  animation: show-bar-three-vertical 1.2s 0.3s forwards;
}

.bar-graph-two .bar-four .bar {
  background-color: #38B5A6;
  -webkit-animation: show-bar-four-vertical 1.2s 0.4s forwards;
  -moz-animation: show-bar-four-vertical 1.2s 0.4s forwards;
  animation: show-bar-four-vertical 1.2s 0.4s forwards;
}

.bar-graph-two .bar-five .bar {
  background-color: #38B5A6;
  -webkit-animation: show-bar-five-vertical 1.2s 0.4s forwards;
  -moz-animation: show-bar-five-vertical 1.2s 0.4s forwards;
  animation: show-bar-five-vertical 1.2s 0.4s forwards;
}

.bar-graph-two .bar-six .bar {
  background-color: #38B5A6;
  -webkit-animation: show-bar-six-vertical 1.2s 0.4s forwards;
  -moz-animation: show-bar-six-vertical 1.2s 0.4s forwards;
  animation: show-bar-six-vertical 1.2s 0.4s forwards;
}

/* Bar Graph Vertical Animations */
@-webkit-keyframes show-bar-one-vertical {
  0% {
    height: 0;
  }

  100% {
    height: 95%;
  }
}

@-webkit-keyframes show-bar-two-vertical {
  0% {
    height: 0;
  }

  100% {
    height: 95%;
  }
}

@-webkit-keyframes show-bar-three-vertical {
  0% {
    height: 0;
  }

  100% {
    height: 80%;
  }
}

@-webkit-keyframes show-bar-four-vertical {
  0% {
    height: 0;
  }

  100% {
    height: 70%;
  }
}

@-webkit-keyframes show-bar-five-vertical {
  0% {
    height: 0;
  }

  100% {
    height: 70%;
  }
}

@-webkit-keyframes show-bar-six-vertical {
  0% {
    height: 0;
  }

  100% {
    height: 1%;
  }
}

@-webkit-keyframes fade-in-text {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.Yaxis-title {
  font-size: 18px;
  position: absolute;
  text-align: center;
  transform: rotate(-90deg) translate(-110px, -110px);
  width: 17vw;
  font-weight: bold;
  color: #309B8D;
  left: 3vw;
}

.Xaxis-title {
  font-size: 18px;
  position: relative;
  text-align: center;
  transform: translate(-35%, 1077%);
  width: 1vw;
  font-weight: bold;
  color: #309B8D;
  left: 17vw;
  top: 1.5vw;
}

.x-axis {
  bottom: 0;
  color: #309B8D;
  position: absolute;
  width: 100%;
  top: 90%;
  left: 0px;
}

.hr_70 {
  color: transparent;
  position: absolute;
  margin-top: -25px;
  left: -17px;
}

.bar:hover .hr_70 {
  color: #309b8d;
}

.hr_80 {
  color: transparent;
  position: absolute;
  margin-top: -26px;
  left: -17px;
}

.bar:hover .hr_80 {
  color: #309b8d;
}

.hr_95 {
  color: transparent;
  position: absolute;
  margin-top: -38px;
  left: -17px;
}

.bar:hover .hr_95 {
  color: #309b8d;
}

.bar_0 {
  color: #309b8d;
  position: relative;
  margin-top: 80px;
  left: -12px;
}

.instr {
  background: #309b8d;
  color: white;
  border-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 25%;
  margin-top: 5%;
  max-width: fit-content;
}

/*diagrama de bolitas*/
.selector {
  position: relative;
  left: 37vw;
  top: -8vw;
  width: 9.7vw;
  height: 10vw;
  margin-top: 25vw;
  margin-bottom: 8vw;
}

.selector button {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://static.igem.wiki/teams/4607/wiki/fonts/logopeqcut.png');
  background-size: 32vw;
  border-radius: 50%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all .1s;
}

.selector button:focus {
  outline: none;
}

.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
  color: white;
}

.selector li input {
  display: none;
}

.selector li input+label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input:checked+label {
  color: white;
}

.selector.open li input+label {
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-left: -40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: white;
}

.selector li:nth-child(7n+1) input+label {
  background: #5BC5AB;
  /* Verde */
}

.selector li:nth-child(7n+2) input+label {
  background: #CE788F;
  /* Rosa */
}

.selector li:nth-child(7n+3) input+label {
  background: #E4A17C;
  /* Naranja */
}

.selector li:nth-child(7n+4) input+label {
  background: #CE788F;
  /* Rosa */
}

.selector li:nth-child(7n+5) input+label {
  background: #5BC5AB;
  /* Verde */
}

.selector li:nth-child(7n+6) input+label {
  background: #CE788F;
  /* Rosa */
}

.selector li:nth-child(7n+7) input+label {
  background: #E4A17C;
  /* Naranja */
}

.description1,
.description2,
.description3,
.description4,
.description5,
.description6,
.description7 {
  display: none;
  position: relative;
  top: -200%;
  left: 0%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 5px;
  width: 500px;
}

.selector.open li:nth-child(1):hover .description1 {
  display: inline-block;
  left: 12vw;
  top: -8vw;
  width: 750px;
}

.selector.open li:nth-child(2):hover .description2 {
  display: inline-block;
  transform: rotate(-52deg);
  margin-top: -50px;
  margin-left: -50px;
}

.selector.open li:nth-child(3):hover .description3 {
  display: inline-block;
  transform: rotate(-103deg);
  top: -31vw;
  left: -22vw;
}

.selector.open li:nth-child(4):hover .description4 {
  display: inline-block;
  transform: rotate(-154deg);
  left: -42vw;
  top: -20vw;
}

.selector.open li:nth-child(5):hover .description5 {
  display: inline-block;
  transform: rotate(154deg);
  left: -42vw;
  top: 7vw;
}

.selector.open li:nth-child(6):hover .description6 {
  display: inline-block;
  transform: rotate(103deg);
  left: -24vw;
  top: 28vw;
}

.selector.open li:nth-child(7):hover .description7 {
  display: inline-block;
  transform: rotate(51deg);
  left: 2vw;
  top: 24vw;
}

.stickyIndex {
  position: sticky;
  top: 15vh;
  width: fit-content;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lineIndex {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #00b9b0;
  top: 0;
  left: 54%;
  transform: translate(-50%, 0);
}

.indexDots {
  position: relative;
  width: 47px;
  height: 101%;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.scrollIndexContain {
  position: absolute;
  height: calc(100% - 150px);
  z-index: 1;
  margin-left: 30px;

}

.stickyIndex {
  position: sticky;
  top: 15vh;
  width: fit-content;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lineIndex {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #00b9b0;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.indexDots {
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.dotIndex {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00b9b0;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}

.dotIndex:hover {
  width: 20px;
  height: 20px;
}

.dotIndex.active {
  width: 20px;
  height: 20px;
}

.dotIndex::before {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  top: 50%;
  left: 50%;
  transition: 0.5s;
}

.dotIndex.active::before {
  width: 10px;
  height: 10px;
}

.dotText {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 500;
  transition: 0.5s;
  opacity: 1;
  color: rgba(15, 14, 15, 0.788);
  top: 50%;
  transform: translate(0, -50%);
  left: 22px;
  opacity: 0;
}

.stickyIndex:hover .indexDots .dotIndex .dotText {
  opacity: 0.5;
}

.dotIndex.active .dotText {
  opacity: 1;
  transition-delay: 0.3s;
}


.dotIndex:hover .dotText,
.stickyIndex:hover .indexDots .dotIndex:hover .dotText {
  opacity: 0.7;
  transition: 0.25s;
}

.dotIndex.active:hover .dotText {
  opacity: 1;
  transition-delay: 0.3s;
}

.active .scrollIndexContain {
  opacity: 1;

}

.teamScroll {
  overflow: visible;
  overflow-x: clip;
  overflow-y: visible;
  overflow-y: clip;
}

.dotIndex {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00b9b0;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}

.dotIndex:hover {
  width: 20px;
  height: 20px;
}

.dotIndex.active {
  width: 20px;
  height: 20px;
}

.dotIndex::before {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  top: 50%;
  left: 50%;
  transition: 0.5s;
}

.dotIndex.active::before {
  width: 10px;
  height: 10px;
}

.dotText {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 500;
  transition: 0.5s;
  opacity: 1;
  color: rgba(15, 14, 15, 0.788);
  top: 50%;
  transform: translate(0, -50%);
  left: 22px;
  opacity: 0;
}

.dotIndex.active .dotText {
  opacity: 1;
  transition-delay: 0.3s;
}

.dotIndex.active:hover .dotText {
  opacity: 1;
  transition-delay: 0.3s;
}

.dotIndex:hover .dotText {
  opacity: 0.5;
  transition: 0.25s;
}

.contOurBeg,
.tituloOurBeg {
  margin-left: 11%;
}

.contOurBeg1 {
  margin-left: 14%;
  margin-top: -28%;
}

.instr_selector {
  background: #309b8d;
  color: white;
  border-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 30%;
  margin-top: 5%;
  max-width: fit-content;
}

.gotas {
  margin-left: -10%;
  margin-top: 18%;
}

.title_whereStarted {
  margin-top: -5vw;
}

.hipervinculoEntre {
  color: #0868a6 !important;
  text-decoration: underline !important;
}

.listDot {
  font-size: 17px;
  margin-left: 50px;
  list-style-type: circle;
  display: list-item;
}


.parraf {
  margin-left: 15vh !important;
  margin-top: 1vh !important;
}

.round-image {
  border-radius: 100%;
  height: 180px;
  margin: 0 auto;
  width: 180px;
  overflow: hidden;
  transition: top .2s ease-in-out, width .5s, height .5s;
}

.round-image:hover {
  width: 250px;
  height: 250px;
}

#Gold {
  font-size: 101%;
  max-width: 54%;
}

.bloquear-desbordamiento {
  overflow: hidden;
}

.popup {
  background-color: #C55B75;
  display: none;
  position: fixed;
  top: 17%;
  left: 10%;
  width: 81%;
  height: 76%;
  z-index: 9999;
  border-radius: 67px;
  animation: fade-in .5s ease forwards;
  flex-direction: column;
  /* overflow: hidden; */
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.PopUpTitle {
  color: white;
  font-size: 114%;
  text-align: center;
}

.PopUpContent {
  color: white;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  height: fit-content;
  overflow-y: auto;
  padding-top: 2%;
}

.boton-ocultar {
  border-radius: 50%;
  width: 30px;
  height: auto;
  color: white;
  font-weight: bold;
  background-color: red;
  box-shadow: 2px 2px 4px black;
  margin-bottom: 9%;
  position: absolute;
  float: right;
  top: 5%;
  right: 5%;
}

.boton-ocultar:hover {
  background-color: darkred;
}

.boton-mostrar-timeline {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  outline: 0;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  color: #000;
  background: #fff;
  line-height: 30px;
  border-radius: 40px;
  padding: 20px;
  font-size: 70px;
  font-weight: 600;
  box-shadow: rgb(255, 198, 0) -2px -2px 0px 2px, rgb(246, 84, 174) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
  transition: all 0.2s;


}

.boton-mostrar-timeline:hover {
  box-shadow: rgb(246, 84, 174) -2px -2px 0px 2px, rgb(255, 198, 0) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
  transform: scale(1.01);
}

h2 {
  text-align: center;
}

#divBolitas {

  padding-bottom: 2%;
  padding-top: 5%;
}

#divBolitas img {
  width: 10%;
}

.afterTImeline {
  font-weight: normal;
}

#sectionResults {
  text-align: justify;
  font-size: 17px;
  font-weight: normal;
}

#Clickhere {
  text-align: center;
  font-size: 15px;
  padding-top: 2%;
}

p {
  font-weight: normal;
}

#traffic {
  clip-path: inset(0px 0px 150px);
  width: 100%;
  height: 500px;
  ;
  object-fit: cover;
  margin-top: 1%;
  margin-bottom: -8%;
}

#DiagramOverview {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

#DiagramOverview img {
  width: 17%;
  margin-left: 45%;
  margin-right: 45%;
}

#botons {
  display: flex;
  align-items: center;
  padding-top: 2%;
}

#botons button {
  margin: 0 5%;
  background-color: #00b9b0;
  color: #fff;

  font-size: 24px;
  padding: 10px;
  width: 150px;
  height: 50px;

  border: 1px solid #fff;
  border-radius: 5px;

  &:hover {
    background-color: #fff;
    color: #000;
  }
}

.TitleCArd {

  margin: 20px auto;
  border: 1px solid #5BC5AB;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
  transition: all 0.5s ease-in-out;
  font-weight: bold;
}

.TitleCArd:hover {
  transform: scale(1.1);
  background-color: #00b9b0;
  color: white;
}

#AppM-Info,
#TargeM-Info,
#DrugSys-Info,
#AppM-Info2,
#TargeM-Info2,
#DrugSys-Info2 {
  height: 50%;
  margin: 20px auto;
  border: 1px solid #5BC5AB;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
  max-width: 350px;
  padding: 20px;
}

#AppM-Info:hover,
#TargeM-Info:hover,
#DrugSys-Info:hover,
#AppM-Info2:hover,
#TargeM-Info2:hover,
#DrugSys-Info2:hover {
  transform: scale(1.1);
    background-color: #00b9b0;
    color: white;
}

.COntent{
  width: 50%;
}

.content{
  display: flex;
}