how-it-works section finished

app/assets/scss/base/_global.scss

@@ -3,6 +3,7 @@
 }
 
 body {
+	position: relative;
 	font-family: 'roboto', sans-serif;
 	color: #333;
 }

app/assets/scss/modules/_arrow.scss

@@ -13,7 +13,7 @@
 
 		@include atMedium{
 			position: relative;
-			bottom: -70px;
+			bottom: -40px;
 			left: 50%;
 			transform: translateX(-50%);
 		}
@@ -35,15 +35,15 @@
 
 		@include atMedium{
 			position: relative;
-			bottom: -50px;
+			bottom: -30px;
 			left: 50%;
 			transform: translateX(-50%);
 		}
 
 		@include atLarge{
 			position: relative;
-			bottom: -50px;
+			bottom: -30px;
-			left: 50%;
+			left: 70%;
 			transform: translateX(-50%);
 		}
 	}

app/assets/scss/modules/_btn.scss

@@ -6,6 +6,10 @@
 	display: inline-block;
 	border-radius: 30px;
 
+	&--l-margin{
+		margin-left: 20px;
+	}
+
 	&--medium {
 		margin-bottom:1.5rem;
 

app/assets/scss/modules/_footer.scss

@@ -0,0 +1,8 @@
+.footer{
+	position: absolute;
+	bottom: -40px;
+	width: 100%;
+	background-color: $myRed;
+	color: white;
+	text-align: center;
+}

app/assets/scss/modules/_generic-content-container.scss

@@ -1,10 +1,11 @@
 .generic-content-container{
 
 	&--t-b-margin{
-    	margin-top: 5rem;
+    	margin-top: 4rem;
-    	margin-bottom: 70px;
+    	margin-bottom: 2.5rem;
 
     	@include atLarge{
+    		margin-top: 5rem;
     		margin-bottom: 0px;
     	}
 	}
@@ -17,7 +18,7 @@
 		font-weight: 300;
 		line-height: 1.25;
 		margin: 0;
-		font-size: 1.2rem;
+		font-size: 1.1rem;
 
 		@include atMedium{
 			margin: 0 0 1.8rem 0;

app/assets/scss/modules/_headline.scss

@@ -24,7 +24,7 @@
 
 	&__title {
 		font-weight: 400;
-		font-size: 1.7rem;
+		font-size: 1.6rem;
 
 		@include atMedium(){
 			font-size: 2.1rem;
@@ -33,7 +33,7 @@
 
 	&__subtitle {
 		font-weight: 300;
-		font-size: 1.4rem;
+		font-size: 1.3rem;
 
 		@include atMedium(){
 			font-size: 1.6rem;

app/assets/scss/modules/_how-it-works.scss

@@ -1,5 +1,5 @@
 .how-it-works{
-	margin: 50px 0px;
+	margin-bottom: 2.5rem;
 
 	strong {
 		font-weight: 800;
@@ -14,10 +14,10 @@
 	}
 
 	&--atSmall-t-margin{
-		margin-top: 70px !important;
+		margin-top: 6rem !important;
 
-		@include atSmall{
+		@include atMedium{
-			margin-top: 20px;
+			margin-top: 4rem !important;
 		}
 
 		@include atLarge{
@@ -44,8 +44,12 @@
 	}
 
 	&__last-section{
-		padding: 100px 0px 50px 0px;
+		padding: 3rem 0px 50px 0px;
 		background-color: rgba(white,0.9);
+
+		@include atLarge{
+			padding: 100px 0px 50px 0px;
+		}
 	}
 
 	p{
@@ -72,11 +76,32 @@
 		
 	}
 
-	&__img{
+	&__title-small{
-		display: none;
+		font-weight: 300;
+		font-size: 1.4rem;
+		margin-bottom: 45px;
 
-		@include atLarge{
+		@include atMedium(){
+			margin-top: 10px;
+			font-size: 2.1rem;
+		}
+		
+	}
+
+	&__img{
+		// display: none;
+
+		// @include atLarge{
+		// 	display: inline-block;
+		// }
+
+		&--small-only{
 			display: inline-block;
+			margin: 10px 0px;
+
+			@include atLarge{
+				display: none;
+			}
 		}
 	}
 
@@ -94,15 +119,24 @@
 	}
 
 	&__icon--2{
-		width: 130px;
+		width: 100px;
 		margin-right: .8rem;
-		margin-bottom: -45px;
+		margin-bottom: -35px;
 	}
 
 	&__icon--3{
-		width: 130px;
+		width: 100px;
 		margin-right: .8rem;
-		margin-bottom: -35px;
+		margin-bottom: -30px;
+		margin-top: 1.2rem;
+
+		@include atMedium{
+			margin-top: 3.2rem;
+		}
+
+		@include atLarge{
+			margin-top: 0rem;
+		}
 	}
 
 

app/assets/scss/modules/_large-hero.scss

@@ -8,7 +8,7 @@
 	}
 
 	&__text-content {
-		padding-top: 88px;
+		// padding-top: 88px;
 		position: absolute;
 		top: 50%;
 		left: 0px;
@@ -24,7 +24,7 @@
 	&__title {
 		font-family: "CocogooseBold";
 		color: white;
-		font-size: 2.5rem;
+		font-size: 2.2rem;
 		margin: 0;
 
 		@include atSmall(){
@@ -41,7 +41,7 @@
 		// font-family: "CocogooseNormal";
 		font-weight: 400;
 		color: white;
-		font-size: 1.4rem;
+		font-size: 1.3rem;
 		margin: 0;
 
 		@include atSmall(){

app/assets/scss/modules/_page-section.scss

@@ -22,12 +22,21 @@
 	} 
 
 	&--t-padding{
-		padding-top: 1.2rem;
+		padding-top: 5.2rem;
 
 		@include atMedium(){
 			position: unset;
 			padding-top: 4.5rem;
 		}
+
+		&-larger{
+			padding-top: 5.2rem;
+
+			@include atMedium(){
+			position: unset;
+			padding-top: 6rem;
+			}
+		}
 	}
 
 	&--b-padding-small{

app/assets/scss/modules/_primary-nav.scss

@@ -2,7 +2,7 @@
 	padding-top: 10px;
 	
 	@include atMedium(){
-		padding: 31px 0px;
+		padding: 22px 0px;
 	}
 
 	&--pull-right{
@@ -22,6 +22,7 @@
 		list-style: none;
 		display: inline-block;
 		padding-right: 7px;
+		padding-top: 10px;
 
 		@include atMedium(){
 			float: left;

app/assets/scss/modules/_rows.scss

@@ -2,6 +2,14 @@
 
 	@include clearfix();
 
+	&--large-only{
+		display: none;
+
+		@include atLarge{
+			display: inline-block;
+		}
+	}
+
 	&--gutters {
 		margin-right: -60px;
 	}

app/assets/scss/modules/_site-header.scss

@@ -23,19 +23,21 @@
 	}
 
 	&__language{
-		margin: 13px auto 5px auto;
+		position: absolute;
+		top: 10px;
+		left: -5px;
 		border-radius: 15px;
 		overflow: hidden;
 		width: 25px;
 		height: 25px;
 
 		@include atMedium(){
+			position: unset;
 			margin: 40px 20px 0px 0px;
 			float: right;
 		}
 	}
 
-
 	&__menu-icon{
 		width: 20px;
 		height: 19px;
@@ -108,14 +110,17 @@
 		z-index: -10;
 		padding-top: 90px;
 		text-align: center;
+		display: none;
 
 		&--is-visible{
+			display: block;
 			transform: scale(1);
 			opacity: 1;
 			z-index: 1;
 		}
 
 		@include atMedium(){
+			display: inline;
 			opacity: 1;
 			z-index: 1;
 			padding-top: 0;
@@ -125,7 +130,7 @@
 
 	&__logo{
 		position: absolute;
-		top: 0px;
+		top: -1px;
 		padding: 5px 15px;
 		left: 50%;
 		transform-origin: 50% 0%;

app/assets/scss/modules/_video-container.scss

@@ -1,6 +1,6 @@
 .video-container {
 	position:relative;
-	padding-bottom:61.15%;
+	padding-bottom:63.15%;
 	height:0;
 	overflow:hidden;
 	box-shadow: -3px 3px 10px #000000ba;

app/assets/scss/style.scss

@@ -1,4 +1,4 @@
-@import './base/_normalize';
+@import './base/normalize';
 @import './base/variables';
 @import './base/fonts';
 @import './base/global';
@@ -8,12 +8,12 @@
 @import './modules/btn';
 @import './modules/large-hero';
 @import './modules/wrapper';
-@import './modules/_page-section';
+@import './modules/page-section';
-@import './modules/_headline';
+@import './modules/headline';
-@import './modules/_rows';
+@import './modules/rows';
-@import './modules/_generic-content-container';
+@import './modules/generic-content-container';
-@import './modules/_video-container';
+@import './modules/video-container';
-@import './modules/_how-it-works.scss';
+@import './modules/how-it-works';
-@import './modules/_arrow.scss';
+@import './modules/arrow';
-
+@import './modules/footer';
 

app/index.html

@@ -19,22 +19,18 @@
 	<header class="site-header">
 		<div class="wrapper">
 			<div class="site-header__logo">
-				<img src="./assets/media/images/bbb_logo_white.png" alt="BBB 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>
@@ -50,14 +46,12 @@
 
 	<!-- STARTING SECTION -->
 	<div class="large-hero">
-
 		<picture>
-			<source srcset="./assets/media/images/veg_large.png 1920w" media="(min-width: 1380px)">
+			<source srcset="./assets/media/images/our_vegetables_large.png 1920w" media="(min-width: 1380px)">
-			<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
+			<source srcset="./assets/media/images/our_vegetables_medium.png 1380w" media="(min-width: 990px)">
-			<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
+			<source srcset="./assets/media/images/our_vegetables_small.png 990w" media="(min-width: 640px)">
-			<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
+			<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>
@@ -114,70 +108,83 @@
 		</div>
 	</div>
 
-	<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding page-section--tb-padding page-section--b-margin-external">
+	<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">
+			<div class="how-it-works how-it-works--atSmall-centered how-it-works">
 				<div class="row row--gutters">
-					<div class="row__medium-6">
+					<div class="row__medium-6 row--large-only">
-						<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
+						<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"><img class="how-it-works__icon how-it-works__icon--2" src="./assets/media/images/membership.png"> Become a <strong>Member</strong> </h2>
+						<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"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/workgroup.png"> Join a <strong>Work Group</strong> </h2>
+						<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">
+					<div class="row__medium-6 row--large-only">
-						<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
+						<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">
+					<div class="row__medium-6 row--large-only">
-						<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
+						<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"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/order.png"> Order your <strong>Food</strong> </h2>
+						<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 class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
 		</div>
-	</div>
+		<picture>
-
+			<source srcset="./assets/media/images/order_food_medium.JPG 800w" media="(min-width: 650px)">
-	<div >
+			<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/veg_large_cropped.png 1920w" media="(min-width: 1580px)">
+			<source srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1380px)">
-			<source srcset="./assets/media/images/veg_medium_cropped.png 1380w" media="(min-width: 1300px)">
+			<source srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 990px)">
-			<source srcset="./assets/media/images/veg_small_cropped.png 990w" media="(min-width: 1100px)">
+			<source srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 640px)">
-			<img srcset="./assets/media/images/veg_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image">
+				<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="how-it-works--centered how-it-works--t-margin page-section--tb-padding">
-					<div class="wrapper wrapper--white wrapper--medium">
+				<div class="wrapper wrapper--white wrapper--medium">
-						<div class="how-it-works__last-section">
+					<div class="how-it-works__last-section">
-							<div class="wrapper wrapper--small">
+						<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>
+							<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>
+							<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 btn--large"><b>Join us!</b></a></p>
+							<p><a href="#" class="btn"><b>Join us!</b></a></p>
-							</div>
 						</div>
 					</div>
 				</div>
+			</div>
 		</div>
 	</div>
 
@@ -186,8 +193,11 @@
 	<!-- MEMBERS -->
 
 	<!-- FOOTER -->
-	<footer>
+	<footer class="footer">
-		<p><span class="site-footer__text">Copyright &copy; 2020 Bio Bulke Bende. All rights reserved.</span> <a href="#" class="btn">Join us!</a></p>
+		<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 -->

app/temp/styles/style.css

@@ -336,6 +336,7 @@ template {
   box-sizing: border-box; }
 
 body {
+  position: relative;
   font-family: 'roboto', sans-serif;
   color: #333; }
 
@@ -361,13 +362,16 @@ img {
       padding: 32px 0px 32px 0px;
       float: right; } }
   .site-header__language {
-    margin: 13px auto 5px auto;
+    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 {
@@ -423,20 +427,23 @@ img {
     position: relative;
     z-index: -10;
     padding-top: 90px;
-    text-align: center; }
+    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: 0px;
+    top: -1px;
     padding: 5px 15px;
     left: 50%;
     transform-origin: 50% 0%;
@@ -460,7 +467,7 @@ img {
   padding-top: 10px; }
   @media (min-width: 800px) {
     .primary-nav {
-      padding: 31px 0px; } }
+      padding: 22px 0px; } }
   @media (min-width: 800px) {
     .primary-nav--pull-right {
       float: right; } }
@@ -474,7 +481,8 @@ img {
   .primary-nav li {
     list-style: none;
     display: inline-block;
-    padding-right: 7px; }
+    padding-right: 7px;
+    padding-top: 10px; }
     @media (min-width: 800px) {
       .primary-nav li {
         float: left;
@@ -509,6 +517,8 @@ img {
   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) {
@@ -527,7 +537,6 @@ img {
   .large-hero__image {
     display: block; }
   .large-hero__text-content {
-    padding-top: 88px;
     position: absolute;
     top: 50%;
     left: 0px;
@@ -540,7 +549,7 @@ img {
   .large-hero__title {
     font-family: "CocogooseBold";
     color: white;
-    font-size: 2.5rem;
+    font-size: 2.2rem;
     margin: 0; }
     @media (min-width: 530px) {
       .large-hero__title {
@@ -551,7 +560,7 @@ img {
   .large-hero__subtitle {
     font-weight: 400;
     color: white;
-    font-size: 1.4rem;
+    font-size: 1.3rem;
     margin: 0; }
     @media (min-width: 530px) {
       .large-hero__subtitle {
@@ -604,11 +613,17 @@ img {
         position: unset;
         padding: 4.5rem 0; } }
   .page-section--t-padding {
-    padding-top: 1.2rem; }
+    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) {
@@ -646,13 +661,13 @@ img {
         max-width: 1000px; } }
   .headline__title {
     font-weight: 400;
-    font-size: 1.7rem; }
+    font-size: 1.6rem; }
     @media (min-width: 800px) {
       .headline__title {
         font-size: 2.1rem; } }
   .headline__subtitle {
     font-weight: 300;
-    font-size: 1.4rem; }
+    font-size: 1.3rem; }
     @media (min-width: 800px) {
       .headline__subtitle {
         font-size: 1.6rem; } }
@@ -676,6 +691,11 @@ img {
     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 {
@@ -710,10 +730,11 @@ img {
     display: flex; }
 
 .generic-content-container--t-b-margin {
-  margin-top: 5rem;
+  margin-top: 4rem;
-  margin-bottom: 70px; }
+  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 {
@@ -723,7 +744,7 @@ img {
   font-weight: 300;
   line-height: 1.25;
   margin: 0;
-  font-size: 1.2rem; }
+  font-size: 1.1rem; }
   @media (min-width: 800px) {
     .generic-content-container p {
       margin: 0 0 1.8rem 0;
@@ -734,7 +755,7 @@ img {
 
 .video-container {
   position: relative;
-  padding-bottom: 61.15%;
+  padding-bottom: 63.15%;
   height: 0;
   overflow: hidden;
   box-shadow: -3px 3px 10px #000000ba;
@@ -760,7 +781,7 @@ img {
   height: 100%; }
 
 .how-it-works {
-  margin: 50px 0px; }
+  margin-bottom: 2.5rem; }
   .how-it-works strong {
     font-weight: 800; }
   .how-it-works--atSmall-centered {
@@ -769,10 +790,10 @@ img {
       .how-it-works--atSmall-centered {
         text-align: left; } }
   .how-it-works--atSmall-t-margin {
-    margin-top: 70px !important; }
+    margin-top: 6rem !important; }
-    @media (min-width: 530px) {
+    @media (min-width: 800px) {
       .how-it-works--atSmall-t-margin {
-        margin-top: 20px; } }
+        margin-top: 4rem !important; } }
     @media (min-width: 1200px) {
       .how-it-works--atSmall-t-margin {
         margin-top: 100px; } }
@@ -788,8 +809,11 @@ img {
     .how-it-works--t-margin {
       margin-top: -45px; } }
   .how-it-works__last-section {
-    padding: 100px 0px 50px 0px;
+    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;
@@ -807,11 +831,20 @@ img {
       .how-it-works__title {
         margin-top: 10px;
         font-size: 2.1rem; } }
-  .how-it-works__img {
+  .how-it-works__title-small {
-    display: none; }
+    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 {
+      .how-it-works__img--small-only {
-        display: inline-block; } }
+        display: none; } }
   .how-it-works__icon--1 {
     width: 150px; }
     @media (min-width: 800px) {
@@ -822,13 +855,20 @@ img {
         width: 225px;
         margin-left: 80px; } }
   .how-it-works__icon--2 {
-    width: 130px;
+    width: 100px;
-    margin-right: .8rem;
-    margin-bottom: -45px; }
-  .how-it-works__icon--3 {
-    width: 130px;
     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;
@@ -848,7 +888,7 @@ img {
     @media (min-width: 800px) {
       .arrow--about {
         position: relative;
-        bottom: -70px;
+        bottom: -40px;
         left: 50%;
         transform: translateX(-50%); } }
     @media (min-width: 1200px) {
@@ -866,14 +906,14 @@ img {
     @media (min-width: 800px) {
       .arrow--how-it-works-1 {
         position: relative;
-        bottom: -50px;
+        bottom: -30px;
         left: 50%;
         transform: translateX(-50%); } }
     @media (min-width: 1200px) {
       .arrow--how-it-works-1 {
         position: relative;
-        bottom: -50px;
+        bottom: -30px;
-        left: 50%;
+        left: 70%;
         transform: translateX(-50%); } }
   .arrow--how-it-works-2 {
     position: absolute;
@@ -900,4 +940,12 @@ img {
   .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/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>