.phone_display {
  display: none
}

@media (max-width:576px) {
  .phone_display {
    display: inherit
  }
}

.var-up {
  color: #59ed82
}

.var-down {
  color: #e94949
}

@-webkit-keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(.4);
    transform: scaleX(.4)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(.4);
    transform: scaleX(.4)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

body {
  color: #fff;
  margin: 0
}

h3,
h4 {
  padding: 0;
  margin: 0;
  font-weight: 700
}

button,
h3,
h4,
small {
  font-family: Proxima Nova, sans-serif
}

button:active {
  outline: none
}

.line-chart {
  width: 100%
}

.line-chart__container {
  padding: 0 0 1rem 0
}

@media (min-width:1200px) {
  .line-chart__container {
    padding: .5rem 1rem
  }
}

/* .line-chart__line {
  padding: 0 1rem
} */

.line-chart__data {
  display: flex;
  padding-top: .5rem;
  padding-bottom: 1rem
}

.line-chart__data-share h3 {
  font-size: 2.3rem
}

@media (min-width:1200px) {
  .line-chart__data-share {
    padding-right: 7rem
  }

  .line-chart__data-share h3 {
    font-size: 3rem
  }
}

.line-chart__data-date h4,
.line-chart__data-variation h4 {
  font-size: .9rem;
  font-weight: 400
}

@media (min-width:1200px) {
  .line-chart__data-date {
    padding-right: 1rem
  }
}

.line-chart__data-variation {
  padding-top: .3rem
}

.line-chart__data-variation h4 {
  margin-bottom: .5rem
}

.line-chart__data-variation h4 span {
  padding-right: .3rem
}

@media screen and (max-width: 578px) {
  .line-chart__data-variation {
    margin-left: 0 !important;
    margin-top: 7px;
  }

  .line-chart__data {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (min-width:577px) {
  .line-chart__data-variation {
    padding-top: 0;
    padding-left: 2rem
  }

  .line-chart__data-variation h4 {
    margin-bottom: 0
  }

  .line-chart__data-variation h4 span {
    padding-right: 0
  }
}

.line-chart__data-number {
  font-size: 1rem
}

.line-chart__data-var {
  padding-top: .5rem
}

.line-chart__data-var h3 {
  font-size: 1.8rem
}

@media (min-width:1200px) {
  .line-chart__data-var {
    padding-right: 3rem
  }

  .line-chart__data-var h3 {
    font-size: 2.3rem
  }
}

.line-chart__button-group {
  max-width: 95%;
}

.line-chart__main {
  max-width: 95%;
  padding-bottom: 2rem
}

.line-chart_flex {
  display: flex;
  flex-direction: column
}

@media (min-width:1200px) {
  .line-chart_flex {
    flex-direction: row
  }
}

.line-chart_dotted {
  border-top: 1px dotted #fff
}

.line-chart__button {
  box-sizing: border-box;
  margin-top: -1.6px;
  margin-right: -4px;
  padding: .3rem 5%;
  border: none;
  border-top: 2px solid transparent;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: -1px;
  cursor: pointer;
  font-family: Proxima Nova, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: hsla(0, 0%, 100%, .8)
}

@media (min-width:675px) {
  .line-chart__button {
    padding: .3rem 7.85%
  }
}

@media (min-width:1200px) {
  .line-chart__button {
    font-size: 1.3rem;
    padding: .3rem 5rem
  }
}

.line-chart__button:hover,
.line-chart__button_active {
  border-top-color: #fff;
  color: #fff
}

.line-chart__button_active {
  outline: none
}