html {
  overflow: scroll;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 0;  /* Remove scrollbar space /
  background: transparent;  / Optional: just make scrollbar invisible */
}

body, html {
  height: 100%;
  width: 100%;
}
body {
  background-color: rgb(0, 0, 0);
  overflow: hidden;
  font-family:"neue-haas-grotesk-black";
}


canvas {
  display: block;
}


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

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

@font-face {
  font-family:"neue-haas-grotesk-normal";
  src:url("https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/l?subset_id=2&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/d?subset_id=2&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/a?subset_id=2&fvd=n5&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:500;
  }
  
@font-face {
  font-family:"neue-haas-grotesk-normal_italy";
  src:url("https://use.typekit.net/af/6c4da4/00000000000000007735bb5e/30/l?subset_id=2&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/6c4da4/00000000000000007735bb5e/30/d?subset_id=2&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/6c4da4/00000000000000007735bb5e/30/a?subset_id=2&fvd=i5&v=3") format("opentype");
  font-display:auto;font-style:italic;font-weight:500;
  }
  
@font-face {
  font-family:"neue-haas-grotesk-black";
  src:url("https://use.typekit.net/af/c906c2/00000000000000007735bb6e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/c906c2/00000000000000007735bb6e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/c906c2/00000000000000007735bb6e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:900;
  }
  
@font-face {
  font-family:"neue-haas-grotesk-black_italy";
  src:url("https://use.typekit.net/af/31808c/00000000000000007735bb70/30/l?subset_id=2&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/31808c/00000000000000007735bb70/30/d?subset_id=2&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/31808c/00000000000000007735bb70/30/a?subset_id=2&fvd=i9&v=3") format("opentype");
  font-display:auto;font-style:italic;font-weight:900;
  }

  h1 {
      font-size: 80%; 
      color: white;
      font-family:"neue-haas-grotesk-normal_italy";
      padding-top: 2%;
    }
  
  h2 {
    font-size: 200%; 
    color: white;
    font-family:"neue-haas-grotesk-normal_italy";
    margin: 0%;
  }

  h3 {
    font-size: 250%; 
    color: white;
    margin: 0%;
  }

  h4{
    text-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  }
  
  h5 {
    font-size: 250%; 
    color: white;
    margin-left:auto;
    margin-right:auto;
    text-align:center
  }

  h6 {
    font-family:"neue-haas-grotesk-normal";
    font-size: 150%; 
    color: white;
    margin-left:auto;
    margin-right:auto;
    text-align:center
  }   
  
  #h7 {
    font-family:"neue-haas-grotesk-normal";
    font-size: 150%; 
    color: white;
    text-align:center;
  }

  #h8 {
    font-size: 150%; 
    color: rgb(121, 121, 121);
    text-align:center;
    padding-top:15%;
    transition: 0.5s;
    position: absolute;
    transition-timing-function: ease;
    text-decoration: none;
   }

  #h8:hover {
    color: white;
  }

  #h9 {
    font-size: 150%; 
    color: rgb(121, 121, 121);
    text-align:center;
    padding-top:15%;
    transition: 0.5s;
    position: absolute;
    transition-timing-function: ease;
   }

  #h9:hover {
    color: rgb(0, 0, 0);
  }

  p{
    font-size: 80%;
  }



  table{
    padding-top: 3%;
    padding-bottom: 3%;
    width:45%;
    margin-left:auto;
    margin-right:auto;
  }

  #linha1{
    color: white;
    width: 1.7px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #linha2{
    color: white;
    width:30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }


  .diagrama{
    margin:0 auto;
    text-align:center
  }

  p {
      font-size: 150%; 
      color: white;
      font-family:"neue-haas-grotesk-normal";
      text-align: justify;
    }

    ul {
      font-size: 150%; 
      color: white;
      font-family:"neue-haas-grotesk-normal";
      text-align: justify;
    }

  .pitalic {
      font-family:"neue-haas-grotesk-normal_italy";
    }
  
  .pbold {
      font-family:"neue-haas-grotesk-black";
    }


  #textodes {
    font-size: 100%; 
    opacity: 90%;
    color: white;
    font-family:"neue-haas-grotesk-normal";
    text-align: justify;
    text-justify: inter-word;
  }

  #caminho1 {
    color: rgb(255, 255, 255);
    font-family:"neue-haas-grotesk-black";
    font-size: 600%;
    transform: rotate(-26.5deg) skew(26.5deg);
    top: 4%;
    left: 15%;
    position: absolute;
    cursor: pointer;
    z-index: 1;
    transition: 0.5s;
    transition-timing-function: ease;
  }
  
  #caminho1:hover {
    top: 4.5%;
    left: 14%;
  }

#titulo1 {
  color: rgb(121, 121, 121);
  font-family:"neue-haas-grotesk-black";
  font-size: 600%;
  transform: rotate(-26.5deg) skew(26.5deg);
  top: 8.5%;
  left: 20%;
  position: absolute;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
}

#titulo1:hover {
  color: rgb(255, 255, 255);
  top: 8%;
  left: 20%;
}

#titulo2 {
  color: rgb(121, 121, 121);
  font-family:"neue-haas-grotesk-black";
  font-size: 600%;
  transform: rotate(-26.5deg) skew(26.5deg);
  top: 16.5%;
  left: 40%;
  position: absolute;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
}

#titulo2:hover {
  color: rgb(255, 255, 255);
  top: 16%;
  left: 40%;
}


#titulo3 {
  color: rgb(121, 121, 121);
  font-family:"neue-haas-grotesk-black";
  font-size: 600%;
  transform: rotate(-26.5deg) skew(26.5deg);
  top: 30.5%;
  left: 55%;
  position: absolute;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
}

#titulo3:hover {
  color: rgb(255, 255, 255);
  top: 30%;
  left: 55%;
}

#titulo4 {
  color: rgb(121, 121, 121);
  font-family:"neue-haas-grotesk-black";
  font-size: 600%;
  transform: rotate(-26.5deg) skew(26.5deg);
  top: 50%;
  left: 55%;
  position: absolute;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
}

#titulo4:hover {
  color: rgb(255, 255, 255);
  top: 49.5%;
  left: 55%;
}

#titulo5 {
  color: rgb(121, 121, 121);
  font-family:"neue-haas-grotesk-black";
  font-size: 600%;
  transform: rotate(-26.5deg) skew(26.5deg);
  top: 69.5%;
  left: 55%;
  position: absolute;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
}

#titulo5:hover {
  color: rgb(255, 255, 255);
  top: 69%;
  left: 55%;
}


#cartão1 {
  top: 15.5%;
  left: 25.5%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão1:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão2 {
  top: 9.6%;
  left: 32%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão2:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão3 {
  top: 3.5%;
  left: 38%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão3:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão4 {
  top: 21.9%;
  left: 39%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(-36.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão4:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão5 {
  top: 16%;
  left: 42%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão5:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão6 {
  top: 9%;
  left: 46%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão6:hover {
  width: 300px;
  top: 8%;
  left: 46%;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}

#cartão7 {
  top: 7.2%;
  left: 48%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão7:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  top: 6.2%;
  left: 48%;
  opacity: 100%;
  z-index: 10000;
}

#cartão8 {
  top: 5.5%;
  left: 50%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão8:hover {
  top: 4.5%;
  left: 50%;
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}

#cartão9 {
  top: -1%;
  left: 54%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão9:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão10 {
  top: -8%;
  left: 58%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão10:hover {
  top: -8.5%;
  left: 58%;
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}

#cartão11 {
  top: -9.8%;
  left: 60%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão11:hover {
  top: -10.3%;
  left: 60%;
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}

#cartão12 {
  top: -11.5%;
  left: 62%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão12:hover {
  top: -12%;
  left: 62%;
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}


#cartão13 {
  top: -18.5%;
  left: 66.8%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(-36.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão13:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão14 {
  top: 5.6%;
  left: 55%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(-36.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão14:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão15 {
  top: -0.2%;
  left: 58.2%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão15:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão16 {
  top: -7.3%;
  left: 62.2%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão16:hover {
  width: 300px;
  top: -6.8%;
  left: 62.2%; 
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}

#cartão17 {
  top: -8.9%;
  left: 64.5%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão17:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  top: -8.4%;
  left: 64.5%; 
  opacity: 100%;
  z-index: 10000;
}

#cartão18 {
  top: -10.5%;
  left: 67%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão18:hover {
  top: -10%;
  left: 67%; 
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}

#cartão19 {
  top: 11.8%;
  left: 55%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(-36.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão19:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão20 {
  top: 7%;
  left: 60%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão20:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão21 {
  top: 2%;
  left: 64%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão21:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão22 {
  top: -2.7%;
  left: 64.5%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão22:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  top: 6.2%;
  left: 48%;
  opacity: 100%;
  z-index: 10000;
}

#cartão23 {
  top: -4.2%;
  left: 67%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(-26.5deg) skew(-26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: rgb(0, 0, 0);
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão23:hover {
  top: 4.5%;
  left: 50%;
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
  z-index: 10000;
}

#cartão24 {
  top: 24%;
  left: 55%;
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(-36.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão24:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão25 {
  top: 18%;
  left: 58.2%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 99999;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão25:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão26 {
  top: 13%;
  left: 63%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(26.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index:2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #000000;
}

#cartão26:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
}

#cartão27 {
  top: 25%;
  left: 35%; 
  overflow-wrap: break-word; 
  position: relative;
  padding:10px;
  width: 300px;
  height: 150px;
  transform: rotate(26.5deg) skew(-36.5deg);
  box-shadow: rgba(0, 0, 0, 0.719) 0px 5px 15px;
  border: white;
  border-style: dashed;
  border-width: 1px;
  cursor: pointer;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #ffffff;
  opacity: 50%;
}

#cartão27:hover {
  width: 300px;
  height: 150px;
  transform: rotate(0deg) skew(0deg);
  opacity: 100%;
}

#container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

#background{
  opacity: 100%;
  position: absolute ;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  background-color: #000000;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='50' patternTransform='scale(2) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 0%, 1)'/><path d='M50 25L37.5 50 25 25 37.5 0zm-25 0L12.5 50 0 25 12.5 0z'  stroke-width='1' stroke='hsla(0, 0%, 100%, 0.18)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  background-size: 100%;
  background-position: center;
  width: 6250px;
  height: 6250px;
  position: absolute;
  box-shadow: rgb(0, 0, 0) 60px 60px 60px -20px inset;
}

.box img {
  width: 100%;
  height: 100%;
}

/* Modal Content */

#diagrama{
  width: 70%;
  padding-left: 20%;
  padding-right: 20%;
}

#gif{
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  border: #000000;
  border-radius: 2px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1500; /* Sit on top */
  padding-top: 1%; /* Location of the box */
  left: 0;
  top: 0;
  width:100%; /* Full width */
  height:100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.863); /* Black w/ opacity */
  scale: auto;
}

.modal-content {
  align-content: center;
  padding-top: 1%;
  padding-left: 2%;
  margin: 10%;
  width: 70%;
  height: auto;
  position: relative;
  overflow: scroll; /* Enable scroll if needed */
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: #ffffff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

iframe{
  width: 800px;
  height: 800px;
}

.zoom {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
  cursor: grab;
}
div.zoom > img {
  width: 100%;
  height: auto;
}

#reset{
    background-color: #000000;
    color: #ffffff;
    font-family:"neue-haas-grotesk-normal";
    border-radius: 10%;
    font-size: 80%;
    position: fixed;
    padding: 0.5%;
    bottom: 2%;
    right: 2%;
    z-index: 99999;
    opacity: 50%;
      cursor: pointer;
}

#reset:hover{
  background-color: #ffffff;
  color: #000000;
  font-family:"neue-haas-grotesk-black_italy";
  opacity: 100%;
}

#about{
  cursor: pointer;
  background-color: #000000;
  color: #ffffff;
  font-family:"neue-haas-grotesk-normal";
  border-radius: 10%;
  font-size: 80%;
  position: fixed;
  padding: 0.5%;
  bottom: 2%;
  right: 7%;
  z-index: 99999;
  opacity: 50%;
}

#about:hover{
background-color: #ffffff;
color: #000000;
font-family:"neue-haas-grotesk-black_italy";
opacity: 100%;
}

#video {
  width: 100%;
  height: 68%;
}

#value2 {
  font-family:"neue-haas-grotesk-black";
  text-align: center;
  font-size: 500%;
  margin: 40px auto;
}

input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 800px;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #000000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  transition: .3s ease-in-out;
}​
  input[type="range"]::-webkit-slider-thumb:hover {
    background-color: white;
    border: 2px solid #e74c3c;
  }
  input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
  }

#slider {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#value3 {
  margin-top: 1%;
  opacity: 50%;
  font-family:"neue-haas-grotesk-normal_italy";
  font-size: 100%;
  display: flex;
  justify-content: center;
  color: #ffffff;
}

#conteudo{
padding-top: 12%;
padding-bottom: 12%;
}

#tag{
  color: #ffffff;
}

#value4 {
  font-family:"neue-haas-grotesk-black";
  text-align: center;
  font-size: 500%;
  margin: 40px auto;
}

#value5 {
  margin-top: 1%;
  opacity: 50%;
  font-family:"neue-haas-grotesk-normal_italy";
  font-size: 100%;
  display: flex;
  justify-content: center;
  color: #ffffff;
}
 #image{
  filter: grayscale(100%);
  width: 100%;
 }