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;
-			left: 50%;
+			bottom: -30px;
+			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-bottom: 70px;
+    	margin-top: 4rem;
+    	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{
-			margin-top: 20px;
+		@include atMedium{
+			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{
-		display: none;
+	&__title-small{
+		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/_headline';
-@import './modules/_rows';
-@import './modules/_generic-content-container';
-@import './modules/_video-container';
-@import './modules/_how-it-works.scss';
-@import './modules/_arrow.scss';
-
+@import './modules/page-section';
+@import './modules/headline';
+@import './modules/rows';
+@import './modules/generic-content-container';
+@import './modules/video-container';
+@import './modules/how-it-works';
+@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/veg_medium.png 1380w" media="(min-width: 990px)">
-			<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
-			<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
+			<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>
@@ -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">
-						<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
+					<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"><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">
-						<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
+					<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">
-						<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
+					<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"><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>
-
-	<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/veg_large_cropped.png 1920w" media="(min-width: 1580px)">
-			<source srcset="./assets/media/images/veg_medium_cropped.png 1380w" media="(min-width: 1300px)">
-			<source srcset="./assets/media/images/veg_small_cropped.png 990w" media="(min-width: 1100px)">
-			<img srcset="./assets/media/images/veg_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image">
+			<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>
-								<p><a href="#" class="btn btn--large"><b>Join us!</b></a></p>
-							</div>
+			<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>
 
@@ -186,8 +193,11 @@
 	<!-- MEMBERS -->
 
 	<!-- FOOTER -->
-	<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>
+	<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 -->

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-bottom: 70px; }
+  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 {
@@ -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; }
-    @media (min-width: 530px) {
+    margin-top: 6rem !important; }
+    @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 {
-    display: none; }
+  .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 {
-        display: inline-block; } }
+      .how-it-works__img--small-only {
+        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;
-    margin-right: .8rem;
-    margin-bottom: -45px; }
-  .how-it-works__icon--3 {
-    width: 130px;
+    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;
@@ -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;
-        left: 50%;
+        bottom: -30px;
+        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 */