@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Roboto:300,400,500&subset=latin-ext");
@font-face {
  font-family: 'Bebas';
  font-style: normal;
  font-weight: normal;
  src: url("https://donate.naturecanada.ca/ea-campaign/action.retrievefile.do?ea_filename=BebasNeue-Regular.woff2&ea.client.id=1909") format("woff2"), url("https://donate.naturecanada.ca/ea-campaign/action.retrievefile.do?ea_filename=BebasNeue-Regular.woff&ea.client.id=1909") format("woff"); }

/* Colours
------------------------------------------------------------------------------*/
/* Styles, Shadows, etc
------------------------------------------------------------------------------*/
/* Typogarphy
------------------------------------------------------------------------------*/
/* Structure
------------------------------------------------------------------------------*/
.en__submit > button {
  border-radius: 22px;
  border: none;
  text-transform: uppercase;
  font-family: "Bebas", sans-serif;
  font-size: 22px;
  -webkit-font-smoothing: antialiased;
  background-color: #00BF8B;
  color: #FFFFFF;
  padding: 5px 30px 2px 30px;
  min-width: 100px;
  box-sizing: border-box;
  transition: all 0.5s;
  text-align: center; }
  .en__submit > button:hover {
    background-color: #009F74; }

.en__component {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden; }
  .en__component--dk .en__field .en__field__element .en__field__input--text,
  .en__component--dk .en__field .en__field__element .en__field__input--select,
  .en__component--dk .en__field .en__field__element .en__field__input--splitselect {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 0 0 20px -15px; }
  .en__component--contactblock {
    width: 100%;
    background-color: inherit !important;
    padding: 10px 0 !important; }
    .en__component--contactblock .en__contacts {
      width: 100%; }
      .en__component--contactblock .en__contacts .en__contact__detail {
        background-color: inherit;
        padding: 0; }
        .en__component--contactblock .en__contacts .en__contact__detail .en__contactDetails {
          padding-right: 12px;
          width: auto;
          position: relative;
          left: 20px;
          top: 0;
          transition: all ease-in-out 0.1s;
          color: #000000;
          font-family: "Roboto", sans-serif;
          font-size: 16px;
          font-weight: 500;
          display: inline-block; }
          .en__component--contactblock .en__contacts .en__contact__detail .en__contactDetails .en__contactDetails__row--1 {
            font-weight: 500 !important; }
          .en__component--contactblock .en__contacts .en__contact__detail .en__contactDetails .en__contactDetails__row--2 {
            font-weight: 300 !important; }
        .en__component--contactblock .en__contacts .en__contact__detail .en__contactSubject .en__field__input--text {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          height: 50px;
          width: 100%;
          border-radius: 25px;
          background-color: #EAEAEA;
          color: #707070;
          border: 2px solid #EAEAEA;
          padding: 0 20px;
          font-family: "Roboto", sans-serif;
          transition: all ease-in-out 0.1s;
          font-size: 16px;
          background-color: #FFFFFF;
          border-color: #FFFFFF;
          color: #000000;
          box-shadow: 0 0 20px -15px;
          font-weight: 300; }
          .en__component--contactblock .en__contacts .en__contact__detail .en__contactSubject .en__field__input--text:focus {
            outline: 0;
            border: 2px solid #989898; }
        .en__component--contactblock .en__contacts .en__contact__detail .en__contactSections .en__field--textarea {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          height: 50px;
          width: 100%;
          border-radius: 25px;
          background-color: #EAEAEA;
          color: #707070;
          border: 2px solid #EAEAEA;
          padding: 0 20px;
          font-family: "Roboto", sans-serif;
          transition: all ease-in-out 0.1s;
          font-size: 16px;
          border-bottom-right-radius: 0;
          line-height: 22px;
          background-color: #FFFFFF;
          border-color: #FFFFFF;
          color: #000000;
          box-shadow: 0 0 20px -15px;
          font-weight: 300;
          transition: inherit;
          padding: 20px;
          max-width: 100%;
          min-width: 100%; }
          .en__component--contactblock .en__contacts .en__contact__detail .en__contactSections .en__field--textarea:focus {
            outline: 0;
            border: 2px solid #989898; }
      .en__component--contactblock .en__contacts .en__contact__toggle {
        display: none; }

.en__field {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap; }
  .en__field .en__field__label {
    padding-right: 12px;
    width: auto;
    position: relative;
    left: 20px;
    top: 0;
    transition: all ease-in-out 0.1s;
    color: #000000;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 500;
    order: -1; }
  .en__field .en__field__element {
    width: 100%; }
    .en__field .en__field__element .en__field__input--text {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 50px;
      width: 100%;
      border-radius: 25px;
      background-color: #EAEAEA;
      color: #707070;
      border: 2px solid #EAEAEA;
      padding: 0 20px;
      font-family: "Roboto", sans-serif;
      transition: all ease-in-out 0.1s;
      font-size: 16px; }
      .en__field .en__field__element .en__field__input--text:focus {
        outline: 0;
        border: 2px solid #989898; }
    .en__field .en__field__element--radio {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .en__field .en__field__element--radio .en__field__input--radio {
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        z-index: -1; }
        .en__field .en__field__element--radio .en__field__input--radio:checked + .en__field__label {
          background-color: #00BF8B;
          color: #FFFFFF; }
      .en__field .en__field__element--radio .en__field__label {
        border-radius: 22px;
        border: none;
        text-transform: uppercase;
        font-family: "Bebas", sans-serif;
        font-size: 22px;
        -webkit-font-smoothing: antialiased;
        background-color: #00BF8B;
        color: #FFFFFF;
        padding: 5px 30px 2px 30px;
        min-width: 100px;
        box-sizing: border-box;
        transition: all 0.5s;
        text-align: center;
        background-color: #FFFFFF;
        border: 2px solid #00BF8B;
        color: #00BF8B;
        left: 0;
        width: 100%; }
        .en__field .en__field__element--radio .en__field__label:hover {
          background-color: #009F74; }
        .en__field .en__field__element--radio .en__field__label:hover {
          color: #FFFFFF;
          background-color: #00BF8B;
          border-color: #00BF8B; }
    .en__field .en__field__element--checkbox .en__field__input--checkbox {
      position: absolute;
      overflow: hidden;
      clip: rect(0 0 0 0);
      height: 1px;
      width: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      z-index: -1; }
      .en__field .en__field__element--checkbox .en__field__input--checkbox + .en__field__label {
        vertical-align: middle;
        left: 0;
        text-transform: uppercase;
        font-family: "Bebas", sans-serif;
        font-size: 22px;
        -webkit-font-smoothing: antialiased; }
        .en__field .en__field__element--checkbox .en__field__input--checkbox + .en__field__label::before {
          border-radius: 22px;
          border: none;
          text-transform: uppercase;
          font-family: "Bebas", sans-serif;
          font-size: 22px;
          -webkit-font-smoothing: antialiased;
          background-color: #00BF8B;
          color: #FFFFFF;
          padding: 5px 30px 2px 30px;
          min-width: 100px;
          box-sizing: border-box;
          transition: all 0.5s;
          text-align: center;
          background-color: #FFFFFF;
          border: 2px solid #00BF8B;
          color: #00BF8B;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "";
          min-width: inherit;
          width: 30px;
          height: 30px;
          padding: 4px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px; }
          .en__field .en__field__element--checkbox .en__field__input--checkbox + .en__field__label::before:hover {
            background-color: #009F74; }
          .en__field .en__field__element--checkbox .en__field__input--checkbox + .en__field__label::before:hover {
            color: #FFFFFF;
            background-color: #00BF8B;
            border-color: #00BF8B; }
      .en__field .en__field__element--checkbox .en__field__input--checkbox:checked + .en__field__label::before {
        border-radius: 22px;
        border: none;
        text-transform: uppercase;
        font-family: "Bebas", sans-serif;
        font-size: 22px;
        -webkit-font-smoothing: antialiased;
        background-color: #00BF8B;
        color: #FFFFFF;
        padding: 5px 30px 2px 30px;
        min-width: 100px;
        box-sizing: border-box;
        transition: all 0.5s;
        text-align: center;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f00c";
        min-width: inherit;
        padding: 4px; }
        .en__field .en__field__element--checkbox .en__field__input--checkbox:checked + .en__field__label::before:hover {
          background-color: #009F74; }
    .en__field .en__field__element--select,
    .en__field .en__field__element--splitselect > .en__field__item {
      position: relative;
      padding: 0 !important; }
      .en__field .en__field__element--select .en__field__input--select,
      .en__field .en__field__element--select .en__field__input--splitselect,
      .en__field .en__field__element--splitselect > .en__field__item .en__field__input--select,
      .en__field .en__field__element--splitselect > .en__field__item .en__field__input--splitselect {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 50px;
        width: 100%;
        border-radius: 25px;
        background-color: #EAEAEA;
        color: #707070;
        border: 2px solid #EAEAEA;
        padding: 0 20px;
        font-family: "Roboto", sans-serif;
        transition: all ease-in-out 0.1s;
        font-size: 16px;
        padding-right: 30px;
        color: #000000; }
        .en__field .en__field__element--select .en__field__input--select:focus,
        .en__field .en__field__element--select .en__field__input--splitselect:focus,
        .en__field .en__field__element--splitselect > .en__field__item .en__field__input--select:focus,
        .en__field .en__field__element--splitselect > .en__field__item .en__field__input--splitselect:focus {
          outline: 0;
          border: 2px solid #989898; }
      .en__field .en__field__element--select::after,
      .en__field .en__field__element--splitselect > .en__field__item::after {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f104\f105";
        letter-spacing: 3px;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        position: absolute;
        top: 17px;
        right: 10px;
        color: #707070; }
    .en__field .en__field__element--splitselect {
      display: flex; }
      .en__field .en__field__element--splitselect > .en__field__item {
        min-width: 100px;
        margin-right: 15px;
        padding: 0; }
    .en__field .en__field__element .en__field__item {
      transition: all 0.5s;
      z-index: 9;
      flex-basis: calc(33.3% - 15px); }
      .en__field .en__field__element .en__field__item--other {
        max-width: calc(33.3% - 15px);
        z-index: 7;
        position: relative; }
        .en__field .en__field__element .en__field__item--other .en__field__input--other {
          margin-left: 0;
          border-radius: 22px;
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
          text-transform: uppercase;
          font-family: "Bebas", sans-serif;
          font-size: 22px;
          -webkit-font-smoothing: antialiased;
          background-color: #EAEAEA;
          border: 2px solid #EAEAEA;
          color: #535353;
          padding: 5px 10px 2px calc(100% + 5px);
          box-sizing: border-box;
          position: relative;
          top: 1px;
          left: -100%;
          width: 200%;
          max-width: 200%; }
          .en__field .en__field__element .en__field__item--other .en__field__input--other:focus {
            outline: 0;
            border-color: #989898; }
        .en__field .en__field__element .en__field__item--other::before {
          content: "$";
          color: #535353;
          text-transform: uppercase;
          font-family: "Bebas", sans-serif;
          font-size: 22px;
          -webkit-font-smoothing: antialiased;
          padding: 5px 0px 2px 25px;
          width: 0;
          position: absolute;
          top: 6px;
          left: -30px;
          z-index: 19;
          border-top: 2px solid rgba(234, 234, 234, 0);
          border-bottom: 2px solid rgba(234, 234, 234, 0); }
      .en__field .en__field__element .en__field__item--hidden {
        left: -80px;
        display: initial; }
        .en__field .en__field__element .en__field__item--hidden .en__field__input--other {
          min-width: 0;
          width: 0;
          padding: 0; }
  .en__field .en__field__error {
    padding-right: 12px;
    width: auto;
    position: relative;
    left: 20px;
    top: 0;
    transition: all ease-in-out 0.1s;
    color: #000000;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fb4d3d;
    padding: 6px 0; }

.en__submit {
  width: 100%;
  margin: 30px 0; }
  .en__submit > button {
    border-radius: 22px;
    border: none;
    text-transform: uppercase;
    font-family: "Bebas", sans-serif;
    font-size: 22px;
    -webkit-font-smoothing: antialiased;
    background-color: #00BF8B;
    color: #FFFFFF;
    padding: 5px 30px 2px 30px;
    min-width: 100px;
    box-sizing: border-box;
    transition: all 0.5s;
    text-align: center;
    line-height: 22px;
    width: 100%;
    border-radius: 26px;
    font-size: 32px;
    padding: 18px 40px 13px 40px; }
    .en__submit > button:hover {
      background-color: #009F74; }

.en__component--copyblock {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #707070; }
  .en__component--copyblock p::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 5px; }

.en__field--lastName,
.en__field--paymenttype {
  flex-basis: 100%; }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .en__field--lastName,
    .en__field--paymenttype {
      flex-basis: 100%; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .en__field--lastName,
    .en__field--paymenttype {
      flex-basis: 50%; } }
  @media only screen and (min-width: 992px) {
    .en__field--lastName,
    .en__field--paymenttype {
      flex-basis: 50%; } }

.en__field--firstName {
  flex-basis: 100%;
  margin-right: 0; }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .en__field--firstName {
      flex-basis: 100%; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .en__field--firstName {
      flex-basis: calc(50% - 15px); } }
  @media only screen and (min-width: 992px) {
    .en__field--firstName {
      flex-basis: calc(50% - 15px); } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .en__field--firstName {
      margin-right: 0; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .en__field--firstName {
      margin-right: 15px; } }
  @media only screen and (min-width: 992px) {
    .en__field--firstName {
      margin-right: 15px; } }

.en__field--region {
  flex-basis: calc(60% - 15px);
  margin-right: 15px; }

.en__field--phoneNumber {
  flex-basis: calc(60% - 15px);
  margin-left: 15px; }

.en__field--postcode {
  flex-basis: 40%; }

.en__field--ccvv {
  flex-basis: calc(30% - 15px);
  margin-right: 15px;
  min-width: 100px; }

.en__field--ccexpire {
  flex-basis: 70%; }

.en__field--donationAmt {
  padding-top: 18px; }

.en__field--recurrpay::after {
  content: "";
  display: block;
  width: calc(100% - 45px);
  position: relative;
  height: 1px;
  background-color: #EAEAEA;
  bottom: -17.5px;
  left: 15px; }

.en__field--recurrpay .en__field__label--item {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  justify-content: space-between; }

.en__field--NOT_TAGGED_36 {
  display: none; }

@media (min-width: 992px) {
  .en__field--firstName,
  .en__field--lastName {
    flex-basis: calc(50% - 15px); }
  .en__field--region {
    flex-basis: calc(60% - 15px); }
  .en__field--postcode {
    flex-basis: calc(40% - 15px); } }

.nc-form__progress {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 15px 40px;
  position: relative; }
  .nc-form__progress .nc-form__progres-number {
    border-radius: 22px;
    border: none;
    text-transform: uppercase;
    font-family: "Bebas", sans-serif;
    font-size: 22px;
    -webkit-font-smoothing: antialiased;
    background-color: #00BF8B;
    color: #FFFFFF;
    padding: 5px 30px 2px 30px;
    min-width: 100px;
    box-sizing: border-box;
    transition: all 0.5s;
    text-align: center;
    background-color: #FFFFFF;
    border: 2px solid #00BF8B;
    color: #00BF8B;
    min-width: inherit;
    padding: 5px 0;
    text-align: center;
    width: 38px;
    height: 38px; }
    .nc-form__progress .nc-form__progres-number:hover {
      background-color: #009F74; }
    .nc-form__progress .nc-form__progres-number:hover {
      color: #FFFFFF;
      background-color: #00BF8B;
      border-color: #00BF8B; }
    .nc-form__progress .nc-form__progres-number:hover {
      background-color: #FFFFFF;
      color: #00BF8B; }
    .nc-form__progress .nc-form__progres-number--active {
      background-color: #00BF8B;
      color: #FFFFFF; }
      .nc-form__progress .nc-form__progres-number--active:hover {
        background-color: #00BF8B !important;
        color: #FFFFFF !important; }
  .nc-form__progress::before {
    content: "";
    display: block;
    width: calc(100% - 80px);
    height: 2px;
    background-color: #00BF8B;
    position: absolute;
    top: 33px;
    z-index: -1; }

.en__component--copyblock h2 {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 36px;
  color: #000000;
  text-align: center;
  margin: 20px auto; }

body {
  padding: 20px 15px;
  margin: 0;
  box-sizing: border-box; }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    body {
      padding: 20px 50px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    body {
      padding: 20px 50px; } }
  @media only screen and (min-width: 992px) {
    body {
      padding: 20px 50px; } }