@media screen and (max-width: 700px) {
    svg#drone {
      position: absolute;
      top: auto;
      width: 35%;
    }
  }
  img {
    width: 100%;
    height: auto;
  }
  
  header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
  .title {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    font-family: Roboto;
    padding: 2rem;
    max-width: 960px;
    text-align: center;
    position: absolute;
    top: 36vh;
  }
  
  .title h1 {
    color: #fff;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 3.5rem;
  }
  
  .title p {
    color: #1e1a1b;
    font-style: italic;
    font-weight: 400;
    font-size: 1.6rem;
    left: 0;
    width: 100%;
  }
  
  .title h3 {
    color: #333333;
  }
  
  .title hr {
    border: 3px solid #fff;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  @media only screen and (max-width: 768px) {
    .title h1 {
      font-size: 3rem;
    }
  
    .title p {
      font-size: 20px;
    }
  }
  
  @media only screen and (max-width: 768px) {
    #about h1 {
      text-align: left;
      color: #f5f5f5;
      line-height: 1.25em;
      font-size: 2.5rem;
      margin-right: auto;
      margin-left: auto;
    }
  
    #about p {
      line-height: 1.75em;
      padding-top: 6%;
      font-size: 20px;
    }
  }
  
  .container .caption {
    font-size: 2.2rem;
  }
  
  .ml1 {
    font-weight: 900;
    font-size: 3.5em;
  }
  
  .ml1 .letter {
    display: inline-block;
    line-height: 1em;
  }
  
  .ml1 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
  }
  
  .ml1 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #fff;
    transform-origin: 0 0;
    background-color: #9a1ff8;
  }
  
  .ml1 .line1 {
    top: 0;
  }
  
  .ml1 .line2 {
    bottom: 0;
  }
  
  @media only screen and (max-width: 768px) {
    .content h2 {
      font-size: 28px;
    }
  }
  
  *,
  :after,
  :before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .inspect-drone {
    height: 100vh;
    /* background-image: url(https://media.giphy.com/media/xUA7aW1ddSxtVT5zzi/giphy-downsized-large.gif),    linear-gradient(-45deg, #542361, #003b8f); */
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;
  }
  
  div[class*="el-3d"] {
    transform-style: preserve-3d;
  }
  
  .stage {
    height: 100vh;
    overflow: hidden;
    perspective: 100rem;
    opacity: 0;
    filter: blur(10x);
    animation: showHide 12s infinite;
  }
  
  @keyframes showHide {
    20%,
    80% {
      opacity: 1;
      filter: blur(0);
    }
  
    40%,
    40.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    41%,
    41.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    42%,
    42.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    43%,
    43.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    44%,
    44.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    45%,
    45.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    50%,
    50.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    51%,
    51.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    52%,
    52.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    53%,
    53.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    54%,
    54.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    55%,
    55.5% {
      opacity: 1;
      filter: blur(0);
    }
  
    46%,
    50% {
      opacity: 0;
      filter: blur(0);
    }
  
    40.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    41.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    42.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    43.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    44.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    45.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    50.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    51.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    52.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    53.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    54.25% {
      opacity: 0;
      filter: blur(0);
    }
  
    55.25% {
      opacity: 0;
      filter: blur(0);
    }
  }
  
  .drone {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 50vw;
    animation: flyaround 100s -15s infinite cubic-bezier(0.5, 0, 0.5, 1);
  }
  
  @keyframes flyaround {
    0%,
    100% {
      transform: rotateX(90deg) translateX(-20%) translateY(-70%)
        translateZ(-40vh);
    }
  
    5% {
      transform: rotateX(90deg) translateX(91%) translateY(-72%) translateZ(9vh);
    }
  
    10% {
      transform: rotateX(90deg) translateX(80%) translateY(-72%) translateZ(7vh);
    }
  
    15% {
      transform: rotateX(90deg) translateX(-19%) translateY(-85%)
        translateZ(-36vh);
    }
  
    20% {
      transform: rotateX(90deg) translateX(10%) translateY(-86%) translateZ(15vh);
    }
  
    25% {
      transform: rotateX(90deg) translateX(13%) translateY(-81%) translateZ(-23vh);
    }
  
    30% {
      transform: rotateX(90deg) translateX(25%) translateY(-80%) translateZ(11vh);
    }
  
    35% {
      transform: rotateX(90deg) translateX(64%) translateY(-72%) translateZ(-22vh);
    }
  
    40% {
      transform: rotateX(90deg) translateX(88%) translateY(-86%) translateZ(-5vh);
    }
  
    45% {
      transform: rotateX(90deg) translateX(7%) translateY(-90%) translateZ(24vh);
    }
  
    50% {
      transform: rotateX(90deg) translateX(41%) translateY(-87%) translateZ(-22vh);
    }
  
    55% {
      transform: rotateX(90deg) translateX(-13%) translateY(-87%) translateZ(5vh);
    }
  
    60% {
      transform: rotateX(90deg) translateX(8%) translateY(-75%) translateZ(19vh);
    }
  
    65% {
      transform: rotateX(90deg) translateX(49%) translateY(-76%) translateZ(-24vh);
    }
  
    70% {
      transform: rotateX(90deg) translateX(129%) translateY(-88%) translateZ(10vh);
    }
  
    75% {
      transform: rotateX(90deg) translateX(16%) translateY(-87%) translateZ(9vh);
    }
  
    80% {
      transform: rotateX(90deg) translateX(65%) translateY(-86%) translateZ(6vh);
    }
  
    85% {
      transform: rotateX(90deg) translateX(29%) translateY(-73%) translateZ(23vh);
    }
  
    90% {
      transform: rotateX(90deg) translateX(121%) translateY(-86%) translateZ(8vh);
    }
  
    95% {
      transform: rotateX(90deg) translateX(39%) translateY(-74%) translateZ(-5vh);
    }
  }
  
  .case {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 25vw;
    height: 25vw;
  }
  
  .case .pyramid-bottom,
  .case .pyramid-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f0f0f;
    backface-visibility: hidden;
  }
  
  .case .pyramid-bottom {
    transform: rotateX(180deg) translateZ(0);
  }
  
  .case .pyramid-top {
    transform: translateZ(0);
  }
  
  div[class^="poly-"] {
    position: absolute;
    backface-visibility: hidden;
    border-top: 12.5vw solid transparent;
    border-right: 12.5vw solid transparent;
    border-bottom: 12.5vw solid transparent;
    border-left: 12.5vw solid transparent;
  }
  
  .case .poly-1 {
    top: 0;
    left: 0;
    border-top: sqrt(pow(3, 2) pow(25, 2) / 4) * 1vw solid #0a0a0a;
    transform-origin: 50% 0;
    transform: rotateX(atan(0.24) * 1rad);
  }
  
  .case .poly-2 {
    top: 0;
    right: 0;
    border-right: sqrt(pow(3, 2) pow(25, 2) / 4) * 1vw solid #0f0f0f;
    transform-origin: 100% 50%;
    transform: rotateY(atan(0.24) * 1rad);
  }
  
  .case .poly-3 {
    bottom: 0;
    left: 0;
    border-bottom: sqrt(pow(3, 2) pow(25, 2) / 4) * 1vw solid #141414;
    transform-origin: 50% 100%;
    transform: rotateX(atan(0.24) * -1rad);
  }
  
  .case .poly-4 {
    top: 0;
    left: 0;
    border-left: sqrt(pow(3, 2) pow(25, 2) / 4) * 1vw solid #1a1a1a;
    transform-origin: 0 50%;
    transform: rotateY(atan(0.24) * -1rad);
  }
  
  .case .pyramid-bottom .poly-1 {
    border-top-color: #050505;
  }
  
  .case .pyramid-bottom .poly-2 {
    border-right-color: #000;
  }
  
  .case .pyramid-bottom .poly-3 {
    border-bottom-color: #050505;
  }
  
  .case .pyramid-bottom .poly-4 {
    border-left-color: #0a0a0a;
  }
  
  .pole-1,
  .pole-2 {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 3.5%;
    height: 200%;
    transform-origin: 0 50%;
  }
  
  .pole-1 div,
  .pole-2 div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
  }
  
  .pole-1:after,
  .pole-1:before,
  .pole-2:after,
  .pole-2:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    backface-visibility: hidden;
    background-color: #050505;
    background-image: radial-gradient(red, #050505);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50%;
    animation: blink 0.5s linear infinite;
  }
  
  .pole-1:before,
  .pole-2:before {
    top: 0;
    transform-origin: 50% 0;
    transform: rotateX(90deg) translateY(-50%);
  }
  
  .pole-1:after,
  .pole-2:after {
    bottom: 0;
    transform-origin: 50% 100%;
    transform: rotateX(-90deg) translateY(50%);
  }
  
  @keyframes blink {
    0%,
    100%,
    40%,
    60% {
      background-size: 5%;
    }
  
    50% {
      background-size: 100%;
    }
  }
  
  .pole-1 {
    transform: rotateZ(45deg) rotateY(45deg) translateX(-50%) translateZ(0);
  }
  
  .pole-2 {
    transform: rotateZ(-45deg) rotateY(45deg) translateX(-50%) translateZ(0);
  }
  
  .pole-top {
    background-color: #0a0a0a;
    box-shadow: 1px 0 0 #0a0a0a;
    transform: translateZ(0.4419375vw);
  }
  
  .pole-bottom {
    box-shadow: 1px 0 0 #000;
    background-color: #000;
    transform: rotateY(180deg) translateZ(0.4419375vw);
  }
  
  .pole-right {
    box-shadow: 1px 0 0 #000;
    background-color: #000;
    transform: rotateY(90deg) translateZ(0.4419375vw);
  }
  
  .pole-left {
    box-shadow: 1px 0 0 #0f0f0f;
    background-color: #0f0f0f;
    transform: rotateY(-90deg) translateZ(0.4419375vw);
  }
  
  .rotor {
    position: absolute;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    transform: translateZ(3vw) rotateZ(0);
    animation: rotating 1s linear infinite;
    z-index: 2;
  }
  
  .rotor.r1,
  .rotor.r3 {
    animation: rotating 1s linear infinite reverse;
  }
  
  .rotor.r1 {
    top: 12.5%;
    left: 12.5%;
  }
  
  .rotor.r2 {
    top: 12.5%;
    right: 12.5%;
  }
  
  .rotor.r3 {
    right: 12.5%;
    bottom: 12.5%;
  }
  
  .rotor.r4 {
    bottom: 12.5%;
    left: 12.5%;
  }
  
  .rotor .blade {
    position: absolute;
    left: 50%;
    width: 2vw;
    height: 2vw;
  }
  
  .rotor .blade:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    transform: rotate(45deg);
  }
  
  .rotor .blade:nth-child(2) {
    bottom: 2vw;
    transform-origin: 50% 100%;
    transform: rotateY(-30deg) translateX(-50%) scaleY(5);
  }
  
  .rotor .blade:nth-child(2):after {
    border-radius: 10% 100% 30% 100%;
  }
  
  .rotor .blade:nth-child(3) {
    top: 2vw;
    transform-origin: 50% 0;
    transform: rotateY(30deg) translateX(-50%) translateZ(-1vw) scaleY(5);
  }
  
  .rotor .blade:nth-child(3):after {
    border-radius: 30% 100% 10% 100%;
  }
  
  @keyframes rotating {
    100% {
      transform: translateZ(3vw) rotateZ(4320deg);
    }
  }
  
  .wrapper {
    background-color: #ecf0f1;
    width: 100%;
  }
  
  @media screen and (min-width: 700px) {
    svg#drone {
      position: absolute;
      top: 42%;
      right: 10%;
      display: block;
      width: 20%;
      margin: 12% auto;
    }
  }
  
  svg#drone {
    position: absolute;
    display: block;
    margin: 10% auto;
  }
  
  @-webkit-keyframes tracking-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(400px);
      transform: translateZ(400px);
      opacity: 0;
    }
  
    40% {
      opacity: 0.6;
    }
  
    100% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      opacity: 1;
    }
  }
  
  @keyframes tracking-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(400px);
      transform: translateZ(400px);
      opacity: 0;
    }
  
    40% {
      opacity: 0.6;
    }
  
    100% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      opacity: 1;
    }
  }

  
  
.wrapper {
    background-color: #ecf0f1;
    width: 100%;
  }
  svg#drone {
    display: block;
    width: 25%;
    margin: 12% auto;
  }