americasMap.css

Html, body, div, h1 {
    Padding: 0;
    Border: 0;
    Margin: 0;
}

#wrapper {
    width: 640px;
    margin: auto;
}

#Country_Names {
    font-weight: lighter;
}

#south {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    color: #CC62A7;
    padding: 12px 0px 0px 0px;
    font-size: 37px;
    font-weight: lighter;
}

#america {
    font-family: Helvetica, Arial, sans-serif;
    color: #CC62A7;
    position: absolute;
    padding: 1px 0px 0px 328px;
    margin-top: -10px;
    font-size: 37px;
    font-weight: lighter;
}

#central {
    font-family: Helvetica, Arial, sans-serif;
    color: #CC62A7;
    margin-left: 38%;
    margin-top: 7.05%;
    font-size: 37px;
    font-weight: lighter;
}

#americaTwo {
    font-family: Helvetica, Arial, sans-serif;
    color: #CC62A7;
    margin-left: 42%;
    margin-top: -.5%;
    font-size: 37px;
    font-weight: lighter;

}

.southAmericaMap, .centralAmericaMap {
    margin-top: 2px;
}

.centralAmericaMap {
    display: none;
}

#centralAmericaSvg {
    margin-top: -13%;
    margin-bottom: 5.3%;
}

/*Styling for the timeline*/

#timeline {
    cursor: pointer;
    margin: auto;
    width: 680px;
    margin-top: -2%;
}

.axis path,
.axis line {
    fill: none;
    stroke: #474747;
    stroke-width: 2px;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    fill: #474747;
}

/*Styling for the slider*/

.slider {
    fill: #CC62A7;
}

.text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14.45px;
    fill: #474747;
}

/*Sets all circles to enlarge and change color on hover or when timeline hits them*/

.mousable {
    r: 2.921;
}

.mousable:hover {
    r: 4.9657;
    fill: #CC62A7;
}

.highlighted {
    r: 4.9657;
    fill: #CC62A7;
}

/*Causes city name to show up on hover*/

.cities text {
    visibility: hidden;
}

.mousable:hover ~ text {
    visibility: visible;
}

/* Arrow bounce */

#southAmericaArrow, #centralAmericaArrow {
    cursor: pointer;
}

.bounce {
  -webkit-animation: bounce 1s infinite;
  animation: bounce infinite;
  animation-duration: 2s;
  animation-delay: 0s;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
    60% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
    40% {
    transform: translateY(30px);
  }
    60% {
    transform: translateY(15px);
  }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
    60% {
    -ms-transform: translateY(15px);
    transform: translateY(15px);
  }
}

.bounceTwo {
  -webkit-animation: bounce 1s infinite;
  animation: bounce infinite;
  animation-duration: 2s;
  animation-delay: 0s;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -webkit-transform: translateY(16px);
    transform: translateY(16px);
  }
    60% {
    -webkit-transform: translateY(9px);
    transform: translateY(9px);
  }
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
    40% {
    transform: translateY(16px);
  }
    60% {
    transform: translateY(9px);
  }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -ms-transform: translateY(16px);
    transform: translateY(16px);
  }
    60% {
    -ms-transform: translateY(9px);
    transform: translateY(9px);
  }
}