@media screen and (min-width: 1px) {
  .svglocal {
    transform: translateX(-24vw);
  }

  .imglogotelecoms {
    position: absolute;
    bottom: 25vh;
    right: 2vw;
    width: 86vw;
    height: auto;
    z-index: 6;
  }

  .tower-container {
    box-sizing: content-box;
    position: absolute;
    left: -30px;
    top: 5vh;
  }

  .box-container {
    width: 100vw;
    height: 100vh;
    margin-top: 0px;
  }

  svg.pulse-svg {
    background-color: #1c1c1c;
    overflow: visible;
    height: 100vh;
    width: 100vw;
  }

  svg.pulse-svg .C1,
  svg.pulse-svg .C2,
  svg.pulse-svg .C3 {
    animation: pulse-me 3s linear infinite;
    transform-origin: 25px 25px;
  }

  svg.pulse-svg .C2 {
    animation-delay: 1s;
  }

  svg.pulse-svg .C3 {
    animation-delay: 2s;
  }

  .point-pulse {
    transform: translate(307px, 300px);
  }

  @keyframes pulse-me {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }

    50% {
      opacity: 0.1;
    }

    70% {
      opacity: 0.09;
    }

    100% {
      transform: scale(45);
      opacity: 0;
    }
  }

  .svggroup {
    width: 100%;
    margin: auto;
  }

  .sm1 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .sm2 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }

  .sm3 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }

  .svgrecrutamento {
    width: 100%;
    margin: auto;
  }

  .pag1 {
    animation-name: paganimation1;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation1 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 1;
    }
    30% {
      transform: translate(225px, -205px) rotate(8.5deg);
      opacity: 0.2;
    }
    60% {
      transform: translate(-305px, 15px) rotate(-9deg);
      opacity: 0.15;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 1;
    }
  }

  .pag2 {
    animation-name: paganimation2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation2 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.2;
    }
    30% {
      transform: translate(-470px, 285px) rotate(-18deg);
      opacity: 0.15;
    }
    60% {
      transform: translate(-195px, 230px) rotate(-8deg);
      opacity: 1;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.2;
    }
  }

  .pag3 {
    animation-name: paganimation3;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation3 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.15;
    }
    30% {
      transform: translate(300px, 25px) rotate(9deg);
      opacity: 1;
    }
    60% {
      transform: translate(525px, -135px) rotate(17.5deg);
      opacity: 0.2;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.15;
    }
  }

  .circleanimation {
    animation-name: circleanimation2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes circleanimation2 {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
@media screen and (min-width: 810px) {
  .svglocal {
    transform: translateX(-24vw);
  }

  .imglogotelecoms {
    position: absolute;
    bottom: 25vh;
    right: 5vw;
    width: 60vw;
    height: auto;
    z-index: 6;
  }

  .tower-container {
    box-sizing: content-box;
    position: absolute;
    left: -30px;
    top: 0vh;
  }

  .box-container {
    width: 100vw;
    height: 100vh;
    margin-top: -2px;
  }

  svg.pulse-svg {
    background-color: #1c1c1c;
    overflow: visible;
    height: 100vh;
    width: 100vw;
  }

  svg.pulse-svg .C1,
  svg.pulse-svg .C2,
  svg.pulse-svg .C3 {
    animation: pulse-me 3s linear infinite;
    transform-origin: 25px 25px;
  }

  svg.pulse-svg .C2 {
    animation-delay: 1s;
  }

  svg.pulse-svg .C3 {
    animation-delay: 2s;
  }

  .point-pulse {
    transform: translate(307px, 300px);
  }

  @keyframes pulse-me {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }

    50% {
      opacity: 0.1;
    }

    70% {
      opacity: 0.09;
    }

    100% {
      transform: scale(45);
      opacity: 0;
    }
  }

  .svggroup {
    width: 100%;
    margin: auto;
  }

  .sm1 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .sm2 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }

  .sm3 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }

  .svgrecrutamento {
    width: 100%;
    margin: auto;
  }

  .pag1 {
    animation-name: paganimation1;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation1 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 1;
    }
    30% {
      transform: translate(225px, -205px) rotate(8.5deg);
      opacity: 0.2;
    }
    60% {
      transform: translate(-305px, 15px) rotate(-9deg);
      opacity: 0.15;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 1;
    }
  }

  .pag2 {
    animation-name: paganimation2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation2 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.2;
    }
    30% {
      transform: translate(-470px, 285px) rotate(-18deg);
      opacity: 0.15;
    }
    60% {
      transform: translate(-195px, 230px) rotate(-8deg);
      opacity: 1;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.2;
    }
  }

  .pag3 {
    animation-name: paganimation3;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation3 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.15;
    }
    30% {
      transform: translate(300px, 25px) rotate(9deg);
      opacity: 1;
    }
    60% {
      transform: translate(525px, -135px) rotate(17.5deg);
      opacity: 0.2;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.15;
    }
  }

  .circleanimation {
    animation-name: circleanimation2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes circleanimation2 {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
@media screen and (min-width: 1400px) {
  .svglocal {
    transform: translateX(-24vw);
  }

  .imglogotelecoms {
    position: absolute;
    bottom: 25vh;
    right: 5vw;
    width: 60vw;
    height: auto;
    z-index: 6;
  }

  .tower-container {
    box-sizing: content-box;
    position: absolute;
    left: -30px;
    top: 0vh;
  }

  .box-container {
    width: 100vw;
    height: 100vh;
    margin-top: -2px;
  }

  svg.pulse-svg {
    background-color: #1c1c1c;
    overflow: visible;
    height: 100vh;
    width: 100vw;
  }

  svg.pulse-svg .C1,
  svg.pulse-svg .C2,
  svg.pulse-svg .C3 {
    animation: pulse-me 3s linear infinite;
    transform-origin: 25px 25px;
  }

  svg.pulse-svg .C2 {
    animation-delay: 1s;
  }

  svg.pulse-svg .C3 {
    animation-delay: 2s;
  }

  .point-pulse {
    transform: translate(307px, 300px);
  }

  @keyframes pulse-me {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }

    50% {
      opacity: 0.1;
    }

    70% {
      opacity: 0.09;
    }

    100% {
      transform: scale(45);
      opacity: 0;
    }
  }

  .svggroup {
    width: 100%;
    margin: auto;
  }

  .sm1 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .sm2 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }

  .sm3 {
    transform-origin: center center;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }

  .svgrecrutamento {
    width: 100%;
    margin: auto;
  }

  .pag1 {
    animation-name: paganimation1;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation1 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 1;
    }
    30% {
      transform: translate(225px, -205px) rotate(8.5deg);
      opacity: 0.2;
    }
    60% {
      transform: translate(-305px, 15px) rotate(-9deg);
      opacity: 0.15;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 1;
    }
  }

  .pag2 {
    animation-name: paganimation2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation2 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.2;
    }
    30% {
      transform: translate(-470px, 285px) rotate(-18deg);
      opacity: 0.15;
    }
    60% {
      transform: translate(-195px, 230px) rotate(-8deg);
      opacity: 1;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.2;
    }
  }

  .pag3 {
    animation-name: paganimation3;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes paganimation3 {
    0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.15;
    }
    30% {
      transform: translate(300px, 25px) rotate(9deg);
      opacity: 1;
    }
    60% {
      transform: translate(525px, -135px) rotate(17.5deg);
      opacity: 0.2;
    }
    100% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.15;
    }
  }

  .circleanimation {
    animation-name: circleanimation2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }

  @keyframes circleanimation2 {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}