From 0b810e8996337a5661183ce0059a41c710579779 Mon Sep 17 00:00:00 2001
From: Martin Wright <martin@mynameismartin.com>
Date: Mon, 27 Jul 2015 16:00:29 +0100
Subject: Style how it works section

---
 assets/stylesheets/responsive/custom.scss | 58 +++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss
index 9debf2f..d6858d8 100644
--- a/assets/stylesheets/responsive/custom.scss
+++ b/assets/stylesheets/responsive/custom.scss
@@ -575,6 +575,64 @@ dt {
     }
 }
 
+/* How it works section */
+.steps__list {
+  li {
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      width: 33.3333%;
+      margin-left: 0 !important;
+    }
+  }
+}
+
+.steps__step-box {
+  background-color: $color_white;
+  padding: 2em;
+  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    min-height: 11em;
+  }
+  p {
+    line-height: 1.5em;
+    color: $color_black_alt;
+  }
+}
+
+.steps__step-number {
+  height: 3.5em;
+  width: 3.5em;
+  background-color: $color_green;
+  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
+  padding: 1em;
+  border-radius: 100%;
+  color: $color_white;
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    left: 50%;
+    margin-left: -1.75em;
+    bottom: -1em;
+    top: auto;
+  }
+}
+
+li:nth-child(2) {
+  .steps__step-number {
+    background-color: $color_blue;
+  }
+}
+
+li:nth-child(3) {
+  .steps__step-number {
+    background-color: $color_orange;
+  }
+}
+
+.learn-more-foi {
+  @extend .button-secondary;
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    margin-top: 2em;
+  }
+}
+
 /* Authority page */
 .action-bar__follower-count {
   padding: 3px;
-- 
cgit v1.2.3