#earth {
  animation: UpDown 20s ease-in-out infinite;
  /* transform-origin: bottom; */
  position: relative;
  transition: all .2s ease-out;
}
#earth svg {
  animation: LeftRight 20s ease-in-out infinite;
  /* transform-origin: bottom; */
  /* transition: padding .2s ease-out; */
}
/* #earth:hover { */
  /* content: "";
  display: block; */
  /* padding: .25rem .25rem 0; */
  /* position: absolute; */
  /* border-radius: 100%;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 .5rem 16rem white; */
/* } */
@keyframes UpDown {
  0% {
    transform: translateY(0);
  /* } 50% {
    transform: translateY(1rem); */
  } 100% {
    transform: translateY(0);
  }
}
@keyframes LeftRight {
  0% {
    transform: translateX(2.5rem) translateY(1rem) rotateZ(-3deg);
  } 45% {
    transform: translateX(0.5rem) translateY(3rem) rotateZ(-10deg);
  /* } 66% {
    transform: translateX(.75rem) translateY(3rem) rotateZ(3deg); */
  } 100% {
    transform: translateX(2.5rem) translateY(1rem) rotateZ(-3deg);
  }
}
#cable,
#cable-2 svg {
  transition: transform .2s ease-out;
}
#cable:hover {
  transform: translateY(-1rem);
}
#cable:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% - 16px);
  left: calc(50% - 5px);
  width: 12px;
  height: 400%;
  border-radius: 15%;
  background: rgb(89, 89, 91);
}
/* #earth:hover {
  margin-top: -.5rem !important;
} */
#cable-2 {
  position: sticky !important;
  top: 16rem !important;
}
#cable-2 svg {
  transform: translateY(0);
}
#cable-2:hover svg {
  transform: translateY(-1rem);
  /* top: -8px; */
}
#cable-2:before {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% - 24px);
  /* top: 100%; */
  /* left: 50%; */
  left: calc(50% - 4px);
  width: 12px;
  height: 48px;
  /* margin-top: -100%; */
  border-radius: 15%;
  background: rgb(89, 89, 91);
}


.cloud-1 {
  position: absolute;
  top: 25%;
  left: -5rem;
  width: 6vw;
  color: #555;
  animation-name: cloud1;
  animation-duration: 540s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes cloud1 {
  0% { left:-10%; color: #444; }
  20% { left:20%; color: #777; }
  50% { left:50%; color: #bbb; }
  70% { left:70%; color: #ddd; }
  100% { left: 110%; color: #fff; }
}
.cloud-2 {
  position: absolute;
  top: 29%;
  left: 30%;
  width: 8vw;
  color: #666;
  animation-name: cloud2;
  animation-duration: 480s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes cloud2 {
  0% { left:30%; color: #555; }
  20% { left:50%; color: #ddd; }
  70% { left: 110%; color: #eee; opacity: 1;}
  70.25% { left: 110%; color: #eee; opacity: 0; }
  70.5% { left: -10%; color: #444; opacity: 0;}
  71% { left: -10%; color: #444; opacity: 1;}
  100% { left: 30%; color: #555; }
}
.cloud-3 {
  position: absolute;
  top: 21%;
  left: 70%;
  width: 12vw;
  color: #333;
  animation-name: cloud3;
  animation-duration: 560s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes cloud3 {
  0% { left:75%; color: #fff; }
  25% { left:110%; color: #fff; opacity: 1; }
  25.25% { left: 110%; color: #fff; opacity: 0;}
  25.5% { left: -10%; color: #333; opacity: 0; }
  25.75% { left: -10%; color: #333; opacity: 1;}
  50% { left: 25%; color: #555;}
  75% { left: 50%; color: #ddd;}
  100% { left: 75%; color: #fff; }
}
.cloud-4 {
  position: absolute;
  top: 14%;
  left: 70%;
  width: 11vw;
  color: #555;
  animation-name: cloud4;
  animation-duration: 620s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes cloud4 {
  0% { left:66%; color: #eee; }
  33% { left:110%; color: #eee; opacity: 1; }
  33.25% { left: 110%; color: #eee; opacity: 0;}
  33.5% { left: -10%; color: #333; opacity: 0; }
  33.75% { left: -10%; color: #333; opacity: 1;}
  75% { left: 33%; color: #555;}
  /* 82.5% { left: 56.6%; color: #eee;} */
  100% { left: 66%; color: #eee; }
}
.cloud-5 {
  position: absolute;
  top: 27%;
  left: 52%;
  width: 5vw;
  color: #555;
  animation-name: cloud5;
  animation-duration: 580s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes cloud5 {
  0% { left: 50%; color: #ddd; }
  25% { left: 75%; color: #fff; }
  50% { left: 110%; color: #fff; opacity: 1; }
  50.50% { left: 110%; color: #fff; opacity: 0;}
  50.5% { left: -10%; color: #444; opacity: 0; }
  50.75% { left: -10%; color: #444; opacity: 1;}
  75% { left: 25%; color: #888;}
  /* 82.5% { left: 56.6%; color: #fff;} */
  100% { left: 50%; color: #ddd; }
}


.drone-container {
  position: absolute;
  top: 75%;
  left: 25%;
  z-index: 10;
  animation-duration: 30s;
  animation-name: drone;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.drone {
  position: relative;
  width: .8rem;
  height: .8rem;
  background: #333;
  border-radius: .25rem;
}
.drone:before {
  content: "";
  position: absolute;
  top: 20%;
  left: -100%;
  /* background: black; */
  border-top: 2px solid #333;
  border-left: 5px solid #333;
  border-right: 5px solid #333;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: .5rem;
  width: 2.5rem;
}
.drone:after {
  content: "";
  position: absolute;
  top: 100%;
  left: -33%;
  /* background: black; */
  border-top: 3px solid #333;
  border-radius: 1rem;
  height: 1.5rem;
  width: 1.5rem;
}
@keyframes drone {
  0% { top: 75.5%; left:5%; }
  10% { top: 62%; left: 10%; }
  20% { top: 68%; left: 25%; }
  35% { top: 60.5%; left: 30%; }
  50% { top: 65%; left: 34%; }
  60% { top: 62%; left: 29%; }
  70% { top: 60%; left: 15%; }
  80% { top: 89%; left: 15%; }
  100% { top: 75.5%; left: 5%; }
}
.drone .scanner {
  display: block;
  position: absolute;
  top: 50%;
  left: -.5rem;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 16rem solid rgba(128,200,255,.25);
  transform-origin: top center;
  animation: drone-scanner 5s ease-in-out infinite;
}
@keyframes drone-scanner {
  0% { transform: rotateZ(45deg); border-bottom-width: 2px; }
  15% { transform: rotateZ(60deg); border-bottom-width: 32rem; }
  30% { transform: rotateZ(20deg); border-bottom-width: 16rem; }
  50% { transform: rotateZ(30deg); border-bottom-width: 24rem; }
  60% { transform: rotateZ(-80deg); border-bottom-width: 2px; }
  60% { transform: rotateZ(0deg); border-bottom-width: 16px; }
  70% { transform: rotateZ(-20deg); border-bottom-width: 28rem; }
  100% { transform: rotateZ(120deg); border-bottom-width: 2px; }
}


.bird-container {
  position: absolute;
  top: 75%;
  left: -5%;
  z-index: 10;
}
.bird {
  position: relative;
  width: .4rem;
  height: .25rem;
  background: black;
  border-radius: .25rem;
  z-index: 10;
}
.bird:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  /* background: black; */
  border-top: 3px solid black;
  border-radius: 1rem;
  height: 1rem;
  width: .8rem;
}
.bird:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  /* background: black; */
  border-top: 3px solid black;
  border-radius: 1rem;
  height: 1rem;
  width: .8rem;
}
.bird-container.bird-1 {
  animation-duration: 50s;
  animation-name: fly;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}
.bird-container.bird-1 .bird {
  animation-duration: 5s;
  animation-name: body;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}
.bird-container.bird-1 .bird::before {
  animation-duration: 5s;
  animation-name: wingleft;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}
.bird-container.bird-1 .bird::after {
  animation-duration: 5s;
  animation-name: wingright;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}
.bird-container.bird-2 {
  animation-duration: 70s;
  animation-name: fly;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1.5s;
}
.bird-container.bird-2 .bird {
  animation-duration: 5s;
  animation-name: body;
  animation-iteration-count: infinite;
  animation-delay: 1.5s;
}
.bird-container.bird-2 .bird::before {
  animation-duration: 5s;
  animation-name: wingleft;
  animation-iteration-count: infinite;
  animation-delay: 1.5s;
}
.bird-container.bird-2 .bird::after {
  animation-duration: 5s;
  animation-name: wingright;
  animation-iteration-count: infinite;
  animation-delay: 1.5s;
}
.bird-container.bird-3 {
  animation-duration: 60s;
  animation-name: fly;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 3.5s;
}
.bird-container.bird-3 .bird {
  animation-duration: 5s;
  animation-name: body;
  animation-iteration-count: infinite;
  animation-delay: 3.5s;
}
.bird-container.bird-3 .bird::before {
  animation-duration: 5s;
  animation-name: wingleft;
  animation-iteration-count: infinite;
  animation-delay: 3.5s;
}
.bird-container.bird-3 .bird::after {
  animation-duration: 5s;
  animation-name: wingright;
  animation-iteration-count: infinite;
  animation-delay: 3.5s;
}
@keyframes fly {
  0% { top: 85.5%; left:-1rem; }
  10% { top: 80%; left: 40%; }
  20% { top: 78%; left: 60%; }
  35% { top: 70.5%; left: 70%; }
  50% { top: 65%; left: 75%; }
  55% { top: 62%; left: 72%; }
  60% { top: 60%; left: 71%; }
  65% { top: 62%; left: 70%; }
  85% { top: 65%; left: 90%; }
  100% { top: 70.5%; left: 110%; }
}
@keyframes body {
  0% { transform: translateY(0); }
  5% { transform: translateY(0); }
  10% { transform: translateY(.25rem); }
  15% { transform: translateY(0); }
  20% { transform: translateY(.25rem); }
  25% { transform: translateY(0); }
  30% { transform: translateY(.25rem); }
  35% { transform: translateY(0); }
  40% { transform: translateY(.25rem); }
  45% { transform: translateY(0); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes wingleft {
  0% { transform: rotateZ(0deg) translate(0, -.1rem); }
  5% { transform: rotateZ(-10deg) translate(0, -.35rem) scaleX(.75); }
  10% { transform: rotateZ(20deg) translate(-.15rem, -.1rem); }
  15% { transform: rotateZ(-10deg) translate(0, -.35rem) scaleX(.75); }
  20% { transform: rotateZ(20deg) translate(-.15rem, -.1rem); }
  25% { transform: rotateZ(-10deg) translate(0, -.35rem) scaleX(.75); }
  30% { transform: rotateZ(20deg) translate(-.15rem, -.1rem); }
  35% { transform: rotateZ(-10deg) translate(0, -.35rem) scaleX(.75); }
  40% { transform: rotateZ(20deg) translate(-.15rem, -.1rem); }
  45% { transform: rotateZ(-10deg) translate(0, -.35rem) scaleX(.75); }
  50% { transform: rotateZ(-10deg) translate(0, -.1rem); }
  100% { transform: rotateZ(0deg) translate(0, -.1rem); }
}
@keyframes wingright {
  0% { transform: rotateZ(0deg) translate(-.15rem, -.1rem); }
  5% { transform: rotateZ(10deg) translate(-.5rem, -.35rem) scaleX(.75); }
  10% { transform: rotateZ(-20deg) translate(-.15rem, -.1rem); }
  15% { transform: rotateZ(10deg) translate(-.5rem, -.35rem) scaleX(.75); }
  20% { transform: rotateZ(-20deg) translate(-.15rem, -.1rem); }
  25% { transform: rotateZ(10deg) translate(-.5rem, -.35rem) scaleX(.75); }
  30% { transform: rotateZ(-20deg) translate(-.15rem, -.1rem); }
  35% { transform: rotateZ(10deg) translate(-.5rem, -.35rem) scaleX(.75); }
  40% { transform: rotateZ(-20deg) translate(-.15rem, -.1rem); }
  45% { transform: rotateZ(10deg) translate(-.5rem, -.35rem) scaleX(.75); }
  50% { transform: rotateZ(10deg) translate(-.5rem, -.1rem); }
  100% { transform: rotateZ(0deg) translate(-.15rem, -.1rem); }
}


.radiation-circle {
  overflow: visible;
  position: absolute;
  width: 50vw;
  height: 40vw;
  display: block;
  border-radius: 50%;
  list-style: none;
}
.beam {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%;
  animation-name: beam;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* .beam-1 {
  animation-delay: 0;
}
.beam-2 {
  animation-delay: 3s;
}
.beam-3 {
  animation-delay: 5s;
} */
.beam-contents {
  position: absolute;
  top: 0%; left: -100%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 2.5%, rgba(255,255,255,0) 5%, rgba(255,255,255,0.15) 7.5%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.125) 12.5%, rgba(255,255,255,0) 15%, rgba(255,255,255,0.1) 17.5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0.075) 22.5%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.05) 27.5%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.025) 32.5%, rgba(255,255,255,0) 35%);
 /* -webkit-animation: beamwave 10s ease-in-out infinite; */
  /* -moz-animation: beamwave 10s ease-in-out infinite; */
  /* animation-name: beamwave;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0; */
}
/* .beam-1 .beam-contents {
  animation-delay: 0;
}
.beam-2 .beam-contents {
  animation-delay: 3s;
}
.beam-3 .beam-contents {
  animation-delay: 5s;
} */
@keyframes beam {
  0% {
    transform: rotate(200deg) skew(45deg, 45deg);
    opacity: 0.5;
  }
  25% {
  	transform: rotate(50deg) skew(-72deg, -72deg);
    opacity: .75;
  }
  33% {
  	transform: rotate(0deg) skew(0, 0);
    opacity: .75;
  }
  50% {
  	transform: rotate(120deg) skew(62deg, 62deg);
    opacity: .75;
  }
  66% {
  	transform: rotate(100deg) skew(-20deg, -20deg);
    opacity: 0.5;
  }
  75% {
    transform: rotate(210deg) skew(0, 0);
    opacity: .75;
  }
  100% {
    transform: rotate(200deg) skew(-45deg, -45deg);
    opacity: 0.5;
  }
}
@-webkit-keyframes beamwave {
  0% {
    transform: skew(45deg, 45deg);
    opacity: 1;
  }
  25% {
  	transform: skew(52deg, 52deg);
    opacity: 1;
  }
  50% {
  	transform: skew(64deg, 64deg);
    opacity: 1;
  }
  66% {
  	transform: skew(45deg, 45deg);
    opacity: 1;
  }
  75% {
    transform: skew(20deg, 20deg);
    opacity: 1;
  }
  100% {
    transform: skew(45deg, 45deg);
    opacity: 1;
  }
  /* 0% {
  	top: 0%; left: -100%;
  	width: 200%; height: 200%;
    transform: skew(60deg, 60deg);
  }
  50% {
    top: -100%; left: -200%;
  	width: 300%; height: 300%;
  	transform: skew(74deg, 74deg);
  }
  100% {
  	top: -200%; left: -300%;
  	width: 400%; height: 400%;
    transform: skew(120deg, 120deg);
  } */
}
@-moz-keyframes beamwave {
  0% {
    transform: skew(45deg, 45deg);
    opacity: 1;
  }
  25% {
  	transform: skew(52deg, 52deg);
    opacity: 1;
  }
  50% {
  	transform: skew(64deg, 64deg);
    opacity: 1;
  }
  66% {
  	transform: skew(45deg, 45deg);
    opacity: 1;
  }
  75% {
    transform: skew(20deg, 20deg);
    opacity: 1;
  }
  100% {
    transform: skew(45deg, 45deg);
    opacity: 1;
  }
  /* 0% {
  	top: 0%; left: -100%;
  	width: 200%; height: 200%;
    transform: skew(60deg, 60deg);
  }
  50% {
    top: -100%; left: -200%;
  	width: 300%; height: 300%;
  	transform: skew(74deg, 74deg);
  }
  100% {
  	top: -200%; left: -300%;
  	width: 400%; height: 400%;
    transform: skew(120deg, 120deg);
  } */
}
@keyframes beamwave {
  0% {
    transform: skew(45deg, 45deg);
    opacity: 1;
  }
  25% {
  	transform: skew(52deg, 52deg);
    opacity: 1;
  }
  50% {
  	transform: skew(64deg, 64deg);
    opacity: 1;
  }
  66% {
  	transform: skew(45deg, 45deg);
    opacity: 1;
  }
  75% {
    transform: skew(20deg, 20deg);
    opacity: 1;
  }
  100% {
    transform: skew(45deg, 45deg);
    opacity: 1;
  }
  /* 0% {
  	top: 0%; left: -100%;
  	width: 200%; height: 200%;
    transform: skew(60deg, 60deg);
  }
  50% {
    top: -100%; left: -200%;
  	width: 300%; height: 300%;
  	transform: skew(74deg, 74deg);
  }
  100% {
  	top: -200%; left: -300%;
  	width: 400%; height: 400%;
    transform: skew(120deg, 120deg);
  } */
}