#benefit_text {
  font-size: 2em;
  width: 90%;
  text-align: center;
  color: #fff;
  font-weight: 300;
  background-color: #47D0BD;
  padding: 5%;
  bottom: 0;
  position: absolute;
  top: 50%; }

#wave {
  position: absolute;
  width: 100%;
  height: 10%;
  top: 57%;
  border-radius: 100% 0 0 0;
  background-color: #47D0BD; }

#wave.activewave {
  position: absolute;
  width: 100px;
  height: 10%;
  top: -10%;
  border-radius: 0 100% 0 0; }

.benefit {
  position: absolute;
  width: 500px;
  height: 50%;
  left: 50%;
  top: 0;
  margin-left: -250px;
  transform: rotate(-5deg);
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  opacity: .0; }
  .benefit .gif {
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    width: 100%;
    height: 100%; }
  .benefit p {
    font-size: 80px;
    color: #47D0BD;
    text-align: center;
    margin: 0;
    line-height: 68px; }

@media all and (max-width: 499px) {
  .benefit {
    width: 100%;
    margin-left: -50%; } }
.benefit.activeBenefit {
  left: 50%;
  opacity: 1;
  transform: rotate(0); }

.benefit.transition {
  left: 55% !important;
  opacity: 0 !important;
  transform: rotate(5deg) !important; }

#benefit_1 .gif {
  background-image: url(../img/gifs/brain.gif); }

#benefit_2 .gif {
  background-image: url(../img/gifs/hands.gif); }

#benefit_3 .gif {
  background-image: url(../img/gifs/robot.gif); }

#benefit_4 .gif {
  background-image: url(../img/gifs/heart-slower.gif); }

#stepNavigation .arrow {
  position: absolute;
  width: 10%;
  height: 100%;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: .2; }
#stepNavigation .arrow:hover {
  opacity: 1; }
#stepNavigation #arrow_right {
  right: 0;
  background-image: url(../img/arrowRight.png); }
#stepNavigation #arrow_left {
  left: 0;
  background-image: url(../img/arrowLeft.png); }
#stepNavigation #stepper {
  color: #fff;
  position: absolute;
  bottom: 10px;
  left: 50%;
  cursor: pointer;
  font-size: 2em;
  margin-left: -3vw; }
  #stepNavigation #stepper span {
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out; }
  #stepNavigation #stepper .activeStep {
    color: #000;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }

/*# sourceMappingURL=benefitStyles.css.map */