.group.barnacle_contact_form-group {
  .row.barnacle_contact_form-row {
    padding-right: 0;
    padding-left: 0;
    .barnacle_contact_form {
      display: flex;
      flex-flow: column nowrap;
      @include breakpoint(tablet) {
        flex-flow: row nowrap;
      }

      &:not(.animated) {
        visibility: hidden;
      }

      .form-container {
        display: flex;
        flex-direction: column;
        justify-content: right;
        width: 100%;
        padding: calculateRem(10) calculateRem(25) calculateRem(10) calculateRem(25);
        @include breakpoint(tablet) {
          padding: calculateRem(100) calculateRem(50) calculateRem(100) calculateRem(75);
        }

        .loading {
          text-align: center;
        }
        .success {
          border: calculateRem(1) $primary-color solid;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          p {
            margin: 0;
            padding: calculateRem(25) 0;
          }
        }

        .form {
          font-weight: normal;
          display: flex;
          flex-flow: column nowrap;

          .single-slot-row {
            display: flex;
            width: 100%;
            flex-direction: row;
            .form-field {
              width: 100%;
            }
            &.align-right {
              text-align: right;
            }
          }
          .double-slot-row {
            width: 100%;
            display: inline-grid;
            @include breakpoint(desktop) {
              display:flex;
              flex-direction: row;
            }
            .form-field {
              @include breakpoint(desktop) {
                width: 50%;
              }
            }
            &.align-right {
              text-align: right;
            }
          }
          .form-field {
            padding: 0 calculateRem(25) 0 calculateRem(22);
            margin-bottom: calculateRem(10);
            position: relative;

            label, input, textarea, select {
              color: white;
              font-size: calculateRem(16);
              line-height: calculateRem(24);
              resize: none;
            }
            label {
              text-transform: none;
              position: relative;
              bottom: calculateRem(35);
              left: calculateRem(14);
              color: #969696;
              cursor: text;
              font-weight: lighter;
              pointer-events: none;
            }
            textarea + label {
              bottom: calculateRem(161); //here
            }
            select, input, textarea {
              min-height: calculateRem(50);
              width: 100%;
              margin: 0;

              //left padding is for multi-line text indent in input
              padding: calculateRem(20) 0 calculateRem(2) calculateRem(14);

              background-color: #212121;
              border: none;
              border-radius: calculateRem(4);

              overflow: hidden;
              outline: none;
              &.alert-validation {
                transition: all .2s;
                border-bottom: calculateRem(2) solid red;
                border-radius: calculateRem(4) calculateRem(4) 0 0;
              }
            }
            select + i {
              position: relative;
              bottom: 40%;
              left: 90%;
              color: #969696;
              pointer-events: none;
              @include breakpoint(desktop) {
                bottom: 45%;
              }
            }
            textarea {
              padding-top: calculateRem(20);
            }
            input:hover, textarea:hover {
              transition: all .2s;
              border-bottom: calculateRem(2) solid #969696;
              border-radius: calculateRem(4) calculateRem(4) 0 0;
            }
            input:focus, input.has-value, select:focus, select.has-value {
              transition: all .2s;
              + label {
                transition: all .2s;
                bottom: calculateRem(56);
                font-size: calculateRem(12);
              }
            }
            textarea:focus, textarea.has-value {
              transition: all .2s;
              + label {
                transition: all .2s;
                bottom: calculateRem(181); //here
                font-size: calculateRem(12);
              }
            }
            input:focus, textarea:focus {
              border-bottom: calculateRem(2) solid $primary-color;
              border-radius: calculateRem(4) calculateRem(4) 0 0;
            }
            .button, .button:focus {
              padding: calculateRem(10) calculateRem(35) calculateRem(10) calculateRem(35);
              min-width: calculateRem(140);
              background-color: transparent;
              border-radius: calculateRem(5);
              border: calculateRem(1) solid $primary-color;
              color: $white;
              &:hover {
                background-color: $primary-color;
                color: $black;
              }
            }
            &.submit-field {
              text-align: right;
              .button {
                text-align: center;
              }
            }
            .required {
              position: absolute;
              top: calculateRem(47);
              left: calculateRem(36);
              margin: 0;
              font-size: calculateRem(12);
              color: #969696;
              &.message {
                top: calculateRem(163); //here
              }
            }
            select + label {
              bottom: calculateRem(42);
            }
          }
          #inquiry_type {
            padding-top: calculateRem(5);
          }
        }
      }
      .side-container {
        display: flex;
        flex-direction: column;
        justify-content: left;
        padding: calculateRem(10) calculateRem(45) calculateRem(10) calculateRem(45);
        width: 100%;
        @include breakpoint(tablet) {
          padding: calculateRem(100) 0 calculateRem(100) calculateRem(55);
          width: 60%;
        }
      }
    }
  }
}
