.value-section{

  &--values{
    color: #fff;
    padding-bottom: get('rhythm') * 2;

    @include breakpoint(1990px){
      padding-top: 4rem;
      padding-bottom: 8rem;
    };
  }

  &--value-img{
    height: 3rem;
  }

  &--value-item-container{
    margin-top: get('rhythm') * 2;

    @include breakpoint(600px){
      @include divisions(3, 1rem);
    };

    @include breakpoint(900px){
      @include divisions(3, 2rem);
    };

    @include breakpoint(1100px){
      @include divisions(3, 3rem);
    };
  }

  &--value-title{
    font-size: ms(1);
    font-family: "adobe-fan-heiti-std";

    @include breakpoint(1200px){
      font-size: ms(2);
    };
  }

  &--value-para{
    font-size: ms(-1);
    font-weight: 300;

    @include breakpoint(1200px){
      font-size: ms(0);
    };
  }

  &--light-blue-wave-container{
    position: absolute;
    bottom: 100%;
    width: 100%;
    overflow: hidden;
    height: 84px;

    @include breakpoint(1990px){
      display: none;
    };
  }

  &--light-blue-wave{
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
    width: 2100px;
    min-width: 2100px;
    height: 84px;
  }

  &--boat-container{
    position: absolute;
    bottom: 103%;
    width: 100%;
    height: 115px;

    @include breakpoint(600px){
      bottom: 108%;
    };

    @include breakpoint(1200px){
      bottom: 111%;
    };

    @include breakpoint(1990px){
      bottom: 95%
    };
  }

  &--boat{
    position: absolute;
    width: 17rem;
    right: 17%;

    @include breakpoint(1200px){
      width: 20rem;
    };

  }

  &--middle-blue-wave-container{
    position: absolute;
    bottom:96%;
    width: 100%;
    overflow: hidden;
    height: 91px;

    @include breakpoint(600px){
      bottom: 92%;
    };

    @include breakpoint(1200px){
      bottom: 90%;
    };

    @include breakpoint(1990px){
      display: none;
    };
  }

  &--middle-blue-wave{
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
    width: 2100px;
    min-width: 2100px;
    height: 91px;
  }

  &--long-wave-container{
    position: absolute;
    top: 99%;
    width: 100%;
    overflow: hidden;
    height: 150px;
    margin-top: 0;
    z-index: 100;

    @include breakpoint(1990px){
      display: none;
    };
  }

  &--long-wave{
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
    width: 2000px;
    min-width: 2000px;
    height: 156px;
  }




}
