html, body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: auto !important;
  background-color: #f8f9fa;
}

.nav {
  position: fixed;
  z-index: 100 !important;
  left: 18px;
  bottom: 10px;
  font-size: 2.7em;
  font-family: Helvetica;
}

a {
  text-decoration: none;
}

a:hover {
  color: #6acf38;
}

.on {
  color: #6acf38;
}

.off {
  color: black;
}

iframe {
  height: 100vh !important;
  border: none;
  width: 84%;
  margin-left: 120px;
  transform: skew(1.5deg, 1.5deg);
  /* transform: skew(10deg,5deg); */
  /* filter: drop-shadow(10px 4px 4px black); */}

  /* ZOOM BUTTON*/

    .zoom-circle {
      width: 100px;
      height: 100px;
      right: 20px;
      bottom: 250px;
      border-radius: 50%;
      background: #ffb380;
      position: fixed;
      display: block;
      z-index: 10 !important;
    }

    .zoom-circle-txt {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 1em !important;
      color: black;
      top: 40% !important;

      -webkit-animation: infiniteRotate 10s linear infinite; /* Safari */
      animation: infiniteRotate 10s linear infinite;
    }

    a:hover .zoom-circle {
      filter: drop-shadow(0 0 0.75rem #ffb380);
    }



  /* Drive BUTTON*/

  .drive-circle {
    width: 100px;
    height: 100px;
    right: 20px;
    bottom: 135px;
    border-radius: 50%;
    background: #ff944d;
    position: fixed;
    display: block;
    z-index: 10 !important;
  }

  .drive-circle-txt {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 1em !important;
    color: black;
    top: 40% !important;

    -webkit-animation: infiniteRotate 10s linear infinite; /* Safari */
    animation: infiniteRotate 10s linear infinite;
  }

  a:hover .drive-circle {
    filter: drop-shadow(0 0 0.75rem #ff944d);
  }



  /* SLACK BUTTON */
    .slack-circle {
      width: 100px;
      height: 100px;
      right: 20px;
      bottom: 20px;
      border-radius: 50%;
      background: #ff751a;
      position: fixed;
      display: block;
      z-index: 10 !important;
    }

    .slack-circle-txt {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 1em !important;
      color: black;
      top: 40% !important;

      -webkit-animation: infiniteRotate 10s linear infinite; /* Safari */
      animation: infiniteRotate 10s linear infinite;
    }

    a:hover .slack-circle {
      filter: drop-shadow(0 0 0.75rem #ff751a);
    }
  @-webkit-keyframes infiniteRotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  /* Standard syntax */
  @keyframes infinite-rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }