@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

.q_somos_corto {
  box-sizing: border-box;
  /*  display:flex;  */
  max-width: 99vw;
  height: 98%;
  /*background-color:rgba(87, 115, 133, 0.699);  */

  background-image: linear-gradient(196deg, #E5E1DC, #76777C);

  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-weight: bold;
  line-height: 1.5;
}

.tit_somos {
  box-sizing: border-box;
  position: relative;
  font-size: 2.5rem;
  height: 6rem;
  /*  text-shadow: 2px 0.8px 0.8px rgba(144, 189, 219, 0.979);  */
  margin: auto;
  padding-left: 100px;

  color: #ffffff;
  background-color: #333;
  letter-spacing: 0.1em;
  text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c,
    0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424,
    0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c,
    0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414,
    0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}

.contenido_q_somos_corto {
  display: grid;
  max-width: 99%;
  height: 99%;
  position: relative;
  grid:
    " cabecera            cabecera         "0.1fr " texto_zomi          texto_nacemos    "0.5fr " text_inteligencia   texto_desarrollo "0.5fr / 0.1fr 1fr;
  gap: 15px;
  padding: 15px;
}

.cabecera {
  grid-area: cabecera;
  box-sizing: border-box;
}

.img_q_somos_corto {
  box-sizing: border-box;
  position: relative;
  width: 97%;
  height: auto;
  margin: auto;
  border-radius: 10px;
}

.texto_zomi {
  grid-area: texto_zomi;
  box-sizing: border-box;
  position: relative;
}

.text_inteligencia {
  grid-area: text_inteligencia;
  box-sizing: border-box;
  position: relative;
}

.glass_nacemos {
  max-width: 90%;
  height: auto;
  margin: auto;
  background-color: rgb(255, 255, 255, 0.1);
  /*   background-color: rgba(8, 191, 247, 0.13);  */

  padding: 1.25rem;
  border-radius: 0.62rem;
  backdrop-filter: blur(2rem);
  border: 0.125 solid transparent;
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);
}

.texto_nacemos {
  grid-area: texto_nacemos;
  box-sizing: border-box;
  position: relative;
  font-size: 1.8rem;
  text-align: justify;
  color: #202630;
  text-shadow: 2px 0.8px 0.8px rgba(219, 225, 230, 0.979);
  line-height: 2;
  margin-top: 2rem;
  padding: auto;
}

.glass-desarrollo {
  max-width: 90%;
  height: auto;
  margin: auto;
  background-color: rgb(255, 255, 255, 0.1);
  /*    background-color: rgba(8, 193, 240, 0.329);  */
  padding: 1.25rem;
  border-radius: 0.62rem;
  backdrop-filter: blur(2rem);
  border: 0.125 solid transparent;
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);
}

.texto_desarrollo {
  grid-area: texto_desarrollo;
  box-sizing: border-box;
  position: relative;
  font-size: 1.8rem;
  text-align: justify;
  color: #202630;
  text-shadow: 2px 0.8px 0.8px rgba(219, 225, 230, 0.979);
  line-height: 2.5;
  padding: auto;
}

.texto_zomi {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  margin-top: 40px;
  font-size: 1.7rem;
  writing-mode: tb-rl;
  writing-mode: vertical-rl;

  /*
    color:#fcfcfc;
    text-shadow: 2px 0.8px 0.8px #202630;   
    */

  color: #fff;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

.text_inteligencia {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  margin: auto;
  font-size: 1.6rem;
  writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #fff;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}


.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px;
  /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}

/* Animation */

.parallax>use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.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);
  }
}