how-it-works section finished

docs/assets/scripts/Vendor.js

@@ -0,0 +1 @@
+!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([,function(e,n,t){"use strict";t.r(n);t(2)},function(e,n){!function(e,n,t,o){var r=[],s={_version:"3.11.3",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout((function(){n(t[e])}),0)},addTest:function(e,n,t){r.push({name:e,fn:n,options:t})},addAsyncTest:function(e){r.push({name:null,fn:e})}},a=function(){};a.prototype=s,a=new a;var i=[];var l=t.documentElement,f="svg"===l.nodeName.toLowerCase();!function(){var e,n,t,o,s,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],(n=r[f]).name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=typeof n.fn==="function"?n.fn():n.fn,s=0;s<e.length;s++)1===(l=e[s].split(".")).length?a[l[0]]=o:(a[l[0]]&&(!a[l[0]]||a[l[0]]instanceof Boolean)||(a[l[0]]=new Boolean(a[l[0]])),a[l[0]][l[1]]=o),i.push((o?"":"no-")+l.join("-"))}}(),function(e){var n=l.className,t=a._config.classPrefix||"";if(f&&(n=n.baseVal),a._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}a._config.enableClasses&&(e.length>0&&(n+=" "+t+e.join(" "+t)),f?l.className.baseVal=n:l.className=n)}(i),delete s.addTest,delete s.addAsyncTest;for(var u=0;u<a._q.length;u++)a._q[u]();e.Modernizr=a}(window,window,document)}]);

docs/assets/styles/style.css

@@ -0,0 +1,951 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0; }
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block; }
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */ }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent; }
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  /* 2 */ }
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder; }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sub {
+  bottom: -0.25em; }
+
+sup {
+  top: -0.5em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none; }
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */ }
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible; }
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none; }
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; }
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0; }
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText; }
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em; }
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */ }
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline; }
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto; }
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */ }
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */ }
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block; }
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item; }
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none; }
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none; }
+
+@font-face {
+  font-family: "CocogooseNormal";
+  src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseLight";
+  src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseBold";
+  src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseExtra";
+  src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "BS-regular";
+  src: url("../media/fonts/bahnschrift/BS_Static_Regular.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "BS-light";
+  src: url("../media/fonts/bahnschrift/BS_Static_Light.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "BS-bold";
+  src: url("../media/fonts/bahnschrift/BS_Static_Bold.ttf") format("truetype"); }
+
+* {
+  box-sizing: border-box; }
+
+body {
+  position: relative;
+  font-family: 'roboto', sans-serif;
+  color: #333; }
+
+img {
+  max-width: 100%;
+  height: auto; }
+
+.site-header {
+  position: fixed;
+  width: 100%;
+  z-index: 2;
+  transition: background-color .3s ease-out; }
+  .site-header--is-expanded {
+    background-color: orange;
+    padding-bottom: 18px; }
+  @media (min-width: 800px) {
+    .site-header {
+      position: absolute;
+      position: fixed;
+      background-color: rgba(0, 0, 0, 0.4); } }
+  @media (min-width: 800px) {
+    .site-header__btn-container {
+      padding: 32px 0px 32px 0px;
+      float: right; } }
+  .site-header__language {
+    position: absolute;
+    top: 10px;
+    left: -5px;
+    border-radius: 15px;
+    overflow: hidden;
+    width: 25px;
+    height: 25px; }
+    @media (min-width: 800px) {
+      .site-header__language {
+        position: unset;
+        margin: 40px 20px 0px 0px;
+        float: right; } }
+  .site-header__menu-icon {
+    width: 20px;
+    height: 19px;
+    position: absolute;
+    z-index: 10;
+    top: 10px;
+    right: 10px; }
+    .site-header__menu-icon::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 20px;
+      height: 3px;
+      background: #FFF;
+      transform-origin: 0 0;
+      transition: transform .3s ease-out; }
+    .site-header__menu-icon__middle {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 20px;
+      height: 3px;
+      background: #FFF;
+      transition: all .3s ease-out;
+      transform-origin: 0 50%; }
+    .site-header__menu-icon::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 20px;
+      height: 3px;
+      background: #FFF;
+      transform-origin: 0 100%;
+      transition: transform .3s ease-out; }
+    @media (min-width: 800px) {
+      .site-header__menu-icon {
+        display: none; } }
+  .site-header__menu-icon--close-x::before {
+    transform: rotate(45deg) scaleX(1.25); }
+  .site-header__menu-icon--close-x .site-header__menu-icon__middle {
+    transform: scaleX(0);
+    opacity: 0; }
+  .site-header__menu-icon--close-x::after {
+    transform: rotate(-45deg) scaleX(1.25) translateY(1px); }
+  .site-header__menu-content {
+    opacity: 0;
+    transform: scale(1.2);
+    transtion: all .3s ease-out;
+    position: relative;
+    z-index: -10;
+    padding-top: 90px;
+    text-align: center;
+    display: none; }
+    .site-header__menu-content--is-visible {
+      display: block;
+      transform: scale(1);
+      opacity: 1;
+      z-index: 1; }
+    @media (min-width: 800px) {
+      .site-header__menu-content {
+        display: inline;
+        opacity: 1;
+        z-index: 1;
+        padding-top: 0;
+        transform: scale(1); } }
+  .site-header__logo {
+    position: absolute;
+    top: -1px;
+    padding: 5px 15px;
+    left: 50%;
+    transform-origin: 50% 0%;
+    transform: translateX(-50%) scale(0.8);
+    transition: transform .3s ease-out;
+    background-color: rgba(0, 0, 0, 0.5); }
+    .site-header__logo--orange-bg {
+      transition: background-color .3s ease-out;
+      background-color: orange; }
+    @media (min-width: 800px) {
+      .site-header__logo {
+        padding: 0;
+        top: 3px;
+        position: relative;
+        float: left;
+        left: auto;
+        transform: translateX(0);
+        background-color: rgba(0, 0, 0, 0); } }
+
+.primary-nav {
+  padding-top: 10px; }
+  @media (min-width: 800px) {
+    .primary-nav {
+      padding: 22px 0px; } }
+  @media (min-width: 800px) {
+    .primary-nav--pull-right {
+      float: right; } }
+  .primary-nav ul {
+    margin: 0;
+    padding: 0; }
+    .primary-nav ul::after {
+      content: "";
+      clear: both;
+      display: table; }
+  .primary-nav li {
+    list-style: none;
+    display: inline-block;
+    padding-right: 7px;
+    padding-top: 10px; }
+    @media (min-width: 800px) {
+      .primary-nav li {
+        float: left;
+        display: block;
+        padding-right: 20px; } }
+  .primary-nav li:last-child {
+    padding-right: 0; }
+    @media (min-width: 800px) {
+      .primary-nav li:last-child {
+        padding-right: 20px; } }
+  .primary-nav a {
+    color: #fff;
+    font-weight: 400;
+    text-decoration: none;
+    display: block;
+    padding: 5px 8px;
+    font-size: .8rem;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 30px; }
+    @media (min-width: 800px) {
+      .primary-nav a {
+        background: transparent;
+        font-size: 1.10rem;
+        padding: 12px 0; }
+        .primary-nav a.is-current-link {
+          color: #fabb69; } }
+
+.btn {
+  background-color: #00ab00;
+  color: #fff;
+  text-decoration: none;
+  padding: .75rem 1.2rem;
+  display: inline-block;
+  border-radius: 30px; }
+  .btn--l-margin {
+    margin-left: 20px; }
+  .btn--medium {
+    margin-bottom: 1.5rem; }
+    @media (min-width: 530px) {
+      .btn--medium {
+        font-size: 1.1rem; } }
+  .btn--large {
+    padding: 1.1rem 1.9rem; }
+    @media (min-width: 530px) {
+      .btn--large {
+        font-size: 1.25rem; } }
+
+.large-hero {
+  border-bottom: 10px solid orange;
+  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
+  position: relative; }
+  .large-hero__image {
+    display: block; }
+  .large-hero__text-content {
+    position: absolute;
+    top: 50%;
+    left: 0px;
+    width: 100%;
+    transform: translateY(-50%);
+    text-align: center; }
+    @media (min-width: 800px) {
+      .large-hero__text-content {
+        padding-top: 60px; } }
+  .large-hero__title {
+    font-family: "CocogooseBold";
+    color: white;
+    font-size: 2.2rem;
+    margin: 0; }
+    @media (min-width: 530px) {
+      .large-hero__title {
+        font-size: 3.2rem; } }
+    @media (min-width: 800px) {
+      .large-hero__title {
+        font-size: 4.8rem; } }
+  .large-hero__subtitle {
+    font-weight: 400;
+    color: white;
+    font-size: 1.3rem;
+    margin: 0; }
+    @media (min-width: 530px) {
+      .large-hero__subtitle {
+        font-size: 1.8rem; } }
+    @media (min-width: 800px) {
+      .large-hero__subtitle {
+        font-size: 2.4rem; } }
+  .large-hero__description {
+    color: #FFF;
+    font-weight: 00;
+    font-size: 1.1rem;
+    max-width: 50rem;
+    margin-left: auto;
+    margin-right: auto; }
+    @media (min-width: 530px) {
+      .large-hero__description {
+        font-size: 1.3rem; } }
+    @media (min-width: 800px) {
+      .large-hero__description {
+        font-size: 1.875rem; } }
+
+.wrapper {
+  overflow: hidden;
+  padding-left: 18px;
+  padding-right: 18px;
+  max-width: 1300px;
+  margin-left: auto;
+  margin-right: auto; }
+  .wrapper--medium {
+    max-width: 976px; }
+  .wrapper--centered {
+    text-align: center; }
+    @media (min-width: 1200px) {
+      .wrapper--centered {
+        text-align: left; } }
+  .wrapper--small {
+    max-width: 750px; }
+
+.page-section {
+  position: relative; }
+  .page-section--t-margin-external {
+    margin-top: -70px; }
+  @media (min-width: 800px) {
+    .page-section--b-margin-external {
+      margin-bottom: -140px; } }
+  .page-section--tb-padding {
+    padding: 1.2rem 0; }
+    @media (min-width: 800px) {
+      .page-section--tb-padding {
+        position: unset;
+        padding: 4.5rem 0; } }
+  .page-section--t-padding {
+    padding-top: 5.2rem; }
+    @media (min-width: 800px) {
+      .page-section--t-padding {
+        position: unset;
+        padding-top: 4.5rem; } }
+    .page-section--t-padding-larger {
+      padding-top: 5.2rem; }
+      @media (min-width: 800px) {
+        .page-section--t-padding-larger {
+          position: unset;
+          padding-top: 6rem; } }
+  .page-section--b-padding-small {
+    padding-bottom: 1rem; }
+    @media (min-width: 800px) {
+      .page-section--b-padding-small {
+        position: unset;
+        padding-top: 3.8rem; } }
+  .page-section--b-margin {
+    margin-bottom: 70px; }
+    @media (min-width: 800px) {
+      .page-section--b-margin {
+        margin-bottom: -140px; } }
+  .page-section--red {
+    background-color: #FF3D04;
+    color: #fff; }
+  .page-section--darkGreen {
+    background-color: #6F9C3D;
+    color: #fff; }
+  .page-section--lightGreen {
+    background-color: #A5C90F;
+    color: #fff; }
+
+.headline {
+  margin: auto; }
+  .headline strong {
+    font-weight: 800; }
+  .headline--lt-margin {
+    margin-top: -5px; }
+    @media (min-width: 1200px) {
+      .headline--lt-margin {
+        margin-left: 55px; } }
+  .headline--s-width {
+    max-width: 500px; }
+    @media (min-width: 800px) {
+      .headline--s-width {
+        max-width: 1000px; } }
+  .headline__title {
+    font-weight: 400;
+    font-size: 1.6rem; }
+    @media (min-width: 800px) {
+      .headline__title {
+        font-size: 2.1rem; } }
+  .headline__subtitle {
+    font-weight: 300;
+    font-size: 1.3rem; }
+    @media (min-width: 800px) {
+      .headline__subtitle {
+        font-size: 1.6rem; } }
+  .headline--centered {
+    text-align: center; }
+  .headline--lightGreen {
+    color: #A5C90F; }
+  .headline--orange {
+    color: #FF9F2F; }
+  .headline--b-margin {
+    margin-bottom: 2.5rem; }
+    @media (min-width: 800px) {
+      .headline--b-margin {
+        margin-bottom: 4.5rem; } }
+  .headline a {
+    font-weight: 400; }
+
+.row {
+  /* Begin Equal Height Rules */ }
+  .row::after {
+    content: "";
+    clear: both;
+    display: table; }
+  .row--large-only {
+    display: none; }
+    @media (min-width: 1200px) {
+      .row--large-only {
+        display: inline-block; } }
+  .row--gutters {
+    margin-right: -60px; }
+  .row--gutters > div {
+    padding-right: 60px; }
+  @media (min-width: 1200px) {
+    .row__medium-3--larger {
+      float: left;
+      width: 30%; }
+    .row__medium-4 {
+      float: left;
+      width: 33.33%; }
+    .row__medium-6 {
+      float: left;
+      width: 50%; }
+    .row__medium-8 {
+      float: right;
+      width: 66.66%; }
+    .row__medium-9--smaller {
+      float: right;
+      width: 70%; } }
+  @media (min-width: 800px) {
+    .flexbox .row--equal-height-at-medium {
+      display: flex; } }
+  .flexbox .row--equal-height-at-medium > div {
+    float: none;
+    display: flex; }
+  @media (min-width: 800px) {
+    .flexbox .row--equal-height-at-large {
+      display: flex; } }
+  .flexbox .row--equal-height-at-large > div {
+    float: none;
+    display: flex; }
+
+.generic-content-container--t-b-margin {
+  margin-top: 4rem;
+  margin-bottom: 2.5rem; }
+  @media (min-width: 1200px) {
+    .generic-content-container--t-b-margin {
+      margin-top: 5rem;
+      margin-bottom: 0px; } }
+
+.generic-content-container--t-center {
+  text-align: center; }
+
+.generic-content-container p {
+  font-weight: 300;
+  line-height: 1.25;
+  margin: 0;
+  font-size: 1.1rem; }
+  @media (min-width: 800px) {
+    .generic-content-container p {
+      margin: 0 0 1.8rem 0;
+      font-size: 1.4rem; } }
+
+.generic-content-container p a {
+  font-weight: 700; }
+
+.video-container {
+  position: relative;
+  padding-bottom: 63.15%;
+  height: 0;
+  overflow: hidden;
+  box-shadow: -3px 3px 10px #000000ba;
+  margin-right: -18px;
+  margin-left: -18px; }
+  @media (min-width: 530px) {
+    .video-container {
+      padding-bottom: 60%; } }
+  @media (min-width: 800px) {
+    .video-container {
+      padding-bottom: 59%; } }
+  @media (min-width: 1200px) {
+    .video-container {
+      padding-bottom: 56.25%;
+      margin-right: 0px;
+      margin-left: 0px; } }
+
+.video-container video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+
+.how-it-works {
+  margin-bottom: 2.5rem; }
+  .how-it-works strong {
+    font-weight: 800; }
+  .how-it-works--atSmall-centered {
+    text-align: center; }
+    @media (min-width: 1200px) {
+      .how-it-works--atSmall-centered {
+        text-align: left; } }
+  .how-it-works--atSmall-t-margin {
+    margin-top: 6rem !important; }
+    @media (min-width: 800px) {
+      .how-it-works--atSmall-t-margin {
+        margin-top: 4rem !important; } }
+    @media (min-width: 1200px) {
+      .how-it-works--atSmall-t-margin {
+        margin-top: 100px; } }
+  .how-it-works--centered {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    text-align: center; }
+  @media (min-width: 530px) {
+    .how-it-works--t-margin {
+      margin-top: 10px; } }
+  @media (min-width: 800px) {
+    .how-it-works--t-margin {
+      margin-top: -45px; } }
+  .how-it-works__last-section {
+    padding: 3rem 0px 50px 0px;
+    background-color: rgba(255, 255, 255, 0.9); }
+    @media (min-width: 1200px) {
+      .how-it-works__last-section {
+        padding: 100px 0px 50px 0px; } }
+  .how-it-works p {
+    font-weight: 300;
+    line-height: 1.25;
+    margin: 0;
+    font-size: 1.2rem; }
+    @media (min-width: 800px) {
+      .how-it-works p {
+        margin: 0 0 1.8rem 0;
+        font-size: 1.4rem; } }
+  .how-it-works__title {
+    font-weight: 300;
+    font-size: 1.7rem;
+    margin-bottom: 45px; }
+    @media (min-width: 800px) {
+      .how-it-works__title {
+        margin-top: 10px;
+        font-size: 2.1rem; } }
+  .how-it-works__title-small {
+    font-weight: 300;
+    font-size: 1.4rem;
+    margin-bottom: 45px; }
+    @media (min-width: 800px) {
+      .how-it-works__title-small {
+        margin-top: 10px;
+        font-size: 2.1rem; } }
+  .how-it-works__img--small-only {
+    display: inline-block;
+    margin: 10px 0px; }
+    @media (min-width: 1200px) {
+      .how-it-works__img--small-only {
+        display: none; } }
+  .how-it-works__icon--1 {
+    width: 150px; }
+    @media (min-width: 800px) {
+      .how-it-works__icon--1 {
+        width: 200px; } }
+    @media (min-width: 1200px) {
+      .how-it-works__icon--1 {
+        width: 225px;
+        margin-left: 80px; } }
+  .how-it-works__icon--2 {
+    width: 100px;
+    margin-right: .8rem;
+    margin-bottom: -35px; }
+  .how-it-works__icon--3 {
+    width: 100px;
+    margin-right: .8rem;
+    margin-bottom: -30px;
+    margin-top: 1.2rem; }
+    @media (min-width: 800px) {
+      .how-it-works__icon--3 {
+        margin-top: 3.2rem; } }
+    @media (min-width: 1200px) {
+      .how-it-works__icon--3 {
+        margin-top: 0rem; } }
+  .how-it-works__icon--4 {
+    width: 100px;
+    margin-bottom: -30px;
+    margin-right: 20px; }
+
+.arrow {
+  width: 0;
+  height: 0;
+  border-left: 70px solid transparent;
+  border-right: 70px solid transparent; }
+  .arrow--about {
+    position: absolute;
+    bottom: -60px;
+    z-index: 1;
+    left: 50%;
+    transform: translateX(-50%); }
+    @media (min-width: 800px) {
+      .arrow--about {
+        position: relative;
+        bottom: -40px;
+        left: 50%;
+        transform: translateX(-50%); } }
+    @media (min-width: 1200px) {
+      .arrow--about {
+        position: relative;
+        bottom: -70px;
+        left: 50%;
+        transform: translateX(-50%); } }
+  .arrow--how-it-works-1 {
+    position: absolute;
+    bottom: -60px;
+    z-index: 1;
+    left: 50%;
+    transform: translateX(-50%); }
+    @media (min-width: 800px) {
+      .arrow--how-it-works-1 {
+        position: relative;
+        bottom: -30px;
+        left: 50%;
+        transform: translateX(-50%); } }
+    @media (min-width: 1200px) {
+      .arrow--how-it-works-1 {
+        position: relative;
+        bottom: -30px;
+        left: 70%;
+        transform: translateX(-50%); } }
+  .arrow--how-it-works-2 {
+    position: absolute;
+    bottom: -60px;
+    z-index: 1;
+    left: 50%;
+    transform: translateX(-50%); }
+    @media (min-width: 800px) {
+      .arrow--how-it-works-2 {
+        position: relative;
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%); } }
+    @media (min-width: 1200px) {
+      .arrow--how-it-works-2 {
+        position: relative;
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%); } }
+  .arrow--red {
+    border-top: 85px solid #FF3D04; }
+  .arrow--darkGreen {
+    border-top: 85px solid #6F9C3D; }
+  .arrow--lightGreen {
+    border-top: 85px solid #A5C90F; }
+
+.footer {
+  position: absolute;
+  bottom: -40px;
+  width: 100%;
+  background-color: #FF3D04;
+  color: white;
+  text-align: center; }
+
+/*# sourceMappingURL=style.css.map */

docs/index.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Bio Bulk Bende</title>
+	<meta name="keywords" content="Bio, Bulk, Bende, Organic, Autonomous Foodcoop, Food, Cooperative">
+	<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative .">
+	<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
+	<link rel="stylesheet" type="text/css" href="./assets/styles/style.css">
+
+	  <!-- build:js assets/scripts/Vendor.js -->
+	  <script type="text/javascript" src="./assets/scripts/Vendor.js"></script>
+	  <!-- endbuild -->
+</head>
+<body>
+
+	<!-- HEADER -->
+	<header class="site-header">
+		<div class="wrapper">
+			<div class="site-header__logo">
+				<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
+			</div>
+			<div class="site-header__menu-icon">
+				<div class="site-header__menu-icon__middle"></div>
+			</div>
+			<div class="site-header__menu-content">
+				<div class="site-header__btn-container">
+					<a href="#" class="btn ">Place your Order</a>
+				</div>
+				<div class="site-header__language">
+					<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
+				</div>
+				<nav class="primary-nav primary-nav--pull-right">
+					<ul>
+						<li><a href="#about-us">About us</a></li>
+						<li><a href="#how-it-works">How it works</a></li>
+						<li><a href="#agenda">Agenda</a></li>
+						<li><a href="#members-area">Members area</a>
+					</ul>
+				</nav>
+			</div>
+		</div>
+	</header>
+
+
+	<!-- STARTING SECTION -->
+	<div class="large-hero">
+		<picture>
+			<source srcset="./assets/media/images/our_vegetables_large.png 1920w" media="(min-width: 1380px)">
+			<source srcset="./assets/media/images/our_vegetables_medium.png 1380w" media="(min-width: 990px)">
+			<source srcset="./assets/media/images/our_vegetables_small.png 990w" media="(min-width: 640px)">
+			<img srcset="./assets/media/images/our_vegetables_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image">
+		</picture>
+		<div class="large-hero__text-content">
+			<h1 class="large-hero__title">bio bulke bende</h1>
+			<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
+			<!-- <p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p> -->
+			<p><a href="#" class="btn btn--large">Join us!</a></p>
+		</div>
+	</div>
+
+<!-- ABOUT US -->
+	<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding">
+		<div class="wrapper">
+			<div class="headline headline--s-width headline--centered headline--b-margin">
+				<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
+				<h2 class="headline__subtitle">...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.</h2>
+			</div>
+			<div class="row row--gutters">
+        		<div class="row__medium-8">
+        			<div class="video-container">
+						<video class="content--video--right" width="560" height="315" controls>
+							<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4">
+							Your browser does not support the video tag.
+						</video>
+					</div>
+				</div>
+				<div class="row__medium-4">
+					<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
+						<a href="#" class="btn btn--medium">Join us!</a>
+						<p>We are happy to have new members at the moment. Join us now or simply drop by on our next pickup day and say hello! </p>
+						<div class="arrow arrow--about arrow--red"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- HOW IT WORKS -->
+	<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding page-section--t-margin-external page-section--b-margin-external">
+		<div class="wrapper">
+			<div class="how-it-works how-it-works--atSmall-t-margin how-it-works--atSmall-centered">
+				<div class="row row--gutters">
+					<div class="row__medium-3--larger">
+						<img class="how-it-works__icon how-it-works__icon--1" src="./assets/media/images/foodcoop2.png">
+					</div>
+	        		<div class="row__medium-9--smaller">
+	        			<div class="headline headline--lt-margin">
+							<h2 class="headline__title ">What is a <strong>foodcoop?</strong></h2>
+							<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-yourself supermarket.</h2>
+						</div>
+					</div>
+				</div>
+				<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div>
+			</div>
+		</div>
+	</div>
+
+	<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external">
+		<div class="wrapper">
+			<div class="how-it-works how-it-works--atSmall-centered how-it-works">
+				<div class="row row--gutters">
+					<div class="row__medium-6 row--large-only">
+						<img class="how-it-works__img" src="./assets/media/images/member_large.JPG" alt="Once you are member you are part of our community!">
+					</div>
+					<div class="row__medium-6">
+						<h2 class="how-it-works__title-small"><img class="how-it-works__icon how-it-works__icon--2" src="./assets/media/images/membership.png"> Become a <strong>Member</strong> </h2>
+						<p>If you’re a member of our BioBulkBende, you have access to great organic food, straight from the producers, at lower prices than in the supermarket. In return, you pay a one-time non-refundable membership fee of 15 euros, and contribute a bit of your time and energy to keep our co-op running.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<picture>
+			<source srcset="./assets/media/images/member_medium.JPG 800w" media="(min-width: 650px)">
+			<img srcset="./assets/media/images/member_small.JPG 650w" alt="Once you are member you are part of our community!" class="how-it-works__img--small-only">
+		</picture>
+
+		<div class="wrapper">
+			<div class="how-it-works how-it-works--atSmall-centered">
+				<div class="row row--gutters">
+					<div class="row__medium-6">
+						<h2 class="how-it-works__title-small"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/workgroup.png"> Join a <strong>Work Group</strong> </h2>
+						<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are administration, membership, orders, financial, etc. As a member of our food co-op, you have to join a work group.</p>
+					</div>
+					<div class="row__medium-6 row--large-only">
+						<img class="how-it-works__img" src="./assets/media/images/workgroup_large.JPG" alt="Working togheter is part of being a foocoop!">
+					</div>
+				</div>
+			</div>
+		</div>
+		<picture>
+			<source srcset="./assets/media/images/workgroup_medium.JPG 800w" media="(min-width: 650px)">
+			<img srcset="./assets/media/images/workgroup_small.JPG 650w" alt="The pick up day is arrived!" class="how-it-works__img--small-only">
+		</picture>
+
+		<div class="wrapper">
+			<div class="how-it-works how-it-works--atSmall-centered">
+				<div class="row row--gutters">
+					<div class="row__medium-6 row--large-only">
+						<img class="how-it-works__img" src="./assets/media/images/order_food_large.JPG" alt="To order your food is easy!">
+					</div>
+					<div class="row__medium-6">
+						<h2 class="how-it-works__title-small"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/order.png"> Order your <strong>Food</strong> </h2>
+						<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<picture>
+			<source srcset="./assets/media/images/order_food_medium.JPG 800w" media="(min-width: 650px)">
+			<img srcset="./assets/media/images/order_food_small.JPG 650w" alt="To order your food is easy!" class="how-it-works__img--small-only">
+		</picture>
+		<div class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
+	</div>
+
+	<div id="how-it-works-3"  class="page-section">
+		<picture>
+			<source srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1380px)">
+			<source srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 990px)">
+			<source srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 640px)">
+				<source srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 390px)">
+			<img srcset="./assets/media/images/pickup_day_extra_smaller.jpg 390w" alt="The pick up day is arrived!" class="large-hero__image">
+		</picture>
+		<div class="how-it-works">
+			<div class="how-it-works--centered how-it-works--t-margin page-section--tb-padding">
+				<div class="wrapper wrapper--white wrapper--medium">
+					<div class="how-it-works__last-section">
+						<div class="wrapper wrapper--small">
+							<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--4" src="./assets/media/images/pickup.png"><strong>Pick-up day</strong></h2>
+							<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p><br><br>
+							<p><a href="#" class="btn"><b>Join us!</b></a></p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- AGENDA -->
+
+	<!-- MEMBERS -->
+
+	<!-- FOOTER -->
+	<footer class="footer">
+		<p>
+			<span class="site-footer__text">Copyright &copy; 2020 Bio Bulke Bende. All rights reserved.</span> 
+			<a href="#" class="btn btn--l-margin">Join us!</a>
+		</p>
+	</footer>
+
+		<!-- MODAL -->
+	<!-- build:js assets/scripts/App.js -->
+	<script type="text/javascript" src="./assets/scripts/App.js"></script>
+	<!-- endbuild -->
+</body>
+</html>