diff --git a/Gemfile b/Gemfile
index b68023d6..ae9ca4d8 100644
--- a/Gemfile
+++ b/Gemfile
@@ -8,7 +8,7 @@ gemspec
 # jquery-rails is used by the dummy application
 gem "jquery-rails"
 
-gem 'rails', '~> 4.2'
+gem 'rails', '~> 5.0.2'
 gem 'foreman'
 gem 'thin'
 # for markdown
diff --git a/Gemfile.lock b/Gemfile.lock
index 73571738..180d904c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -4,61 +4,68 @@ PATH
     reimagine2 (2.1.1)
       addressable (~> 2.4)
       coffee-rails
-      compass-rails (= 2.0.4)
-      foundation-rails (~> 5.5)
+      compass-rails (~> 3.0, >= 3.0.2)
+      foundation-rails (~> 6.2)
       rails
       sass-rails
 
 GEM
   remote: https://rubygems.org/
   specs:
-    actionmailer (4.2.7.1)
-      actionpack (= 4.2.7.1)
-      actionview (= 4.2.7.1)
-      activejob (= 4.2.7.1)
+    actioncable (5.0.2)
+      actionpack (= 5.0.2)
+      nio4r (>= 1.2, < 3.0)
+      websocket-driver (~> 0.6.1)
+    actionmailer (5.0.2)
+      actionpack (= 5.0.2)
+      actionview (= 5.0.2)
+      activejob (= 5.0.2)
       mail (~> 2.5, >= 2.5.4)
-      rails-dom-testing (~> 1.0, >= 1.0.5)
-    actionpack (4.2.7.1)
-      actionview (= 4.2.7.1)
-      activesupport (= 4.2.7.1)
-      rack (~> 1.6)
-      rack-test (~> 0.6.2)
-      rails-dom-testing (~> 1.0, >= 1.0.5)
+      rails-dom-testing (~> 2.0)
+    actionpack (5.0.2)
+      actionview (= 5.0.2)
+      activesupport (= 5.0.2)
+      rack (~> 2.0)
+      rack-test (~> 0.6.3)
+      rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (4.2.7.1)
-      activesupport (= 4.2.7.1)
+    actionview (5.0.2)
+      activesupport (= 5.0.2)
       builder (~> 3.1)
       erubis (~> 2.7.0)
-      rails-dom-testing (~> 1.0, >= 1.0.5)
-      rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    activejob (4.2.7.1)
-      activesupport (= 4.2.7.1)
-      globalid (>= 0.3.0)
-    activemodel (4.2.7.1)
-      activesupport (= 4.2.7.1)
-      builder (~> 3.1)
-    activerecord (4.2.7.1)
-      activemodel (= 4.2.7.1)
-      activesupport (= 4.2.7.1)
-      arel (~> 6.0)
-    activesupport (4.2.7.1)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    activejob (5.0.2)
+      activesupport (= 5.0.2)
+      globalid (>= 0.3.6)
+    activemodel (5.0.2)
+      activesupport (= 5.0.2)
+    activerecord (5.0.2)
+      activemodel (= 5.0.2)
+      activesupport (= 5.0.2)
+      arel (~> 7.0)
+    activesupport (5.0.2)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (~> 0.7)
-      json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
-      thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
-    addressable (2.4.0)
-    arel (6.0.3)
-    builder (3.2.2)
+    addressable (2.5.0)
+      public_suffix (~> 2.0, >= 2.0.2)
+    arel (7.1.4)
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
+    builder (3.2.3)
     byebug (9.0.6)
-    capybara (2.9.2)
+    capybara (2.13.0)
       addressable
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
-    chunky_png (1.3.7)
+    chunky_png (1.3.8)
     coderay (1.1.1)
     coffee-rails (4.2.1)
       coffee-script (>= 2.2.0)
@@ -66,7 +73,7 @@ GEM
     coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.10.0)
+    coffee-script-source (1.12.2)
     columnize (0.9.0)
     compass (1.0.3)
       chunky_png (~> 1.2)
@@ -80,11 +87,11 @@ GEM
       sass (>= 3.3.0, < 3.5)
     compass-import-once (1.0.5)
       sass (>= 3.2, < 3.5)
-    compass-rails (2.0.4)
+    compass-rails (3.0.2)
       compass (~> 1.0.0)
-      sass-rails (<= 5.0.1)
-      sprockets (< 2.13)
-    concurrent-ruby (1.0.2)
+      sass-rails (< 5.1)
+      sprockets (< 4.0)
+    concurrent-ruby (1.0.5)
     daemons (1.2.4)
     debugger (1.6.8)
       columnize (>= 0.3.1)
@@ -92,25 +99,24 @@ GEM
       debugger-ruby_core_source (~> 1.3.5)
     debugger-linecache (1.2.0)
     debugger-ruby_core_source (1.3.8)
-    diff-lcs (1.2.5)
+    diff-lcs (1.3)
     erubis (2.7.0)
-    eventmachine (1.2.0.1)
+    eventmachine (1.2.3)
     execjs (2.7.0)
-    ffi (1.9.14)
-    foreman (0.82.0)
+    ffi (1.9.18)
+    foreman (0.84.0)
       thor (~> 0.19.1)
-    foundation-rails (5.5.3.2)
+    foundation-rails (6.3.1.0)
       railties (>= 3.1.0)
       sass (>= 3.3.0, < 3.5)
+      sprockets-es6 (>= 0.9.0)
     globalid (0.3.7)
       activesupport (>= 4.1.0)
-    hike (1.2.3)
-    i18n (0.7.0)
-    jquery-rails (4.2.1)
+    i18n (0.8.1)
+    jquery-rails (4.3.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (1.8.3)
     launchy (2.4.3)
       addressable (~> 2.3)
     loofah (2.0.3)
@@ -122,84 +128,89 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
     mini_portile2 (2.1.0)
-    minitest (5.9.1)
+    minitest (5.10.1)
     multi_json (1.12.1)
-    nokogiri (1.6.8.1)
+    nio4r (2.0.0)
+    nokogiri (1.7.1)
       mini_portile2 (~> 2.1.0)
     pry (0.10.4)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
-    pry-byebug (3.4.0)
+    pry-byebug (3.4.2)
       byebug (~> 9.0)
       pry (~> 0.10)
     pry-debugger (0.2.3)
       debugger (~> 1.3)
       pry (>= 0.9.10, < 0.11.0)
-    rack (1.6.4)
+    public_suffix (2.0.5)
+    rack (2.0.1)
     rack-test (0.6.3)
       rack (>= 1.0)
-    rails (4.2.7.1)
-      actionmailer (= 4.2.7.1)
-      actionpack (= 4.2.7.1)
-      actionview (= 4.2.7.1)
-      activejob (= 4.2.7.1)
-      activemodel (= 4.2.7.1)
-      activerecord (= 4.2.7.1)
-      activesupport (= 4.2.7.1)
+    rails (5.0.2)
+      actioncable (= 5.0.2)
+      actionmailer (= 5.0.2)
+      actionpack (= 5.0.2)
+      actionview (= 5.0.2)
+      activejob (= 5.0.2)
+      activemodel (= 5.0.2)
+      activerecord (= 5.0.2)
+      activesupport (= 5.0.2)
       bundler (>= 1.3.0, < 2.0)
-      railties (= 4.2.7.1)
-      sprockets-rails
-    rails-deprecated_sanitizer (1.0.3)
-      activesupport (>= 4.2.0.alpha)
-    rails-dom-testing (1.0.7)
-      activesupport (>= 4.2.0.beta, < 5.0)
-      nokogiri (~> 1.6.0)
-      rails-deprecated_sanitizer (>= 1.0.1)
+      railties (= 5.0.2)
+      sprockets-rails (>= 2.0.0)
+    rails-dom-testing (2.0.2)
+      activesupport (>= 4.2.0, < 6.0)
+      nokogiri (~> 1.6)
     rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
-    railties (4.2.7.1)
-      actionpack (= 4.2.7.1)
-      activesupport (= 4.2.7.1)
+    railties (5.0.2)
+      actionpack (= 5.0.2)
+      activesupport (= 5.0.2)
+      method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rake (11.3.0)
-    rb-fsevent (0.9.7)
-    rb-inotify (0.9.7)
+    rake (12.0.0)
+    rb-fsevent (0.9.8)
+    rb-inotify (0.9.8)
       ffi (>= 0.5.0)
-    redcarpet (3.3.4)
-    rspec-collection_matchers (1.1.2)
-      rspec-expectations (>= 2.99.0.beta1)
-    rspec-core (2.99.2)
-    rspec-expectations (2.99.2)
-      diff-lcs (>= 1.1.3, < 2.0)
-    rspec-mocks (2.99.4)
-    rspec-rails (2.99.0)
+    redcarpet (3.4.0)
+    rspec-core (3.5.4)
+      rspec-support (~> 3.5.0)
+    rspec-expectations (3.5.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.5.0)
+    rspec-mocks (3.5.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.5.0)
+    rspec-rails (3.5.2)
       actionpack (>= 3.0)
-      activemodel (>= 3.0)
       activesupport (>= 3.0)
       railties (>= 3.0)
-      rspec-collection_matchers
-      rspec-core (~> 2.99.0)
-      rspec-expectations (~> 2.99.0)
-      rspec-mocks (~> 2.99.0)
-    sass (3.4.22)
-    sass-rails (5.0.1)
-      railties (>= 4.0.0, < 5.0)
+      rspec-core (~> 3.5.0)
+      rspec-expectations (~> 3.5.0)
+      rspec-mocks (~> 3.5.0)
+      rspec-support (~> 3.5.0)
+    rspec-support (3.5.0)
+    sass (3.4.23)
+    sass-rails (5.0.6)
+      railties (>= 4.0.0, < 6)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
-      tilt (~> 1.1)
+      tilt (>= 1.1, < 3)
     slop (3.6.0)
-    sprockets (2.12.4)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
-    sprockets-rails (2.3.3)
-      actionpack (>= 3.0)
-      activesupport (>= 3.0)
-      sprockets (>= 2.8, < 4.0)
+    sprockets (3.7.1)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-es6 (0.9.2)
+      babel-source (>= 5.8.11)
+      babel-transpiler
+      sprockets (>= 3.0.0)
+    sprockets-rails (3.2.0)
+      actionpack (>= 4.0)
+      activesupport (>= 4.0)
+      sprockets (>= 3.0.0)
     steak (2.0.0)
       capybara (>= 1.0.0)
       rspec-rails (>= 2.5.0)
@@ -207,11 +218,14 @@ GEM
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0, >= 1.0.4)
       rack (>= 1, < 3)
-    thor (0.19.1)
-    thread_safe (0.3.5)
-    tilt (1.4.1)
-    tzinfo (1.2.2)
+    thor (0.19.4)
+    thread_safe (0.3.6)
+    tilt (2.0.7)
+    tzinfo (1.2.3)
       thread_safe (~> 0.1)
+    websocket-driver (0.6.5)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.2)
     xpath (2.0.0)
       nokogiri (~> 1.3)
 
@@ -225,9 +239,12 @@ DEPENDENCIES
   pry
   pry-byebug
   pry-debugger
-  rails (~> 4.2)
+  rails (~> 5.0.2)
   redcarpet (~> 3.3)
   reimagine2!
-  rspec-rails (~> 2.0)
+  rspec-rails
   steak
   thin
+
+BUNDLED WITH
+   1.14.6
diff --git a/app/assets/fonts/reimagine2/clearsans/ClearSans-Regular.ttf b/app/assets/fonts/reimagine2/clearsans/ClearSans-Regular.ttf
new file mode 100755
index 00000000..dd15aa1a
Binary files /dev/null and b/app/assets/fonts/reimagine2/clearsans/ClearSans-Regular.ttf differ
diff --git a/app/assets/fonts/reimagine2/clearsans/ClearSans-Regular.woff b/app/assets/fonts/reimagine2/clearsans/ClearSans-Regular.woff
new file mode 100755
index 00000000..f4aacf79
Binary files /dev/null and b/app/assets/fonts/reimagine2/clearsans/ClearSans-Regular.woff differ
diff --git a/app/assets/images/reimagine2/no-avatar-180.png b/app/assets/images/reimagine2/no-avatar-180.png
new file mode 100644
index 00000000..e0f20da7
Binary files /dev/null and b/app/assets/images/reimagine2/no-avatar-180.png differ
diff --git a/app/assets/javascripts/reimagine2/foundation.js b/app/assets/javascripts/reimagine2/foundation.js
index 59dc634f..36b01d88 100644
--- a/app/assets/javascripts/reimagine2/foundation.js
+++ b/app/assets/javascripts/reimagine2/foundation.js
@@ -1,12 +1,21 @@
 // The order matters
 
-//= require foundation/foundation
-//= require foundation/foundation.alerts
-//= require foundation/foundation.interchange
-//= require foundation/foundation.orbit
-//= require foundation/foundation.reveal
-//= require foundation/foundation.topbar
-//= require foundation/foundation.tooltips
-//= require foundation/foundation.dropdown
-//= require foundation/foundation.section
-//= require foundation/foundation.clearing
+//= require foundation.core.js
+//= require foundation.drilldown.js
+//= require foundation.dropdown.js
+//= require foundation.dropdownMenu.js
+//= require foundation.responsiveMenu.js
+//= require foundation.responsiveToggle.js
+//= require foundation.reveal.js
+//= require foundation.tabs.js
+//= require foundation.toggler.js
+//= require foundation.tooltip.js
+//= require foundation.util.box.js
+//= require foundation.util.keyboard.js
+//= require foundation.util.mediaQuery.js
+//= require foundation.util.motion.js
+//= require foundation.util.nest.js
+//= require foundation.util.timerAndImageLoader.js
+//= require foundation.util.touch.js
+//= require foundation.util.triggers.js
+//= require foundation.zf.responsiveAccordionTabs.js
diff --git a/app/assets/stylesheets/reimagine2/_devpost.sass b/app/assets/stylesheets/reimagine2/_devpost.sass
index 8230b350..5b731443 100644
--- a/app/assets/stylesheets/reimagine2/_devpost.sass
+++ b/app/assets/stylesheets/reimagine2/_devpost.sass
@@ -7,3 +7,4 @@
 @import 'devpost/footer'
 @import 'devpost/word_wrapping'
 @import 'devpost/links'
+@import 'devpost/styles'
diff --git a/app/assets/stylesheets/reimagine2/_export.sass b/app/assets/stylesheets/reimagine2/_export.sass
index 992a0920..2e141ea3 100644
--- a/app/assets/stylesheets/reimagine2/_export.sass
+++ b/app/assets/stylesheets/reimagine2/_export.sass
@@ -4,4 +4,3 @@
 $include-html-classes: false
 @import 'reimagine2/config'
 @import 'reimagine2/foundation/config'
-@import 'foundation/components/global'
diff --git a/app/assets/stylesheets/reimagine2/_foundation.sass b/app/assets/stylesheets/reimagine2/_foundation.sass
index 35a829ad..8de80ca1 100644
--- a/app/assets/stylesheets/reimagine2/_foundation.sass
+++ b/app/assets/stylesheets/reimagine2/_foundation.sass
@@ -4,7 +4,6 @@
 // which defines some styles on .row
 @import 'reimagine2/reimagine1/reset_row'
 
-@import 'foundation/build'
 @import 'foundation/extensions'
 
 // override this in your own project see file for more information
diff --git a/app/assets/stylesheets/reimagine2/components/_tabs.sass b/app/assets/stylesheets/reimagine2/components/_tabs.sass
index 027da3c2..186432a4 100644
--- a/app/assets/stylesheets/reimagine2/components/_tabs.sass
+++ b/app/assets/stylesheets/reimagine2/components/_tabs.sass
@@ -1,14 +1,14 @@
 $include-html-tab-nav-classes: $include-html-classes !default
 
-$tab-nav-spacing: emCalc(4) !default
-$tab-nav-padding: emCalc(6 12) !default
+$tab-nav-spacing: rem-calc(4) !default
+$tab-nav-padding: rem-calc(6 12) !default
 $tab-nav-bg: darken(#fff, 5%) !default
 $tab-nav-border-color: darken($tab-nav-bg, 10%) !default
-$tab-nav-border-width: emCalc(1) !default
+$tab-nav-border-width: rem-calc(1) !default
 
 $tab-nav-active-bg: white !default
 $tab-nav-active-border-color: $primary-color !default
-$tab-nav-active-border-width: emCalc(3) !default
+$tab-nav-active-border-width: rem-calc(3) !default
 $tab-nav-active-color: $header-font-color !default
 
 @mixin tab-nav
@@ -20,7 +20,7 @@ $tab-nav-active-color: $header-font-color !default
 
   overflow: auto
 
-  @media #{$small}
+  @include breakpoint(small only)
     box-shadow: none
 
   li, a
diff --git a/app/assets/stylesheets/reimagine2/config/_colors.sass b/app/assets/stylesheets/reimagine2/config/_colors.sass
index ed9b47af..9f2d41a1 100644
--- a/app/assets/stylesheets/reimagine2/config/_colors.sass
+++ b/app/assets/stylesheets/reimagine2/config/_colors.sass
@@ -1,7 +1,7 @@
 // Define your colors here
 $dark: #003e54
 
-$primary-1: #2d9eb2
+$primary-1: #25cbe8
 $primary-2: #207180
 $primary-3: #268899
 $primary-4: #1a5b66
@@ -22,8 +22,10 @@ $red-2: #801c26
 $error-1: $red-1
 $error-2: $red-2
 $error-3: #ffcfd3
+$error-4: #CF8092
 $error-color: $error-1
 
+
 $gold: #ffc247
 $light-gold: #fff1d6
 $dark-gold: darken($gold, 20%)
@@ -33,6 +35,7 @@ $highlight-2: $light-gold
 $highlight-color: $highlight-1
 
 // Fifty shades of grey
+$grey-0: #f5f5f5 // for light grey backgrounds
 $grey-1: #f0f0f0 // for light grey backgrounds
 $grey-2: #e6e6e6 // for input borders, dividers
 $grey-3: #c7c6c5 // for text on dark backgrounds and icons
@@ -40,6 +43,15 @@ $grey-4: #999794 // for light body font
 $grey-5: #575553 // for body font
 $grey-6: #1a1918 // for header font and dark backgrounds
 
+// Greys with a slight blue hue
+$blue-grey-0: #F5F8FB
+$blue-grey-1: #E0E9EC
+$blue-grey-2: #DCE6E9
+$blue-grey-3: #A4B8BF
+$blue-grey-4: #748F99
+$blue-grey-5: #5A757F
+$blue-grey-6: #475D65
+
 // TODO: replace these legacy colors platform-wide with the ones above
 $light-grey-background: $grey-1
 $challengepost-grey-on-dark-background: $grey-3
diff --git a/app/assets/stylesheets/reimagine2/config/_devpost_config.sass b/app/assets/stylesheets/reimagine2/config/_devpost_config.sass
index 192619ee..9402036e 100644
--- a/app/assets/stylesheets/reimagine2/config/_devpost_config.sass
+++ b/app/assets/stylesheets/reimagine2/config/_devpost_config.sass
@@ -4,17 +4,17 @@
 
 // Inactive tabs
 
-// $tab-nav-spacing: emCalc(4)
-// $tab-nav-padding: emCalc(6 12)
+// $tab-nav-spacing: rem-calc(4)
+// $tab-nav-padding: rem-calc(6 12)
 // $tab-nav-bg: darken(#fff, 5%)
 // $tab-nav-border-color: darken($tab-nav-bg, 10%)
-// $tab-nav-border-width: emCalc(1)
+// $tab-nav-border-width: rem-calc(1)
 
 // Active tabs
 
 // $tab-nav-active-bg: white
 // $tab-nav-active-border-color: $primary-color
-// $tab-nav-active-border-width: emCalc(3)
+// $tab-nav-active-border-width: rem-calc(3)
 // $tab-nav-active-color: $header-font-color
 
 // It may make sense to need it to align with the .row when
@@ -24,11 +24,11 @@
 
 // Simple form
 
-$form-input-margin-bottom: emCalc(24)
+$form-input-margin-bottom: rem-calc(24)
 
 // These variables are extracted from foundation's top-bar.scss
 // they are not exported but we need them in platform
 
 // Change to 9999px for always mobile layout
-$topbar-breakpoint: emCalc($medium-breakpoint)
+$topbar-breakpoint: rem-calc(1024)
 $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})"
diff --git a/app/assets/stylesheets/reimagine2/devpost/_code.sass b/app/assets/stylesheets/reimagine2/devpost/_code.sass
index 8d3a3629..abc688be 100644
--- a/app/assets/stylesheets/reimagine2/devpost/_code.sass
+++ b/app/assets/stylesheets/reimagine2/devpost/_code.sass
@@ -1,8 +1,8 @@
 $code-background-color: $grey-1 !default
 $code-padding: 0.2em 0.3em !default
 $pre-background-color: $grey-1 !default
-$pre-margin-bottom: emCalc(20) !default
-$pre-padding: emCalc(20) !default
+$pre-margin-bottom: rem-calc(20) !default
+$pre-padding: rem-calc(20) !default
 
 code
   background: $code-background-color
diff --git a/app/assets/stylesheets/reimagine2/devpost/_footer.sass b/app/assets/stylesheets/reimagine2/devpost/_footer.sass
index 9567e00f..50b93c0d 100644
--- a/app/assets/stylesheets/reimagine2/devpost/_footer.sass
+++ b/app/assets/stylesheets/reimagine2/devpost/_footer.sass
@@ -7,7 +7,7 @@
     font-size: 1rem
     margin-bottom: 0.5em
 
-    @media #{$medium-up}
+    @include breakpoint(medium up)
       font-size: 1.125rem
 
   a
@@ -16,7 +16,7 @@
     transition: border-bottom-color 0.5s ease
     font-size: .8rem
 
-    @media #{$medium-up}
+    @include breakpoint(medium up)
       font-size: 1rem
 
 
@@ -52,7 +52,7 @@
         text-decoration: none
         opacity: 1
 
-    @media #{$medium-up}
+    @include breakpoint(medium up)
       li
         margin: 0 .4rem
       a
@@ -61,7 +61,7 @@
 #site-footer-legal
   margin-top: 1rem
 
-  @media #{$medium-up}
+  @include breakpoint(medium up)
     margin-top: 2rem
 
     ul
diff --git a/app/assets/stylesheets/reimagine2/devpost/_global_nav_bar.sass b/app/assets/stylesheets/reimagine2/devpost/_global_nav_bar.sass
index af6bddae..8dcffb52 100644
--- a/app/assets/stylesheets/reimagine2/devpost/_global_nav_bar.sass
+++ b/app/assets/stylesheets/reimagine2/devpost/_global_nav_bar.sass
@@ -1,259 +1,103 @@
-$topbar-height-small: 50px
-
-#global-nav
-  background: white
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px
+.top-bar
   box-shadow: 0px 1px 3px rgba(0,0,0,0.3)
   position: relative
-  padding: 1px 0
-
-  .top-bar-section
-    .has-dropdown > a:after
-      border-top-color: transparent
-      border-left-color: $grey-3
-
-    .logged-out
-      li.show-for-medium-up
-        margin-right: 1em
-
-    ul li > a
-      padding:
-        top: 0
-        bottom: 0
-      transition: background-color 0.2s ease
-
-      &.button
-        @extend .button
-
-  .name
-    float: left
 
   #logo
-    img
-      height: 36px
+    width: 35px
+    height: 50px
+
+    @include breakpoint(large up)
       width: 185px
+      height: 36px
       position: relative
-      top: -2px
-
-    a
-      display: inline
-      padding-right: $column-gutter / 3
-      max-height: $topbar-height
-
-  a
-    font-weight: normal
-    line-height: $topbar-height * 2/3
-    max-height: $topbar-height * 2/3
-
-    @media #{$small}
-      line-height: $topbar-height
-      max-height: $topbar-height
-
-    &:hover,
-    &:active,
-    &:focus
-      strong
-        color: $dark-primary
-
-      .alpha
-        background-color: $grey-2
-
-    img.user-avatar
-      max-width: 28px
-      max-height: 28px
-      border-radius: 50%
-
-    @media #{$small-only}
-      img.user-avatar
-        max-height: 25px
-        max-width: 25px
-
-    &.main-link
-      font-size: 1em
-      padding: 0 1.5em
-
-      &:hover,
-      &:active,
-      &:focus
-        color: $dark-primary
-
-      strong
-        display: inline
-
-  .alpha
-    display: none
-    letter-spacing: 1px
-    background-color: rgba(199, 198, 197, 0.5)
-    color: $topbar-link-color
-    @include single-transition(background-color, 0.2s)
-
-    @media #{$medium}
-      display: inline-block
-
-  .youtube-icon
-    color: rgba(199, 198, 197, 0.95)
-
-    @media #{$small-only}
-      display: none
-
-  // Back button on mobile
-  h5
-    font-size: 0.9em
-    color: $dark-primary
-    text-transform: uppercase
-    letter-spacing: 1px
-    margin-top: 0
 
-    &:hover,
-    &:active,
-    &:focus
-      background-color: $grey-1
+  .menu-text
+    padding: 0
 
     a
-      padding-left: 2.5em
+      padding: 0
 
-      &:before
-        content: ""
-        border: inset 5px
-        border-color: transparent $grey-3 transparent transparent
-        position: absolute
-        top: 16px
-        left: 15px
+  .dropdown.menu > li.is-dropdown-submenu-parent
+    @include breakpoint(small only)
+      position: static
 
-  .tiny
-    font-size: 0.7em
+      .is-dropdown-submenu
+        top: 50px
+        width: 100%
 
-  .logged-out,
-  .dropdown
-    a
-      font-size: 0.9em
-
-  .dropdown
-    background: white
-    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px
-
-    li a
-      line-height: $topbar-height * 2/3
-
-      padding:
-        top: 0
-        bottom: 0
-
-    .label
-      margin-left: 0.5em
+    & > a
+      &:after
+        border-top-color: $grey-3
 
-      &.profile-completion
-        color: white
-        text-shadow: 0 0 1px black
+      @include breakpoint(small only)
+        padding-right: 0.6rem
 
-  .label.mask
-    float: left
-    margin-right: 1em
+        &:after
+          right: 2px
+          border-width: 5px
+          margin-top: -1px
 
-  @media #{$medium}
-    .top-bar-section
-      & > ul > .divider
-        border-color: transparent
+  .menu:not(.submenu) > li:not(.menu-text) > a
+    color: $dark
+    line-height: rem-calc(50)
+    font-size: 0.875rem
 
-  @media #{$small}
-    .top-bar-section
-      .has-dropdown
-        &.hover .user
-          color: $dark-primary
-
-        & > a:after
-          border-top-color: $grey-3
-          border-left-color: transparent
-
-      .dropdown
-        li
-          &.has-dropdown > a:after
-            content: ""
-            border: inset 5px
-            border-color: transparent transparent transparent $grey-3
-            border-left-style: solid
-            top: 18px
-            right: 0
+    @include breakpoint(large up)
+      font-size: 1rem
+      line-height: $topbar-height
+      padding: 0 1.5rem
 
-    .tiny
-      bottom: -15px
+    &:hover
+      background: $grey-1
 
-    a
-      img.user-avatar
-        display: inline-block !important
-        position: relative
-        top: -3px
+  .submenu
+    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px
+    border: 0
 
-      strong
-        font-size: 1.25em
-        line-height: 1.2em
+    & > li > a
+      line-height: 42px
+      border-bottom: 1px solid $grey-1
+      font-size: 0.9em
 
-        &.user
-          font-size: 1.15em
+  .is-dropdown-submenu-parent.is-active > a
+    background: $grey-1
 
-    #masqueradee
-      margin: 12px 0
-      top: 0
+  .is-submenu-item
+    &:hover
+      background: $grey-1
 
-  & > .hide-for-large-up
     a
-      font-size: 0.875em
-      line-height: $topbar-height-small
-      padding: 0 0.4em
-
-    .name
-      height: $topbar-height-small
-      float: left
+      padding-left: 1.3rem
+      padding-right: 1.3rem
 
-    .top-bar
-      height: $topbar-height-small
-      line-height: $topbar-height-small
-
-      &.expanded
-        height: auto
-
-    #logo
-      line-height: $topbar-height-small
-
-      a
-        padding: 0 0.4em
-        height: $topbar-height-small
-        line-height: $topbar-height-small
-
-      img
-        height: $topbar-height-small
-        width: auto
-        position: static
-        margin-top: -5px
-        padding: 10px 0
-
-    .toggle-topbar
-      float: right !important
-      margin-right: 10px
-
-      a
-        height: 50px
-
-      > a::after
-        border-left-color: transparent
-        border-top-color: #c7c6c5
-        border-top-style: solid
-        margin: 0
-
-    .user-avatar
-      margin-right: 10px
-
-    .title-area
-      width: 100%
-
-      li, ul
-        float: left
-
-      .logged-out
-        width: auto
+  .youtube-icon
+    display: none
+    color: $grey-3
 
-        ul
-          line-height: 0
+    @include breakpoint(medium up)
+      display: inline-block
 
-.ui-autocomplete
-  max-width: 300px
+  .user-avatar
+    height: 25px
+    width: 25px
+
+    @include breakpoint(medium up)
+      height: 28px
+      width: 28px
+
+  .top-bar-left, .top-bar-right
+    @include breakpoint(small)
+      width: auto
+
+  .top-bar-wrapper
+    @include breakpoint(small only)
+      padding-left: 0.4rem
+      padding-right: 0.4rem
+
+  .inner-button
+    display: inline-block
+    line-height: 26px
+    padding: 0 6px 2px
+    border-radius: 2px
+    color: white
+    background: $primary-1
diff --git a/app/assets/stylesheets/reimagine2/devpost/_links.sass b/app/assets/stylesheets/reimagine2/devpost/_links.sass
index 6888c965..2157a27e 100644
--- a/app/assets/stylesheets/reimagine2/devpost/_links.sass
+++ b/app/assets/stylesheets/reimagine2/devpost/_links.sass
@@ -3,4 +3,4 @@ a.delete
 
 .pagination a:hover
   // There isn't a configuration variable for this.
-  color: $anchor-font-color-hover
+  color: $anchor-color-hover
diff --git a/app/assets/stylesheets/reimagine2/devpost/_select2.sass b/app/assets/stylesheets/reimagine2/devpost/_select2.sass
new file mode 100644
index 00000000..71a0ac20
--- /dev/null
+++ b/app/assets/stylesheets/reimagine2/devpost/_select2.sass
@@ -0,0 +1,36 @@
+// gives the same spacing as any input to the select2 container
+.select2-container
+  margin-bottom: $form-spacing
+
+  .select2-search--inline
+    // transparent input located inside the select2 container,
+    // doesn't need the regular input margin
+    .select2-search__field
+      margin-bottom: 0
+      height: 1.6rem
+
+.select2-container--default
+
+  // gives the select2 container the same borders as regular inputs
+  .select2-selection, .select2-selection--multiple
+    border: $input-border
+    padding: 6px
+
+    .select2-selection__choice
+      border: 0
+      color: #555
+
+  &.select2-container--focus
+    .select2-selection, .select2-selection--multiple
+      border: $input-border-focus
+
+  .select2-selection
+    &:hover
+      border: $input-border-focus
+
+  // changes the color of the selected/hovered choices in a select2 dropdown
+  .select2-results__option--highlighted[aria-selected]
+    background-color: $primary-1
+
+.select2-dropdown
+  border: $input-border-focus
diff --git a/app/assets/stylesheets/reimagine2/devpost/_simple_form.sass b/app/assets/stylesheets/reimagine2/devpost/_simple_form.sass
index ad7ddbfb..1335fc09 100644
--- a/app/assets/stylesheets/reimagine2/devpost/_simple_form.sass
+++ b/app/assets/stylesheets/reimagine2/devpost/_simple_form.sass
@@ -2,24 +2,22 @@ input[type="checkbox"], input[type="radio"]
   margin-right: 0.5em
 
 label
-  color: $header-font-color
-
   &.checkbox, &.radio
     color: $body-font-color
     font-weight: normal
 
   abbr[title]
-    color: $error-color
+    color: $error-4
     border-bottom: 0
     text-decoration: none
 
 form .input
-  margin-bottom: $form-input-margin-bottom
+  // margin-bottom: $form-input-margin-bottom
 
 .check_boxes, .radio_buttons
   input[type="checkbox"],
   input[type="radio"]
-    margin-bottom: emCalc(10)
+    margin-bottom: rem-calc(10)
 
 .fieldWithErrors
   input, textarea, select
diff --git a/app/assets/stylesheets/reimagine2/devpost/_styles.sass b/app/assets/stylesheets/reimagine2/devpost/_styles.sass
new file mode 100644
index 00000000..01cfd3ee
--- /dev/null
+++ b/app/assets/stylesheets/reimagine2/devpost/_styles.sass
@@ -0,0 +1,21 @@
+// Generic styles applying to all apps
+
+.user-avatar
+  border-radius: 50%
+
+.page-header
+  padding: 3rem 0
+
+  &.large-header
+    @include breakpoint(medium up)
+      padding: 5rem 0
+
+  &.primary
+    background-color: $dark
+
+  &.secondary
+    background-color: $secondary-1
+
+  &.primary, &.secondary
+    h1, h2, h3, h4, p
+      color: white
diff --git a/app/assets/stylesheets/reimagine2/fonts/clearsans/clearsans.scss b/app/assets/stylesheets/reimagine2/fonts/clearsans/clearsans.scss
index 25fede54..320d89ec 100644
--- a/app/assets/stylesheets/reimagine2/fonts/clearsans/clearsans.scss
+++ b/app/assets/stylesheets/reimagine2/fonts/clearsans/clearsans.scss
@@ -23,3 +23,9 @@
     src: font-url('reimagine2/clearsans/ClearSans-Thin.woff') format('woff'),
          font-url('reimagine2/clearsans/ClearSans-Thin.ttf') format('truetype');
 }
+
+@font-face {
+  font-family: 'ClearSans-Regular';
+  src: font-url('reimagine2/clearsans/ClearSans-Regular.woff') format('woff'),
+  font-url('reimagine2/clearsans/ClearSans-Regular.ttf') format('truetype');
+}
diff --git a/app/assets/stylesheets/reimagine2/foundation/_build.scss b/app/assets/stylesheets/reimagine2/foundation/_build.scss
deleted file mode 100644
index f338d150..00000000
--- a/app/assets/stylesheets/reimagine2/foundation/_build.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// Comment out this import if you don't want to use normalize
-@import "normalize";
-
-// Comment out this import if you are customizing you imports below
-// @import "foundation";
-
-// Import specific parts of Foundation by commenting the import "foundation"
-// and uncommenting what you want below. You must uncomment the following if customizing
-
-@import "foundation/components/global"; // *always required
-
-.foundation-grid {
-  @import "foundation/components/grid";
-}
-
-//
-// Use this grid if you want to start using the new Foundation 5 grid early.
-// It will change breakpoints to min-width: 640px and 1024px.
-//
-// @import "foundation/components/grid-5";
-//
-
-@import "foundation/components/visibility";
-@import "foundation/components/block-grid";
-@import "foundation/components/type";
-@import "foundation/components/buttons";
-@import "foundation/components/forms"; // *requires components/buttons
-@import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
-// @import "foundation/components/button-groups"; // *requires components/buttons
-// @import "foundation/components/dropdown-buttons"; // *requires components/buttons
-// @import "foundation/components/split-buttons"; // *requires components/buttons
-@import "foundation/components/flex-video";
-@import "foundation/components/section";
-@import "foundation/components/top-bar";  // *requires components/grid
-@import "foundation/components/orbit";
-@import "foundation/components/reveal";
-@import "foundation/components/joyride";
-@import "foundation/components/clearing";
-@import "foundation/components/alert-boxes";
-// @import "foundation/components/breadcrumbs";
-// @import "foundation/components/keystrokes";
-@import "foundation/components/labels";
-@import "foundation/components/inline-lists";
-@import "foundation/components/pagination";
-@import "foundation/components/panels";
-@import "foundation/components/pricing-tables";
-@import "foundation/components/progress-bars";
-@import "foundation/components/side-nav";
-@import "foundation/components/sub-nav";
-// @import "foundation/components/switch";
-// @import "foundation/components/magellan";
-@import "foundation/components/tables";
-// @import "foundation/components/thumbs";
-@import "foundation/components/tooltips";
-@import "foundation/components/dropdown";
diff --git a/app/assets/stylesheets/reimagine2/foundation/_settings.scss b/app/assets/stylesheets/reimagine2/foundation/_settings.scss
new file mode 100644
index 00000000..98e1d2e0
--- /dev/null
+++ b/app/assets/stylesheets/reimagine2/foundation/_settings.scss
@@ -0,0 +1,636 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Card
+//  15. Close Button
+//  16. Drilldown
+//  17. Dropdown
+//  18. Dropdown Menu
+//  19. Forms
+//  20. Label
+//  21. Media Object
+//  22. Menu
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Responsive Embed
+//  29. Reveal
+//  30. Slider
+//  31. Switch
+//  32. Table
+//  33. Tabs
+//  34. Thumbnail
+//  35. Title Bar
+//  36. Tooltip
+//  37. Top Bar
+
+@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+  primary: $primary-1,
+  secondary: $secondary-1,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37,
+);
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: #48575f;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: false;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 3px;
+$global-text-direction: ltr;
+$global-flexbox: false;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+$print-breakpoint: large;
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (
+  small: rem-calc(20),
+  medium: rem-calc(30),
+);
+$grid-column-align-edge: true;
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: "ClearSans-Regular", "HelveticaNeue-Bold", "Helvetica Neue Bold", sans-serif;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-color: $blue-grey-6;
+$header-lineheight: 1.4;
+$header-margin-bottom: 1.5rem;
+$header-styles: (
+  small: (
+    'h1': ('font-size': 27px),
+    'h2': ('font-size': 24px),
+    'h3': ('font-size': 21px),
+    'h4': ('font-size': 18px),
+    'h5': ('font-size': 17px),
+    'h6': ('font-size': 16px),
+  ),
+  medium: (
+    'h1': ('font-size': 38px),
+    'h2': ('font-size': 32px),
+    'h3': ('font-size': 27px),
+    'h4': ('font-size': 20px),
+    'h5': ('font-size': 20px),
+    'h6': ('font-size': 16px),
+  ),
+);
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1.5rem;
+$paragraph-text-rendering: optimizeLegibility;
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$anchor-color: darken($primary-color, 8%);
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$cite-pseudo-content: '\2014 \0020';
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: $body-font-color;
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+$accordionmenu-arrow-size: 6px;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-slash: true;
+
+// 11. Button
+// ----------
+
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 0 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius;
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.24rem,
+);
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 0;
+$buttongroup-spacing: 0px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: false;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: none;
+$callout-margin: 0 0 2rem 0;
+$callout-padding: 1rem;
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid $light-gray;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding;
+$card-margin: $global-margin;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem,
+);
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem,
+);
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+);
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-arrow-color: $white;
+$drilldown-arrow-size: 6px;
+$drilldown-background: $primary-color;
+
+// 17. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-background: $body-background;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+);
+
+// 18. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: $white;
+$dropdownmenu-border: 1px solid $medium-gray;
+
+// 19. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(24);
+$helptext-color: $black;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $blue-grey-4;
+$input-prefix-background: $blue-grey-0;
+$input-prefix-border: 1px solid $blue-grey-1;
+$input-prefix-padding: 0.8rem;
+$form-label-color: $blue-grey-6;
+$form-label-font-size: rem-calc(16px);
+$form-label-font-weight: $global-weight-bold;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $blue-grey-6;
+$input-placeholder-color: $medium-gray;
+$input-font-family: $header-font-family;
+$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $blue-grey-2;
+$input-border-focus: 1px solid $primary-1;
+$input-shadow: none;
+$input-shadow-focus: none;
+$input-cursor-disabled: not-allowed;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
+
+// 20. Label
+// ---------
+
+$label-background: #ebf5f7;
+$label-color: $body-font-color;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
+$label-font-size: 1rem;
+$label-padding: 0.33333rem 0.7rem;
+$label-radius: $global-radius;
+
+// 21. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+$menu-margin: 0;
+$menu-margin-nested: 0;
+$menu-item-padding: 0rem 0.3rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: $grey-1;
+$menu-icon-spacing: 0.25rem;
+$menu-item-background-hover: $light-gray;
+$menu-border: $light-gray;
+
+// 23. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
+// --------------
+
+$offcanvas-size: 250px;
+$offcanvas-vertical-size: 250px;
+$offcanvas-background: $light-gray;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-push-zindex: 1;
+$offcanvas-overlap-zindex: 10;
+$offcanvas-reveal-zindex: 1;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+
+// 25. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 26. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+
+// 27. Progress Bar
+// ----------------
+
+$progress-height: rem-calc(25);
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 28. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9,
+);
+
+// 29. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width * 2/3;
+$reveal-padding: 0;
+$reveal-border: none;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 30. Slider
+// ----------
+
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.5rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 31. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+
+// 32. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
+$show-header-for-stacked: false;
+
+// 33. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: transparent;
+$tab-color: $blue-grey-3;
+$tab-background-active: transparent;
+$tab-active-color: $blue-grey-5;
+$tab-item-font-size: rem-calc(16);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-expand-max: 6;
+$tab-content-background: $white;
+$tab-content-border: transparent;
+$tab-content-color: $blue-grey-4;
+$tab-content-padding: 0rem;
+
+// 34. Thumbnail
+// -------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 35. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 36. Tooltip
+// -----------
+
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: 0;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 37. Top Bar
+// -----------
+
+$topbar-padding: 0;
+$topbar-background: white;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 38. Devpost
+// -----------
+
+$inline-list-default-float-margin: rem-calc(-16);
+$header-font-color: $dark;
+$header-line-height: 1.4;
+$input-focus-border-color: $primary-color;
+$column-gutter: map-get($grid-column-gutter, medium);
+$info-color: $primary-5;
+$topbar-height: rem-calc(64);
+$topbar-link-color: $dark;
+$topbar-link-color-hover: $dark-primary;
+$page-bg-color: rgb(244, 248, 251);
+
+@import "settings_additions"
diff --git a/app/assets/stylesheets/reimagine2/foundation/_settings_additions.sass b/app/assets/stylesheets/reimagine2/foundation/_settings_additions.sass
new file mode 100644
index 00000000..1b758377
--- /dev/null
+++ b/app/assets/stylesheets/reimagine2/foundation/_settings_additions.sass
@@ -0,0 +1,7 @@
+// 19. Forms
+// ---------
+$input-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
+
+// 33. Tabs
+// --------
+$tab-item-padding-small: 1.25rem 1rem
diff --git a/app/assets/stylesheets/reimagine2/foundation/extensions/_alert_boxes.sass b/app/assets/stylesheets/reimagine2/foundation/extensions/_alert_boxes.sass
index 22f56611..b7bdb804 100644
--- a/app/assets/stylesheets/reimagine2/foundation/extensions/_alert_boxes.sass
+++ b/app/assets/stylesheets/reimagine2/foundation/extensions/_alert_boxes.sass
@@ -5,6 +5,7 @@
     color: $primary-2
     text-decoration: underline
     &.close
+      padding-right: 1em
       margin-top: 0
       color: white
       text-decoration: none
diff --git a/app/assets/stylesheets/reimagine2/foundation/extensions/_buttons.sass b/app/assets/stylesheets/reimagine2/foundation/extensions/_buttons.sass
index ae6f4765..802e0b95 100644
--- a/app/assets/stylesheets/reimagine2/foundation/extensions/_buttons.sass
+++ b/app/assets/stylesheets/reimagine2/foundation/extensions/_buttons.sass
@@ -5,21 +5,10 @@
 
 @import 'reimagine2/mixins/flex'
 
-@media only screen
-  button, .button
-    @include single-transition(all, 200ms)
-
 button, .button
-  background: $primary-color
+  // background: $primary-color
   box-shadow: none
 
-  &:active, &:focus, &:hover
-    background: $primary-3
-    border-color: $primary-4
-
-  &:active
-    border-width: 3px 0 0
-
   &.secondary
     background: $secondary-color
     color: white
@@ -30,12 +19,10 @@ button, .button
     &:active, &:focus, &:hover
       color: white
       background: $secondary-3
-      border-color: $secondary-4
 
   &.yellow
     background: $highlight-1
     color: $grey-6
-    border-color: #cc9b39
 
     &.disabled
       color: $grey-6
@@ -43,55 +30,27 @@ button, .button
     &:active, &:focus, &:hover
       color: $grey-6
       background: #e5ae40
-      border-color: #b28832
-
-  &.small
-    border-bottom-width: 2px
-
-    &:active
-      border-width: 2px 0 0
-
-  &.tiny, &.tiny &:active
-    border: 0
 
   &.grey
-    $lighter-grey-5: scale-color($grey-5, $lightness: $button-function-factor)
-    $lighter-grey-6: scale-color($grey-6, $lightness: $button-function-factor)
+    $lighter-grey-5: scale-color($grey-5, $lightness: $button-background-hover-lightness)
+    $lighter-grey-6: scale-color($grey-6, $lightness: $button-background-hover-lightness)
 
     background-color: $lighter-grey-5
-    border-color: $lighter-grey-6
 
     &:active, &:focus, &:hover
       background-color: $grey-5
-      border-color: $grey-6
-
-  // custom mix of inline and pre/post fix classes so the button
-  // does not take full width but still has the same height as form elements
-  &.inline-prefix,
-  &.inline-postfix
-    @include button-size
-    @include prefix-postfix-base
-    width: auto
 
   &:disabled,
   &.disabled,
   &[disabled=disabled]
     background-image: none
-    @include button-style(#bfbfbf, $disabled:true)
 
   &.link
-    @include link-colors($anchor-font-color, $hover: $anchor-font-color-hover, $active: $anchor-font-color-hover, $focus: $anchor-font-color-hover)
+    @include link-colors($anchor-color, $hover: $anchor-color-hover, $active: $anchor-color-hover, $focus: $anchor-color-hover)
     @include background(transparent)
     font-weight: inherit
     padding: 0
     text-decoration: $anchor-text-decoration
-    border: 0
-
-  &.flat
-    border-bottom: 0
-
-    &:active
-      border-top: 0
 
 .attachable
   width: 100%
@@ -112,6 +71,3 @@ button, .button
     margin-bottom: 0
     padding-top: 0.5em
     padding-bottom: 0.5em
-
-.button-size
-  @include button-size
diff --git a/app/assets/stylesheets/reimagine2/foundation/extensions/_flex.sass b/app/assets/stylesheets/reimagine2/foundation/extensions/_flex.sass
index f6672c3e..04767bca 100644
--- a/app/assets/stylesheets/reimagine2/foundation/extensions/_flex.sass
+++ b/app/assets/stylesheets/reimagine2/foundation/extensions/_flex.sass
@@ -13,19 +13,19 @@
   +align-stretch
 
 .align-bottom-small
-  @media #{$medium-up}
+  @include breakpoint(medium up)
     +align-bottom
 
 .align-center-small
-  @media #{$medium-up}
+  @include breakpoint(medium up)
     +align-center
 
 .align-baseline-small
-  @media #{$medium-up}
+  @include breakpoint(medium up)
     +align-baseline
 
 .align-stretch-small
-  @media #{$medium-up}
+  @include breakpoint(medium up)
     +align-stretch
 
 .flex-column
@@ -39,7 +39,7 @@
   justify-content: center
 
 .stretch-input
-  @media #{$medium-up}
+  @include breakpoint(medium up)
     +display-flex
 
     label
@@ -63,7 +63,7 @@
   .inline-input
     margin: 0
 
-    @media #{$medium-up}
+    @include breakpoint(medium up)
       -ms-flex: 1
       -webkit-flex: 1
       flex: 1
@@ -71,7 +71,7 @@
       margin: 0 0 0 1em
 
 .right-small
-  @media #{$medium-up}
+  @include breakpoint(medium up)
     float: right
 
 .flex-row
diff --git a/app/assets/stylesheets/reimagine2/foundation/extensions/_forms.sass b/app/assets/stylesheets/reimagine2/foundation/extensions/_forms.sass
index dc16aae5..e8e18e5f 100644
--- a/app/assets/stylesheets/reimagine2/foundation/extensions/_forms.sass
+++ b/app/assets/stylesheets/reimagine2/foundation/extensions/_forms.sass
@@ -8,7 +8,7 @@
   +form-label()
 
   &.inline
-    +form-label(inline, false)
+    display: inline
     line-height: 1em
 
 input[type="text"],
@@ -40,7 +40,9 @@ textarea
 form
   p
     &.hint
-      font-size: 0.85em
+      font-size: 0.875em
+      color: $blue-grey-4
+      margin-bottom: 0.5rem
 
 // fixes Firefox default opacity set to 0.54 for placeholder
 ::-moz-placeholder, :-moz-placeholder
diff --git a/app/assets/stylesheets/reimagine2/foundation/extensions/_progress_bars.sass b/app/assets/stylesheets/reimagine2/foundation/extensions/_progress_bars.sass
index 3fb4d495..e4a66473 100644
--- a/app/assets/stylesheets/reimagine2/foundation/extensions/_progress_bars.sass
+++ b/app/assets/stylesheets/reimagine2/foundation/extensions/_progress_bars.sass
@@ -3,10 +3,10 @@
 
   &.radius
     // foundation bug, they use $global-radius
-    border-radius: $progress-bar-border-radius
+    border-radius: $progress-radius
 
     .meter
-      border-radius: $progress-bar-border-radius - 1
+      border-radius: $progress-radius - 1
 
   .percentage
     position: absolute
@@ -14,6 +14,6 @@
     text-align: center
     top: 0
     left: 0
-    line-height: $progress-bar-height
+    line-height: $progress-height
     color: white
     text-shadow: 0 0 2px #000
diff --git a/app/assets/stylesheets/reimagine2/foundation/extensions/_type.sass b/app/assets/stylesheets/reimagine2/foundation/extensions/_type.sass
index 769f0e7d..089b2707 100644
--- a/app/assets/stylesheets/reimagine2/foundation/extensions/_type.sass
+++ b/app/assets/stylesheets/reimagine2/foundation/extensions/_type.sass
@@ -1,5 +1,6 @@
 @import 'reimagine2/mixins/all_caps'
 @import 'reimagine2/mixins/bold'
+@import 'reimagine2/mixins/typo'
 
 // in our foundation build we set margin-left on lists
 // (see $list-side-margin)
@@ -9,46 +10,21 @@ ul.no-bullet
   margin-left: 0
 
   &.inline-list
-    margin-#{$default-float}: $inline-list-default-float-margin
+    margin-left: $inline-list-default-float-margin
 
 // do not change font-size line-height etc.
 strong, b, .bold
   +bold
 
-h1
-  font-size: $h2-font-size
-h2
-  font-size: $h3-font-size
-h3
-  font-size: $h4-font-size
-h4
-  font-size: $h4-font-size
-h5
-  font-size: $h4-font-size
-h6
-  font-size: $h6-font-size
-
-@media #{$small}
-  h1
-    font-size: $h1-font-size
-  h2
-    font-size: $h2-font-size
-  h3
-    font-size: $h3-font-size
-  h4
-    font-size: $h4-font-size
-  h5
-    font-size: $h5-font-size
-  h6
-    font-size: $h6-font-size
-
 h1, h2, h3, h4, h5, h6
-  line-height: $header-line-height
   margin-top: 0
 
-h4
+h4, h6
   letter-spacing: 1px
   text-transform: uppercase
 
+h6
+  margin-bottom: $header-margin-bottom / 2
+
 textarea
-  line-height: $paragraph-line-height
+  line-height: $paragraph-lineheight
diff --git a/app/assets/stylesheets/reimagine2/foundation/foundation_and_overrides.scss b/app/assets/stylesheets/reimagine2/foundation/foundation_and_overrides.scss
index a471315e..c8b27baf 100644
--- a/app/assets/stylesheets/reimagine2/foundation/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/reimagine2/foundation/foundation_and_overrides.scss
@@ -1,1493 +1,57 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-//
-
-// Table of Contents
-// Foundation Settings
-
-// a. Base
-// b. Grid
-// c. Global
-// d. Media Query Ranges
-// e. Typography
-// 01. Accordion
-// 02. Alert Boxes
-// 03. Block Grid
-// 04. Breadcrumbs
-// 05. Buttons
-// 06. Button Groups
-// 07. Clearing
-// 08. Dropdown
-// 09. Dropdown Buttons
-// 10. Flex Video
-// 11. Forms
-// 12. Icon Bar
-// 13. Inline Lists
-// 14. Joyride
-// 15. Keystrokes
-// 16. Labels
-// 17. Magellan
-// 18. Off-canvas
-// 19. Orbit
-// 20. Pagination
-// 21. Panels
-// 22. Pricing Tables
-// 23. Progress Bar
-// 24. Range Slider
-// 25. Reveal
-// 26. Side Nav
-// 27. Split Buttons
-// 28. Sub Nav
-// 29. Switch
-// 30. Tables
-// 31. Tabs
-// 32. Thumbnails
-// 33. Tooltips
-// 34. Top Bar
-// 36. Visibility Classes
-
-// a. Base
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// This is the default html and body font-size for the base rem value.
-// $rem-base: 16px;
-
-// Allows the use of rem-calc() or lower-bound() in your settings
-@import 'foundation/functions';
-
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with browser-based text zoom or user-set defaults.
-
-// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
-// If you want your base font-size to be different and not have it affect the grid breakpoints,
-// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
-// $base-font-size: 100%;
-
-// The $base-font-size is 100% while $base-line-height is 150%
-// $base-line-height: 150%;
-
-// We use this to control whether or not CSS classes come through in the gem files.
-$include-html-classes: true;
-// $include-print-styles: true;
-$include-html-global-classes: $include-html-classes;
-
-// b. Grid
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-grid-classes: $include-html-classes;
-// $include-xl-html-grid-classes: false;
-
-$row-width: rem-calc(1200);
-// $total-columns: 12;
-$column-gutter: rem-calc(30);
-
-// c. Global
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// We use these to define default font stacks
-$font-family-sans-serif: "Helvetica Neue", sans-serif;
-$custom-font-family-sans-serif: "ClearSans", "HelveticaNeue-Bold", "Helvetica Neue Bold", sans-serif;
-// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
-
-// We use these to define default font weights
-$font-weight-normal: normal;
-$font-weight-bold: bold;
-
-// $white       : #FFFFFF;
-// $ghost       : #FAFAFA;
-// $snow        : #F9F9F9;
-// $vapor       : #F6F6F6;
-// $white-smoke : #F5F5F5;
-// $silver      : #EFEFEF;
-// $smoke       : #EEEEEE;
-// $gainsboro   : #DDDDDD;
-// $iron        : #CCCCCC;
-// $base        : #AAAAAA;
-// $aluminum    : #999999;
-// $jumbo       : #888888;
-// $monsoon     : #777777;
-// $steel       : #666666;
-// $charcoal    : #555555;
-// $tuatara     : #444444;
-// $oil         : #333333;
-// $jet         : #222222;
-// $black       : #000000;
-
-// We use these as default colors throughout
-$primary-color: $primary-1;
-$secondary-color: $secondary-1;
-$alert-color: #f04124;
-$success-color: $secondary-5;
-$warning-color: $error-3;
-$info-color: $primary-5;
-
-// We use these to control various global styles
-// $body-bg: $white;
-$body-font-color: $grey-5;
-$body-font-family: $font-family-sans-serif;
-// $body-font-weight: $font-weight-normal;
-// $body-font-style: normal;
-
-// We use this to control font-smoothing
-// $font-smoothing: antialiased;
-
-// We use these to control text direction settings
-// $text-direction: ltr;
-// $opposite-direction: right;
-// $default-float: left;
-// $last-child-float: $opposite-direction;
-
-// We use these to make sure border radius matches unless we want it different.
-// $global-radius: 3px;
-// $global-rounded: 1000px;
-
-// We use these to control inset shadow shiny edges and depressions.
-// $shiny-edge-size: 0 1px 0;
-// $shiny-edge-color: rgba($white, .5);
-// $shiny-edge-active-color: rgba($black, .2);
-
-// d. Media Query Ranges
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $small-breakpoint:  em-calc(640);
-$medium-breakpoint: em-calc(1024);
-$large-breakpoint:  em-calc(1440);
-// $xlarge-breakpoint: em-calc(1920);
-
-// $small-range:   (0, $small-breakpoint);
-// $medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);
-$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint);
-// $xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint);
-// $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
-
-// $screen: "only screen";
-
-// $landscape: "#{$screen} and (orientation: landscape)";
-// $portrait: "#{$screen} and (orientation: portrait)";
-
-// $small-up: $screen;
-// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
-
-// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
-// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
-
-// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
-// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
-
-// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
-// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
-
-// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
-// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
-
-// $retina: (
-//  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
-//  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
-//  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
-//  "#{$screen} and (min-device-pixel-ratio: 2)",
-//  "#{$screen} and (min-resolution: 192dpi)",
-//  "#{$screen} and (min-resolution: 2dppx)"
-// );
-
-// Legacy
-// $small: $medium-up;
-// $medium: $medium-up;
-// $large: $large-up;
-
-// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
-// $cursor-crosshair-value: crosshair;
-// $cursor-default-value: default;
-// $cursor-disabled-value: not-allowed;
-// $cursor-pointer-value: pointer;
-// $cursor-help-value: help;
-// $cursor-text-value: text;
-
-// e. Typography
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-type-classes: $include-html-classes;
-
-// We use these to control header font styles
-$header-font-family: $custom-font-family-sans-serif;
-$header-font-weight: $font-weight-bold;
-// $header-font-style: normal;
-$header-font-color: $dark;
-// $header-line-height: 1.4;
-// $header-top-margin: .2rem;
-$header-bottom-margin: .5em;
-// $header-text-rendering: optimizeLegibility;
-
-// We use these to control header font sizes
-$h1-font-size: rem-calc(38);
-// $h2-font-size: rem-calc(37);
-// $h3-font-size: rem-calc(27);
-// $h4-font-size: rem-calc(23);
-// $h5-font-size: rem-calc(18);
-// $h6-font-size: 1rem;
-
-// We use these to control header size reduction on small screens
-// $h1-font-reduction: rem-calc(10);
-// $h2-font-reduction: rem-calc(10);
-// $h3-font-reduction: rem-calc(5);
-// $h4-font-reduction: rem-calc(5);
-// $h5-font-reduction: 0;
-// $h6-font-reduction: 0;
-
-// These control how subheaders are styled.
-// $subheader-line-height: 1.4;
-// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
-// $subheader-font-weight: $font-weight-normal;
-// $subheader-top-margin: .2rem;
-// $subheader-bottom-margin: .5rem;
-
-// A general <small> styling
-$small-font-size: 87.5%;
-// $small-font-color: scale-color($header-font-color, $lightness: 35%);
-
-// We use these to style paragraphs
-// $paragraph-font-family: inherit;
-// $paragraph-font-weight: $font-weight-normal;
-$paragraph-font-size: 1rem;
-// $paragraph-line-height: 1.6;
-$paragraph-margin-bottom: rem-calc(20);
-// $paragraph-aside-font-size: rem-calc(14);
-// $paragraph-aside-line-height: 1.35;
-// $paragraph-aside-font-style: italic;
-// $paragraph-text-rendering: optimizeLegibility;
-
-// We use these to style <code> tags
-// $code-color: $oil;
-// $code-font-family: $font-family-monospace;
-// $code-font-weight: $font-weight-normal;
-// $code-background-color: scale-color($secondary-color, $lightness: 70%);
-// $code-border-size: 1px;
-// $code-border-style: solid;
-// $code-border-color: scale-color($code-background-color, $lightness: -10%);
-// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
-
-// We use these to style anchors
-// $anchor-text-decoration: none;
-// $anchor-text-decoration-hover: none;
-$anchor-font-color: $primary-color;
-// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
-
-// We use these to style the <hr> element
-// $hr-border-width: 1px;
-// $hr-border-style: solid;
-// $hr-border-color: $gainsboro;
-// $hr-margin: rem-calc(20);
-
-// We use these to style lists
-// $list-font-family: $paragraph-font-family;
-// $list-font-size: $paragraph-font-size;
-// $list-line-height: $paragraph-line-height;
-// $list-margin-bottom: $paragraph-margin-bottom;
-// $list-style-position: outside;
-// $list-side-margin: 1.1rem;
-// $list-ordered-side-margin: 1.4rem;
-// $list-side-margin-no-bullet: 0;
-// $list-nested-margin: rem-calc(20);
-// $definition-list-header-weight: $font-weight-bold;
-// $definition-list-header-margin-bottom: .3rem;
-// $definition-list-margin-bottom: rem-calc(12);
-
-// We use these to style blockquotes
-// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
-// $blockquote-padding: rem-calc(9 20 0 19);
-// $blockquote-border: 1px solid $gainsboro;
-// $blockquote-cite-font-size: rem-calc(13);
-// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
-// $blockquote-cite-link-color: $blockquote-cite-font-color;
-
-// Acronym styles
-// $acronym-underline: 1px dotted $gainsboro;
-
-// We use these to control padding and margin
-// $microformat-padding: rem-calc(10 12);
-// $microformat-margin: rem-calc(0 0 20 0);
-
-// We use these to control the border styles
-// $microformat-border-width: 1px;
-// $microformat-border-style: solid;
-// $microformat-border-color: $gainsboro;
-
-// We use these to control full name font styles
-// $microformat-fullname-font-weight: $font-weight-bold;
-// $microformat-fullname-font-size: rem-calc(15);
-
-// We use this to control the summary font styles
-// $microformat-summary-font-weight: $font-weight-bold;
-
-// We use this to control abbr padding
-// $microformat-abbr-padding: rem-calc(0 1);
-
-// We use this to control abbr font styles
-// $microformat-abbr-font-weight: $font-weight-bold;
-// $microformat-abbr-font-decoration: none;
-
-// 01. Accordion
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-accordion-classes: $include-html-classes;
-
-// $accordion-navigation-padding: rem-calc(16);
-// $accordion-navigation-bg-color: $silver;
-// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
-// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
-// $accordion-navigation-active-font-color: $jet;
-// $accordion-navigation-font-color: $jet;
-// $accordion-navigation-font-size: rem-calc(16);
-// $accordion-navigation-font-family: $body-font-family;
-
-// $accordion-content-padding: ($column-gutter/2);
-// $accordion-content-active-bg-color: $white;
-
-// 02. Alert Boxes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-alert-classes: $include-html-classes;
-
-// We use this to control alert padding.
-// $alert-padding-top: rem-calc(14);
-// $alert-padding-default-float: $alert-padding-top;
-// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
-// $alert-padding-bottom: $alert-padding-top;
-
-// We use these to control text style.
-// $alert-font-weight: $font-weight-normal;
-// $alert-font-size: rem-calc(13);
-// $alert-font-color: $white;
-// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
-
-// We use this for close hover effect.
-// $alert-function-factor: -14%;
-
-// We use these to control border styles.
-// $alert-border-style: solid;
-// $alert-border-width: 1px;
-// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
-$alert-bottom-margin: 0;
-
-// We use these to style the close buttons
-// $alert-close-color: $oil;
-$alert-close-top: .25rem;
-// $alert-close-position: rem-calc(4);
-// $alert-close-font-size: rem-calc(22);
-// $alert-close-opacity: .3;
-// $alert-close-opacity-hover: .5;
-// $alert-close-padding: 9px 6px 4px;
-// $alert-close-background: inherit;
-
-// We use this to control border radius
-// $alert-radius: $global-radius;
-
-// $alert-transition-speed: 300ms;
-// $alert-transition-ease: ease-out;
-
-// 03. Block Grid
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-block-grid-classes: $include-html-classes;
-// $include-xl-html-block-grid-classes: false;
-
-// We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 12;
-// $block-grid-default-spacing: rem-calc(20);
-
-// $align-block-grid-to-grid: false;
-// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
-
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-// $block-grid-media-queries: true;
-
-// 04. Breadcrumbs
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-nav-classes: $include-html-classes;
-
-// We use this to set the background color for the breadcrumb container.
-// $crumb-bg: scale-color($secondary-color, $lightness: 55%);
-
-// We use these to set the padding around the breadcrumbs.
-// $crumb-padding: rem-calc(9 14 9);
-// $crumb-side-padding: rem-calc(12);
-
-// We use these to control border styles.
-// $crumb-function-factor: -10%;
-// $crumb-border-size: 1px;
-// $crumb-border-style: solid;
-// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
-// $crumb-radius: $global-radius;
-
-// We use these to set various text styles for breadcrumbs.
-// $crumb-font-size: rem-calc(11);
-// $crumb-font-color: $primary-color;
-// $crumb-font-color-current: $oil;
-// $crumb-font-color-unavailable: $aluminum;
-// $crumb-font-transform: uppercase;
-// $crumb-link-decor: underline;
-
-// We use these to control the slash between breadcrumbs
-// $crumb-slash-color: $base;
-// $crumb-slash: "/";
-// $crumb-slash-position: 1px;
-
-// 05. Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to build padding for buttons.
-$button-tny: rem-calc(6);
-$button-sml: rem-calc(8);
-$button-med: rem-calc(9);
-$button-lrg: rem-calc(14);
-
-// We use this to control the display property.
-// $button-display: inline-block;
-// $button-margin-bottom: rem-calc(20);
-
-// We use these to control button text styles.
-$button-font-family: $custom-font-family-sans-serif;
-// $button-font-color: $white;
-// $button-font-color-alt: $oil;
-// $button-font-tny: rem-calc(11);
-// $button-font-sml: rem-calc(13);
-// $button-font-med: rem-calc(16);
-// $button-font-lrg: rem-calc(20);
-// $button-font-weight: $font-weight-normal;
-// $button-font-align: center;
-
-// We use these to control various hover effects.
-// $button-function-factor: -20%;
-
-// We use these to control button border styles.
-$button-border-width: 0 0 3px 0;
-$button-border-style: solid;
-// $button-bg-color: $primar  y-color;
-// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
-// $button-border-color: $button-bg-hover;
-// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor);
-// $secondary-button-border-color: $secondary-button-bg-hover;
-// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor);
-// $success-button-border-color: $success-button-bg-hover;
-// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
-// $alert-button-border-color: $alert-button-bg-hover;
-// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor);
-// $warning-button-border-color: $warning-button-bg-hover;
-// $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor);
-// $info-button-border-color: $info-button-bg-hover;
-
-// We use this to set the default radius used throughout the core.
-// $button-radius: $global-radius;
-// $button-round: $global-rounded;
-
-// We use this to set default opacity and cursor for disabled buttons.
-// $button-disabled-opacity: .7;
-// $button-disabled-cursor: $cursor-default-value;
-
-// 06. Button Groups
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
-// $button-bar-margin-opposite: rem-calc(10);
-// $button-group-border-width: 1px;
-
-// 07. Clearing
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-clearing-classes: $include-html-classes;
-
-// We use these to set the background colors for parts of Clearing.
-// $clearing-bg: $oil;
-// $clearing-caption-bg: $clearing-bg;
-// $clearing-carousel-bg: rgba(51,51,51,0.8);
-// $clearing-img-bg: $clearing-bg;
-
-// We use these to style the close button
-// $clearing-close-color: $iron;
-// $clearing-close-size: 30px;
-
-// We use these to style the arrows
-// $clearing-arrow-size: 12px;
-// $clearing-arrow-color: $clearing-close-color;
-
-// We use these to style captions
-// $clearing-caption-font-color: $iron;
-// $clearing-caption-font-size: .875em;
-// $clearing-caption-padding: 10px 30px 20px;
-
-// We use these to make the image and carousel height and style
-// $clearing-active-img-height: 85%;
-// $clearing-carousel-height: 120px;
-// $clearing-carousel-thumb-width: 120px;
-// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
-
-// 08. Dropdown
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-dropdown-classes: $include-html-classes;
-
-// We use these to controls height and width styles.
-// $f-dropdown-max-width: 200px;
-// $f-dropdown-height: auto;
-// $f-dropdown-max-height: none;
-
-// Used for bottom position
-// $f-dropdown-margin-top: 2px;
-
-// Used for right position
-// $f-dropdown-margin-left: $f-dropdown-margin-top;
-
-// Used for left position
-// $f-dropdown-margin-right: $f-dropdown-margin-top;
-
-// Used for top position
-// $f-dropdown-margin-bottom: $f-dropdown-margin-top;
-
-// We use this to control the background color
-// $f-dropdown-bg: $white;
-
-// We use this to set the border styles for dropdowns.
-// $f-dropdown-border-style: solid;
-// $f-dropdown-border-width: 1px;
-// $f-dropdown-border-color: scale-color($white, $lightness: -20%);
-
-// We use these to style the triangle pip.
-// $f-dropdown-triangle-size: 6px;
-// $f-dropdown-triangle-color: $white;
-// $f-dropdown-triangle-side-offset: 10px;
-
-// We use these to control styles for the list elements.
-// $f-dropdown-list-style: none;
-// $f-dropdown-font-color: $charcoal;
-// $f-dropdown-font-size: rem-calc(14);
-// $f-dropdown-list-padding: rem-calc(5, 10);
-// $f-dropdown-line-height: rem-calc(18);
-// $f-dropdown-list-hover-bg: $smoke;
-// $dropdown-mobile-default-float: 0;
-
-// We use this to control the styles for when the dropdown has custom content.
-// $f-dropdown-content-padding: rem-calc(20);
-
-// Default radius for dropdown.
-// $f-dropdown-radius: $global-radius;
-
-
-// 09. Dropdown Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to set the color of the pip in dropdown buttons
-// $dropdown-button-pip-color: $white;
-// $dropdown-button-pip-color-alt: $oil;
-
-// We use these to set the size of the pip in dropdown buttons
-// $button-pip-tny: rem-calc(6);
-// $button-pip-sml: rem-calc(7);
-// $button-pip-med: rem-calc(9);
-// $button-pip-lrg: rem-calc(11);
-
-// We use these to style tiny dropdown buttons
-// $dropdown-button-padding-tny: $button-pip-tny * 7;
-// $dropdown-button-pip-size-tny: $button-pip-tny;
-// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
-// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1);
-
-// We use these to style small dropdown buttons
-// $dropdown-button-padding-sml: $button-pip-sml * 7;
-// $dropdown-button-pip-size-sml: $button-pip-sml;
-// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
-// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1);
-
-// We use these to style medium dropdown buttons
-// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
-// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
-// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
-// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2);
-
-// We use these to style large dropdown buttons
-// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
-// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
-// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
-// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3);
-
-// 10. Flex Video
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use these to control video container padding and margins
-// $flex-video-padding-top: rem-calc(25);
-// $flex-video-padding-bottom: 67.5%;
-// $flex-video-margin-bottom: rem-calc(16);
-
-// We use this to control widescreen bottom padding
-// $flex-video-widescreen-padding-bottom: 56.34%;
-
-// 11. Forms
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-form-classes: $include-html-classes;
-
-// We use this to set the base for lots of form spacing and positioning styles
-// $form-spacing: rem-calc(16);
-
-// We use these to style the labels in different ways
-// $form-label-pointer: pointer;
-$form-label-font-size: rem-calc(16px);
-$form-label-font-weight: $font-weight-bold;
-// $form-label-line-height: 1.5;
-// $form-label-font-color: scale-color($black, $lightness: 30%);
-// $form-label-small-transform: capitalize;
-$form-label-bottom-margin: rem-calc(4px);
-// $input-font-family: inherit;
-// $input-font-color: rgba(0,0,0,0.75);
-$input-font-size: rem-calc(16px);
-$input-placeholder-font-color: $grey-4;
-// $input-bg-color: $white;
-$input-focus-bg-color: white;
-$input-border-color: $grey-2;
-$input-focus-border-color: $primary-color;
-// $input-border-style: solid;
-$input-border-width: 2px;
-// $input-border-radius: $global-radius;
-// $input-disabled-bg: $gainsboro;
-// $input-disabled-cursor: $cursor-default-value;
-$input-box-shadow: none;
-// $input-include-glowing-effect: false;
-
-// We use these to style the fieldset border and spacing.
-// $fieldset-border-style: solid;
-// $fieldset-border-width: 1px;
-// $fieldset-border-color: $gainsboro;
-// $fieldset-padding: rem-calc(20);
-// $fieldset-margin: rem-calc(18 0);
-
-// We use these to style the legends when you use them
-// $legend-bg: $white;
-// $legend-font-weight: $font-weight-bold;
-// $legend-padding: rem-calc(0 3);
-
-// We use these to style the prefix and postfix input elements
-// $input-prefix-bg: scale-color($white, $lightness: -5%);
-// $input-prefix-border-color: scale-color($white, $lightness: -20%);
-// $input-prefix-border-size: 1px;
-// $input-prefix-border-type: solid;
-// $input-prefix-overflow: hidden;
-// $input-prefix-font-color: $oil;
-// $input-prefix-font-color-alt: $white;
-
-// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
-// $input-number-spinners: true;
-
-// We use these to style the error states for inputs and labels
-// $input-error-message-padding: rem-calc(6 9 9);
-// $input-error-message-top: -1px;
-$input-error-message-font-size: $paragraph-font-size;
-// $input-error-message-font-weight: $font-weight-normal;
-// $input-error-message-font-style: italic;
-$input-error-message-font-color: $alert-color;
-$input-error-message-bg-color: transparent;
-// $input-error-message-font-color-alt: $oil;
-
-// We use this to style the glowing effect of inputs when focused
-// $glowing-effect-fade-time: .45s;
-// $glowing-effect-color: $input-focus-border-color;
-
-// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
-// $input-transition-fade-time: 0.15s;
-// $input-transition-fade-timing-function: linear;
-
-// Select variables
-// $select-bg-color: $ghost;
-// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
-
-
-// 12. Icon Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// We use these to style the icon-bar and items
-// $icon-bar-bg: $oil;
-// $icon-bar-font-color: $white;
-// $icon-bar-font-color-hover: $icon-bar-font-color;
-// $icon-bar-font-size: 1rem;
-// $icon-bar-hover-color: $primary-color;
-// $icon-bar-icon-color: $white;
-// $icon-bar-icon-color-hover: $icon-bar-icon-color;
-// $icon-bar-icon-size: 1.875rem;
-// $icon-bar-image-width: 1.875rem;
-// $icon-bar-image-height: 1.875rem;
-// $icon-bar-active-color: $primary-color;
-// $icon-bar-item-padding: 1.25rem;
-
-// We use this to set default opacity and cursor for disabled icons.
-// $icon-bar-disabled-opacity: .7;
-
-// 13. Inline Lists
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-inline-list-classes: $include-html-classes;
-
-// We use this to control the margins and padding of the inline list.
-// $inline-list-top-margin: 0;
-// $inline-list-opposite-margin: 0;
-// $inline-list-bottom-margin: rem-calc(17);
-$inline-list-default-float-margin: rem-calc(-16);
-$inline-list-default-float-list-margin: rem-calc(16);
-
-// $inline-list-padding: 0;
-
-// We use this to control the overflow of the inline list.
-// $inline-list-overflow: hidden;
-
-// We use this to control the list items
-// $inline-list-display: block;
-
-// We use this to control any elements within list items
-// $inline-list-children-display: block;
-
-// 14. Joyride
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-joyride-classes: $include-html-classes;
-
-// Controlling default Joyride styles
-// $joyride-tip-bg: $oil;
-// $joyride-tip-default-width: 300px;
-// $joyride-tip-padding: rem-calc(18 20 24);
-// $joyride-tip-border: solid 1px $charcoal;
-// $joyride-tip-radius: 4px;
-// $joyride-tip-position-offset: 22px;
-
-// Here, we're setting the tip font styles
-// $joyride-tip-font-color: $white;
-// $joyride-tip-font-size: rem-calc(14);
-// $joyride-tip-header-weight: $font-weight-bold;
-
-// This changes the nub size
-// $joyride-tip-nub-size: 10px;
-
-// This adjusts the styles for the timer when its enabled
-// $joyride-tip-timer-width: 50px;
-// $joyride-tip-timer-height: 3px;
-// $joyride-tip-timer-color: $steel;
-
-// This changes up the styles for the close button
-// $joyride-tip-close-color: $monsoon;
-// $joyride-tip-close-size: 24px;
-// $joyride-tip-close-weight: $font-weight-normal;
-
-// When Joyride is filling the screen, we use this style for the bg
-// $joyride-screenfill: rgba(0,0,0,0.5);
-
-// 15. Keystrokes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-keystroke-classes: $include-html-classes;
-
-// We use these to control text styles.
-// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
-// $keystroke-font-size: inherit;
-// $keystroke-font-color: $jet;
-// $keystroke-font-color-alt: $white;
-// $keystroke-function-factor: -7%;
-
-// We use this to control keystroke padding.
-// $keystroke-padding: rem-calc(2 4 0);
-
-// We use these to control background and border styles.
-// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
-// $keystroke-border-style: solid;
-// $keystroke-border-width: 1px;
-// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
-// $keystroke-radius: $global-radius;
-
-// 16. Labels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-label-classes: $include-html-classes;
-
-// We use these to style the labels
-// $label-padding: rem-calc(4 8 4);
-// $label-radius: $global-radius;
-
-// We use these to style the label text
-$label-font-sizing: $paragraph-font-size;
-// $label-font-weight: $font-weight-normal;
-// $label-font-color: $oil;
-// $label-font-color-alt: $white;
-// $label-font-family: $body-font-family;
-
-// 17. Magellan
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-magellan-classes: $include-html-classes;
-
-// $magellan-bg: $white;
-// $magellan-padding: 10px;
-
-// 18. Off-canvas
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// Off Canvas Tab Bar Variables
-// $include-html-off-canvas-classes: $include-html-classes;
-
-// $tabbar-bg: $oil;
-// $tabbar-height: rem-calc(45);
-// $tabbar-icon-width: $tabbar-height;
-// $tabbar-line-height: $tabbar-height;
-// $tabbar-color: $white;
-// $tabbar-middle-padding: 0 rem-calc(10);
-
-// Off Canvas Divider Styles
-// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
-// $tabbar-right-section-border: $tabbar-left-section-border;
-
-
-// Off Canvas Tab Bar Headers
-// $tabbar-header-color: $white;
-// $tabbar-header-weight: $font-weight-bold;
-// $tabbar-header-line-height: $tabbar-height;
-// $tabbar-header-margin: 0;
-
-// Off Canvas Menu Variables
-// $off-canvas-width: rem-calc(250);
-// $off-canvas-bg: $oil;
-// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
-// $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);
-
-// Off Canvas Menu List Variables
-// $off-canvas-label-padding: .3rem rem-calc(15);
-// $off-canvas-label-color: $aluminum;
-// $off-canvas-label-text-transform: uppercase;
-// $off-canvas-label-font-size: rem-calc(12);
-// $off-canvas-label-font-weight: $font-weight-bold;
-// $off-canvas-label-bg: $tuatara;
-// $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
-// $off-canvas-label-border-bottom: none;
-// $off-canvas-label-margin:0;
-// $off-canvas-link-padding: rem-calc(10, 15);
-// $off-canvas-link-color: rgba($white, .7);
-// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
-// $off-canvas-back-bg: #444;
-// $off-canvas-back-border-top: $off-canvas-label-border-top;
-// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
-// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
-// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
-// $off-canvas-back-hover-border-bottom: none;
-
-// Off Canvas Menu Icon Variables
-// $tabbar-menu-icon-color: $white;
-// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
-
-// $tabbar-menu-icon-text-indent: rem-calc(35);
-// $tabbar-menu-icon-width: $tabbar-icon-width;
-// $tabbar-menu-icon-height: $tabbar-height;
-// $tabbar-menu-icon-padding: 0;
-
-// $tabbar-hamburger-icon-width: rem-calc(16);
-// $tabbar-hamburger-icon-left: false;
-// $tabbar-hamburger-icon-top: false;
-// $tabbar-hamburger-icon-thickness: 1px;
-// $tabbar-hamburger-icon-gap: 6px;
-
-// Off Canvas Back-Link Overlay
-// $off-canvas-overlay-transition: background 300ms ease;
-// $off-canvas-overlay-cursor: pointer;
-// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5);
-// $off-canvas-overlay-background: rgba($white, .2);
-// $off-canvas-overlay-background-hover: rgba($white, .05);
-
-// Transition Variables
-// $menu-slide: "transform 500ms ease";
-
-// 19. Orbit
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-orbit-classes: $include-html-classes;
-
-// We use these to control the caption styles
-// $orbit-container-bg: none;
-// $orbit-caption-bg: rgba(51,51,51, .8);
-// $orbit-caption-font-color: $white;
-// $orbit-caption-font-size: rem-calc(14);
-// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
-// $orbit-caption-padding: rem-calc(10 14);
-// $orbit-caption-height: auto;
-
-// We use these to control the left/right nav styles
-// $orbit-nav-bg: transparent;
-// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
-// $orbit-nav-arrow-color: $white;
-// $orbit-nav-arrow-color-hover: $white;
-
-// We use these to control the timer styles
-// $orbit-timer-bg: rgba(255,255,255,0.3);
-// $orbit-timer-show-progress-bar: true;
-
-// We use these to control the bullet nav styles
-// $orbit-bullet-nav-color: $iron;
-// $orbit-bullet-nav-color-active: $aluminum;
-// $orbit-bullet-radius: rem-calc(9);
-
-// We use these to controls the style of slide numbers
-// $orbit-slide-number-bg: rgba(0,0,0,0);
-// $orbit-slide-number-font-color: $white;
-// $orbit-slide-number-padding: rem-calc(5);
-
-// Graceful Loading Wrapper and preloader
-// $wrapper-class: "slideshow-wrapper";
-// $preloader-class: "preloader";
-
-// Hide controls on small
-// $orbit-nav-hide-for-small: true;
-// $orbit-bullet-hide-for-small: true;
-// $orbit-timer-hide-for-small: true;
-
-// 20. Pagination
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-pagination-classes: $include-html-classes;
-
-// We use these to control the pagination container
-// $pagination-height: rem-calc(24);
-// $pagination-margin: rem-calc(-5);
-
-// We use these to set the list-item properties
-// $pagination-li-float: $default-float;
-// $pagination-li-height: rem-calc(24);
-// $pagination-li-font-color: $jet;
-// $pagination-li-font-size: rem-calc(14);
-// $pagination-li-margin: rem-calc(5);
-
-// We use these for the pagination anchor links
-// $pagination-link-pad: rem-calc(1 10 1);
-$pagination-link-font-color: $anchor-font-color;
-// $pagination-link-active-bg: scale-color($white, $lightness: -10%);
-
-// We use these for disabled anchor links
-// $pagination-link-unavailable-cursor: default;
-// $pagination-link-unavailable-font-color: $aluminum;
-// $pagination-link-unavailable-bg-active: transparent;
-
-// We use these for currently selected anchor links
-// $pagination-link-current-background: $primary-color;
-// $pagination-link-current-font-color: $white;
-// $pagination-link-current-font-weight: $font-weight-bold;
-// $pagination-link-current-cursor: default;
-// $pagination-link-current-active-bg: $primary-color;
-
-
-// 21. Panels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-panel-classes: $include-html-classes;
-
-// We use these to control the background and border styles
-// $panel-bg: scale-color($white, $lightness: -5%);
-// $panel-border-style: solid;
-// $panel-border-size: 1px;
-// $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
-
-// We use this % to control how much we darken things on hover
-// $panel-border-color: scale-color($panel-bg, $lightness: -11%);
-
-// We use these to set default inner padding and bottom margin
-// $panel-margin-bottom: rem-calc(20);
-// $panel-padding: rem-calc(20);
-
-// We use these to set default font colors
-// $panel-font-color: $oil;
-// $panel-font-color-alt: $white;
-
-// $panel-header-adjust: true;
-// $callout-panel-link-color: $primary-color;
-// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
-
-// 22. Pricing Tables
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-pricing-classes: $include-html-classes;
-
-// We use this to control the border color
-// $price-table-border: solid 1px $gainsboro;
-
-// We use this to control the bottom margin of the pricing table
-// $price-table-margin-bottom: rem-calc(20);
-
-// We use these to control the title styles
-// $price-title-bg: $oil;
-// $price-title-padding: rem-calc(15 20);
-// $price-title-align: center;
-// $price-title-color: $smoke;
-// $price-title-weight: $font-weight-normal;
-// $price-title-size: rem-calc(16);
-// $price-title-font-family: $body-font-family;
-
-// We use these to control the price styles
-// $price-money-bg: $vapor;
-// $price-money-padding: rem-calc(15 20);
-// $price-money-align: center;
-// $price-money-color: $oil;
-// $price-money-weight: $font-weight-normal;
-// $price-money-size: rem-calc(32);
-// $price-money-font-family: $body-font-family;
-
-
-// We use these to control the description styles
-// $price-bg: $white;
-// $price-desc-color: $monsoon;
-// $price-desc-padding: rem-calc(15);
-// $price-desc-align: center;
-// $price-desc-font-size: rem-calc(12);
-// $price-desc-weight: $font-weight-normal;
-// $price-desc-line-height: 1.4;
-// $price-desc-bottom-border: dotted 1px $gainsboro;
-
-// We use these to control the list item styles
-// $price-item-color: $oil;
-// $price-item-padding: rem-calc(15);
-// $price-item-align: center;
-// $price-item-font-size: rem-calc(14);
-// $price-item-weight: $font-weight-normal;
-// $price-item-bottom-border: dotted 1px $gainsboro;
-
-// We use these to control the CTA area styles
-// $price-cta-bg: $white;
-// $price-cta-align: center;
-// $price-cta-padding: rem-calc(20 20 0);
-
-// 23. Progress Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use this to set the progress bar height
-// $progress-bar-height: rem-calc(25);
-// $progress-bar-color: $vapor;
-
-// We use these to control the border styles
-// $progress-bar-border-color: scale-color($white, $lightness: 20%);
-// $progress-bar-border-size: 1px;
-// $progress-bar-border-style: solid;
-// $progress-bar-border-radius: $global-radius;
-
-// We use these to control the margin & padding
-// $progress-bar-margin-bottom: rem-calc(10);
-
-// We use these to set the meter colors
-// $progress-meter-color: $primary-color;
-// $progress-meter-secondary-color: $secondary-color;
-// $progress-meter-success-color: $success-color;
-// $progress-meter-alert-color: $alert-color;
-
-// 24. Range Slider
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-range-slider-classes: $include-html-classes;
-
-// These variables define the slider bar styles
-// $range-slider-bar-width: 100%;
-// $range-slider-bar-height: rem-calc(16);
-
-// $range-slider-bar-border-width: 1px;
-// $range-slider-bar-border-style: solid;
-// $range-slider-bar-border-color: $gainsboro;
-// $range-slider-radius: $global-radius;
-// $range-slider-round: $global-rounded;
-// $range-slider-bar-bg-color: $ghost;
-// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
-
-// Vertical bar styles
-// $range-slider-vertical-bar-width: rem-calc(16);
-// $range-slider-vertical-bar-height: rem-calc(200);
-
-// These variables define the slider handle styles
-// $range-slider-handle-width: rem-calc(32);
-// $range-slider-handle-height: rem-calc(22);
-// $range-slider-handle-position-top: rem-calc(-5);
-// $range-slider-handle-bg-color: $primary-color;
-// $range-slider-handle-border-width: 1px;
-// $range-slider-handle-border-style: solid;
-// $range-slider-handle-border-color: none;
-// $range-slider-handle-radius: $global-radius;
-// $range-slider-handle-round: $global-rounded;
-// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
-// $range-slider-handle-cursor: pointer;
-
-// $range-slider-disabled-opacity: .7;
-// $range-slider-disabled-cursor: $cursor-disabled-value;
-
-// 25. Reveal
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-reveal-classes: $include-html-classes;
-
-// We use these to control the style of the reveal overlay.
-// $reveal-overlay-bg: rgba($black, .45);
-// $reveal-overlay-bg-old: $black;
-
-// We use these to control the style of the modal itself.
-// $reveal-modal-bg: $white;
-// $reveal-position-top: rem-calc(100);
-// $reveal-default-width: 80%;
-// $reveal-max-width: $row-width;
-// $reveal-modal-padding: rem-calc(20);
-// $reveal-box-shadow: 0 0 10px rgba($black,.4);
-
-// We use these to style the reveal close button
-// $reveal-close-font-size: rem-calc(40);
-// $reveal-close-top: rem-calc(10);
-// $reveal-close-side: rem-calc(22);
-// $reveal-close-color: $base;
-// $reveal-close-weight: $font-weight-bold;
-
-// We use this to set the default radius used throughout the core.
-// $reveal-radius: $global-radius;
-// $reveal-round: $global-rounded;
-
-// We use these to control the modal border
-// $reveal-border-style: solid;
-// $reveal-border-width: 1px;
-// $reveal-border-color: $steel;
-
-// $reveal-modal-class: "reveal-modal";
-// $close-reveal-modal-class: "close-reveal-modal";
-
-// 26. Side Nav
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-nav-classes: $include-html-classes;
-
-// We use this to control padding.
-// $side-nav-padding: rem-calc(14 0);
-
-// We use these to control list styles.
-// $side-nav-list-type: none;
-// $side-nav-list-position: outside;
-// $side-nav-list-margin: rem-calc(0 0 7 0);
-
-// We use these to control link styles.
-// $side-nav-link-color: $primary-color;
-// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
-// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
-// $side-nav-link-bg-hover: hsla(0, 0, 0, .025);
-// $side-nav-link-margin: 0;
-// $side-nav-link-padding: rem-calc(7 14);
-// $side-nav-font-size: rem-calc(14);
-// $side-nav-font-weight: $font-weight-normal;
-// $side-nav-font-weight-active: $side-nav-font-weight;
-// $side-nav-font-family: $body-font-family;
-// $side-nav-font-family-active: $side-nav-font-family;
-
-// We use these to control heading styles.
-// $side-nav-heading-color: $side-nav-link-color;
-// $side-nav-heading-font-size: $side-nav-font-size;
-// $side-nav-heading-font-weight: bold;
-// $side-nav-heading-text-transform: uppercase;
-
-// We use these to control border styles
-// $side-nav-divider-size: 1px;
-// $side-nav-divider-style: solid;
-// $side-nav-divider-color: scale-color($white, $lightness: 10%);
-
-// 27. Split Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to control different shared styles for Split Buttons
-// $split-button-function-factor: 10%;
-// $split-button-pip-color: $white;
-// $split-button-span-border-color: rgba(255,255,255,0.5);
-// $split-button-pip-color-alt: $oil;
-// $split-button-active-bg-tint: rgba(0,0,0,0.1);
-
-// We use these to control tiny split buttons
-// $split-button-padding-tny: $button-pip-tny * 10;
-// $split-button-span-width-tny: $button-pip-tny * 6;
-// $split-button-pip-size-tny: $button-pip-tny;
-// $split-button-pip-top-tny: $button-pip-tny * 2;
-// $split-button-pip-default-float-tny: rem-calc(-6);
-
-// We use these to control small split buttons
-// $split-button-padding-sml: $button-pip-sml * 10;
-// $split-button-span-width-sml: $button-pip-sml * 6;
-// $split-button-pip-size-sml: $button-pip-sml;
-// $split-button-pip-top-sml: $button-pip-sml * 1.5;
-// $split-button-pip-default-float-sml: rem-calc(-6);
-
-// We use these to control medium split buttons
-// $split-button-padding-med: $button-pip-med * 9;
-// $split-button-span-width-med: $button-pip-med * 5.5;
-// $split-button-pip-size-med: $button-pip-med - rem-calc(3);
-// $split-button-pip-top-med: $button-pip-med * 1.5;
-// $split-button-pip-default-float-med: rem-calc(-6);
-
-// We use these to control large split buttons
-// $split-button-padding-lrg: $button-pip-lrg * 8;
-// $split-button-span-width-lrg: $button-pip-lrg * 5;
-// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
-// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
-// $split-button-pip-default-float-lrg: rem-calc(-6);
-
-// 28. Sub Nav
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-nav-classes: $include-html-classes;
-
-// We use these to control margin and padding
-$sub-nav-list-margin: rem-calc(0);
-// $sub-nav-list-padding-top: rem-calc(4);
-
-// We use this to control the definition
-// $sub-nav-font-family: $body-font-family;
-// $sub-nav-font-size: rem-calc(14);
-// $sub-nav-font-color: $aluminum;
-$sub-nav-font-weight: $font-weight-bold;
-// $sub-nav-text-decoration: none;
-$sub-nav-padding: rem-calc(0);
-// $sub-nav-border-radius: 3px;
-// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
-
-
-// We use these to control the active item styles
-
-// $sub-nav-active-font-weight: $font-weight-normal;
-// $sub-nav-active-bg: $primary-color;
-// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
-// $sub-nav-active-color: $white;
-// $sub-nav-active-padding: $sub-nav-padding;
-// $sub-nav-active-cursor: default;
-
-// $sub-nav-item-divider: "";
-// $sub-nav-item-divider-margin: rem-calc(12);
-
-// 29. Switch
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-form-classes: $include-html-classes;
-
-// Controlling background color for the switch container
-// $switch-bg: $gainsboro;
-
-// We use these to control the switch heights for our default classes
-// $switch-height-tny: 1.5rem;
-// $switch-height-sml: 1.75rem;
-// $switch-height-med: 2rem;
-// $switch-height-lrg: 2.5rem;
-// $switch-bottom-margin: 1.5rem;
-
-// We use these to style the switch-paddle
-// $switch-paddle-bg: $white;
-// $switch-paddle-transition-speed: .15s;
-// $switch-paddle-transition-ease: ease-out;
-// $switch-active-color: $primary-color;
-
-// 30. Tables
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-table-classes: $include-html-classes;
-
-// These control the background color for the table and even rows
-// $table-bg: $white;
-// $table-even-row-bg: $snow;
-
-// These control the table cell border style
-// $table-border-style: solid;
-// $table-border-size: 1px;
-// $table-border-color: $gainsboro;
-
-// These control the table head styles
-// $table-head-bg: $white-smoke;
-// $table-head-font-size: rem-calc(14);
-// $table-head-font-color: $jet;
-// $table-head-font-weight: $font-weight-bold;
-// $table-head-padding: rem-calc(8 10 10);
-
-// These control the table foot styles
-// $table-foot-bg: $table-head-bg;
-// $table-foot-font-size: $table-head-font-size;
-// $table-foot-font-color: $table-head-font-color;
-// $table-foot-font-weight: $table-head-font-weight;
-// $table-foot-padding: $table-head-padding;
-
-// These control the caption
-// $table-caption-bg: transparent;
-// $table-caption-font-color: $table-head-font-color;
-// $table-caption-font-size: rem-calc(16);
-// $table-caption-font-weight: bold;
-
-// These control the row padding and font styles
-// $table-row-padding: rem-calc(9 10);
-// $table-row-font-size: rem-calc(14);
-// $table-row-font-color: $jet;
-// $table-line-height: rem-calc(18);
-
-// These are for controlling the layout, display and margin of tables
-// $table-layout: auto;
-// $table-display: table-cell;
-// $table-margin-bottom: rem-calc(20);
-
-
-// 31. Tabs
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-tabs-classes: $include-html-classes;
-
-// $tabs-navigation-padding: rem-calc(16);
-// $tabs-navigation-bg-color: $silver;
-// $tabs-navigation-active-bg-color: $white;
-// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
-// $tabs-navigation-font-color: $jet;
-// $tabs-navigation-active-font-color: $tabs-navigation-font-color;
-// $tabs-navigation-font-size: rem-calc(16);
-// $tabs-navigation-font-family: $body-font-family;
-
-// $tabs-content-margin-bottom: rem-calc(24);
-// $tabs-content-padding: ($column-gutter/2);
-
-// $tabs-vertical-navigation-margin-bottom: 1.25rem;
-
-// 32. Thumbnails
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use these to control border styles
-// $thumb-border-style: solid;
-// $thumb-border-width: 4px;
-// $thumb-border-color: $white;
-// $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
-// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
-
-// Radius and transition speed for thumbs
-// $thumb-radius: $global-radius;
-// $thumb-transition-speed: 200ms;
-
-// 33. Tooltips
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-tooltip-classes: $include-html-classes;
-
-$has-tip-border-bottom: 0;
-// $has-tip-font-weight: $font-weight-bold;
-// $has-tip-font-color: $oil;
-$has-tip-border-bottom-hover: 0;
-// $has-tip-font-color-hover: $primary-color;
-// $has-tip-cursor-type: help;
-
-// $tooltip-padding: rem-calc(12);
-// $tooltip-bg: $oil;
-// $tooltip-font-size: rem-calc(14);
-// $tooltip-font-weight: $font-weight-normal;
-// $tooltip-font-color: $white;
-// $tooltip-line-height: 1.3;
-// $tooltip-close-font-size: rem-calc(10);
-// $tooltip-close-font-weight: $font-weight-normal;
-// $tooltip-close-font-color: $monsoon;
-// $tooltip-font-size-sml: rem-calc(14);
-// $tooltip-radius: $global-radius;
-// $tooltip-rounded: $global-rounded;
-// $tooltip-pip-size: 5px;
-// $tooltip-max-width: 300px;
-
-// 34. Top Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-top-bar-classes: $include-html-classes;
-
-// Background color for the top bar
-$topbar-bg-color: white;
-// $topbar-bg: $topbar-bg-color;
-
-// Height and margin
-$topbar-height: rem-calc(62);
-// $topbar-margin-bottom: 0;
-
-// Controlling the styles for the title in the top bar
-// $topbar-title-weight: $font-weight-normal;
-// $topbar-title-font-size: rem-calc(17);
-
-// Set the link colors and styles for top-level nav
-$topbar-link-color: $dark;
-$topbar-link-color-hover: $dark-primary;
-// $topbar-link-color-active: $white;
-// $topbar-link-color-active-hover: $white;
-// $topbar-link-weight: $font-weight-normal;
-$topbar-link-font-size: rem-calc(16);
-// $topbar-link-hover-lightness: -10%; // Darken by 10%
-// $topbar-link-bg: $topbar-bg;
-$topbar-link-bg-hover: $grey-1;
-$topbar-link-bg-color-hover: $grey-1;
-// $topbar-link-bg-active: $primary-color;
-// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
-// $topbar-link-font-family: $body-font-family;
-// $topbar-link-text-transform: none;
-$topbar-link-padding: rem-calc(22);
-// $topbar-back-link-size: rem-calc(18);
-// $topbar-link-dropdown-padding: rem-calc(20);
-// $topbar-button-font-size: .75rem;
-// $topbar-button-top: 7px;
-
-// Style the top bar dropdown elements
-$topbar-dropdown-bg: white;
-$topbar-dropdown-link-color: $primary-color;
-$topbar-dropdown-link-color-hover: $topbar-link-color-hover;
-$topbar-dropdown-link-bg: white;
-$topbar-dropdown-link-bg-hover: $grey-1;
-// $topbar-dropdown-link-weight: $font-weight-normal;
-$topbar-dropdown-toggle-size: 5px;
-$topbar-dropdown-toggle-color: $dark-primary;
-// $topbar-dropdown-toggle-alpha: .4;
-
-// $topbar-dropdown-label-color: $monsoon;
-// $topbar-dropdown-label-text-transform: uppercase;
-// $topbar-dropdown-label-font-weight: $font-weight-bold;
-// $topbar-dropdown-label-font-size: rem-calc(10);
-// $topbar-dropdown-label-bg: $oil;
-
-// Top menu icon styles
-// $topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: rem-calc(16);
-// $topbar-menu-link-weight: $font-weight-bold;
-// $topbar-menu-link-color: $white;
-// $topbar-menu-icon-color: $white;
-// $topbar-menu-link-color-toggled: $jumbo;
-// $topbar-menu-icon-color-toggled: $jumbo;
-// $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
-
-// Transitions and breakpoint styles
-// $topbar-transition-speed: 300ms;
-// Using rem-calc for the below breakpoint causes issues with top bar
-$topbar-breakpoint: #{lower-bound($large-range)}; // Change to 9999px for always mobile layout
-// $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
-
-// Top-bar input styles
-// $topbar-input-height: rem-calc(28);
-
-// Divider Styles
-$topbar-divider-border-bottom: solid 1px $grey-1;
-$topbar-divider-border-top: none;
-
-// Sticky Class
-// $topbar-sticky-class: ".sticky";
-// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
-// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
-
-// 36. Visibility Classes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-visibility-classes: $include-html-classes;
-// $include-accessibility-classes: true;
-// $include-table-visibility-classes: true;
-// $include-legacy-visibility-classes: true;
+@charset 'utf-8';
 
+@import 'settings';
 @import 'foundation';
+
+// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
+//
+// @import 'motion-ui/motion-ui';
+
+// We include everything by default.  To slim your CSS, remove components you don't use.
+
+@include foundation-global-styles;
+
+// @include foundation-grid;
+@include foundation-flex-classes;
+@include foundation-flex-grid;
+
+@include foundation-typography;
+@include foundation-button;
+@include foundation-forms;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+// @include foundation-accordion;
+// @include foundation-accordion-menu;
+// @include foundation-badge;
+// @include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+// @include foundation-card;
+// @include foundation-close-button;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+// @include foundation-responsive-embed;
+@include foundation-label;
+// @include foundation-media-object;
+@include foundation-menu;
+@include foundation-menu-icon;
+// @include foundation-off-canvas;
+// @include foundation-orbit;
+// @include foundation-pagination;
+// @include foundation-progress-bar;
+// @include foundation-slider;
+// @include foundation-sticky;
+@include foundation-reveal;
+// @include foundation-switch;
+// @include foundation-table;
+@include foundation-tabs;
+// @include foundation-thumbnail;
+@include foundation-title-bar;
+@include foundation-tooltip;
+@include foundation-top-bar;
+
+// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
+//
+// @include motion-ui-transitions;
+// @include motion-ui-animations;
diff --git a/app/assets/stylesheets/reimagine2/foundation/foundation_and_overrides_2.scss b/app/assets/stylesheets/reimagine2/foundation/foundation_and_overrides_2.scss
new file mode 100644
index 00000000..4810a960
--- /dev/null
+++ b/app/assets/stylesheets/reimagine2/foundation/foundation_and_overrides_2.scss
@@ -0,0 +1,1493 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+//
+
+// Table of Contents
+// Foundation Settings
+
+// a. Base
+// b. Grid
+// c. Global
+// d. Media Query Ranges
+// e. Typography
+// 01. Accordion
+// 02. Alert Boxes
+// 03. Block Grid
+// 04. Breadcrumbs
+// 05. Buttons
+// 06. Button Groups
+// 07. Clearing
+// 08. Dropdown
+// 09. Dropdown Buttons
+// 10. Flex Video
+// 11. Forms
+// 12. Icon Bar
+// 13. Inline Lists
+// 14. Joyride
+// 15. Keystrokes
+// 16. Labels
+// 17. Magellan
+// 18. Off-canvas
+// 19. Orbit
+// 20. Pagination
+// 21. Panels
+// 22. Pricing Tables
+// 23. Progress Bar
+// 24. Range Slider
+// 25. Reveal
+// 26. Side Nav
+// 27. Split Buttons
+// 28. Sub Nav
+// 29. Switch
+// 30. Tables
+// 31. Tabs
+// 32. Thumbnails
+// 33. Tooltips
+// 34. Top Bar
+// 36. Visibility Classes
+
+// a. Base
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// This is the default html and body font-size for the base rem value.
+// $rem-base: 16px;
+
+// Allows the use of rem-calc() or lower-bound() in your settings
+@import 'foundation/functions';
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with browser-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it affect the grid breakpoints,
+// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
+// $base-font-size: 100%;
+
+// The $base-font-size is 100% while $base-line-height is 150%
+// $base-line-height: 150%;
+
+// We use this to control whether or not CSS classes come through in the gem files.
+$include-html-classes: true;
+// $include-print-styles: true;
+$include-html-global-classes: $include-html-classes;
+
+// b. Grid
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-grid-classes: $include-html-classes;
+// $include-xl-html-grid-classes: false;
+
+$row-width: rem-calc(1200);
+// $total-columns: 12;
+$column-gutter: rem-calc(30);
+
+// c. Global
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// We use these to define default font stacks
+$font-family-sans-serif: "Helvetica Neue", sans-serif;
+$custom-font-family-sans-serif: "ClearSans", "HelveticaNeue-Bold", "Helvetica Neue Bold", sans-serif;
+// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
+
+// We use these to define default font weights
+$font-weight-normal: normal;
+$font-weight-bold: bold;
+
+// $white       : #FFFFFF;
+// $ghost       : #FAFAFA;
+// $snow        : #F9F9F9;
+// $vapor       : #F6F6F6;
+// $white-smoke : #F5F5F5;
+// $silver      : #EFEFEF;
+// $smoke       : #EEEEEE;
+// $gainsboro   : #DDDDDD;
+// $iron        : #CCCCCC;
+// $base        : #AAAAAA;
+// $aluminum    : #999999;
+// $jumbo       : #888888;
+// $monsoon     : #777777;
+// $steel       : #666666;
+// $charcoal    : #555555;
+// $tuatara     : #444444;
+// $oil         : #333333;
+// $jet         : #222222;
+// $black       : #000000;
+
+// We use these as default colors throughout
+$primary-color: $primary-1;
+$secondary-color: $secondary-1;
+$alert-color: #f04124;
+$success-color: $secondary-5;
+$warning-color: $error-3;
+$info-color: $primary-5;
+
+// We use these to control various global styles
+// $body-bg: $white;
+$body-font-color: $grey-5;
+$body-font-family: $font-family-sans-serif;
+// $body-font-weight: $font-weight-normal;
+// $body-font-style: normal;
+
+// We use this to control font-smoothing
+// $font-smoothing: antialiased;
+
+// We use these to control text direction settings
+// $text-direction: ltr;
+// $opposite-direction: right;
+// $default-float: left;
+// $last-child-float: $opposite-direction;
+
+// We use these to make sure border radius matches unless we want it different.
+// $global-radius: 3px;
+// $global-rounded: 1000px;
+
+// We use these to control inset shadow shiny edges and depressions.
+// $shiny-edge-size: 0 1px 0;
+// $shiny-edge-color: rgba($white, .5);
+// $shiny-edge-active-color: rgba($black, .2);
+
+// d. Media Query Ranges
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $small-breakpoint:  em-calc(640);
+// $medium-breakpoint: em-calc(1024);
+// $large-breakpoint:  em-calc(1440);
+// $xlarge-breakpoint: em-calc(1920);
+
+// $small-range:   (0, $small-breakpoint);
+// $medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);
+// $large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint);
+// $xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint);
+// $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
+
+// $screen: "only screen";
+
+// $landscape: "#{$screen} and (orientation: landscape)";
+// $portrait: "#{$screen} and (orientation: portrait)";
+
+// $small-up: $screen;
+// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
+
+// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
+// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
+
+// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
+// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
+
+// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
+// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
+
+// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
+// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
+
+// $retina: (
+//  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+//  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+//  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+//  "#{$screen} and (min-device-pixel-ratio: 2)",
+//  "#{$screen} and (min-resolution: 192dpi)",
+//  "#{$screen} and (min-resolution: 2dppx)"
+// );
+
+// Legacy
+// $small: $medium-up;
+// $medium: $medium-up;
+// $large: $large-up;
+
+// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+// $cursor-crosshair-value: crosshair;
+// $cursor-default-value: default;
+// $cursor-disabled-value: not-allowed;
+// $cursor-pointer-value: pointer;
+// $cursor-help-value: help;
+// $cursor-text-value: text;
+
+// e. Typography
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-type-classes: $include-html-classes;
+
+// We use these to control header font styles
+$header-font-family: $custom-font-family-sans-serif;
+$header-font-weight: $font-weight-bold;
+// $header-font-style: normal;
+$header-font-color: $dark;
+// $header-line-height: 1.4;
+// $header-top-margin: .2rem;
+$header-bottom-margin: .5em;
+// $header-text-rendering: optimizeLegibility;
+
+// We use these to control header font sizes
+$h1-font-size: rem-calc(38);
+// $h2-font-size: rem-calc(37);
+// $h3-font-size: rem-calc(27);
+// $h4-font-size: rem-calc(23);
+// $h5-font-size: rem-calc(18);
+// $h6-font-size: 1rem;
+
+// We use these to control header size reduction on small screens
+// $h1-font-reduction: rem-calc(10);
+// $h2-font-reduction: rem-calc(10);
+// $h3-font-reduction: rem-calc(5);
+// $h4-font-reduction: rem-calc(5);
+// $h5-font-reduction: 0;
+// $h6-font-reduction: 0;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: $font-weight-normal;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general <small> styling
+$small-font-size: 87.5%;
+// $small-font-color: scale-color($header-font-color, $lightness: 35%);
+
+// We use these to style paragraphs
+// $paragraph-font-family: inherit;
+// $paragraph-font-weight: $font-weight-normal;
+$paragraph-font-size: 1rem;
+// $paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: rem-calc(20);
+// $paragraph-aside-font-size: rem-calc(14);
+// $paragraph-aside-line-height: 1.35;
+// $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
+
+// We use these to style <code> tags
+// $code-color: $oil;
+// $code-font-family: $font-family-monospace;
+// $code-font-weight: $font-weight-normal;
+// $code-background-color: scale-color($secondary-color, $lightness: 70%);
+// $code-border-size: 1px;
+// $code-border-style: solid;
+// $code-border-color: scale-color($code-background-color, $lightness: -10%);
+// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-text-decoration-hover: none;
+$anchor-color: $primary-color;
+// $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+
+// We use these to style the <hr> element
+// $hr-border-width: 1px;
+// $hr-border-style: solid;
+// $hr-border-color: $gainsboro;
+// $hr-margin: rem-calc(20);
+
+// We use these to style lists
+// $list-font-family: $paragraph-font-family;
+// $list-font-size: $paragraph-font-size;
+// $list-line-height: $paragraph-lineheight;
+// $list-margin-bottom: $paragraph-margin-bottom;
+// $list-style-position: outside;
+// $list-side-margin: 1.1rem;
+// $list-ordered-side-margin: 1.4rem;
+// $list-side-margin-no-bullet: 0;
+// $list-nested-margin: rem-calc(20);
+// $definition-list-header-weight: $font-weight-bold;
+// $definition-list-header-margin-bottom: .3rem;
+// $definition-list-margin-bottom: rem-calc(12);
+
+// We use these to style blockquotes
+// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid $gainsboro;
+// $blockquote-cite-font-size: rem-calc(13);
+// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
+// $blockquote-cite-link-color: $blockquote-cite-font-color;
+
+// Acronym styles
+// $acronym-underline: 1px dotted $gainsboro;
+
+// We use these to control padding and margin
+// $microformat-padding: rem-calc(10 12);
+// $microformat-margin: rem-calc(0 0 20 0);
+
+// We use these to control the border styles
+// $microformat-border-width: 1px;
+// $microformat-border-style: solid;
+// $microformat-border-color: $gainsboro;
+
+// We use these to control full name font styles
+// $microformat-fullname-font-weight: $font-weight-bold;
+// $microformat-fullname-font-size: rem-calc(15);
+
+// We use this to control the summary font styles
+// $microformat-summary-font-weight: $font-weight-bold;
+
+// We use this to control abbr padding
+// $microformat-abbr-padding: rem-calc(0 1);
+
+// We use this to control abbr font styles
+// $microformat-abbr-font-weight: $font-weight-bold;
+// $microformat-abbr-font-decoration: none;
+
+// 01. Accordion
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-accordion-classes: $include-html-classes;
+
+// $accordion-navigation-padding: rem-calc(16);
+// $accordion-navigation-bg-color: $silver;
+// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
+// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
+// $accordion-navigation-active-font-color: $jet;
+// $accordion-navigation-font-color: $jet;
+// $accordion-navigation-font-size: rem-calc(16);
+// $accordion-navigation-font-family: $body-font-family;
+
+// $accordion-content-padding: ($column-gutter/2);
+// $accordion-content-active-bg-color: $white;
+
+// 02. Alert Boxes
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-alert-classes: $include-html-classes;
+
+// We use this to control alert padding.
+// $alert-padding-top: rem-calc(14);
+// $alert-padding-default-float: $alert-padding-top;
+// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
+// $alert-padding-bottom: $alert-padding-top;
+
+// We use these to control text style.
+// $alert-font-weight: $font-weight-normal;
+// $alert-font-size: rem-calc(13);
+// $alert-font-color: $white;
+// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
+
+// We use this for close hover effect.
+// $alert-function-factor: -14%;
+
+// We use these to control border styles.
+// $alert-border-style: solid;
+// $alert-border-width: 1px;
+// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
+$alert-bottom-margin: 0;
+
+// We use these to style the close buttons
+// $alert-close-color: $oil;
+$alert-close-top: .25rem;
+// $alert-close-position: rem-calc(4);
+// $alert-close-font-size: rem-calc(22);
+// $alert-close-opacity: .3;
+// $alert-close-opacity-hover: .5;
+// $alert-close-padding: 9px 6px 4px;
+// $alert-close-background: inherit;
+
+// We use this to control border radius
+// $alert-radius: $global-radius;
+
+// $alert-transition-speed: 300ms;
+// $alert-transition-ease: ease-out;
+
+// 03. Block Grid
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-block-grid-classes: $include-html-classes;
+// $include-xl-html-block-grid-classes: false;
+
+// We use this to control the maximum number of block grid elements per row
+// $block-grid-elements: 12;
+// $block-grid-default-spacing: rem-calc(20);
+
+// $align-block-grid-to-grid: false;
+// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+// $block-grid-media-queries: true;
+
+// 04. Breadcrumbs
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use this to set the background color for the breadcrumb container.
+// $crumb-bg: scale-color($secondary-color, $lightness: 55%);
+
+// We use these to set the padding around the breadcrumbs.
+// $crumb-padding: rem-calc(9 14 9);
+// $crumb-side-padding: rem-calc(12);
+
+// We use these to control border styles.
+// $crumb-function-factor: -10%;
+// $crumb-border-size: 1px;
+// $crumb-border-style: solid;
+// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
+// $crumb-radius: $global-radius;
+
+// We use these to set various text styles for breadcrumbs.
+// $crumb-font-size: rem-calc(11);
+// $crumb-font-color: $primary-color;
+// $crumb-font-color-current: $oil;
+// $crumb-font-color-unavailable: $aluminum;
+// $crumb-font-transform: uppercase;
+// $crumb-link-decor: underline;
+
+// We use these to control the slash between breadcrumbs
+// $crumb-slash-color: $base;
+// $crumb-slash: "/";
+// $crumb-slash-position: 1px;
+
+// 05. Buttons
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to build padding for buttons.
+$button-tny: rem-calc(6);
+$button-sml: rem-calc(8);
+$button-med: rem-calc(9);
+$button-lrg: rem-calc(14);
+
+// We use this to control the display property.
+// $button-display: inline-block;
+// $button-margin-bottom: rem-calc(20);
+
+// We use these to control button text styles.
+$button-font-family: $custom-font-family-sans-serif;
+// $button-font-color: $white;
+// $button-font-color-alt: $oil;
+// $button-font-tny: rem-calc(11);
+// $button-font-sml: rem-calc(13);
+// $button-font-med: rem-calc(16);
+// $button-font-lrg: rem-calc(20);
+// $button-font-weight: $font-weight-normal;
+// $button-font-align: center;
+
+// We use these to control various hover effects.
+// $button-background-hover-lightness: -20%;
+
+// We use these to control button border styles.
+$button-border-width: 0 0 3px 0;
+$button-border-style: solid;
+// $button-bg-color: $primar  y-color;
+// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-background-hover-lightness);
+// $button-border-color: $button-bg-hover;
+// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-background-hover-lightness);
+// $secondary-button-border-color: $secondary-button-bg-hover;
+// $success-button-bg-hover: scale-color($success-color, $lightness: $button-background-hover-lightness);
+// $success-button-border-color: $success-button-bg-hover;
+// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-background-hover-lightness);
+// $alert-button-border-color: $alert-button-bg-hover;
+// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-background-hover-lightness);
+// $warning-button-border-color: $warning-button-bg-hover;
+// $info-button-bg-hover: scale-color($info-color, $lightness: $button-background-hover-lightness);
+// $info-button-border-color: $info-button-bg-hover;
+
+// We use this to set the default radius used throughout the core.
+// $button-radius: $global-radius;
+// $button-round: $global-rounded;
+
+// We use this to set default opacity and cursor for disabled buttons.
+// $button-disabled-opacity: .7;
+// $button-disabled-cursor: $cursor-default-value;
+
+// 06. Button Groups
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-button-classes: $include-html-classes;
+
+// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+// $button-bar-margin-opposite: rem-calc(10);
+// $button-group-border-width: 1px;
+
+// 07. Clearing
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-clearing-classes: $include-html-classes;
+
+// We use these to set the background colors for parts of Clearing.
+// $clearing-bg: $oil;
+// $clearing-caption-bg: $clearing-bg;
+// $clearing-carousel-bg: rgba(51,51,51,0.8);
+// $clearing-img-bg: $clearing-bg;
+
+// We use these to style the close button
+// $clearing-close-color: $iron;
+// $clearing-close-size: 30px;
+
+// We use these to style the arrows
+// $clearing-arrow-size: 12px;
+// $clearing-arrow-color: $clearing-close-color;
+
+// We use these to style captions
+// $clearing-caption-font-color: $iron;
+// $clearing-caption-font-size: .875em;
+// $clearing-caption-padding: 10px 30px 20px;
+
+// We use these to make the image and carousel height and style
+// $clearing-active-img-height: 85%;
+// $clearing-carousel-height: 120px;
+// $clearing-carousel-thumb-width: 120px;
+// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
+
+// 08. Dropdown
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-dropdown-classes: $include-html-classes;
+
+// We use these to controls height and width styles.
+// $f-dropdown-max-width: 200px;
+// $f-dropdown-height: auto;
+// $f-dropdown-max-height: none;
+
+// Used for bottom position
+// $f-dropdown-margin-top: 2px;
+
+// Used for right position
+// $f-dropdown-margin-left: $f-dropdown-margin-top;
+
+// Used for left position
+// $f-dropdown-margin-right: $f-dropdown-margin-top;
+
+// Used for top position
+// $f-dropdown-margin-bottom: $f-dropdown-margin-top;
+
+// We use this to control the background color
+// $f-dropdown-bg: $white;
+
+// We use this to set the border styles for dropdowns.
+// $f-dropdown-border-style: solid;
+// $f-dropdown-border-width: 1px;
+// $f-dropdown-border-color: scale-color($white, $lightness: -20%);
+
+// We use these to style the triangle pip.
+// $f-dropdown-triangle-size: 6px;
+// $f-dropdown-triangle-color: $white;
+// $f-dropdown-triangle-side-offset: 10px;
+
+// We use these to control styles for the list elements.
+// $f-dropdown-list-style: none;
+// $f-dropdown-font-color: $charcoal;
+// $f-dropdown-font-size: rem-calc(14);
+// $f-dropdown-list-padding: rem-calc(5, 10);
+// $f-dropdown-line-height: rem-calc(18);
+// $f-dropdown-list-hover-bg: $smoke;
+// $dropdown-mobile-default-float: 0;
+
+// We use this to control the styles for when the dropdown has custom content.
+// $f-dropdown-content-padding: rem-calc(20);
+
+// Default radius for dropdown.
+// $f-dropdown-radius: $global-radius;
+
+
+// 09. Dropdown Buttons
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to set the color of the pip in dropdown buttons
+// $dropdown-button-pip-color: $white;
+// $dropdown-button-pip-color-alt: $oil;
+
+// We use these to set the size of the pip in dropdown buttons
+// $button-pip-tny: rem-calc(6);
+// $button-pip-sml: rem-calc(7);
+// $button-pip-med: rem-calc(9);
+// $button-pip-lrg: rem-calc(11);
+
+// We use these to style tiny dropdown buttons
+// $dropdown-button-padding-tny: $button-pip-tny * 7;
+// $dropdown-button-pip-size-tny: $button-pip-tny;
+// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
+// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1);
+
+// We use these to style small dropdown buttons
+// $dropdown-button-padding-sml: $button-pip-sml * 7;
+// $dropdown-button-pip-size-sml: $button-pip-sml;
+// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
+// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1);
+
+// We use these to style medium dropdown buttons
+// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
+// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
+// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
+// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2);
+
+// We use these to style large dropdown buttons
+// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
+// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
+// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
+// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3);
+
+// 10. Flex Video
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use these to control video container padding and margins
+// $flex-video-padding-top: rem-calc(25);
+// $flex-video-padding-bottom: 67.5%;
+// $flex-video-margin-bottom: rem-calc(16);
+
+// We use this to control widescreen bottom padding
+// $flex-video-widescreen-padding-bottom: 56.34%;
+
+// 11. Forms
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-form-classes: $include-html-classes;
+
+// We use this to set the base for lots of form spacing and positioning styles
+// $form-spacing: rem-calc(16);
+
+// We use these to style the labels in different ways
+// $form-label-pointer: pointer;
+$form-label-font-size: rem-calc(16px);
+$form-label-font-weight: $font-weight-bold;
+// $form-label-line-height: 1.5;
+// $form-label-font-color: scale-color($black, $lightness: 30%);
+// $form-label-small-transform: capitalize;
+$form-label-bottom-margin: rem-calc(4px);
+// $input-font-family: inherit;
+// $input-font-color: rgba(0,0,0,0.75);
+$input-font-size: rem-calc(16px);
+$input-placeholder-font-color: $grey-4;
+// $input-bg-color: $white;
+$input-focus-bg-color: white;
+$input-border-color: $grey-2;
+$input-focus-border-color: $primary-color;
+// $input-border-style: solid;
+$input-border-width: 2px;
+// $input-border-radius: $global-radius;
+// $input-disabled-bg: $gainsboro;
+// $input-disabled-cursor: $cursor-default-value;
+$input-box-shadow: none;
+// $input-include-glowing-effect: false;
+
+// We use these to style the fieldset border and spacing.
+// $fieldset-border-style: solid;
+// $fieldset-border-width: 1px;
+// $fieldset-border-color: $gainsboro;
+// $fieldset-padding: rem-calc(20);
+// $fieldset-margin: rem-calc(18 0);
+
+// We use these to style the legends when you use them
+// $legend-bg: $white;
+// $legend-font-weight: $font-weight-bold;
+// $legend-padding: rem-calc(0 3);
+
+// We use these to style the prefix and postfix input elements
+// $input-prefix-bg: scale-color($white, $lightness: -5%);
+// $input-prefix-border-color: scale-color($white, $lightness: -20%);
+// $input-prefix-border-size: 1px;
+// $input-prefix-border-type: solid;
+// $input-prefix-overflow: hidden;
+// $input-prefix-font-color: $oil;
+// $input-prefix-font-color-alt: $white;
+
+// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
+// $input-number-spinners: true;
+
+// We use these to style the error states for inputs and labels
+// $input-error-message-padding: rem-calc(6 9 9);
+// $input-error-message-top: -1px;
+$input-error-message-font-size: $paragraph-font-size;
+// $input-error-message-font-weight: $font-weight-normal;
+// $input-error-message-font-style: italic;
+$input-error-message-font-color: $alert-color;
+$input-error-message-bg-color: transparent;
+// $input-error-message-font-color-alt: $oil;
+
+// We use this to style the glowing effect of inputs when focused
+// $glowing-effect-fade-time: .45s;
+// $glowing-effect-color: $input-focus-border-color;
+
+// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
+// $input-transition-fade-time: 0.15s;
+// $input-transition-fade-timing-function: linear;
+
+// Select variables
+// $select-bg-color: $ghost;
+// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
+
+
+// 12. Icon Bar
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// We use these to style the icon-bar and items
+// $icon-bar-bg: $oil;
+// $icon-bar-font-color: $white;
+// $icon-bar-font-color-hover: $icon-bar-font-color;
+// $icon-bar-font-size: 1rem;
+// $icon-bar-hover-color: $primary-color;
+// $icon-bar-icon-color: $white;
+// $icon-bar-icon-color-hover: $icon-bar-icon-color;
+// $icon-bar-icon-size: 1.875rem;
+// $icon-bar-image-width: 1.875rem;
+// $icon-bar-image-height: 1.875rem;
+// $icon-bar-active-color: $primary-color;
+// $icon-bar-item-padding: 1.25rem;
+
+// We use this to set default opacity and cursor for disabled icons.
+// $icon-bar-disabled-opacity: .7;
+
+// 13. Inline Lists
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-inline-list-classes: $include-html-classes;
+
+// We use this to control the margins and padding of the inline list.
+// $inline-list-top-margin: 0;
+// $inline-list-opposite-margin: 0;
+// $inline-list-bottom-margin: rem-calc(17);
+$inline-list-default-float-margin: rem-calc(-16);
+$inline-list-default-float-list-margin: rem-calc(16);
+
+// $inline-list-padding: 0;
+
+// We use this to control the overflow of the inline list.
+// $inline-list-overflow: hidden;
+
+// We use this to control the list items
+// $inline-list-display: block;
+
+// We use this to control any elements within list items
+// $inline-list-children-display: block;
+
+// 14. Joyride
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-joyride-classes: $include-html-classes;
+
+// Controlling default Joyride styles
+// $joyride-tip-bg: $oil;
+// $joyride-tip-default-width: 300px;
+// $joyride-tip-padding: rem-calc(18 20 24);
+// $joyride-tip-border: solid 1px $charcoal;
+// $joyride-tip-radius: 4px;
+// $joyride-tip-position-offset: 22px;
+
+// Here, we're setting the tip font styles
+// $joyride-tip-font-color: $white;
+// $joyride-tip-font-size: rem-calc(14);
+// $joyride-tip-header-weight: $font-weight-bold;
+
+// This changes the nub size
+// $joyride-tip-nub-size: 10px;
+
+// This adjusts the styles for the timer when its enabled
+// $joyride-tip-timer-width: 50px;
+// $joyride-tip-timer-height: 3px;
+// $joyride-tip-timer-color: $steel;
+
+// This changes up the styles for the close button
+// $joyride-tip-close-color: $monsoon;
+// $joyride-tip-close-size: 24px;
+// $joyride-tip-close-weight: $font-weight-normal;
+
+// When Joyride is filling the screen, we use this style for the bg
+// $joyride-screenfill: rgba(0,0,0,0.5);
+
+// 15. Keystrokes
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-keystroke-classes: $include-html-classes;
+
+// We use these to control text styles.
+// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
+// $keystroke-font-size: inherit;
+// $keystroke-font-color: $jet;
+// $keystroke-font-color-alt: $white;
+// $keystroke-function-factor: -7%;
+
+// We use this to control keystroke padding.
+// $keystroke-padding: rem-calc(2 4 0);
+
+// We use these to control background and border styles.
+// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
+// $keystroke-border-style: solid;
+// $keystroke-border-width: 1px;
+// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
+// $keystroke-radius: $global-radius;
+
+// 16. Labels
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-label-classes: $include-html-classes;
+
+// We use these to style the labels
+// $label-padding: rem-calc(4 8 4);
+// $label-radius: $global-radius;
+
+// We use these to style the label text
+$label-font-sizing: $paragraph-font-size;
+// $label-font-weight: $font-weight-normal;
+// $label-font-color: $oil;
+// $label-font-color-alt: $white;
+// $label-font-family: $body-font-family;
+
+// 17. Magellan
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-magellan-classes: $include-html-classes;
+
+// $magellan-bg: $white;
+// $magellan-padding: 10px;
+
+// 18. Off-canvas
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// Off Canvas Tab Bar Variables
+// $include-html-off-canvas-classes: $include-html-classes;
+
+// $tabbar-bg: $oil;
+// $tabbar-height: rem-calc(45);
+// $tabbar-icon-width: $tabbar-height;
+// $tabbar-line-height: $tabbar-height;
+// $tabbar-color: $white;
+// $tabbar-middle-padding: 0 rem-calc(10);
+
+// Off Canvas Divider Styles
+// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
+// $tabbar-right-section-border: $tabbar-left-section-border;
+
+
+// Off Canvas Tab Bar Headers
+// $tabbar-header-color: $white;
+// $tabbar-header-weight: $font-weight-bold;
+// $tabbar-header-line-height: $tabbar-height;
+// $tabbar-header-margin: 0;
+
+// Off Canvas Menu Variables
+// $off-canvas-width: rem-calc(250);
+// $off-canvas-bg: $oil;
+// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
+// $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);
+
+// Off Canvas Menu List Variables
+// $off-canvas-label-padding: .3rem rem-calc(15);
+// $off-canvas-label-color: $aluminum;
+// $off-canvas-label-text-transform: uppercase;
+// $off-canvas-label-font-size: rem-calc(12);
+// $off-canvas-label-font-weight: $font-weight-bold;
+// $off-canvas-label-bg: $tuatara;
+// $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
+// $off-canvas-label-border-bottom: none;
+// $off-canvas-label-margin:0;
+// $off-canvas-link-padding: rem-calc(10, 15);
+// $off-canvas-link-color: rgba($white, .7);
+// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
+// $off-canvas-back-bg: #444;
+// $off-canvas-back-border-top: $off-canvas-label-border-top;
+// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
+// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
+// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
+// $off-canvas-back-hover-border-bottom: none;
+
+// Off Canvas Menu Icon Variables
+// $tabbar-menu-icon-color: $white;
+// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
+
+// $tabbar-menu-icon-text-indent: rem-calc(35);
+// $tabbar-menu-icon-width: $tabbar-icon-width;
+// $tabbar-menu-icon-height: $tabbar-height;
+// $tabbar-menu-icon-padding: 0;
+
+// $tabbar-hamburger-icon-width: rem-calc(16);
+// $tabbar-hamburger-icon-left: false;
+// $tabbar-hamburger-icon-top: false;
+// $tabbar-hamburger-icon-thickness: 1px;
+// $tabbar-hamburger-icon-gap: 6px;
+
+// Off Canvas Back-Link Overlay
+// $off-canvas-overlay-transition: background 300ms ease;
+// $off-canvas-overlay-cursor: pointer;
+// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5);
+// $off-canvas-overlay-background: rgba($white, .2);
+// $off-canvas-overlay-background-hover: rgba($white, .05);
+
+// Transition Variables
+// $menu-slide: "transform 500ms ease";
+
+// 19. Orbit
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-orbit-classes: $include-html-classes;
+
+// We use these to control the caption styles
+// $orbit-container-bg: none;
+// $orbit-caption-bg: rgba(51,51,51, .8);
+// $orbit-caption-font-color: $white;
+// $orbit-caption-font-size: rem-calc(14);
+// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
+// $orbit-caption-padding: rem-calc(10 14);
+// $orbit-caption-height: auto;
+
+// We use these to control the left/right nav styles
+// $orbit-nav-bg: transparent;
+// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
+// $orbit-nav-arrow-color: $white;
+// $orbit-nav-arrow-color-hover: $white;
+
+// We use these to control the timer styles
+// $orbit-timer-bg: rgba(255,255,255,0.3);
+// $orbit-timer-show-progress-bar: true;
+
+// We use these to control the bullet nav styles
+// $orbit-bullet-nav-color: $iron;
+// $orbit-bullet-nav-color-active: $aluminum;
+// $orbit-bullet-radius: rem-calc(9);
+
+// We use these to controls the style of slide numbers
+// $orbit-slide-number-bg: rgba(0,0,0,0);
+// $orbit-slide-number-font-color: $white;
+// $orbit-slide-number-padding: rem-calc(5);
+
+// Graceful Loading Wrapper and preloader
+// $wrapper-class: "slideshow-wrapper";
+// $preloader-class: "preloader";
+
+// Hide controls on small
+// $orbit-nav-hide-for-small: true;
+// $orbit-bullet-hide-for-small: true;
+// $orbit-timer-hide-for-small: true;
+
+// 20. Pagination
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-pagination-classes: $include-html-classes;
+
+// We use these to control the pagination container
+// $pagination-height: rem-calc(24);
+// $pagination-margin: rem-calc(-5);
+
+// We use these to set the list-item properties
+// $pagination-li-float: $default-float;
+// $pagination-li-height: rem-calc(24);
+// $pagination-li-font-color: $jet;
+// $pagination-li-font-size: rem-calc(14);
+// $pagination-li-margin: rem-calc(5);
+
+// We use these for the pagination anchor links
+// $pagination-link-pad: rem-calc(1 10 1);
+$pagination-link-font-color: $anchor-color;
+// $pagination-link-active-bg: scale-color($white, $lightness: -10%);
+
+// We use these for disabled anchor links
+// $pagination-link-unavailable-cursor: default;
+// $pagination-link-unavailable-font-color: $aluminum;
+// $pagination-link-unavailable-bg-active: transparent;
+
+// We use these for currently selected anchor links
+// $pagination-link-current-background: $primary-color;
+// $pagination-link-current-font-color: $white;
+// $pagination-link-current-font-weight: $font-weight-bold;
+// $pagination-link-current-cursor: default;
+// $pagination-link-current-active-bg: $primary-color;
+
+
+// 21. Panels
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-panel-classes: $include-html-classes;
+
+// We use these to control the background and border styles
+// $panel-bg: scale-color($white, $lightness: -5%);
+// $panel-border-style: solid;
+// $panel-border-size: 1px;
+// $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
+
+// We use this % to control how much we darken things on hover
+// $panel-border-color: scale-color($panel-bg, $lightness: -11%);
+
+// We use these to set default inner padding and bottom margin
+// $panel-margin-bottom: rem-calc(20);
+// $panel-padding: rem-calc(20);
+
+// We use these to set default font colors
+// $panel-font-color: $oil;
+// $panel-font-color-alt: $white;
+
+// $panel-header-adjust: true;
+// $callout-panel-link-color: $primary-color;
+// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
+
+// 22. Pricing Tables
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-pricing-classes: $include-html-classes;
+
+// We use this to control the border color
+// $price-table-border: solid 1px $gainsboro;
+
+// We use this to control the bottom margin of the pricing table
+// $price-table-margin-bottom: rem-calc(20);
+
+// We use these to control the title styles
+// $price-title-bg: $oil;
+// $price-title-padding: rem-calc(15 20);
+// $price-title-align: center;
+// $price-title-color: $smoke;
+// $price-title-weight: $font-weight-normal;
+// $price-title-size: rem-calc(16);
+// $price-title-font-family: $body-font-family;
+
+// We use these to control the price styles
+// $price-money-bg: $vapor;
+// $price-money-padding: rem-calc(15 20);
+// $price-money-align: center;
+// $price-money-color: $oil;
+// $price-money-weight: $font-weight-normal;
+// $price-money-size: rem-calc(32);
+// $price-money-font-family: $body-font-family;
+
+
+// We use these to control the description styles
+// $price-bg: $white;
+// $price-desc-color: $monsoon;
+// $price-desc-padding: rem-calc(15);
+// $price-desc-align: center;
+// $price-desc-font-size: rem-calc(12);
+// $price-desc-weight: $font-weight-normal;
+// $price-desc-line-height: 1.4;
+// $price-desc-bottom-border: dotted 1px $gainsboro;
+
+// We use these to control the list item styles
+// $price-item-color: $oil;
+// $price-item-padding: rem-calc(15);
+// $price-item-align: center;
+// $price-item-font-size: rem-calc(14);
+// $price-item-weight: $font-weight-normal;
+// $price-item-bottom-border: dotted 1px $gainsboro;
+
+// We use these to control the CTA area styles
+// $price-cta-bg: $white;
+// $price-cta-align: center;
+// $price-cta-padding: rem-calc(20 20 0);
+
+// 23. Progress Bar
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use this to set the progress bar height
+// $progress-height: rem-calc(25);
+// $progress-bar-color: $vapor;
+
+// We use these to control the border styles
+// $progress-bar-border-color: scale-color($white, $lightness: 20%);
+// $progress-bar-border-size: 1px;
+// $progress-bar-border-style: solid;
+// $progress-radius: $global-radius;
+
+// We use these to control the margin & padding
+// $progress-bar-margin-bottom: rem-calc(10);
+
+// We use these to set the meter colors
+// $progress-meter-color: $primary-color;
+// $progress-meter-secondary-color: $secondary-color;
+// $progress-meter-success-color: $success-color;
+// $progress-meter-alert-color: $alert-color;
+
+// 24. Range Slider
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-range-slider-classes: $include-html-classes;
+
+// These variables define the slider bar styles
+// $range-slider-bar-width: 100%;
+// $range-slider-bar-height: rem-calc(16);
+
+// $range-slider-bar-border-width: 1px;
+// $range-slider-bar-border-style: solid;
+// $range-slider-bar-border-color: $gainsboro;
+// $range-slider-radius: $global-radius;
+// $range-slider-round: $global-rounded;
+// $range-slider-bar-bg-color: $ghost;
+// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
+
+// Vertical bar styles
+// $range-slider-vertical-bar-width: rem-calc(16);
+// $range-slider-vertical-bar-height: rem-calc(200);
+
+// These variables define the slider handle styles
+// $range-slider-handle-width: rem-calc(32);
+// $range-slider-handle-height: rem-calc(22);
+// $range-slider-handle-position-top: rem-calc(-5);
+// $range-slider-handle-bg-color: $primary-color;
+// $range-slider-handle-border-width: 1px;
+// $range-slider-handle-border-style: solid;
+// $range-slider-handle-border-color: none;
+// $range-slider-handle-radius: $global-radius;
+// $range-slider-handle-round: $global-rounded;
+// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
+// $range-slider-handle-cursor: pointer;
+
+// $range-slider-disabled-opacity: .7;
+// $range-slider-disabled-cursor: $cursor-disabled-value;
+
+// 25. Reveal
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-reveal-classes: $include-html-classes;
+
+// We use these to control the style of the reveal overlay.
+// $reveal-overlay-bg: rgba($black, .45);
+// $reveal-overlay-bg-old: $black;
+
+// We use these to control the style of the modal itself.
+// $reveal-modal-bg: $white;
+// $reveal-position-top: rem-calc(100);
+// $reveal-default-width: 80%;
+// $reveal-max-width: $row-width;
+// $reveal-modal-padding: rem-calc(20);
+// $reveal-box-shadow: 0 0 10px rgba($black,.4);
+
+// We use these to style the reveal close button
+// $reveal-close-font-size: rem-calc(40);
+// $reveal-close-top: rem-calc(10);
+// $reveal-close-side: rem-calc(22);
+// $reveal-close-color: $base;
+// $reveal-close-weight: $font-weight-bold;
+
+// We use this to set the default radius used throughout the core.
+// $reveal-radius: $global-radius;
+// $reveal-round: $global-rounded;
+
+// We use these to control the modal border
+// $reveal-border-style: solid;
+// $reveal-border-width: 1px;
+// $reveal-border-color: $steel;
+
+// $reveal-modal-class: "reveal-modal";
+// $close-reveal-modal-class: "close-reveal-modal";
+
+// 26. Side Nav
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use this to control padding.
+// $side-nav-padding: rem-calc(14 0);
+
+// We use these to control list styles.
+// $side-nav-list-type: none;
+// $side-nav-list-position: outside;
+// $side-nav-list-margin: rem-calc(0 0 7 0);
+
+// We use these to control link styles.
+// $side-nav-link-color: $primary-color;
+// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
+// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
+// $side-nav-link-bg-hover: hsla(0, 0, 0, .025);
+// $side-nav-link-margin: 0;
+// $side-nav-link-padding: rem-calc(7 14);
+// $side-nav-font-size: rem-calc(14);
+// $side-nav-font-weight: $font-weight-normal;
+// $side-nav-font-weight-active: $side-nav-font-weight;
+// $side-nav-font-family: $body-font-family;
+// $side-nav-font-family-active: $side-nav-font-family;
+
+// We use these to control heading styles.
+// $side-nav-heading-color: $side-nav-link-color;
+// $side-nav-heading-font-size: $side-nav-font-size;
+// $side-nav-heading-font-weight: bold;
+// $side-nav-heading-text-transform: uppercase;
+
+// We use these to control border styles
+// $side-nav-divider-size: 1px;
+// $side-nav-divider-style: solid;
+// $side-nav-divider-color: scale-color($white, $lightness: 10%);
+
+// 27. Split Buttons
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to control different shared styles for Split Buttons
+// $split-button-function-factor: 10%;
+// $split-button-pip-color: $white;
+// $split-button-span-border-color: rgba(255,255,255,0.5);
+// $split-button-pip-color-alt: $oil;
+// $split-button-active-bg-tint: rgba(0,0,0,0.1);
+
+// We use these to control tiny split buttons
+// $split-button-padding-tny: $button-pip-tny * 10;
+// $split-button-span-width-tny: $button-pip-tny * 6;
+// $split-button-pip-size-tny: $button-pip-tny;
+// $split-button-pip-top-tny: $button-pip-tny * 2;
+// $split-button-pip-default-float-tny: rem-calc(-6);
+
+// We use these to control small split buttons
+// $split-button-padding-sml: $button-pip-sml * 10;
+// $split-button-span-width-sml: $button-pip-sml * 6;
+// $split-button-pip-size-sml: $button-pip-sml;
+// $split-button-pip-top-sml: $button-pip-sml * 1.5;
+// $split-button-pip-default-float-sml: rem-calc(-6);
+
+// We use these to control medium split buttons
+// $split-button-padding-med: $button-pip-med * 9;
+// $split-button-span-width-med: $button-pip-med * 5.5;
+// $split-button-pip-size-med: $button-pip-med - rem-calc(3);
+// $split-button-pip-top-med: $button-pip-med * 1.5;
+// $split-button-pip-default-float-med: rem-calc(-6);
+
+// We use these to control large split buttons
+// $split-button-padding-lrg: $button-pip-lrg * 8;
+// $split-button-span-width-lrg: $button-pip-lrg * 5;
+// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
+// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
+// $split-button-pip-default-float-lrg: rem-calc(-6);
+
+// 28. Sub Nav
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use these to control margin and padding
+$sub-nav-list-margin: rem-calc(0);
+// $sub-nav-list-padding-top: rem-calc(4);
+
+// We use this to control the definition
+// $sub-nav-font-family: $body-font-family;
+// $sub-nav-font-size: rem-calc(14);
+// $sub-nav-font-color: $aluminum;
+$sub-nav-font-weight: $font-weight-bold;
+// $sub-nav-text-decoration: none;
+$sub-nav-padding: rem-calc(0);
+// $sub-nav-border-radius: 3px;
+// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
+
+
+// We use these to control the active item styles
+
+// $sub-nav-active-font-weight: $font-weight-normal;
+// $sub-nav-active-bg: $primary-color;
+// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
+// $sub-nav-active-color: $white;
+// $sub-nav-active-padding: $sub-nav-padding;
+// $sub-nav-active-cursor: default;
+
+// $sub-nav-item-divider: "";
+// $sub-nav-item-divider-margin: rem-calc(12);
+
+// 29. Switch
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-form-classes: $include-html-classes;
+
+// Controlling background color for the switch container
+// $switch-bg: $gainsboro;
+
+// We use these to control the switch heights for our default classes
+// $switch-height-tny: 1.5rem;
+// $switch-height-sml: 1.75rem;
+// $switch-height-med: 2rem;
+// $switch-height-lrg: 2.5rem;
+// $switch-bottom-margin: 1.5rem;
+
+// We use these to style the switch-paddle
+// $switch-paddle-bg: $white;
+// $switch-paddle-transition-speed: .15s;
+// $switch-paddle-transition-ease: ease-out;
+// $switch-active-color: $primary-color;
+
+// 30. Tables
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-table-classes: $include-html-classes;
+
+// These control the background color for the table and even rows
+// $table-bg: $white;
+// $table-even-row-bg: $snow;
+
+// These control the table cell border style
+// $table-border-style: solid;
+// $table-border-size: 1px;
+// $table-border-color: $gainsboro;
+
+// These control the table head styles
+// $table-head-bg: $white-smoke;
+// $table-head-font-size: rem-calc(14);
+// $table-head-font-color: $jet;
+// $table-head-font-weight: $font-weight-bold;
+// $table-head-padding: rem-calc(8 10 10);
+
+// These control the table foot styles
+// $table-foot-bg: $table-head-bg;
+// $table-foot-font-size: $table-head-font-size;
+// $table-foot-font-color: $table-head-font-color;
+// $table-foot-font-weight: $table-head-font-weight;
+// $table-foot-padding: $table-head-padding;
+
+// These control the caption
+// $table-caption-bg: transparent;
+// $table-caption-font-color: $table-head-font-color;
+// $table-caption-font-size: rem-calc(16);
+// $table-caption-font-weight: bold;
+
+// These control the row padding and font styles
+// $table-row-padding: rem-calc(9 10);
+// $table-row-font-size: rem-calc(14);
+// $table-row-font-color: $jet;
+// $table-line-height: rem-calc(18);
+
+// These are for controlling the layout, display and margin of tables
+// $table-layout: auto;
+// $table-display: table-cell;
+// $table-margin-bottom: rem-calc(20);
+
+
+// 31. Tabs
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-tabs-classes: $include-html-classes;
+
+// $tabs-navigation-padding: rem-calc(16);
+// $tabs-navigation-bg-color: $silver;
+// $tabs-navigation-active-bg-color: $white;
+// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
+// $tabs-navigation-font-color: $jet;
+// $tabs-navigation-active-font-color: $tabs-navigation-font-color;
+// $tabs-navigation-font-size: rem-calc(16);
+// $tabs-navigation-font-family: $body-font-family;
+
+// $tabs-content-margin-bottom: rem-calc(24);
+// $tabs-content-padding: ($column-gutter/2);
+
+// $tabs-vertical-navigation-margin-bottom: 1.25rem;
+
+// 32. Thumbnails
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use these to control border styles
+// $thumb-border-style: solid;
+// $thumb-border-width: 4px;
+// $thumb-border-color: $white;
+// $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
+// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
+
+// Radius and transition speed for thumbs
+// $thumb-radius: $global-radius;
+// $thumb-transition-speed: 200ms;
+
+// 33. Tooltips
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-tooltip-classes: $include-html-classes;
+
+$has-tip-border-bottom: 0;
+// $has-tip-font-weight: $font-weight-bold;
+// $has-tip-font-color: $oil;
+$has-tip-border-bottom-hover: 0;
+// $has-tip-font-color-hover: $primary-color;
+// $has-tip-cursor-type: help;
+
+// $tooltip-padding: rem-calc(12);
+// $tooltip-bg: $oil;
+// $tooltip-font-size: rem-calc(14);
+// $tooltip-font-weight: $font-weight-normal;
+// $tooltip-font-color: $white;
+// $tooltip-line-height: 1.3;
+// $tooltip-close-font-size: rem-calc(10);
+// $tooltip-close-font-weight: $font-weight-normal;
+// $tooltip-close-font-color: $monsoon;
+// $tooltip-font-size-sml: rem-calc(14);
+// $tooltip-radius: $global-radius;
+// $tooltip-rounded: $global-rounded;
+// $tooltip-pip-size: 5px;
+// $tooltip-max-width: 300px;
+
+// 34. Top Bar
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-top-bar-classes: $include-html-classes;
+
+// Background color for the top bar
+$topbar-bg-color: white;
+// $topbar-bg: $topbar-bg-color;
+
+// Height and margin
+$topbar-height: rem-calc(62);
+// $topbar-margin-bottom: 0;
+
+// Controlling the styles for the title in the top bar
+// $topbar-title-weight: $font-weight-normal;
+// $topbar-title-font-size: rem-calc(17);
+
+// Set the link colors and styles for top-level nav
+$topbar-link-color: $dark;
+$topbar-link-color-hover: $dark-primary;
+// $topbar-link-color-active: $white;
+// $topbar-link-color-active-hover: $white;
+// $topbar-link-weight: $font-weight-normal;
+$topbar-link-font-size: rem-calc(16);
+// $topbar-link-hover-lightness: -10%; // Darken by 10%
+// $topbar-link-bg: $topbar-bg;
+$topbar-link-bg-hover: $grey-1;
+$topbar-link-bg-color-hover: $grey-1;
+// $topbar-link-bg-active: $primary-color;
+// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
+// $topbar-link-font-family: $body-font-family;
+// $topbar-link-text-transform: none;
+$topbar-link-padding: rem-calc(22);
+// $topbar-back-link-size: rem-calc(18);
+// $topbar-link-dropdown-padding: rem-calc(20);
+// $topbar-button-font-size: .75rem;
+// $topbar-button-top: 7px;
+
+// Style the top bar dropdown elements
+$topbar-dropdown-bg: white;
+$topbar-dropdown-link-color: $primary-color;
+$topbar-dropdown-link-color-hover: $topbar-link-color-hover;
+$topbar-dropdown-link-bg: white;
+$topbar-dropdown-link-bg-hover: $grey-1;
+// $topbar-dropdown-link-weight: $font-weight-normal;
+$topbar-dropdown-toggle-size: 5px;
+$topbar-dropdown-toggle-color: $dark-primary;
+// $topbar-dropdown-toggle-alpha: .4;
+
+// $topbar-dropdown-label-color: $monsoon;
+// $topbar-dropdown-label-text-transform: uppercase;
+// $topbar-dropdown-label-font-weight: $font-weight-bold;
+// $topbar-dropdown-label-font-size: rem-calc(10);
+// $topbar-dropdown-label-bg: $oil;
+
+// Top menu icon styles
+// $topbar-menu-link-transform: uppercase;
+$topbar-menu-link-font-size: rem-calc(16);
+// $topbar-menu-link-weight: $font-weight-bold;
+// $topbar-menu-link-color: $white;
+// $topbar-menu-icon-color: $white;
+// $topbar-menu-link-color-toggled: $jumbo;
+// $topbar-menu-icon-color-toggled: $jumbo;
+// $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
+
+// Transitions and breakpoint styles
+// $topbar-transition-speed: 300ms;
+// Using rem-calc for the below breakpoint causes issues with top bar
+// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
+// $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
+
+// Top-bar input styles
+// $topbar-input-height: rem-calc(28);
+
+// Divider Styles
+$topbar-divider-border-bottom: solid 1px $grey-1;
+$topbar-divider-border-top: none;
+
+// Sticky Class
+// $topbar-sticky-class: ".sticky";
+// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
+// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
+
+// 36. Visibility Classes
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// $include-html-visibility-classes: $include-html-classes;
+// $include-accessibility-classes: true;
+// $include-table-visibility-classes: true;
+// $include-legacy-visibility-classes: true;
+
+@import 'foundation';
diff --git a/app/assets/stylesheets/reimagine2/helpers/_text.sass b/app/assets/stylesheets/reimagine2/helpers/_text.sass
index 05669260..de29f909 100644
--- a/app/assets/stylesheets/reimagine2/helpers/_text.sass
+++ b/app/assets/stylesheets/reimagine2/helpers/_text.sass
@@ -29,8 +29,8 @@ p
     font-size: $small-font-size
 
   &.large
-    @media #{$small-up}
-      font-size: emCalc(22px)
+    font-size: rem-calc(20)
+    margin-bottom: $paragraph-margin-bottom * 1.5
 
 small, .small
   &.ss-icon, .ss-icon
diff --git a/app/assets/stylesheets/reimagine2/mixins/_all_caps.sass b/app/assets/stylesheets/reimagine2/mixins/_all_caps.sass
index e0817240..f168340c 100644
--- a/app/assets/stylesheets/reimagine2/mixins/_all_caps.sass
+++ b/app/assets/stylesheets/reimagine2/mixins/_all_caps.sass
@@ -1,4 +1,4 @@
 @mixin all-caps
   letter-spacing: 2px
   text-transform: uppercase
-  font-size: emCalc(14)
+  font-size: rem-calc(14)
diff --git a/app/assets/stylesheets/reimagine2/mixins/_bold.sass b/app/assets/stylesheets/reimagine2/mixins/_bold.sass
index 07441874..a3cbefdb 100644
--- a/app/assets/stylesheets/reimagine2/mixins/_bold.sass
+++ b/app/assets/stylesheets/reimagine2/mixins/_bold.sass
@@ -1,4 +1,2 @@
 @mixin bold
-  color: $header-font-color
-  font-weight: $header-font-weight
   text-rendering: $header-text-rendering
diff --git a/app/assets/stylesheets/reimagine2/mixins/_typo.sass b/app/assets/stylesheets/reimagine2/mixins/_typo.sass
new file mode 100644
index 00000000..8dba5165
--- /dev/null
+++ b/app/assets/stylesheets/reimagine2/mixins/_typo.sass
@@ -0,0 +1,2 @@
+@function header-size($header, $size)
+  @return map-get(map-get(map-get($header-styles, $size), $header), "font-size")
diff --git a/app/helpers/reimagine2/external_assets_helper.rb b/app/helpers/reimagine2/external_assets_helper.rb
new file mode 100644
index 00000000..cc28ffab
--- /dev/null
+++ b/app/helpers/reimagine2/external_assets_helper.rb
@@ -0,0 +1,14 @@
+module Reimagine2
+  module ExternalAssetsHelper
+    def fontawesome_stylesheet_link_tag
+      return if Rails.env.test?
+      stylesheet_link_tag(
+        'https://use.fontawesome.com/releases/v5.6.3/css/all.css',
+        {
+          integrity: 'sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/',
+          crossorigin: 'anonymous'
+        }
+      )
+    end
+  end
+end
diff --git a/app/helpers/reimagine2/image_helper.rb b/app/helpers/reimagine2/image_helper.rb
index d4760de7..1277adf0 100644
--- a/app/helpers/reimagine2/image_helper.rb
+++ b/app/helpers/reimagine2/image_helper.rb
@@ -15,6 +15,24 @@ def double_density_file_name(file_name, options = {})
       [filename, double_density_label, extension].join
     end
 
+    def default_avatar_filename
+      "reimagine2/no-avatar-180.png"
+    end
+
+    def default_classes
+      ["user-avatar"]
+    end
+
+    def user_avatar_tag(user, options = {})
+      classes = default_classes + Array(options.delete(:class))
+      classes = classes.join(" ")
+
+      path = user.avatar_url.presence || default_avatar_filename
+      options[:alt] = '' unless options[:alt]
+
+      image_tag path, (options || {}).merge(class: classes)
+    end
+
     private
 
     def responsive_options(image, options = {})
diff --git a/app/helpers/reimagine2/url_helper.rb b/app/helpers/reimagine2/url_helper.rb
index c20fb597..b49a7ae8 100644
--- a/app/helpers/reimagine2/url_helper.rb
+++ b/app/helpers/reimagine2/url_helper.rb
@@ -4,18 +4,15 @@ module Reimagine2
   module UrlHelper
 
     def default_reimagine_url_options
-      {
-        scheme: 'http',
-        path: '/'
-      }
+      { host: Reimagine2.configuration.root_host }
     end
 
     def reimagine_url(opts = {})
-      URI::HTTP.build(default_reimagine_url_options.merge(opts)).to_s
+      URI::HTTPS.build(default_reimagine_url_options.merge(opts)).to_s
     end
 
     def reimagine_root_url(opts = {})
-      reimagine_url(opts.merge(host: Reimagine2.configuration.root_host))
+      reimagine_url(opts)
     end
 
     def reimagine_post_url(opts = {})
@@ -66,11 +63,11 @@ def activity_feed_url
       })
     end
 
-    def user_settings_url(path = "")
+    def user_settings_url(path = "", options = {})
       build_url({
         host: Figleaf::Settings.domain.root,
         path: "/settings/#{path}"
-      })
+      }.merge(options))
     end
 
     def register_url
diff --git a/app/views/layout/reimagine2/_twitter_remarketing_tag.html.erb b/app/views/layout/reimagine2/_twitter_remarketing_tag.html.erb
deleted file mode 100644
index 01cae5dd..00000000
--- a/app/views/layout/reimagine2/_twitter_remarketing_tag.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<script src="//platform.twitter.com/oct.js" type="text/javascript"></script>
-<script type="text/javascript">twttr.conversion.trackPid('l6ngp', { tw_sale_amount: 0, tw_order_quantity: 0 });</script>
-<noscript>
-<img height="1" width="1" style="display:none;" alt="" src="https://analytics.twitter.com/i/adsct?txn_id=l6ngp&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" />
-<img height="1" width="1" style="display:none;" alt="" src="//t.co/i/adsct?txn_id=l6ngp&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" />
-</noscript>
diff --git a/app/views/reimagine2/devpost/_footer.html.erb b/app/views/reimagine2/devpost/_footer.html.erb
index 04e652fb..d29b90e3 100644
--- a/app/views/reimagine2/devpost/_footer.html.erb
+++ b/app/views/reimagine2/devpost/_footer.html.erb
@@ -5,7 +5,6 @@
         <h4>Devpost</h4>
         <ul>
           <li><a href="https://info.devpost.com/about">About</a></li>
-          <li><a href="https://devpost.com/teams/devpost?ref_content=how-devpost-is-made&amp;ref_feature=teams&amp;ref_medium=footer">Our dev team</a></li>
           <li><a href="https://info.devpost.com/careers">Careers</a></li>
           <li><a href="https://info.devpost.com/contact">Contact</a></li>
           <li><a href="https://help.devpost.com/">Help</a></li>
@@ -17,8 +16,8 @@
       <nav>
         <h4>Jobs</h4>
         <ul>
-          <li><a href="https://devpost.com/teams">Browse jobs</a></li>
-          <li><a href="https://devpost.com/teams/hiring">Employers</a></li>
+          <li><a href="https://devpost.com/jobs/hiring">Employers</a></li>
+          <li><a href="https://devpost.com/jobs/hiring#pricing">Pricing</a></li>
           <li><a href="https://devpost.com/thecommit">Job advice</a></li>
         </ul>
       </nav>
@@ -34,7 +33,7 @@
           <li><a href="https://devpost.com/software?ref_content=footer-projects-link&amp;ref_feature=projects&amp;ref_medium=footer">Explore projects</a></li>
           <li><a href="https://post.devpost.com/hackathons">Host an in-person hackathon</a></li>
           <li><a href="https://post.devpost.com/online_hackathons">Host an online hackathon</a></li>
-          <li><a href="https:s//post.devpost.com/app_contest_resources">Hackathon best practices</a></li>
+          <li><a href="https://post.devpost.com/app_contest_resources">Hackathon best practices</a></li>
         </ul>
       </nav>
     </div>
@@ -45,22 +44,17 @@
         <ul class="social-links">
           <li>
             <a href="https://twitter.com/devpost" target="_blank">
-              <i class="fa fa-twitter-square"></i>
+              <i class="fab fa-twitter-square"></i>
             </a>
           </li>
           <li>
             <a href="https://www.facebook.com/devposthacks" target="_blank">
-              <i class="fa fa-facebook-square"></i>
+              <i class="fab fa-facebook-square"></i>
             </a>
           </li>
           <li>
             <a href="https://www.youtube.com/playlist?list=PLmJ41elIxG7bRbhhCUQun3e4XNeyKc_-o" target="_blank">
-              <i class="fa fa-youtube-square"></i>
-            </a>
-          </li>
-          <li>
-            <a href="https://devposthacks.tumblr.com" target="_blank">
-              <i class="fa fa-tumblr-square"></i>
+              <i class="fab fa-youtube-square"></i>
             </a>
           </li>
         </ul>
diff --git a/app/views/reimagine2/devpost/_global_nav.html.erb b/app/views/reimagine2/devpost/_global_nav.html.erb
index 36271a13..758ed31d 100644
--- a/app/views/reimagine2/devpost/_global_nav.html.erb
+++ b/app/views/reimagine2/devpost/_global_nav.html.erb
@@ -1,6 +1,5 @@
 <% presenter = local_assigns[:presenter] %>
 
 <header id="global-nav">
-  <%= render "reimagine2/devpost/global_nav_mobile", presenter: presenter %>
   <%= render "reimagine2/devpost/global_nav_desktop", presenter: presenter %>
 </header>
diff --git a/app/views/reimagine2/devpost/_global_nav_desktop.html.erb b/app/views/reimagine2/devpost/_global_nav_desktop.html.erb
index f5389294..720a6046 100644
--- a/app/views/reimagine2/devpost/_global_nav_desktop.html.erb
+++ b/app/views/reimagine2/devpost/_global_nav_desktop.html.erb
@@ -1,14 +1,28 @@
-<div class="contain-to-grid hide-for-small hide-for-medium">
-  <nav class="top-bar" data-topbar>
-    <ul class="title-area">
-      <li class="name">
-        <%= render "reimagine2/devpost/global_nav/logo", presenter: presenter %>
-      </li>
-    </ul>
+<div class="top-bar">
+  <div class="row">
+    <div class="small-12 columns top-bar-wrapper">
+      <div class="top-bar-left">
+        <ul class="dropdown menu" data-dropdown-menu>
+          <li class="menu-text">
+            <%= link_to reimagine_root_url, class: "show-for-large" do %>
+              <%= image_tag "reimagine2/devpost-logo.svg", alt: "Devpost", id: "logo" %>
+            <% end %>
 
-    <section class="top-bar-section">
-      <%= render 'reimagine2/devpost/global_nav/world', presenter: presenter %>
-      <%= render 'reimagine2/devpost/global_nav/account', presenter: presenter %>
-    </section>
-  </nav>
+            <%= link_to reimagine_root_url, class: "hide-for-large" do %>
+              <%= image_tag "reimagine2/devpost-icon.svg", alt: "Devpost", id: "logo" %>
+            <% end %>
+          </li>
+          <li>
+            <%= link_to "Hackathons", reimagine_root_url(path: "/hackathons") %>
+          </li>
+          <li>
+            <%= link_to "For organizations", reimagine_post_url %>
+          </li>
+        </ul>
+      </div>
+      <div class="top-bar-right">
+        <%= render 'reimagine2/devpost/global_nav/account', presenter: presenter %>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/app/views/reimagine2/devpost/_global_nav_mobile.html.erb b/app/views/reimagine2/devpost/_global_nav_mobile.html.erb
deleted file mode 100644
index 20660d23..00000000
--- a/app/views/reimagine2/devpost/_global_nav_mobile.html.erb
+++ /dev/null
@@ -1,23 +0,0 @@
-<div class="contain-to-grid hide-for-large-up">
-  <nav class="top-bar" data-topbar>
-    <ul class="title-area top-bar-section">
-      <li class="name">
-        <%= render "reimagine2/devpost/global_nav/logo",
-          image_path: "reimagine2/devpost-icon.svg",
-          presenter: presenter %>
-      </li>
-
-      <li class="toggle-topbar has-dropdown">
-        <%= render "reimagine2/devpost/global_nav/mobile/user_avatar" %>
-      </li>
-
-      <%= render "reimagine2/devpost/global_nav/mobile/logged_in_account", presenter: presenter %>
-      <%= render "reimagine2/devpost/global_nav/mobile/world", presenter: presenter %>
-      <%= render "reimagine2/devpost/global_nav/mobile/logged_out_account", presenter: presenter %>
-    </ul>
-
-    <section class="top-bar-section">
-      <%= render 'reimagine2/devpost/global_nav/mobile/logged_in_menu', presenter: presenter %>
-    </section>
-  </nav>
-</div>
diff --git a/app/views/reimagine2/devpost/global_nav/_account.html.erb b/app/views/reimagine2/devpost/global_nav/_account.html.erb
index e69de29b..26a2d1ef 100644
--- a/app/views/reimagine2/devpost/global_nav/_account.html.erb
+++ b/app/views/reimagine2/devpost/global_nav/_account.html.erb
@@ -0,0 +1,8 @@
+<ul class="menu dropdown" data-dropdown-menu data-close-on-click data-closing-time="250">
+  <li>
+    <a href="#">Log in</a>
+  </li>
+  <li>
+    <a href="#">Sign up</a>
+  </li>
+</ul>
diff --git a/app/views/reimagine2/devpost/global_nav/_world.html.erb b/app/views/reimagine2/devpost/global_nav/_world.html.erb
deleted file mode 100644
index 3ee376be..00000000
--- a/app/views/reimagine2/devpost/global_nav/_world.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<ul class="left">
-  <%= render "reimagine2/devpost/global_nav/world_menu_entries" %>
-</ul>
diff --git a/app/views/reimagine2/devpost/global_nav/_world_menu_entries.html.erb b/app/views/reimagine2/devpost/global_nav/_world_menu_entries.html.erb
deleted file mode 100644
index ebba376a..00000000
--- a/app/views/reimagine2/devpost/global_nav/_world_menu_entries.html.erb
+++ /dev/null
@@ -1,23 +0,0 @@
-<li>
-  <%= link_to reimagine_root_url(path: "/teams"),
-        class: "main-link",
-        data: { role: "teams" } do %>
-    Jobs <span class="label all-caps small alpha">nyc</span>
-  <% end %>
-</li>
-
-<li>
-  <%= link_to reimagine_root_url(path: "/thecommit"),
-        class: "main-link",
-        data: { role: "thecommit" } do %>
-    The Commit <span class="fa fa-youtube-play youtube-icon"></span>
-  <% end %>
-</li>
-
-<li>
-  <%= link_to reimagine_root_url(path: "/hackathons"),
-        class: "main-link",
-        data: { role: "discover" } do %>
-    Hackathons
-  <% end %>
-</li>
diff --git a/app/views/reimagine2/devpost/global_nav/mobile/_logged_in_account.html.erb b/app/views/reimagine2/devpost/global_nav/mobile/_logged_in_account.html.erb
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/views/reimagine2/devpost/global_nav/mobile/_logged_in_menu.html.erb b/app/views/reimagine2/devpost/global_nav/mobile/_logged_in_menu.html.erb
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/views/reimagine2/devpost/global_nav/mobile/_logged_out_account.html.erb b/app/views/reimagine2/devpost/global_nav/mobile/_logged_out_account.html.erb
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/views/reimagine2/devpost/global_nav/mobile/_world.html.erb b/app/views/reimagine2/devpost/global_nav/mobile/_world.html.erb
deleted file mode 100644
index 2e68d529..00000000
--- a/app/views/reimagine2/devpost/global_nav/mobile/_world.html.erb
+++ /dev/null
@@ -1,5 +0,0 @@
-<li class="menu left">
-  <ul>
-    <%= render "reimagine2/devpost/global_nav/world_menu_entries" %>
-  </ul>
-</li>
diff --git a/reimagine2.gemspec b/reimagine2.gemspec
index 14cfcb30..26f43885 100644
--- a/reimagine2.gemspec
+++ b/reimagine2.gemspec
@@ -21,12 +21,12 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency "rails"
   spec.add_dependency "sass-rails"
-  spec.add_dependency "compass-rails", "2.0.4"
+  spec.add_dependency "compass-rails", '~> 3.0', '>= 3.0.2'
   spec.add_dependency "coffee-rails"
-  spec.add_dependency "foundation-rails", "~> 5.5"
+  spec.add_dependency "foundation-rails", "~> 6.3.1"
   spec.add_dependency "addressable", "~> 2.4"
 
-  spec.add_development_dependency "rspec-rails", '~> 2.0'
+  spec.add_development_dependency "rspec-rails"
   spec.add_development_dependency "steak"
   spec.add_development_dependency "launchy"
   spec.add_development_dependency "pry"