.octo {
  content: "";
  /* background: url("../img/filter/hexellence.png"); */
  height: inherit;
  width: inherit;
  position: sticky;
  top: 0;
  bottom: 0vh;
}
#portfolio {
  color: #aca0a0;
  height: unset;
  position: static;
  top: 0;
}
#portfolio main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: unset;
}
#portfolio .title {
  display: flex;
  justify-content: center;
  color: #aca0a0;
  height: 20vh;
  position: relative;
  margin-top: 5vh;
}
#portfolio .title h1 {
  display: flex;
  justify-content: center;
  font-weight: 300;
}
#portfolio .col-2 {
  width: 80vw;
  display: flex;
}
#portfolio .card-container {
  width: 40vw;
}
#portfolio .card-container.right {
  position: relative;
  top: -20vh;
}
#portfolio .card-container.left {
  position: relative;
  margin-top: 10vh;
}
#portfolio .card {
  width: 40vw;
  display: flex;
  flex-direction: column;
  margin-top: 30vh;
  background-color: #f0f8ffc1;
  min-height: 600px;
  justify-content: center;
  padding: 20px;
}
#portfolio .card h2 {
  font-weight: 300;
}
#portfolio .card .separator {
  border-bottom: 1px solid #aca0a0;
  width: 60%;
}
#portfolio .card h4 {
  font-weight: 700;
}
#portfolio .card h4 span {
  font-weight: 400;
}
#portfolio .right {
  text-align: end;
  align-items: flex-end;
  padding-right: 2vw;
}
#portfolio .left {
  text-align: start;
  padding-left: 2vw;
}
#portfolio img {
  width: 25vw;
  margin: 20px 0px 20px 0px;
}