@font-face {
  font-family: adobeGothicStd;
  src: url(/fonts/AdobeGothicStd-Bold.otf);
}

._homepage{

  &--container{
    margin: 0 1rem;

    @include breakpoint(1200px){
      width: 1200px;
      margin: 0 auto;
    };
  }

  &--banner-cloud{
    position: absolute;
    top: 0;
    right: 0;
    width: 14rem;
    z-index: -10;

    @include breakpoint(850px){
      width: 18rem;
    };

    @include breakpoint(1100px){
      width: 22rem;
    };

    @include breakpoint(1200px){
      right: 5%;
      width: 27rem;
    };

  }

  &--banner{
    position: relative;
  }

  &--header{
    position: relative;

    @include breakpoint(900px){
      margin-top: 2rem;

    };
  }

  &--logo{
    float: left;
  }

  &--menu-mobile{
    display: block;
    float: right;
    margin-top: 0;

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

  &--menu-mobile-hamburger-inner{
    width: 20px;
  }

  &--menu-desktop{
    display: none;

    @include breakpoint(640px){
      float: right;
      margin-top: 0;
      display: block;
    };

  }

  &--messages{
    margin-top: get('rhythm') * 2;

    @include breakpoint(700px){
      margin-top: get('rhythm') * 3;
    };

    @include breakpoint(900px){
      margin-top: get('rhythm') * 5;
    };

    @include breakpoint(1200px){
      margin-top: get('rhythm') * 5.5;
    };
  }

  &--value-section{
    background-color: #0097A7;
    position: relative;
    margin-top: get('rhythm') * 8;

    @include breakpoint(900px){
      margin-top: get('rhythm') * 10;
    };

    @include breakpoint(1200px){
      margin-top: get('rhythm') * 10.5;
    };
  }

  &--use-case-section{
    background-color: #E9E2D3;
    position: relative;
    margin-top: 0;
    padding-top: 10rem;
    padding-bottom: 8rem;
  }

  &--key-features-section{
    background-color: #006064;
    position: relative;
    margin-top: 0;
    padding-bottom: 12rem;
    padding-top: 2rem;
    position: relative;

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

  }

  &--footer{
    text-align: center;
    background-color: #855B41;
    margin-top: 0;
    padding: 4rem 1rem 1rem 1rem;
  }

  &--hamburger-menu-container{
    position: fixed;
    background-color: #fff;
    width: 100%;
    z-index: 100;
    top: 0;
    height: 100%;
    margin-top: 6rem;

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

  }


}
