#newsletter {
  background-color: #ededed;
  text-align: center;
  padding: 20px 0;

  @include tablet {
    padding: 10px 0;
  }

  @include mobile {
    border-bottom: solid 5px #009ed8;
  }

  .wrapper {
    margin-top: 30px;

    @include tablet {
      margin-top: 20px;
      display: none;
    }

    &.collapse {
      display: block !important;
    }
  }


  h2 {
    @include font-size(28px);
    cursor: pointer;
    margin: 15px 0;

    @include tablet {
      @include font-size-tablet(20px);
      margin: 10px 0;
      cursor: pointer;
    }

    @include mobile {
      @include font-size-mobile(14px);
    }

    i {
      padding-left: 8px;
      color: #009ed7;

      @include tablet {
        display: inline-block !important;
      }

    }
  }

  p {
    color: #333333;
    @include font-size(24px);
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 0 20px;

    @include tablet {
      @include font-size-tablet(20px);
    }

    @include mobile {
      @include font-size-mobile(12px);
    }
  }


  form {
    padding: 0 60px;
    text-align: left;
    margin-left: -6px;
    margin-right: -6px;

    @include tablet {
      padding: 0 30px;
    }

    @include mobile {
      padding: 0 20px;
    }

    > div {
      padding-right: 6px;
      padding-left: 6px;
      margin-bottom: 20px;

      @include mobile {
        margin-bottom: 10px;
      }
    }

    label {
      display: block;
    }

    input {
      width: 100%;
      height: 60px;
      padding: 12px;
      @include font-size(20px);
      border-radius: 3px;
      @include box-shadow(0px, 1px, 1px,rgba(0,0,0,0.25));

      @include mobile {
        height: 40px;
        @include font-size-mobile(12px);
      }
    }

    .button {
      height: 60px;
      line-height: 60px;
      width: 100%;

      @include mobile {
        height: 40px;
        line-height: 40px;
      }
    }

    p {
      &.error {
        color: red;
      }
    }
  }
}

.home-page #newsletter {

  h2 {
    cursor: default;

    i {
      display: none;
    }
  }

  .wrapper {
    display: block !important;
  }

}