@keyframes hero-grafismo-line {
  0% {
    width: 100%;
  }

  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}

@keyframes hero-grafismo-1 {
  0% {
    transform: rotate(180deg);
  }

  20% {
    transform: rotate(270deg);
  }

  40% {
    transform: rotate(180deg);
  }

  80% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes atuacao-grafismo-1 {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(120deg);
  }

  25% {
    transform: rotate(120deg);
  }

  60% {
    transform: rotate(-120deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes home-grafismo-line-1 {
  0% {
    height: 72%;
  }

  50% {
    height: 30%;
  }

  100% {
    height: 72%;
  }
}

@keyframes home-grafismo-circle-1 {
  0% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(120deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes home-grafismo-circle-2 {
  0% {
    transform: rotate(0deg);
  }

  40% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(00deg);
  }
}

@keyframes home-sobre-nos-line {
  0% {
    height: 100%;
  }

  50% {
    height: 60%;
  }

  100% {
    height: 100%;
  }
}

/* ATUAÇÃO */
.atuacao-graph-container {
  width: 45%;
  height: 100%;
  left: 34%;
}

.atuacao-graph-circle-1 {
  height: 100%;
  background: url('../images/grafismo-azul-180g.svg') no-repeat left top;
  background-size: 50%;
  animation: atuacao-grafismo-1 40s ease-in-out 1s infinite forwards;
}

/* GRAFISMO */
.home-graph-line-1 {
  top: 14%;
  left: 4.5%;
  height: 72%;
  animation: home-grafismo-line-1 10s ease-in-out 1s infinite forwards;
}

.home-graph-line-2 {
  height: 72%;
  bottom: 14%;
  left: 12%;
  height: 72%;
  animation: home-grafismo-line-1 15s ease-in-out 1s infinite forwards;
}

.home-graph-line-3 {
  height: 72%;
  top: 14%;
  left: 50.3%;
  animation: home-grafismo-line-1 15s ease-in-out 1s infinite forwards;
}

.home-graph-circle-container-1 {
  width: 25%;
  height: 72%;
  top: 14%;
  left: 17%;
}
.home-graph-circle-container-2 {
  width: 25%;
  height: 72%;
  top: 14%;
  left: 71%;
}

.home-graph-circle-1 {
  width: 200%;
  background: url('../images/grafismo-creme-90g.svg') no-repeat right bottom;
  background-size: 50%;
  transform: rotate(180deg);
  animation: home-grafismo-circle-1 13s ease-in-out 1s infinite forwards;
}

.home-graph-circle-2 {
  width: 200%;
  background: url('../images/grafismo-creme-90g.svg') no-repeat right bottom;
  background-size: 50%;
  right: 0px;
  bottom: 0px;
  transform: rotate(0deg);
  animation: home-grafismo-circle-2 17s ease-in-out 1s infinite forwards;
}

/* HERO */
.hero-2-graph-container {
  width: 100%;
  height: 120%;
}
.hero-graph-container {
  width: 64%;
  height: 100%;
}
.hero-graph-line-1 {
  width: 100%;
  top: 0px;
  left: 0px;
  animation: hero-grafismo-line 8s ease-in-out 1s infinite forwards;
}
.hero-graph-line-2 {
  width: 100%;
  bottom: 0px;
  right: 0px;
  animation: hero-grafismo-line 6s ease-in-out 1s infinite forwards;
}
.hero-graph-circle-container {
  width: 100%;
  top: 15%;
}
.hero-graph-circle-1 {
  width: 200%;
  background: url('../images/grafismo-creme-90g.svg') no-repeat right bottom;
  background-size: 50%;
  transform: rotate(180deg);
  animation: hero-grafismo-1 10s ease-in-out 1s infinite forwards;
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .hero-2-graph-container {
    width: 64%;
    height: 100%;
  }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}