#tri1 {
  fill: #00a7d8;
  stroke: #00a7d8;
}

#tri2 {
  fill: #00b8e1;
  stroke: #00b8e1;
}

#tri3 {
  fill: #00b3df;
  stroke: #00b3df;
}

#tri4 {
  fill: #65c6e8;
  stroke: #65c6e8;
}

#tri5 {
  fill: #77cbea;
  stroke: #77cbea;
}

#tri6 {
  fill: #a1d9f0;
  stroke: #a1d9f0;
}

#tri7 {
  fill: #adddf2;
  stroke: #adddf2;
}

#tri8 {
  fill: #cfeaf8;
  stroke: #cfeaf8;
}

#tri_bg_1 {
  fill: #037d3e;
}

/* Caleffi */
#tri_bg_2 {
  fill: #037d3e;
}

/* Caleffi */
#tri_bg_3 {
  fill: #037d3e;
}

/* Caleffi */
#tri_bg_4 {
  fill: #037d3e;
}

/* Caleffi */
#tri_bg_5 {
  fill: #093864;
}

/* Grundfos */
#tri_bg_6 {
  fill: #20afd9;
}

/* Kewel */
#tri_bg_7 {
  fill: #134a90;
}

/* Fantini Cosmi */
#tri_bg_8 {
  fill: #e00014;
}

/* Elbi */


#tri1, #tri2, #tri3, #tri4, #tri5, #tri6, #tri7, #tri8 {
  stroke-width: 0.5px;
  stroke-linecap="round";
  stroke-linejoin="round";
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

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

.tri_hex {
  width: 30%;
  margin-right: 2%;
}

.tri_titulos {
  width: 30%;
  margin-left: 2%;
  position: relative;
}

.tri_seccion_ti {
  display: flex;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 1rem;
  text-align: left;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 0;

}

.tri_logo_marca {
  width: clamp(10vw, 250px, 30vw);
}

.tri_tr {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

.tri_tr:hover {
  opacity: 0;
  stroke: none;
  transition: opacity 500ms ease-in-out;
}

/* Animacion opacidad triangulos */
@-webkit-keyframes optran {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes optran {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#tri1, #tri2, #tri3, #tri4 {
  -webkit-animation: optran 4s 1 0.5s;
  animation: optran 4s 1 0.5s;
}

#tri5 {
  -webkit-animation: optran 4s 1;
  animation: optran 4s 1;
}

#tri6 {
  -webkit-animation: optran 4s 1 1s;
  animation: optran 4s 1 1s;
}

#tri7 {
  -webkit-animation: optran 4s 1 2s;
  animation: optran 4s 1 2s;
}

#tri8 {
  -webkit-animation: optran 4s 1 1.5s;
  animation: optran 4s 1 1.5s;
}


/* BORRAR AL INTRODUCIR CONTENIDO REAL*/
.seccion {
  height: 50vh;
}