.bug {
    width: 50px;
    height: 50px;
    /* animation: bugmove 3s infinite; */
    animation: bugmove;
    animation-duration: 4s;
    animation-iteration-count: 1;
    /* animation-timing-function: cubic-bezier(.17, .67, .4, 1.31); */
    animation-direction: alternate;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: fixed;
    /*Ahhh yes!*/

    --x1: 0px;
    --y1: 0px;
    --s1: 1;
    --x2: 100px;
    --y2: 100px;
    --s2: 1;
    --r1: 0deg;
    --r2: 0deg;
}

@keyframes bugmove {
    0% {
        /* transform: translate3d(var(--x1), var(--y1), 0) rotateZ(var(--r1)) scale(var(--s1)); */
        transform: translate3d(var(--x1), var(--y1), 0) rotateZ(var(--r1)) scale(1);
    }

    100% {
        /* transform: translate3d(var(--x2), var(--y2), 0) rotateZ(var(--r2)) scale(var(--s2)); */
        transform: translate3d(var(--x2), var(--y2), 0) rotateZ(var(--r2)) scale(1);
    }
}

.menu {
    background-color: #00FFAA;
    top: 120px;
    color: black;
}

#customer, 
#contact, 
#about, 
#services {
  scroll-margin-top: 250px;
}

 html,
    body,
    h1,
    h2,
    h3,
    h4 {
      font-family: "Lato", sans-serif
    }

    .mySlides {
      display: none
    }

    .w3-tag,
    .fa {
      cursor: pointer
    }

    .w3-tag {
      height: 15px;
      width: 15px;
      padding: 0;
      margin-top: 6px
    }

    html {
      height: 100%;
    }

    body {
      min-height: 100%;
      font-size: 25px;
      margin: 0px;
      padding: 0px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    #page-container {
      position: relative;
      min-height: 100vh;
    }

    #content-wrap {
      padding-bottom: 2.5rem;
      /* Footer height */
    }

    #footer {
      position: relative;
      bottom: 0;
      width: 100%;
      background-color: #00FFAA;

    }

    .list{
        background-color: lightblue;
    }