@media (max-width: 1920px) {
  .projects .screens .screen1 {
    height: 120%;
  }
  .projects .screens .screen2 {
    height: 120%;
  }
  .technologies img {
    margin: 0 65px;
    transform: translate3d(0);
  }
}
@media (max-width: 1280px) {
  .projects .screens .screen1 {
    height: 90%;
  }
  .projects .screens .screen2 {
    height: 90%;
  }
  .process .orbitsys {
    transform: rotateX(75deg) rotateY(12deg) translateX(-150px);
  }
  .process .planet {
    height: 600px;
    width: 600px;
  }
  .sponsors .sponlogos img {
    width: 20%;
    height: auto;
  }
}
@media (max-width: 992px) {
  .projects .screens .screen1 {
    height: 70%;
  }
  .projects .screens .screen2 {
    height: 80%;
  }
  .process .orbitsys {
    transform: rotateX(75deg) rotateY(12deg) translateX(-200px);
  }
  .sponsors .sponlogos img {
    width: 30%;
    height: auto;
  }
}
@media (max-width: 768px) {
  .projects .screens .screen1 {
    height: 85%;
    transform: translateX(150px);
  }
  .projects .screens .screen2 {
    height: 70%;
  }
  .sponsors .sponlogos img {
    width: 30%;
    height: auto;
  }
}
@media (max-width: 576px) {
  header .navbar-links a {
    display: none;
  }
  .navbar-links img {
    margin-top: 15px;
    height: 50px;
    width: auto;
  }
  nav button {
    display: none;
  }
  header .squares {
    width: 40%;
  }
  .sponsors {
    height: 200px;
    width: 90%;
    margin: 0 5%;
  }
  .sponsors .sponlogos img {
    width: 40%;
    height: auto;
  }

  .projects {
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 100%;
    height: 700px;
  }
  .projects article {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    z-index: 2;
  }
  .projects .screens {
    display: none;
  }
  .projects .responsability {
    display: none;
  }

  .process {
    padding-top: 100px;
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;
    overflow: hidden;
    max-width: 100vw;
  }
  .process article {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    padding: 0 15%;
    z-index: 2;
  }
  .process .orbitsys {
    transform: rotateX(75deg) rotateY(12deg) translateX(0px);
  }
  .process .planet {
    height: 600px;
    width: 600px;
  }

  .aboutus {
    padding-top: 50px;
    display: grid;
    padding: 0 10%;
    grid-template-rows: 47.5% 5% 47.5%;
    grid-template-columns: 100%;
  }
  .content,
  .colmenu {
    display: block;
  }
}

.content {
  background: linear-gradient(180deg, #05445e 0%, #121517 80%);
  height: 0;
  width: 100%;
  overflow: hidden;
  transition: height 0.2s ease-out;
  position: absolute;
  top: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
  margin-left: 10%;
}
.menu-links a {
  color: white;
  display: inline-block;
  padding: 9px 10px;
  position: relative;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
}

.content button {
  border-radius: 100px;
  border: 1px solid var(--second-color);
  color: var(--second-color);
  background-color: transparent;
  padding: 0 26px;
  height: 40px;
  margin: 0 30%;
  margin-bottom: 180px;
}

.colmenu {
  height: 50px;
  width: 50px;
}
svg {
  height: 80px;
  position: absolute;
  width: 80px;
}
.plate {
  height: 80px;
  width: 80px;
}
.burger {
  filter: url(#gooeyness);
}
.x {
  transform: scale(0);
  transition: transform 400ms;
}
.line {
  fill: none;
  stroke: var(--second-color);
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms,
    transform 500ms 200ms;
}
.x .line {
  stroke-width: 5.5px;
}

.plate4 .x {
  transition: transform 400ms;
}
.plate4 .line {
  transform-origin: 50%;
  transition: transform 400ms 100ms;
}
.active.plate4 .line {
  transition: transform 400ms;
}
.active.plate4 .line1 {
  transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(0.7);
}
.active.plate4 .line2 {
  transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(0.7);
}
.active.plate4 .line3 {
  transform: translateY(0px) rotate(45deg) scale(0.7);
}
.active.plate4 .line4 {
  transform: translateY(0px) rotate(-45deg) scale(0.7);
}
.active.plate4 .line5 {
  transform: translateX(18px) translateY(3px) rotate(45deg) scale(0.7);
}
.active.plate4 .line6 {
  transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(0.7);
}
.active.plate4 .x {
  transition: transform 400ms 100ms;
  transform: scale(1);
}