@font-face {
  font-display: swap;
  font-family: FontAwesome;
  src: local(FontAwesome), url("../draadcore/fonts/fontawesome-pro/fa-light-300.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-light-300.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  unicode-range: U+000-5FF;
}
@font-face {
  font-display: swap;
  font-family: FontAwesome;
  src: local(FontAwesome), url("../draadcore/fonts/fontawesome-pro/fa-regular-400.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-regular-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+000-5FF;
}
@font-face {
  font-display: swap;
  font-family: FontAwesomeBrands;
  src: local(FontAwesomeBrands), url("../draadcore/fonts/fontawesome-pro/fa-brands-400.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-brands-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+000-5FF;
}
@font-face {
  font-display: swap;
  font-family: FontAwesome;
  src: local(FontAwesome), url("../draadcore/fonts/fontawesome-pro/fa-solid-900.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-solid-900.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  unicode-range: U+000-5FF;
}
:root {
  /* Typography */
  --title-family: 'Bebas Neue', Arial, Helvetica , Verdana;
  --base-family: 'Epilogue', 'Trebuchet MS', 'Lucida Grande', 'Verdana', 'Arial', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue";
  --cursive: 'Caveat', cursive;
  --base-font-size: 14px;
  /* Layout */
  --container-width: 1225px;
  --margin: 17.5px;
  /* Grey Accents */
  --grey1: #4B4B4B;
  --grey2: #636363;
  --grey3: #7A7A7A;
  --grey4: #909090;
  --grey5: #C4C4C4;
  --grey6: #D2D2D2;
  --grey7: rgba(228, 228, 228, 0.45);
  --grey8: #f1f1f1;
  /* Colors */
  --error-red: #ff9f00;
  --error-red-bg: rgba(255, 159, 0, 0.102);
  --main-color: #fbbb10;
  --secondary-color: #103550;
  --secondary-light-color: #2D5C7D;
  --gray-light-color: #676767;
  --accent-color: #38B549;
  --accent2-color: #070;
  --light-green: #DEF2EC;
  --header-background: #F0F8F5;
  --accent3-color: #49beaa;
  --text-color: #434343;
  --disabled-color: #ACC3D4;
  --checked-color: #f5fbf7;
  --input-border: #E6E6E6;
}

html #root .section.textblock.textblock--steps {
  counter-reset: step-counter;
}
html #root .section.textblock.textblock--steps .container {
  background-color: var(--secondary-color);
  color: #fff;
  border-radius: 12px;
  padding: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  html #root .section.textblock.textblock--steps .container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
html #root .section.textblock.textblock--steps + .section.textblock:nth-child(odd) {
  background: var(--grey8);
  padding-top: 75px;
  padding-bottom: 75px;
}
html #root .section.textblock.textblock--steps .container {
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
}
html #root .section.textblock.textblock--steps .column {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-width: unset;
  max-width: 500px;
}
@media (max-width: 479px) {
  html #root .section.textblock.textblock--steps .column {
    margin: var(--margin) 0;
  }
}
@media (max-width: 1023px) {
  html #root .section.textblock.textblock--steps .column {
    min-width: calc(50% - 35px) !important;
    max-width: calc(50% - 35px) !important;
  }
}
@media (max-width: 768px) {
  html #root .section.textblock.textblock--steps .column {
    min-width: 100% !important;
    max-width: 100% !important;
  }
}
html #root .section.textblock.textblock--steps .column .content ol {
  max-width: 450px;
  padding-left: 50px;
  margin: 0;
}
html #root .section.textblock.textblock--steps .column .content li {
  position: relative;
  z-index: 0;
  list-style-type: none;
  margin-bottom: 30px;
  color: white;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  font-family: var(--base-family);
}
@media (max-width: 479px) {
  html #root .section.textblock.textblock--steps .column .content li {
    margin-bottom: 20px;
  }
}
html #root .section.textblock.textblock--steps .column .content li:last-child {
  margin-bottom: 0;
}
html #root .section.textblock.textblock--steps .column .content li::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  -webkit-transform: translate(-50%, -50);
  transform: translate(-50%, -50);
  background: var(--main-color);
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  font-family: var(--base-family);
  left: -50px;
  top: calc(50% - 17px);
  padding: 5px;
  font-weight: 700;
  line-height: 26px;
  display: block;
  color: var(--secondary-color);
  text-align: center;
}
html #root .section.textblock.textblock--steps .column .content h2, html #root .section.textblock.textblock--steps .column .content h3, html #root .section.textblock.textblock--steps .column .content h4, html #root .section.textblock.textblock--steps .column .content h5, html #root .section.textblock.textblock--steps .column .content h6 {
  color: white;
}
html #root .section.textblock.textblock--steps .button.background-main {
  margin-top: 10px;
  background: var(--accent-color) !important;
  border: none;
  color: white;
}
html #root .section.textblock.textblock--steps .button.background-main .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' data-prefix='fas' data-icon='arrow-right' class='svg-inline--fa fa-arrow-right fa-w-14' role='img' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
}

@font-face {
  font-display: swap;
  font-family: FontAwesome;
  src: local(FontAwesome), url("../draadcore/fonts/fontawesome-pro/fa-light-300.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-light-300.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  unicode-range: U+000-5FF;
}
@font-face {
  font-display: swap;
  font-family: FontAwesome;
  src: local(FontAwesome), url("../draadcore/fonts/fontawesome-pro/fa-regular-400.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-regular-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+000-5FF;
}
@font-face {
  font-display: swap;
  font-family: FontAwesomeBrands;
  src: local(FontAwesomeBrands), url("../draadcore/fonts/fontawesome-pro/fa-brands-400.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-brands-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+000-5FF;
}
@font-face {
  font-display: swap;
  font-family: FontAwesome;
  src: local(FontAwesome), url("../draadcore/fonts/fontawesome-pro/fa-solid-900.woff2") format("woff2"), url("../draadcore/fonts/fontawesome-pro/fa-solid-900.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  unicode-range: U+000-5FF;
}
:root {
  /* Typography */
  --title-family: 'Bebas Neue', Arial, Helvetica , Verdana;
  --base-family: 'Epilogue', 'Trebuchet MS', 'Lucida Grande', 'Verdana', 'Arial', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue";
  --cursive: 'Caveat', cursive;
  --base-font-size: 14px;
  /* Layout */
  --container-width: 1225px;
  --margin: 17.5px;
  /* Grey Accents */
  --grey1: #4B4B4B;
  --grey2: #636363;
  --grey3: #7A7A7A;
  --grey4: #909090;
  --grey5: #C4C4C4;
  --grey6: #D2D2D2;
  --grey7: rgba(228, 228, 228, 0.45);
  --grey8: #f1f1f1;
  /* Colors */
  --error-red: #ff9f00;
  --error-red-bg: rgba(255, 159, 0, 0.102);
  --main-color: #fbbb10;
  --secondary-color: #103550;
  --secondary-light-color: #2D5C7D;
  --gray-light-color: #676767;
  --accent-color: #38B549;
  --accent2-color: #070;
  --light-green: #DEF2EC;
  --header-background: #F0F8F5;
  --accent3-color: #49beaa;
  --text-color: #434343;
  --disabled-color: #ACC3D4;
  --checked-color: #f5fbf7;
  --input-border: #E6E6E6;
}

:root {
  /* Typography */
  --title-family: Mundial, sans-serif, -apple-system;
  --base-family: Arboria, sans-serif, -apple-system;
  --cursive: Caveat, cursive;
  --base-font-size: 16px;
  /* Colors */
  --main-color: #12A66C;
  --blue-color: #58cbc6;
  --secondary-color: #082517;
  --header-background: #FAF9F3;
  --secondary-lighter-color: #0E4028;
  --accent-color: #ED5F18;
  --accent2-color: #070;
  --light-green: #FAF9F3;
  --accent3-color: #49beaa;
  --text-color: #434343;
  --green-color: #38B549;
  --grey8: #FAF9F3;
}