.chartdiv {
  z-index: -1;
  position: relative;
  max-height: 150px;
  max-width: 86%;
  display: inline !important;
  top: -150px;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 600px) {
    .chartdiv {
      max-width: 92%; } }

.chart-labels-value,
.chart-labels-year,
.menu {
  display: flex;
  justify-content: space-around; }

.menu {
  margin-bottom: 64px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 300;
  align-items: center;
  letter-spacing: 0.02em; }
  .menu .active {
    background-color: #57a0d7;
    font-weight: 400;
    -webkit-animation: none !important;
            animation: none !important; }
    .menu .active a {
      color: #fff;
      border: 1px solid #57a0d7; }
  .menu-item {
    background-color: #fff;
    border-radius: 1000px;
    padding: 8px 16px;
    margin: 0 .5em 1em .5em;
    border: 1px solid #57a0d7; }
    .menu-item:nth-child(1) {
      -webkit-animation: btnWiggle 4s infinite;
              animation: btnWiggle 4s infinite; }
    .menu-item:nth-child(2) {
      -webkit-animation: btnWiggle 4s infinite 1s forwards;
              animation: btnWiggle 4s infinite 1s forwards; }
    .menu-item:nth-child(3) {
      -webkit-animation: btnWiggle 4s infinite 2s forwards;
              animation: btnWiggle 4s infinite 2s forwards; }
    .menu-item:nth-child(4) {
      -webkit-animation: btnWiggle 4s infinite 3s forwards;
              animation: btnWiggle 4s infinite 3s forwards; }
    .menu-item:nth-child(5) {
      -webkit-animation: btnWiggle 4s infinite 4s forwards;
              animation: btnWiggle 4s infinite 4s forwards; }
    .menu-item:nth-child(6) {
      -webkit-animation: btnWiggle 4s infinite 5s forwards;
              animation: btnWiggle 4s infinite 5s forwards; }
  .menu a {
    text-decoration: none;
    color: #57a0d7; }

/* animation */
@-webkit-keyframes btnWiggle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  2% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); }
  3.5% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  5% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

.chart-wrapper {
  margin-top: 80px; }

.performance {
  z-index: 99;
  text-align: center; }
  @media only screen and (max-width: 500px) {
    .performance {
      margin-bottom: 16px; } }
  .performance-label {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(38, 38, 38, 0.5); }
  .performance-value {
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 0.05em;
    margin-top: 8px; }

.chart-labels::after {
  content: "";
  width: 80%;
  height: 2px;
  background-color: #e6e9ed;
  display: block;
  margin: -36px 0px 0px 10%; }

.year {
  margin-top: 16px;
  font-size: 14px;
  line-height: 16px;
  color: #57a0d7; }
  .year::before {
    content: "";
    background-color: #e6e9ed;
    border-radius: 1000px;
    width: 6px;
    height: 6px;
    margin: 0 0 16px 12px;
    display: block; }

.value {
  color: #4f4f4f;
  font-weight: bold;
  font-size: 18px;
  line-height: 21px;
  align-items: flex-end;
  display: flex;
  width: 100px;
  justify-content: center;
  position: relative;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg); }
  @media only screen and (max-width: 500px) {
    .value {
      font-size: .875rem;
      line-height: 18px;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg); } }
  .value small {
    font-weight: normal;
    margin: 0 3px; }
    @media only screen and (max-width: 500px) {
      .value small {
        padding: 0;
        display: contents; } }
  .value div {
    position: absolute;
    top: 24px;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 24px; }
    @media only screen and (max-width: 500px) {
      .value div {
        display: none; } }
  .value:first-child, .value:last-child {
    font-size: 32px;
    align-items: flex-start;
    display: flex;
    margin-bottom: 134px; }
    @media only screen and (max-width: 500px) {
      .value:first-child, .value:last-child {
        font-size: 15px;
        line-height: 15px;
        margin-bottom: 0; } }
    .value:first-child::after, .value:last-child::after {
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      position: absolute;
      height: 144px;
      width: 105px;
      margin-top: 12px; }
      @media only screen and (max-width: 500px) {
        .value:first-child::after, .value:last-child::after {
          display: none;
          margin-top: 0; } }

.footnote {
  display: none;
  font-size: 14px;
  color: #4f4f4f;
  font-weight: 300; }
  @media only screen and (max-width: 500px) {
    .footnote {
      display: block; } }