1 files changed, 87 insertions, 1 deletions
diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss
index 285d5be93..363153a73 100644
--- a/assets/sass/alaveteli-org.scss
+++ b/assets/sass/alaveteli-org.scss
@@ -300,6 +300,92 @@ h3 {
 }
 
 .how-does-it-work {
+
+  @extend %full-width-section;
+  @extend %dark-section;
+  background-color: darken($colour_brand, 5%);
+
+  overflow: hidden;
+
+  @media(min-width: $mediumish-screen) {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .how-does-it-work__slide {
+      border-top: 4em solid #fff;
+      padding-top: 3.5em;
+    }
+
+    h2, p {
+      width: 50%;
+    }
+
+    img {
+      float: right;
+      width: 30em;
+      margin-right: -15em;
+      margin-top: -13em;
+    }
+  }
+
+  @media (min-width: $large-screen) {
+    h2, p, .how-does-it-work__slide__nav {
+      width: 50%;
+      margin-left: 50%;
+    }
+
+    img {
+      float: left;
+      width: 45%;
+      margin-right: 1em;
+      margin-left: 1em;
+      margin-top: -12em;
+    }
+  }
+
+}
+
+.how-does-it-work__slide {
+  @include clearfix();
+}
+
+.how-does-it-work__slide__nav {
+  margin-top: 0.5em;
+}
+
+.how-does-it-work__slide__skip {
+  display: inline-block;
+  padding: 0.3em;
+  cursor: pointer;
+
+  span {
+    display: block;
+    border-radius: 1em; // :TODO: cross-browser?
+    width: 1em;
+    height: 1em;
+    background-color: rgba(0,0,0,0.5);
+  }
+
+  &.active {
+    span {
+      background-color: transparent;
+      border: 0.2em solid rgba(0,0,0,0.5);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    span {
+      background-color: rgba(0,0,0,0.3);
+    }
+    &.active span {
+      background-color: transparent;
+      border-color: rgba(0,0,0,0.3);
+    }
+  }
+}
+
+/* .how-does-it-work {
     @extend %full-width-section;
     @extend %dark-section;
     background-color: darken($colour_brand, 5%);
@@ -380,7 +466,7 @@ h3 {
     left: auto;
         background-color: black;
     padding: 0.75em;
-}
+} */
 
 /** .how-does-it-work__content {
     @media(min-width: $mediumish-screen) {