diff --git a/.babelrc b/.babelrc
index 160a10b30..057bab7ba 100644
--- a/.babelrc
+++ b/.babelrc
@@ -13,6 +13,7 @@
           "utilFunctions": "./utilFunctions",
           "shared": "./components/shared",
           "constants": "./constants",
+          "stylesheets": "./stylesheets",
           "components": "./components"
         }
       }
diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 000000000..dbc5ee691
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,133 @@
+{
+  "rules": {
+    "at-rule-no-unknown": true,
+    "block-no-empty": true,
+    "color-no-invalid-hex": true,
+    "comment-no-empty": true,
+    "declaration-block-no-duplicate-properties": [
+      true,
+      {
+        ignore: ["consecutive-duplicates-with-different-values"]
+      }
+    ],
+    "declaration-block-no-shorthand-property-overrides": true,
+    "font-family-no-duplicate-names": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "keyframe-declaration-no-important": true,
+    "media-feature-name-no-unknown": true,
+    "no-descending-specificity": true,
+    "no-duplicate-selectors": true,
+    "no-empty-source": true,
+    "no-extra-semicolons": true,
+    "no-invalid-double-slash-comments": true,
+    "property-no-unknown": true,
+    "selector-pseudo-class-no-unknown": [true, {ignore: ["global"]}],
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-no-unknown": true,
+    "string-no-newline": true,
+    "unit-no-unknown": true,
+    "at-rule-empty-line-before": [ "always", {
+      except: [
+        "blockless-after-same-name-blockless",
+        "first-nested",
+      ],
+      ignore: ["after-comment"],
+    } ],
+    "at-rule-name-case": "lower",
+    "at-rule-name-space-after": "always-single-line",
+    "at-rule-semicolon-newline-after": "always",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "comment-empty-line-before": [ "always", {
+      except: ["first-nested"],
+      ignore: ["stylelint-commands"],
+    } ],
+    "comment-whitespace-inside": "always",
+    "custom-property-empty-line-before": [ "always", {
+      except: [
+        "after-custom-property",
+        "first-nested",
+      ],
+      ignore: [
+        "after-comment",
+        "inside-single-line-block",
+      ],
+    } ],
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-empty-line-before": [ "always", {
+      except: [
+        "after-declaration",
+        "first-nested",
+      ],
+      ignore: [
+        "after-comment",
+        "inside-single-line-block",
+      ],
+    } ],
+    "function-comma-newline-after": "always-multi-line",
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never-single-line",
+    "function-whitespace-after": "always",
+    "indentation": 2,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-query-list-comma-newline-after": "always-multi-line",
+    "media-query-list-comma-space-after": "always-single-line",
+    "media-query-list-comma-space-before": "never",
+    "no-eol-whitespace": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+    "property-case": "lower",
+    "rule-empty-line-before": [ "always-multi-line", {
+      except: ["first-nested"],
+      ignore: ["after-comment"],
+    } ],
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-space-before": "never",
+    "selector-max-empty-lines": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-type-case": "lower",
+    "unit-case": "lower",
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+  },
+}
diff --git a/components/ContactComponents/ContactForm/ContactForm.css b/components/ContactComponents/ContactForm/ContactForm.scss
similarity index 70%
rename from components/ContactComponents/ContactForm/ContactForm.css
rename to components/ContactComponents/ContactForm/ContactForm.scss
index f75b82c63..3040de1eb 100644
--- a/components/ContactComponents/ContactForm/ContactForm.css
+++ b/components/ContactComponents/ContactForm/ContactForm.scss
@@ -1,6 +1,6 @@
-@value linkColor, formLabelColor, errorColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont, sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .contactForm {
   margin-top: 2rem;
@@ -19,8 +19,8 @@
     font-weight: bold;
     margin: 0 0 1rem;
     position: relative;
-    color: formLabelColor;
-  
+    color: $formLabelColor;
+
     & > span {
       display: block;
       margin: 0 0 0.25rem 0.5rem;
@@ -37,14 +37,14 @@
     resize: none;
   }
 
-  & input[type=email], & input[type=text], & textarea {
+  & input[type="email"], & input[type="text"], & textarea {
     width: 100%;
-    border: 0.075rem solid formLabelColor;
+    border: 0.075rem solid $formLabelColor;
     padding: 1.5rem 0.25rem 0.5rem 0.5rem;
     border-radius: 0.25rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 0;
   }
 }
@@ -58,18 +58,18 @@
 }
 
 .error {
-  color: errorColor;
+  color: $errorColor;
   display: inline-block;
   margin-left: 0.5rem;
 }
 
 .header {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 2rem;
   margin-bottom: 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 3rem;
     margin-bottom: 3rem;
   }
@@ -80,7 +80,7 @@
   margin-bottom: 2rem;
   line-height: 1.25;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 1.25rem;
   }
 }
@@ -92,4 +92,3 @@
   width: 100%;
   margin: 18px 0;
 }
-
diff --git a/components/ContactComponents/ContactForm/index.js b/components/ContactComponents/ContactForm/index.js
index 58513fb61..4316cbdbc 100644
--- a/components/ContactComponents/ContactForm/index.js
+++ b/components/ContactComponents/ContactForm/index.js
@@ -4,7 +4,7 @@ import Select from "react-select";
 
 import Button from "shared/Button";
 
-import { classNames, stylesheet } from "./ContactForm.css";
+import css from "./ContactForm.scss";
 
 class ContactForm extends React.Component {
   state = {
@@ -155,10 +155,10 @@ class ContactForm extends React.Component {
       onClick: this.activateRequired
     };
     return (
-      <div className={classNames.contactForm}>
+      <div className={css.contactForm}>
         {!this.state.isSent &&
           <div>
-            <p className={classNames.instructions}>
+            <p className={css.instructions}>
               We would love to hear from you! Please fill out this form and we
               will
               get in touch with you shortly.
@@ -203,7 +203,7 @@ class ContactForm extends React.Component {
                 />
               </label>
               <label htmlFor="contact-subject">
-                <span className={classNames.notFixed}>
+                <span className={css.notFixed}>
                   Subject (required)
                 </span>
                 <Select
@@ -257,7 +257,7 @@ class ContactForm extends React.Component {
                 type="checkbox"
                 name="i_prefer_usps_mail"
                 value="1"
-                className={classNames.miel}
+                className={css.miel}
                 tabIndex="-1"
                 autoComplete="off"
               />
@@ -269,7 +269,7 @@ class ContactForm extends React.Component {
                 {this.state.isSending &&
                   <Button
                     type="secondary"
-                    className={classNames.disabledButton}
+                    className={css.disabledButton}
                     live="assertive"
                   >
                     Sending message…
@@ -279,12 +279,11 @@ class ContactForm extends React.Component {
           </div>}
         {this.state.isSent &&
           <div aria-live="assertive">
-            <h1 className={classNames.header}>Thank you!</h1>
-            <p className={classNames.instructions}>
+            <h1 className={css.header}>Thank you!</h1>
+            <p className={css.instructions}>
               A DPLA staff member will contact you soon.
             </p>
           </div>}
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.css b/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.css
deleted file mode 100644
index fac6711be..000000000
--- a/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.css
+++ /dev/null
@@ -1,59 +0,0 @@
-@value linkColor, colderBackgroundColor, dimmedTextColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
-
-.header {
-  font-family: serifFont;
-  font-size: 1.5rem;
-  margin-bottom: 1.5rem;
-  font-weight: normal;
-}
-
-.contentTable {
-  padding: 1rem 1.5rem;
-  width: 100%;
-  background-color: colderBackgroundColor;
-
-  @media (min-width: mediumRem) {
-    padding: 2rem 3rem;
-  }
-}
-
-.tableHeading {
-  font-size: .8rem;
-  text-transform: uppercase;
-  color: dimmedTextColor;
-  font-weight: 600;
-  vertical-align: baseline;
-
-  @media (min-width: mediumRem) {
-    font-size: 1rem;
-  }
-}
-
-.tableItem {
-  vertical-align: baseline;
-  font-family: serifFont;
-  line-height: 1.25;
-  margin-top: .5rem;
-
-  @media (min-width: smallRem) {
-    margin-top: 0;
-  }
-
-  @media (min-width: mediumRem) {
-    font-size: 1.25rem;
-  }
-}
-
-.paddedRow {
-  margin-bottom: 1.5rem;
-
-  @media (min-width: mediumRem) {
-    margin-bottom: 2rem;
-  }
-}
-
-.mailToLink {
-  padding-bottom: .25rem;
-}
diff --git a/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.scss b/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.scss
new file mode 100644
index 000000000..691d4e0d7
--- /dev/null
+++ b/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.scss
@@ -0,0 +1,59 @@
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
+
+.header {
+  font-family: $serifFont;
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  font-weight: normal;
+}
+
+.contentTable {
+  padding: 1rem 1.5rem;
+  width: 100%;
+  background-color: $colderBackgroundColor;
+
+  @media (min-width: $mediumRem) {
+    padding: 2rem 3rem;
+  }
+}
+
+.tableHeading {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  color: $dimmedTextColor;
+  font-weight: 600;
+  vertical-align: baseline;
+
+  @media (min-width: $mediumRem) {
+    font-size: 1rem;
+  }
+}
+
+.tableItem {
+  vertical-align: baseline;
+  font-family: $serifFont;
+  line-height: 1.25;
+  margin-top: 0.5rem;
+
+  @media (min-width: $smallRem) {
+    margin-top: 0;
+  }
+
+  @media (min-width: $mediumRem) {
+    font-size: 1.25rem;
+  }
+}
+
+.paddedRow {
+  margin-bottom: 1.5rem;
+
+  @media (min-width: $mediumRem) {
+    margin-bottom: 2rem;
+  }
+}
+
+.mailToLink {
+  padding-bottom: 0.25rem;
+}
diff --git a/components/ContactComponents/MoreWaysToContact/index.js b/components/ContactComponents/MoreWaysToContact/index.js
index 4924b9eaa..980df2d07 100644
--- a/components/ContactComponents/MoreWaysToContact/index.js
+++ b/components/ContactComponents/MoreWaysToContact/index.js
@@ -1,45 +1,46 @@
 import React from "react";
-import { classNames, stylesheet } from "./MoreWaysToContact.css";
+
+import css from "./MoreWaysToContact.scss";
 
 const MoreWaysToContact = () =>
-  <div className={classNames.contactForm}>
-    <h2 className={classNames.header}>More Ways To Contact Us</h2>
-    <table className={classNames.contentTable}>
+  <div className={css.contactForm}>
+    <h2 className={css.header}>More Ways To Contact Us</h2>
+    <table className={css.contentTable}>
       <tbody>
-        <tr className={`row ${classNames.paddedRow}`}>
-          <td className={`col-xs-12 col-sm-5 ${classNames.tableHeading}`}>
+        <tr className={`row ${css.paddedRow}`}>
+          <td className={`col-xs-12 col-sm-5 ${css.tableHeading}`}>
             General Email
           </td>
-          <td className={`col-xs-12 col-sm-7 ${classNames.tableItem}`}>
-            <a className={classNames.mailToLink} href="mailto:info@dp.la">
+          <td className={`col-xs-12 col-sm-7 ${css.tableItem}`}>
+            <a className={css.mailToLink} href="mailto:info@dp.la">
               info@dp.la
             </a>
           </td>
         </tr>
-        <tr className={`row ${classNames.paddedRow}`}>
-          <td className={`col-xs-12 col-sm-5 ${classNames.tableHeading}`}>
+        <tr className={`row ${css.paddedRow}`}>
+          <td className={`col-xs-12 col-sm-5 ${css.tableHeading}`}>
             Telephone
           </td>
-          <td className={`col-xs-12 col-sm-7 ${classNames.tableItem}`}>
+          <td className={`col-xs-12 col-sm-7 ${css.tableItem}`}>
             617-859-2116
           </td>
         </tr>
-        <tr className={`row ${classNames.paddedRow}`}>
-          <td className={`col-xs-12 col-sm-5 ${classNames.tableHeading}`}>
+        <tr className={`row ${css.paddedRow}`}>
+          <td className={`col-xs-12 col-sm-5 ${css.tableHeading}`}>
             Mailing Address
           </td>
-          <td className={`col-xs-12 col-sm-7 ${classNames.tableItem}`}>
+          <td className={`col-xs-12 col-sm-7 ${css.tableItem}`}>
             Digital Public Library of America<br />
             c/o Boston Public Library<br />
             700 Boylston Street<br />
             Boston, MA 02116<br />
           </td>
         </tr>
-        <tr className={`row ${classNames.paddedRow}`}>
-          <td className={`col-xs-12 col-sm-5 ${classNames.tableHeading}`}>
+        <tr className={`row ${css.paddedRow}`}>
+          <td className={`col-xs-12 col-sm-5 ${css.tableHeading}`}>
             Social Media
           </td>
-          <td className={`col-xs-12 col-sm-7 ${classNames.tableItem}`}>
+          <td className={`col-xs-12 col-sm-7 ${css.tableItem}`}>
             <ul>
               <li><a href="//twitter.com/dpla">Twitter</a></li>
               <li>
@@ -58,11 +59,11 @@ const MoreWaysToContact = () =>
             </ul>
           </td>
         </tr>
-        <tr className={`row ${classNames.paddedRow}`}>
-          <td className={`col-xs-12 col-sm-5 ${classNames.tableHeading}`}>
+        <tr className={`row ${css.paddedRow}`}>
+          <td className={`col-xs-12 col-sm-5 ${css.tableHeading}`}>
             Mailing Lists
           </td>
-          <td className={`col-xs-12 col-sm-7 ${classNames.tableItem}`}>
+          <td className={`col-xs-12 col-sm-7 ${css.tableItem}`}>
             <ul>
               <li>
                 <a href="https://us4.list-manage.com/subscribe?u=e1490d1305c4b651f3ad0ace4&id=1ee988aadc">
@@ -89,7 +90,6 @@ const MoreWaysToContact = () =>
         </tr>
       </tbody>
     </table>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default MoreWaysToContact;
diff --git a/components/DPLAHead/index.js b/components/DPLAHead/index.js
index f54414331..21942641d 100644
--- a/components/DPLAHead/index.js
+++ b/components/DPLAHead/index.js
@@ -1,9 +1,10 @@
 import React from "react";
 import Head from "next/head";
 
-import { stylesheet as reset } from "css/reset.css";
-import { stylesheet as utilStylesheet } from "css/utils.css";
-import { stylesheet as accessibility } from "css/accessibility.css";
+import reset from "stylesheets/reset.scss";
+import utils from "stylesheets/utils.scss";
+import accessibility from "stylesheets/accessibility.scss";
+
 import { getMetaPageTitle } from "utilFunctions";
 
 const DPLAHead = ({ additionalLinks, pageTitle, seoType }) =>
@@ -64,10 +65,7 @@ const DPLAHead = ({ additionalLinks, pageTitle, seoType }) =>
         content={pageTitle || "Digital Public Library of America"}
       />
       <meta name="og:type" content={seoType || "website"} />
-      <style>{reset}</style>
-      <style>{utilStylesheet}</style>
-      <style>{accessibility}</style>
-      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6,EventSource,Array.prototype.includes,Intl.~locale.en" />
+      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6,EventSource,Object.entries,Array.prototype.includes,Intl.~locale.en" />
     </Head>
   </div>;
 
diff --git a/components/DonateComponents/DonateForm/index.js b/components/DonateComponents/DonateForm/index.js
index b25c5bbd7..116818a19 100644
--- a/components/DonateComponents/DonateForm/index.js
+++ b/components/DonateComponents/DonateForm/index.js
@@ -4,11 +4,8 @@ import Button from "shared/Button";
 import { getCurrentFullUrl, endsWith } from "utilFunctions";
 import { PAYPAL_DONATE_SINGLE, PAYPAL_DONATE_MONTHLY } from "constants/site.js";
 
-import { stylesheet, classNames } from "css/pages/content-pages-wysiwyg.css";
-import {
-  stylesheet as contentStyles,
-  classNames as contentClasses
-} from "css/pages/donate.css";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "stylesheets/donate.scss";
 
 const frequencyMap = [
   { v: "once", k: "Give Once" },
@@ -93,11 +90,11 @@ class DonateForm extends React.Component {
 
   render() {
     return (
-      <form action="" className={contentClasses.donateForm}>
+      <form action="" className={css.donateForm}>
         <h2 id="donation-frequency">Frequency</h2>
         <ul className={`row start-xs`}>
           {frequencyMap.map((freq, i) =>
-            <li key={i} className={`${classNames.donate} col-xs-12 col-md-4`}>
+            <li key={i} className={`${contentCss.donate} col-xs-12 col-md-4`}>
               <DualStateButton
                 id={"freq" + i}
                 key={"freq" + i}
@@ -113,7 +110,7 @@ class DonateForm extends React.Component {
         <h2 id="donation-amount">Donation amount</h2>
         <ul className={`row`}>
           {amountMap.map((amt, i) =>
-            <li key={i} className={`${classNames.donate} col-xs-6 col-md-4`}>
+            <li key={i} className={`${contentCss.donate} col-xs-6 col-md-4`}>
               <DualStateButton
                 id={"amt" + i}
                 labelledby={"donation-amount amt" + i}
@@ -126,13 +123,13 @@ class DonateForm extends React.Component {
             </li>
           )}
           <li
-            className={`${classNames.donate} ${contentClasses.otherAmount} col-xs-6 col-md-4`}
+            className={`${contentCss.donate} ${css.otherAmount} col-xs-6 col-md-4`}
           >
             <input
               type="text"
               aria-label="Give other amount"
               placeholder="Other amount"
-              className={contentClasses.otherAmount}
+              className={css.otherAmount}
               value={this.state.amountText}
               onChange={e => this.handleAmountText(e)}
             />
@@ -143,7 +140,7 @@ class DonateForm extends React.Component {
           <div className={`col-xs-12 col-md-4`}>
             <Button
               type="primary"
-              className={`${contentClasses.donateButton}`}
+              className={`${css.donateButton}`}
               onClick={() => this.buildDonationAndSend()}
             >
               Donate
diff --git a/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/ExhibitionsList.css b/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/ExhibitionsList.scss
similarity index 61%
rename from components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/ExhibitionsList.css
rename to components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/ExhibitionsList.scss
index 29e9796f4..614ad38d0 100644
--- a/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/ExhibitionsList.css
+++ b/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/ExhibitionsList.scss
@@ -1,12 +1,12 @@
-@value linkColor, featuredBannerColor, colderBackgroundColor, darkBorderColor, black50 from "../../../../../css/colors.css";
-@value xSmallRem, smallRem, mediumRem, largeRem from "../../../../../css/breakpoints.css";
-@value monoFont, serifFont, sansFont from "../../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   margin: 1rem auto 2rem;
   padding: 0 1rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 0;
     margin-top: 2rem;
   }
@@ -24,8 +24,8 @@
     text-decoration: none;
   }
 
-  @media (min-width: smallRem) {
-    background-color: colderBackgroundColor;
+  @media (min-width: $smallRem) {
+    background-color: $colderBackgroundColor;
     display: flex;
     margin: 2rem;
   }
@@ -36,10 +36,10 @@
 
   & .exhibitionImage {
     border-radius: 0.2rem 0.2rem 0 0;
-    border-bottom: 0.25rem solid featuredBannerColor;
+    border-bottom: 0.25rem solid $featuredBannerColor;
     width: 100%;
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       border-bottom: none;
       border-radius: 0.2rem 0 0 0.2rem;
       width: auto;
@@ -50,8 +50,8 @@
     border-left: none;
     display: block;
 
-    @media (min-width: smallRem) {
-      border-left: 0.25rem solid featuredBannerColor;
+    @media (min-width: $smallRem) {
+      border-left: 0.25rem solid $featuredBannerColor;
     }
   }
 
@@ -59,22 +59,22 @@
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       font-size: 1.75rem;
     }
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       font-size: 2rem;
     }
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       font-size: 2.25rem;
     }
   }
 
   & .abstract {
     color: black;
-    font-family: serifFont;
+    font-family: $serifFont;
     font-size: 1rem;
 
     &:hover {
@@ -82,15 +82,15 @@
       text-decoration: none;
     }
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       font-size: 1.125rem;
     }
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       font-size: 1.25rem;
     }
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       font-size: 1.275rem;
     }
   }
@@ -102,19 +102,19 @@
   grid-row-gap: 1rem;
   grid-template-columns: 1fr;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     grid-template-columns: 1fr 1fr;
   }
 }
 
 .exhibition {
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
   display: grid;
   grid-template-columns: 1fr 2fr;
   line-height: 1.25;
   position: relative;
 
-  @media (min-width: xSmallRem) {
+  @media (min-width: $xSmallRem) {
     grid-template-columns: 1fr 3fr;
   }
 
@@ -128,30 +128,30 @@
 }
 
 .exhibitionText {
-  border-left: 0.25rem solid darkBorderColor;
+  border-left: 0.25rem solid $darkBorderColor;
   display: flex;
   padding: 0.25rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 0.5rem;
   }
 }
 
 .title {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-size: 1rem;
   font-weight: normal;
   margin: auto 0;
 
-  @media (min-width: xSmallRem) {
+  @media (min-width: $xSmallRem) {
     font-size: 1.1rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 1.25rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 1.5rem;
   }
 }
@@ -168,11 +168,11 @@
 }
 
 .featuredBanner {
-  background-color: featuredBannerColor;
+  background-color: $featuredBannerColor;
   color: black;
 }
 
 .newBanner {
-  background-color: linkColor;
+  background-color: $linkColor;
   color: white;
 }
diff --git a/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/index.js b/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/index.js
index 2228e62c4..e65c87482 100644
--- a/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/index.js
+++ b/components/ExhibitionsComponents/AllExhibitions/components/ExhibitionsList/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames, stylesheet } from "./ExhibitionsList.css";
+import css from "./ExhibitionsList.scss";
 
 const Exhibition = ({ exhibition, route }) => {
   return exhibition
@@ -19,20 +19,20 @@ const Exhibition = ({ exhibition, route }) => {
             query: route.query
           }}
         >
-          <a className={` ${classNames.exhibition}`}>
+          <a className={` ${css.exhibition}`}>
             {exhibition.new &&
               !featured &&
-              <div className={classNames.newBanner}>
+              <div className={css.newBanner}>
                 New
               </div>}
             <img
               alt=""
-              className={classNames.exhibitionImage}
+              className={css.exhibitionImage}
               src={exhibition.thumbnailUrl}
             />
 
-            <div className={classNames.exhibitionText}>
-              <h2 id={exhibition.slug} className={classNames.title}>
+            <div className={css.exhibitionText}>
+              <h2 id={exhibition.slug} className={css.title}>
                 {exhibition.title}
               </h2>
             </div>
@@ -43,9 +43,9 @@ const Exhibition = ({ exhibition, route }) => {
 };
 
 const ExhibitionsList = ({ exhibitions, route }) =>
-  <div className={`${classNames.wrapper} site-max-width`}>
-    <div className={classNames.row}>
-      <ul className={classNames.exhibitionList}>
+  <div className={`${css.wrapper} site-max-width`}>
+    <div className={css.row}>
+      <ul className={css.exhibitionList}>
         {exhibitions.map((exhibition, index) =>
           <Exhibition
             route={route}
@@ -55,7 +55,6 @@ const ExhibitionsList = ({ exhibitions, route }) =>
         )}
       </ul>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default ExhibitionsList;
diff --git a/components/ExhibitionsComponents/Exhibition/Details/Details.css b/components/ExhibitionsComponents/Exhibition/Details/Details.scss
similarity index 69%
rename from components/ExhibitionsComponents/Exhibition/Details/Details.css
rename to components/ExhibitionsComponents/Exhibition/Details/Details.scss
index 88da83744..9f4125839 100644
--- a/components/ExhibitionsComponents/Exhibition/Details/Details.css
+++ b/components/ExhibitionsComponents/Exhibition/Details/Details.scss
@@ -1,13 +1,13 @@
-@value linkColor, dimmedTextColor, warmerBackgroundColor, colderBackgroundColor from "../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .details {
   display: flex;
   flex-direction: column;
   padding-bottom: 6rem;
   margin-top: 2rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     flex-direction: row;
   }
 }
@@ -16,13 +16,13 @@
   width: 100%;
   margin-bottom: 1.5rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: 285px;
     margin-right: 32px;
     margin-bottom: 1.5rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-left: 45px;
   }
 
@@ -31,7 +31,7 @@
   box-sizing: content-box;
 
   & .faveAndCiteButtonsWrapper {
-    @media (max-width: smallRem) {
+    @media (max-width: $smallRem) {
       display: none;
     }
   }
@@ -40,12 +40,12 @@
 .tableOfContentsHeader {
   padding: 1rem;
   font-size: 0.75rem;
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: bold;
   line-height: 1.125;
   text-transform: uppercase;
-  background-color: #F1F0ED;
-  @media (min-width: mediumRem) {
+  background-color: #f1f0ed;
+  @media (min-width: $mediumRem) {
     font-size: 1rem;
     padding: 1.25rem;
   }
@@ -54,10 +54,10 @@
 .tableOfContentsContents {
   padding: 1rem;
   font-size: 1rem;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   line-height: 1.25;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 1.2rem;
     padding: 1.25rem;
   }
@@ -69,21 +69,21 @@
 
 .divider {
   height: 2px;
-  border-bottom: 2px solid #DFDEDC;
+  border-bottom: 2px solid #dfdedc;
   margin-bottom: 20px;
 }
 
 .bodyText {
   font-size: 1.125rem;
   display: block;
-  font-family: serifFont;
+  font-family: $serifFont;
   line-height: 1.625;
 
   & p {
     margin-bottom: 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-right: 45px;
   }
 }
@@ -91,12 +91,12 @@
 .body {
   display: flex;
   flex-direction: column;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: block;
   }
 
   & .faveAndCiteButtonsWrapper {
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       display: none;
     }
   }
@@ -104,7 +104,7 @@
 
 .credits {
   border-top: 2px solid rgba(0, 0, 0, 0.15);
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   display: flex;
   font-size: 0.875rem;
   line-height: 1.125;
@@ -131,7 +131,7 @@
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 
   & a {
-    color: linkColor;
+    color: $linkColor;
     text-decoration: underline;
   }
 }
@@ -148,5 +148,5 @@
 .citeButton {
   width: 100%;
   text-align: center;
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
 }
diff --git a/components/ExhibitionsComponents/Exhibition/Details/index.js b/components/ExhibitionsComponents/Exhibition/Details/index.js
index 656a67f7c..19eaab2a6 100644
--- a/components/ExhibitionsComponents/Exhibition/Details/index.js
+++ b/components/ExhibitionsComponents/Exhibition/Details/index.js
@@ -3,23 +3,22 @@ import Link from "next/link";
 
 import Button from "shared/Button";
 import CiteButton from "shared/CiteButton";
-
-import { classNames, stylesheet } from "./Details.css";
-import { classNames as utilClassNames } from "css/utils.css";
 import GaExhibitHomeWrapper from "./GaExhibitHomeWrapper";
 
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./Details.scss";
+
 const Details = ({ exhibition, route, currentFullUrl }) =>
-  <div className={classNames.wrapper}>
-    <div className={[container, classNames.details].join(" ")}>
-      <div className={classNames.tableOfContents}>
-        <h2 className={classNames.tableOfContentsHeader}>
+  <div className={css.wrapper}>
+    <div className={[utils.container, css.details].join(" ")}>
+      <div className={css.tableOfContents}>
+        <h2 className={css.tableOfContentsHeader}>
           In This Exhibition
         </h2>
-        <div className={classNames.tableOfContentsContents}>
-          <ul className={classNames.tableOfContentsSections}>
+        <div className={css.tableOfContentsContents}>
+          <ul className={css.tableOfContentsSections}>
             {exhibition.sections.map((section, idx) =>
-              <li key={idx} className={classNames.tableOfContentsSection}>
+              <li key={idx} className={css.tableOfContentsSection}>
                 <Link
                   prefetch
                   href={{
@@ -42,26 +41,26 @@ const Details = ({ exhibition, route, currentFullUrl }) =>
             )}
           </ul>
         </div>
-        <div className={classNames.faveAndCiteButtonsWrapper}>
+        <div className={css.faveAndCiteButtonsWrapper}>
           <CiteButton
             toCiteText="exhibition"
-            className={classNames.citeButton}
+            className={css.citeButton}
             freeText={exhibition.description}
             title={exhibition.name}
           />
         </div>
       </div>
-      <div className={classNames.body}>
+      <div className={css.body}>
         <div
-          className={classNames.bodyText}
+          className={css.bodyText}
           dangerouslySetInnerHTML={{ __html: exhibition.text }}
         />
-        <div className={classNames.exploreButton}>
+        <div className={css.exploreButton}>
           <Button
             type="primary"
             size="large"
             prefetch
-            className={classNames.exploreLink}
+            className={css.exploreLink}
             url={{
               pathname: "/exhibitions/exhibition/section/subsection",
               query: Object.assign({}, route.query, {
@@ -78,21 +77,20 @@ const Details = ({ exhibition, route, currentFullUrl }) =>
             Explore Exhibition
           </Button>
         </div>
-        <p className={classNames.credits}>
-          <span className={classNames.creditsBold}>Credit: </span>
-          <span className={classNames.creditsText}>{exhibition.credits}</span>
+        <p className={css.credits}>
+          <span className={css.creditsBold}>Credit: </span>
+          <span className={css.creditsText}>{exhibition.credits}</span>
         </p>
-        <div className={classNames.faveAndCiteButtonsWrapper}>
+        <div className={css.faveAndCiteButtonsWrapper}>
           <CiteButton
             toCiteText="exhibition"
-            className={classNames.citeButton}
+            className={css.citeButton}
             freeText={exhibition.description}
             title={exhibition.name}
           />
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default GaExhibitHomeWrapper(Details);
diff --git a/components/ExhibitionsComponents/Exhibition/ImageAndCaption/ImageAndCaption.css b/components/ExhibitionsComponents/Exhibition/ImageAndCaption/ImageAndCaption.scss
similarity index 63%
rename from components/ExhibitionsComponents/Exhibition/ImageAndCaption/ImageAndCaption.css
rename to components/ExhibitionsComponents/Exhibition/ImageAndCaption/ImageAndCaption.scss
index d81dd091f..3d216b58c 100644
--- a/components/ExhibitionsComponents/Exhibition/ImageAndCaption/ImageAndCaption.css
+++ b/components/ExhibitionsComponents/Exhibition/ImageAndCaption/ImageAndCaption.scss
@@ -1,10 +1,10 @@
-@value linkColor, dimmedTextColor from "../../../../css/colors.css";
-@value smallRem, xSmallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   margin-top: 1rem;
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 2rem;
   }
 }
@@ -13,17 +13,17 @@
   padding: 0;
   width: 100%;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 0 1rem 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 0 0 1rem;
   }
 }
 
 .image {
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     border-radius: 3px;
   }
   width: 100%;
@@ -41,7 +41,7 @@
   align-items: flex-end;
   justify-content: center;
   border-radius: 3px;
-  background: linear-gradient(180deg, rgba(13,13,23,0.15) 0%, #000000 100%);
+  background: linear-gradient(180deg, rgba(13, 13, 23, 0.15) 0%, #000000 100%);
 }
 
 .imageWrapper {
@@ -58,20 +58,20 @@
     padding: 0;
     display: none;
   }
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     & .exhibitionTitle {
       display: block;
     }
     width: 90%;
   }
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding-bottom: 3.5rem;
   }
 }
 
 .headingRule {
   display: none;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-bottom: -1.25rem;
     display: block;
   }
@@ -80,16 +80,16 @@
 .exhibitionTitle {
   padding: 0 1rem 1rem;
   line-height: 1.1;
-  font-family: serifFont;
+  font-family: $serifFont;
   font-size: 1.75rem;
   font-weight: normal;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 3rem;
   }
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 3.75rem;
   }
 }
@@ -97,7 +97,7 @@
 .exploreLink {
   display: inline-block;
   width: 100%;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: auto;
   }
 }
@@ -109,17 +109,17 @@
 }
 
 .caption {
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   display: flex;
   font-size: 0.875rem;
   line-height: 1.125;
   padding: 0 1rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 0;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 0 45px;
   }
 }
diff --git a/components/ExhibitionsComponents/Exhibition/ImageAndCaption/index.js b/components/ExhibitionsComponents/Exhibition/ImageAndCaption/index.js
index 110c9715b..30795a0b4 100644
--- a/components/ExhibitionsComponents/Exhibition/ImageAndCaption/index.js
+++ b/components/ExhibitionsComponents/Exhibition/ImageAndCaption/index.js
@@ -2,17 +2,17 @@ import React from "react";
 
 import HeadingRule from "shared/HeadingRule";
 import Button from "shared/Button";
-import { classNames, stylesheet } from "./ImageAndCaption.css";
-import { classNames as utilClassNames } from "css/utils.css";
 
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./ImageAndCaption.scss";
+
 const ImageAndCaption = ({ exhibition, route }) =>
-  <figure className={classNames.wrapper}>
-    <div className={[container, classNames.imageAndCaption].join(" ")}>
-      <p className={classNames.exhibitionTitle}>{exhibition.title}</p>
-      <div className={classNames.imageWrapper}>
+  <figure className={css.wrapper}>
+    <div className={[utils.container, css.imageAndCaption].join(" ")}>
+      <p className={css.exhibitionTitle}>{exhibition.title}</p>
+      <div className={css.imageWrapper}>
         <div
-          className={classNames.image}
+          className={css.image}
           alt={exhibition.title}
           style={{
             backgroundImage: `url(${exhibition.thumbnailUrl})`,
@@ -20,17 +20,17 @@ const ImageAndCaption = ({ exhibition, route }) =>
             backgroundPosition: "50% 25%"
           }}
         />
-        <div className={classNames.overlay}>
-          <div className={classNames.overlayContent}>
-            <h1 className={classNames.exhibitionTitle}>{exhibition.title}</h1>
-            <div className={classNames.headingRule}>
+        <div className={css.overlay}>
+          <div className={css.overlayContent}>
+            <h1 className={css.exhibitionTitle}>{exhibition.title}</h1>
+            <div className={css.headingRule}>
               <HeadingRule color="rgba(255,255,255,0.75)" />
             </div>
             <Button
               type="primary"
               size="large"
               prefetch
-              className={classNames.exploreLink}
+              className={css.exploreLink}
               url={{
                 pathname: "/exhibitions/exhibition/section/subsection",
                 query: Object.assign({}, route.query, {
@@ -49,12 +49,11 @@ const ImageAndCaption = ({ exhibition, route }) =>
           </div>
         </div>
       </div>
-      <figcaption className={classNames.caption}>
-        <span className={classNames.captionLeadIn}>Image: </span>
+      <figcaption className={css.caption}>
+        <span className={css.captionLeadIn}>Image: </span>
         <div dangerouslySetInnerHTML={{ __html: exhibition.caption }} />
       </figcaption>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </figure>;
 
 export default ImageAndCaption;
diff --git a/components/ExhibitionsComponents/ExhibitionSection/Body.js b/components/ExhibitionsComponents/ExhibitionSection/Body.js
index 6b0e62ffc..38151f826 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/Body.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/Body.js
@@ -3,9 +3,9 @@ import React from "react";
 import Sidebar from "./Sidebar";
 import Viewer from "./Viewer";
 import Subheader from "./Subheader";
-import { classNames } from "./ExhibitionSection.css";
-import { classNames as utilClassNames } from "css/utils.css";
-const { container } = utilClassNames;
+
+import utils from "stylesheets/utils.scss";
+import css from "./ExhibitionSection.scss";
 
 class Body extends React.Component {
   state = { isMenuOpen: false };
@@ -19,14 +19,14 @@ class Body extends React.Component {
   render() {
     const { exhibition, section, subsection, route } = this.props;
     return (
-      <div className={[container, classNames.body].join(" ")}>
+      <div className={[utils.container, css.body].join(" ")}>
         <Subheader
           onClickMenuButton={() => this.toggleMenu()}
           section={section}
           subsection={subsection}
           isMenuOpen={this.state.isMenuOpen}
         />
-        <div id="main" role="main" className={classNames.mainContent}>
+        <div id="main" role="main" className={css.mainContent}>
           <Sidebar
             exhibition={exhibition}
             currentSubsection={subsection}
diff --git a/components/ExhibitionsComponents/ExhibitionSection/ExhibitionSection.css b/components/ExhibitionsComponents/ExhibitionSection/ExhibitionSection.scss
similarity index 73%
rename from components/ExhibitionsComponents/ExhibitionSection/ExhibitionSection.css
rename to components/ExhibitionsComponents/ExhibitionSection/ExhibitionSection.scss
index 07502fce1..5bf9f0086 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/ExhibitionSection.css
+++ b/components/ExhibitionsComponents/ExhibitionSection/ExhibitionSection.scss
@@ -1,12 +1,12 @@
-@value linkColor, dimmedTextColor, outlineColor, warmerBackgroundColor, secondaryButtonColor, mobileNavColor, lightLinkColor from "../../../css/colors.css";
-@value smallRem, mediumRem, mediumPlusRem, xLargeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
-@value sidebarWidth: 11rem;
-@value sidebarMargin: 1.25rem;
+$sidebarWidth: 11rem;
+$sidebarMargin: 1.25rem;
 
 .exhibitionView {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .exhibitionsLinkAndTitle {
@@ -14,33 +14,33 @@
 }
 
 .exhibitionsLink, .exhibitionsLink:visited {
-  color: lightLinkColor;
+  color: $lightLinkColor;
   text-decoration: underline;
   font-weight: 600;
   text-transform: uppercase;
   margin-bottom: 3px;
   display: inline-block;
 
-  @media (min-width: smallRem) {
-    color: linkColor;
+  @media (min-width: $smallRem) {
+    color: $linkColor;
     text-decoration: none;
     font-size: 1rem;
   }
 }
 
 .exhibitionTitle {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
-  margin-top: .5rem;
+  margin-top: 0.5rem;
   font-size: 1.5rem;
   color: white;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.5rem;
     color: black;
   }
 
-  @media (min-width: mediumPlusRem) {
+  @media (min-width: $mediumPlusRem) {
     font-size: 2.15rem;
   }
 }
@@ -53,14 +53,14 @@
   display: flex;
   border-bottom: 0.05rem solid black;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
 }
 
 .openMenu .menuHeader {
   display: flex;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
 }
@@ -76,8 +76,8 @@
   align-items: center;
   margin-right: 0.75rem;
   border-radius: 0;
-  
-  @media (min-width: mediumRem) {
+
+  @media (min-width: $mediumRem) {
     display: none;
   }
 }
@@ -102,7 +102,7 @@
 
 .menuHeader {
   display: none;
-  background-color: linkColor;
+  background-color: $linkColor;
 }
 
 .closeMenuButtonIcon {
@@ -117,40 +117,39 @@
 }
 
 .sidebar {
-  width: sidebarWidth;
-  margin-right: sidebarMargin;
+  width: $sidebarWidth;
+  margin-right: $sidebarMargin;
   display: block;
   max-height: 0;
   transition: all 0.2s ease-in-out;
-  
+
   & a:hover {
     text-decoration: underline;
   }
-  
-  @media (max-width: smallRem) {
+
+  @media (max-width: $smallRem) {
     padding: 0 1rem;
     width: auto;
     visibility: hidden;
   }
-  
+
   &.overlayActive {
     max-height: 40rem;
     padding: 1rem;
     visibility: visible;
 
-    @media (max-width: smallRem) {
+    @media (max-width: $smallRem) {
       display: block;
-      background-color: warmerBackgroundColor;
+      background-color: $warmerBackgroundColor;
     }
   }
 }
 
-
 .sidebarSections {
   padding-bottom: 20px;
   margin-bottom: 13px;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     padding-bottom: 0;
     margin-bottom: 0;
   }
@@ -172,7 +171,7 @@
   position: relative;
 
   &, & a {
-    color: dimmedTextColor;
+    color: $dimmedTextColor;
   }
 }
 
@@ -186,7 +185,7 @@
   display: block;
   height: 5px;
   width: 5px;
-  background-color: linkColor;
+  background-color: $linkColor;
   border-radius: 50%;
   position: absolute;
   top: 6px;
@@ -201,18 +200,18 @@
   display: flex;
   padding: 0 0 3rem;
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     flex-direction: column;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 0 1rem 1.5rem;
     margin-top: 1.5rem;
     margin-left: auto;
     margin-right: auto;
   }
 
-  @media (min-width: xLargeRem) {
+  @media (min-width: $xLargeRem) {
     max-width: 80rem;
     padding: 0;
   }
@@ -223,7 +222,7 @@
   flex-direction: row;
   width: 100%;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     flex-direction: column;
   }
 }
@@ -241,15 +240,15 @@
   display: flex;
   border-bottom: 2px solid rgba(0, 0, 0, 0.1);
   align-items: center;
-  background-color: mobileNavColor;
+  background-color: $mobileNavColor;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-bottom: 1rem;
     padding-top: 1rem;
     background-color: inherit;
   }
 
-  @media (min-width: xLargeRem) {
+  @media (min-width: $xLargeRem) {
     max-width: 80rem;
   }
 }
@@ -262,7 +261,7 @@
 
 .closeExhibitionText {
   display: none;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline;
   }
 }
@@ -278,7 +277,7 @@
   width: 22px;
   margin-right: 0.5rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     height: 19px;
     width: 19px;
     background-color: black;
@@ -286,8 +285,8 @@
 }
 
 .closeIconX {
-  fill: mobileNavColor;
-  @media (min-width: smallRem) {
+  fill: $mobileNavColor;
+  @media (min-width: $smallRem) {
     fill: white;
   }
 }
@@ -297,11 +296,11 @@
   align-items: center;
   padding: 0;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 1rem;
   }
 
-  @media (min-width: xLargeRem) {
+  @media (min-width: $xLargeRem) {
     max-width: 80rem;
   }
 }
@@ -312,7 +311,7 @@
   align-self: flex-end;
   width: 100%;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-left: auto;
     margin-top: 1rem;
     width: 21rem;
@@ -323,14 +322,14 @@
   display: none;
   cursor: pointer;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline-block;
     width: 200px;
     height: 24px;
     opacity: 0.5;
   }
 
-  @media (min-width: mediumPlusRem) {
+  @media (min-width: $mediumPlusRem) {
     width: 275px;
     height: 33px;
   }
@@ -348,7 +347,7 @@
     text-decoration: none;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 0.75rem 0;
     font-size: 1.25rem;
     border-radius: 2px;
@@ -363,7 +362,7 @@
 .nextSubsectionTitle {
   display: none;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline-block;
     font-size: 0.875rem;
     position: absolute;
@@ -385,13 +384,13 @@
   background-color: rgba(0, 0, 0, 0.1);
   color: black;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 18px;
   }
 }
 
 .nextButton, .nextButton:visited {
-  background-color: linkColor;
+  background-color: $linkColor;
   color: white;
 }
 
@@ -410,7 +409,7 @@
   width: 7px;
   top: 1px;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     height: 14px;
     width: 8px;
   }
@@ -425,7 +424,7 @@
   flex-direction: column;
   font-size: 0.875rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.25rem;
     flex-direction: row;
     align-items: center;
@@ -437,15 +436,15 @@
   font-weight: 600;
   margin: 0 0.5rem 0.5rem;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     display: none;
   }
 }
 
 .viewer {
-  width: calc(100% - sidebarWidth - sidebarMargin);
+  width: calc(100% - #{$sidebarWidth} - #{$sidebarMargin});
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     width: 100%;
   }
 }
@@ -454,7 +453,7 @@
   display: flex;
   flex-direction: column;
 
-  @media (min-width: mediumPlusRem) {
+  @media (min-width: $mediumPlusRem) {
     flex-direction: row;
   }
 }
@@ -462,7 +461,7 @@
 .mediaAndCaption {
   flex: 2;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 1.25rem;
   }
 }
@@ -471,23 +470,23 @@
   flex: 1;
   font-size: 0.875rem;
   padding: 0 1rem;
-  font-family: serifFont;
+  font-family: $serifFont;
 
-  @media (min-width: smallRem) {
-    font-size: .95rem;
+  @media (min-width: $smallRem) {
+    font-size: 0.95rem;
     padding: 0;
   }
 
   & h1, & h2 {
     font-size: 1.25rem;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
 
   & p {
-    margin-bottom: .875rem;
+    margin-bottom: 0.875rem;
 
-    @media (min-width: smallRem) {
-      margin-bottom: .95rem;
+    @media (min-width: $smallRem) {
+      margin-bottom: 0.95rem;
     }
   }
 }
@@ -500,14 +499,14 @@
   margin-bottom: 0.5rem;
 
   &:focus {
-    outline: 0.25rem solid outlineColor;
+    outline: 0.25rem solid $outlineColor;
   }
 
   & :global(#openseadragon1) {
     height: 15rem;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-bottom: 1.25rem;
 
     & :global(#openseadragon1) {
@@ -522,9 +521,9 @@
   max-width: 90%;
   margin: 0 1rem 0.75rem;
   padding-left: 0.5rem;
-  border-left: 1px solid #DE630B;
+  border-left: 1px solid #de630b;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin: 0 0 0.75rem;
     padding-left: 0;
     border-left: 0;
@@ -536,7 +535,7 @@
   justify-content: center;
   margin-bottom: 1rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     justify-content: flex-start;
   }
 }
@@ -549,7 +548,7 @@
   display: block;
   margin-right: 0.25rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: 3.25rem;
     height: 3.25rem;
     border-radius: 0;
@@ -561,7 +560,7 @@
 .itemLink img {
   display: none;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: block;
     width: 100%;
     height: 100%;
@@ -569,17 +568,17 @@
 }
 
 .activeItemLink {
-  background-color: linkColor;
+  background-color: $linkColor;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     & .defaultItemImage {
-      background-color: linkColor;
+      background-color: $linkColor;
     }
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     background-color: inherit;
-    border: 0.25rem solid secondaryButtonColor;
+    border: 0.25rem solid $secondaryButtonColor;
     position: relative;
   }
 }
@@ -590,9 +589,9 @@
   display: block;
   width: 0;
   height: 0;
-  border-left: .8rem solid transparent;
-  border-right: .8rem solid transparent;
-  border-bottom: .65rem solid secondaryButtonColor;
+  border-left: 0.8rem solid transparent;
+  border-right: 0.8rem solid transparent;
+  border-bottom: 0.65rem solid $secondaryButtonColor;
   top: -0.8rem;
   left: 50%;
   transform: translateX(-50%);
@@ -605,7 +604,7 @@
     height: 50%;
   }
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     height: 100%;
     border-radius: 50%;
   }
@@ -615,7 +614,7 @@
   display: inline-block;
   margin-bottom: 0.5rem;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     padding-left: 1rem;
   }
 }
@@ -632,7 +631,7 @@
     opacity: 0.5;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
 }
diff --git a/components/ExhibitionsComponents/ExhibitionSection/FooterNav.js b/components/ExhibitionsComponents/ExhibitionSection/FooterNav.js
index b0b128e25..35550b223 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/FooterNav.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/FooterNav.js
@@ -3,10 +3,8 @@ import Link from "next/link";
 
 import DPLALogoWide from "../../../static/images/dpla-logo-black.svg";
 
-import { classNames } from "./ExhibitionSection.css";
-import { classNames as utilClassNames } from "css/utils.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./ExhibitionSection.scss";
 
 const chevron = "/static/images/chevron-thick-white.svg";
 const blackChevron = "/static/images/chevron-thick-black.svg";
@@ -27,39 +25,27 @@ const NavButton = ({ queryParams, route, nextOrPrevious = "next" }) =>
       >
         <a
           className={
-            nextOrPrevious === "next"
-              ? classNames.nextButton
-              : classNames.prevButton
+            nextOrPrevious === "next" ? css.nextButton : css.prevButton
           }
         >
           {nextOrPrevious === "previous" &&
-            <img
-              src={blackChevron}
-              className={classNames.previousChevron}
-              alt=""
-            />}
+            <img src={blackChevron} className={css.previousChevron} alt="" />}
           <span>{nextOrPrevious === "next" ? "Next" : "Previous"}</span>
           {nextOrPrevious === "next" &&
-            <img src={chevron} className={classNames.nextChevron} alt="" />}
+            <img src={chevron} className={css.nextChevron} alt="" />}
         </a>
       </Link>
     : <span
         className={[
-          nextOrPrevious === "next"
-            ? classNames.nextButton
-            : classNames.prevButton,
-          classNames.disabledButton
+          nextOrPrevious === "next" ? css.nextButton : css.prevButton,
+          css.disabledButton
         ].join(" ")}
       >
         {nextOrPrevious === "previous" &&
-          <img
-            src={blackChevron}
-            className={classNames.previousChevron}
-            alt=""
-          />}
+          <img src={blackChevron} className={css.previousChevron} alt="" />}
         <span>{nextOrPrevious === "next" ? "Next" : "Previous"}</span>
         {nextOrPrevious === "next" &&
-          <img src={chevron} className={classNames.nextChevron} alt="" />}
+          <img src={chevron} className={css.nextChevron} alt="" />}
       </span>;
 
 const FooterNav = ({
@@ -69,20 +55,20 @@ const FooterNav = ({
   previousQueryParams,
   nextSubsectionTitle
 }) =>
-  <div className={classNames.footerWrapper}>
-    <div className={[container, classNames.footerNav].join(" ")}>
+  <div className={css.footerWrapper}>
+    <div className={[utils.container, css.footerNav].join(" ")}>
       <Link prefetch href="/">
-        <DPLALogoWide className={classNames.dplaLogo} />
+        <DPLALogoWide className={css.dplaLogo} />
       </Link>
-      <div className={classNames.navButtons}>
+      <div className={css.navButtons}>
         <NavButton
           route={route}
           queryParams={previousQueryParams}
           nextOrPrevious="previous"
         />
-        <div className={classNames.nextButtonAndTitleWrapper}>
+        <div className={css.nextButtonAndTitleWrapper}>
           {nextSubsectionTitle &&
-            <div className={classNames.nextSubsectionTitle}>
+            <div className={css.nextSubsectionTitle}>
               {nextSubsectionTitle}
             </div>}
           <NavButton
diff --git a/components/ExhibitionsComponents/ExhibitionSection/GaExhibitWrapper.js b/components/ExhibitionsComponents/ExhibitionSection/GaExhibitWrapper.js
index c03c8f43d..48bcfc4c5 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/GaExhibitWrapper.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/GaExhibitWrapper.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactGA from "react-ga";
 import Router from "next/router";
+
 import { gaTrackingId } from "constants/env";
 import {
   initGa,
diff --git a/components/ExhibitionsComponents/ExhibitionSection/Header.js b/components/ExhibitionsComponents/ExhibitionSection/Header.js
index 16c2ab65e..d12b1d123 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/Header.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/Header.js
@@ -1,17 +1,16 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames } from "./ExhibitionSection.css";
-import { classNames as utilClassNames } from "css/utils.css";
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./ExhibitionSection.scss";
 
 const Header = ({ title, route }) =>
-  <div className={[classNames.header, container].join(" ")}>
-    <div className={classNames.exhibitionsLinkAndTitle}>
+  <div className={[css.header, utils.container].join(" ")}>
+    <div className={css.exhibitionsLinkAndTitle}>
       <Link prefetch href="/exhibitions">
-        <a className={classNames.exhibitionsLink}>Exhibitions</a>
+        <a className={css.exhibitionsLink}>Exhibitions</a>
       </Link>
-      <h1 className={classNames.exhibitionTitle}>
+      <h1 className={css.exhibitionTitle}>
         {title}
       </h1>
     </div>
@@ -20,9 +19,9 @@ const Header = ({ title, route }) =>
       href={`/exhibitions/exhibition?exhibition=${route.query.exhibition}`}
       as={`/exhibitions/${route.query.exhibition}`}
     >
-      <a className={`hover-underline ${classNames.closeExhibition}`}>
+      <a className={`hover-underline ${css.closeExhibition}`}>
         <svg
-          className={classNames.closeIcon}
+          className={css.closeIcon}
           width="18"
           height="18"
           viewBox="0 0 18 18"
@@ -31,12 +30,12 @@ const Header = ({ title, route }) =>
           <g fill="none" fillRule="evenodd">
             <path d="M-9-9h36v36H-9z" />
             <path
-              className={classNames.closeIconX}
+              className={css.closeIconX}
               d="M11.1869671 9.0007313l6.6321036-6.6336231c.241215-.2405136.241215-.6305716 0-.8710852L16.5043505.1805657C16.3886778.0648899 16.2320966 0 16.0684517 0c-.1636448 0-.3202116.0648899-.4358987.1805657L8.9997271 6.8134666 2.3669012.1805657c-.230634-.23134078-.6404416-.23134078-.8710756 0L.18038312 1.496023c-.24051083.2405136-.24051083.6305716 0 .8710852L6.8132094 9.0007313.18038312 15.6329099c-.24051083.2405136-.24051083.6305716 0 .8717894l1.31544248 1.314735C1.6107941 17.9351083 1.7680795 18 1.9317247 18c.1629298 0 .3202116-.0648917.4351946-.1805657l6.6328258-6.6329009 6.6328259 6.6329009c.1156727.115674.2722539.1805657.4358988.1805657.1636448 0 .3202116-.0648917.4358987-.1805657l1.3147202-1.314735c.2412151-.2412178.2412151-.6312758 0-.8717894l-6.6321216-6.6321786z"
             />
           </g>
         </svg>
-        <span className={classNames.closeExhibitionText}>Close Exhibition</span>
+        <span className={css.closeExhibitionText}>Close Exhibition</span>
       </a>
     </Link>
   </div>;
diff --git a/components/ExhibitionsComponents/ExhibitionSection/Sidebar.js b/components/ExhibitionsComponents/ExhibitionSection/Sidebar.js
index 09ed4983a..13796dd6a 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/Sidebar.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/Sidebar.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames } from "./ExhibitionSection.css";
+import css from "./ExhibitionSection.scss";
 
 const Sidebar = ({
   exhibition,
@@ -9,12 +9,8 @@ const Sidebar = ({
   currentSection,
   isShowing
 }) =>
-  <div
-    className={`${classNames.sidebar} ${isShowing
-      ? classNames.overlayActive
-      : ""}`}
-  >
-    <ul className={classNames.sidebarSections}>
+  <div className={`${css.sidebar} ${isShowing ? css.overlayActive : ""}`}>
+    <ul className={css.sidebarSections}>
       {exhibition.sections.map(section =>
         <li key={section.id}>
           <Link
@@ -27,8 +23,8 @@ const Sidebar = ({
           >
             <a
               className={[
-                classNames.sectionTitle,
-                section.id === currentSection.id && classNames.active
+                css.sectionTitle,
+                section.id === currentSection.id && css.active
               ].join(" ")}
             >
               {section.title}
@@ -40,8 +36,8 @@ const Sidebar = ({
                 <li
                   key={subsection.id}
                   className={[
-                    classNames.subsectionTitle,
-                    subsection.id === currentSubsection.id && classNames.active
+                    css.subsectionTitle,
+                    subsection.id === currentSubsection.id && css.active
                   ].join(" ")}
                 >
                   <Link
diff --git a/components/ExhibitionsComponents/ExhibitionSection/Subheader.js b/components/ExhibitionsComponents/ExhibitionSection/Subheader.js
index 5e03e1c6c..5262e5d16 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/Subheader.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/Subheader.js
@@ -1,20 +1,21 @@
 import React from "react";
 
-import { classNames } from "./ExhibitionSection.css";
+import css from "./ExhibitionSection.scss";
+
 const menuButtonIcon = "/static/images/menu-black.svg";
 const closeIcon = "/static/images/close-white.svg";
 
 const Subheader = ({ section, subsection, onClickMenuButton, isMenuOpen }) =>
-  <div className={`${isMenuOpen ? classNames.openMenu : ""}`}>
-    <div className={classNames.menuButtonAndBreadcrumbs}>
+  <div className={`${isMenuOpen ? css.openMenu : ""}`}>
+    <div className={css.menuButtonAndBreadcrumbs}>
       <button
         onClick={onClickMenuButton}
-        className={classNames.menuButton}
+        className={css.menuButton}
         aria-expanded={isMenuOpen}
       >
         {isMenuOpen ? "Hide" : "Show"}<br />Menu
       </button>
-      <h2 className={classNames.breadcrumbSubsection}>
+      <h2 className={css.breadcrumbSubsection}>
         {subsection.title}
       </h2>
     </div>
diff --git a/components/ExhibitionsComponents/ExhibitionSection/Viewer.js b/components/ExhibitionsComponents/ExhibitionSection/Viewer.js
index 5580f8a4c..9594a61be 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/Viewer.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/Viewer.js
@@ -1,17 +1,19 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames } from "./ExhibitionSection.css";
+import ItemImage from "components/ItemComponents/Content/ItemImage";
 import {
   ZoomableImageViewer,
   VideoPlayer,
   AudioPlayer,
   PDFViewer
 } from "components/shared/mediaViewers";
+
 import { ITEM_TYPES } from "constants/exhibitions";
 import { resourceTypes } from "constants/site";
 import { getDefaultThumbnail, getDplaItemIdFromExhibit } from "utilFunctions";
-import ItemImage from "components/ItemComponents/Content/ItemImage";
+
+import css from "./ExhibitionSection.scss";
 
 const chevron = "/static/images/chevron-thick-black.svg";
 
@@ -73,7 +75,7 @@ const ItemLink = ({
       ? route.query.subsection
       : ""}?item=${itemId}`}
   >
-    <a className={[classNames.itemLink, className].join(" ")}>
+    <a className={[css.itemLink, className].join(" ")}>
       <ItemImage
         type={getFileType(fileType, originalUrl)}
         title="Show item in viewer"
@@ -81,7 +83,7 @@ const ItemLink = ({
           thumbnailUrl ||
           getDefaultThumbnail(getFileType(fileType, originalUrl))
         }
-        defaultImageClass={classNames.defaultItemImage}
+        defaultImageClass={css.defaultItemImage}
         useDefaultImage={!thumbnailUrl}
       />
     </a>
@@ -102,13 +104,13 @@ const Viewer = ({ exhibition, section, subsection, route }) => {
   const itemId = getDplaItemIdFromExhibit(activePage.itemJson);
 
   return (
-    <div className={classNames.viewer}>
-      <h2 className={classNames.titleSubsection}>
+    <div className={css.viewer}>
+      <h2 className={css.titleSubsection}>
         {subsection.title}
       </h2>
-      <div className={classNames.viewerContent}>
-        <div className={classNames.mediaAndCaption}>
-          <div className={classNames.mainMedia}>
+      <div className={css.viewerContent}>
+        <div className={css.mediaAndCaption}>
+          <div className={css.mainMedia}>
             {previousPage &&
               <Link
                 prefetch
@@ -121,11 +123,11 @@ const Viewer = ({ exhibition, section, subsection, route }) => {
                 as={`/exhibitions/${route.query.exhibition}/${route.query
                   .section}/${route.query.subsection}?item=${previousPage.id}`}
               >
-                <a className={classNames.previousItemButton}>
+                <a className={css.previousItemButton}>
                   <img
                     src={chevron}
                     alt=""
-                    className={classNames.previousItemChevron}
+                    className={css.previousItemChevron}
                   />
                 </a>
               </Link>}
@@ -146,22 +148,18 @@ const Viewer = ({ exhibition, section, subsection, route }) => {
                 as={`/exhibitions/${route.query.exhibition}/${route.query
                   .section}/${route.query.subsection}?item=${nextPage.id}`}
               >
-                <a className={classNames.nextItemButton}>
-                  <img
-                    src={chevron}
-                    alt=""
-                    className={classNames.nextItemChevron}
-                  />
+                <a className={css.nextItemButton}>
+                  <img src={chevron} alt="" className={css.nextItemChevron} />
                 </a>
               </Link>}
           </div>
-          <ul className={classNames.itemLinks}>
+          <ul className={css.itemLinks}>
             {subsection.page_blocks.map(block =>
               <li key={block.id}>
                 <ItemLink
                   fileType={block.type}
                   route={route}
-                  className={block.isActive ? classNames.activeItemLink : ""}
+                  className={block.isActive ? css.activeItemLink : ""}
                   itemId={block.id}
                   thumbnailUrl={block.thumbnailUrl}
                   originalUrl={block.originalUrl}
@@ -175,10 +173,10 @@ const Viewer = ({ exhibition, section, subsection, route }) => {
               as={`/item/${itemId}`}
               href={`/item?itemId=${itemId}`}
             >
-              <a className={classNames.viewItemLink}>View item information</a>
+              <a className={css.viewItemLink}>View item information</a>
             </Link>}
           <div
-            className={classNames.caption}
+            className={css.caption}
             dangerouslySetInnerHTML={{
               __html: activePage.attachments[0].caption
             }}
@@ -186,7 +184,7 @@ const Viewer = ({ exhibition, section, subsection, route }) => {
         </div>
         {text &&
           <div
-            className={classNames.text}
+            className={css.text}
             dangerouslySetInnerHTML={{ __html: text }}
           />}
       </div>
diff --git a/components/ExhibitionsComponents/ExhibitionSection/index.js b/components/ExhibitionsComponents/ExhibitionSection/index.js
index 5ad52c5e2..c8368cb79 100644
--- a/components/ExhibitionsComponents/ExhibitionSection/index.js
+++ b/components/ExhibitionsComponents/ExhibitionSection/index.js
@@ -1,12 +1,14 @@
 import React from "react";
 import Helmet from "react-helmet";
-import { classNames, stylesheet } from "./ExhibitionSection.css";
+
 import Header from "./Header";
 import Body from "./Body";
 import FooterNav from "./FooterNav";
 import FeedbackForm from "components/FeedbackForm";
 import GaExhibitWrapper from "./GaExhibitWrapper";
 
+import css from "./ExhibitionSection.scss";
+
 const ExhibitionView = ({
   exhibition,
   section,
@@ -16,7 +18,7 @@ const ExhibitionView = ({
   nextSubsectionTitle,
   previousQueryParams
 }) =>
-  <div className={classNames.exhibitionView}>
+  <div className={css.exhibitionView}>
     <Helmet htmlAttributes={{ lang: "en" }} />
     <Header title={exhibition.title} route={route} />
     <Body
@@ -33,7 +35,6 @@ const ExhibitionView = ({
       nextSubsectionTitle={nextSubsectionTitle}
     />
     <FeedbackForm route={route} />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default GaExhibitWrapper(ExhibitionView);
diff --git a/components/ExhibitionsComponents/Footer/Footer.css b/components/ExhibitionsComponents/Footer/Footer.scss
similarity index 57%
rename from components/ExhibitionsComponents/Footer/Footer.css
rename to components/ExhibitionsComponents/Footer/Footer.scss
index 90c77561f..8a95f9f28 100644
--- a/components/ExhibitionsComponents/Footer/Footer.css
+++ b/components/ExhibitionsComponents/Footer/Footer.scss
@@ -1,8 +1,8 @@
-@value warmerBackgroundColor, linkColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .wrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   padding: 1.5rem 0;
 }
 
@@ -12,7 +12,7 @@
   justify-content: space-between;
   color: rgba(0, 0, 0, 0.75);
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     flex-direction: column;
 
     & p {
@@ -21,7 +21,7 @@
   }
 }
 
- .footerText {
+.footerText {
   max-width: 450px;
   font-size: 0.875rem;
   line-height: 1;
diff --git a/components/ExhibitionsComponents/Footer/index.js b/components/ExhibitionsComponents/Footer/index.js
index 8e8a6a303..90c70e542 100644
--- a/components/ExhibitionsComponents/Footer/index.js
+++ b/components/ExhibitionsComponents/Footer/index.js
@@ -1,18 +1,17 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./Footer.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import css from "./Footer.scss";
 
-const { container } = utilClassNames;
 const OtherInfo = () =>
-  <div className={classNames.wrapper}>
-    <div className={`${container} ${classNames.otherInfo}`}>
-      <p className={classNames.footerText}>
+  <div className={css.wrapper}>
+    <div className={`${utils.container} ${css.otherInfo}`}>
+      <p className={css.footerText}>
         Exhibitions curated by DPLA staff, DPLA partner institutions, and
         graduate students in library
         and information science and public history.
       </p>
-      <p className={classNames.footerText}>
+      <p className={css.footerText}>
         <span>
           Feedback? Interested in curating an exhibition for DPLA? Contact us
           at&nbsp;
@@ -22,7 +21,6 @@ const OtherInfo = () =>
         </a>.
       </p>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default OtherInfo;
diff --git a/components/FeedbackForm/FeedbackForm.css b/components/FeedbackForm/FeedbackForm.scss
similarity index 66%
rename from components/FeedbackForm/FeedbackForm.css
rename to components/FeedbackForm/FeedbackForm.scss
index 0bbd3354b..b68510a2f 100644
--- a/components/FeedbackForm/FeedbackForm.css
+++ b/components/FeedbackForm/FeedbackForm.scss
@@ -1,13 +1,13 @@
-@value outlineColor, radioButtonColor, linkColor, formLabelColor, errorColor, warmerBackgroundColor from "../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../css/breakpoints.css";
-@value monoFont, serifFont, sansFont from "../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
-.feedbackButton {
+.feedbackButton, .feedbackButton:visited {
   position: fixed;
   left: 0.5rem;
   bottom: 0.5rem;
   cursor: pointer;
-  background-color: linkColor;
+  background-color: $linkColor;
   color: white;
   padding: 0.5rem 0.75rem;
   border: 0.125rem solid white;
@@ -18,16 +18,16 @@
   }
 
   &:hover {
-    color: linkColor;
+    color: $linkColor;
     background-color: white;
-    border-color: linkColor;
+    border-color: $linkColor;
     text-decoration: none;
   }
 }
 
 .feedbackModal {
   display: none;
-  
+
   &.open {
     display: block;
     position: fixed;
@@ -45,7 +45,7 @@
 }
 
 .feedbackForm {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   padding: 1rem;
   position: fixed;
   top: 50%;
@@ -54,9 +54,9 @@
   margin-left: -10rem;
   margin-top: -10rem;
   z-index: 999;
-  box-shadow: 0 0 20px rgba(0,0,0, 0.5);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     top: 1rem;
     left: 1rem;
     bottom: 1rem;
@@ -78,7 +78,7 @@
     position: relative;
   }
 
-  & input[type=radio] {
+  & input[type="radio"] {
     position: absolute;
     opacity: 0;
     z-index: -1;
@@ -94,8 +94,8 @@
     cursor: pointer;
   }
 
-  & input[type=radio]:focus + label {
-    outline: .25rem solid outlineColor;
+  & input[type="radio"]:focus + label {
+    outline: 0.25rem solid $outlineColor;
   }
 
   & label:before {
@@ -107,23 +107,23 @@
     top: 1rem;
     margin-left: -0.75rem;
     margin-top: -0.5rem;
-    width: 1.0rem;
-    height: 1.0rem;
-    background-color: radioButtonColor;
+    width: 1rem;
+    height: 1rem;
+    background-color: $radioButtonColor;
     border: 0.2rem solid white;
   }
 
-  & input[type=radio]:checked + label:before {
-    background-color: linkColor;
+  & input[type="radio"]:checked + label:before {
+    background-color: $linkColor;
   }
 
-  & input[type=radio]:checked + label {
-    background-color: radioButtonColor;
+  & input[type="radio"]:checked + label {
+    background-color: $radioButtonColor;
   }
 
-  & input[type=email], & input[type=text] {
+  & input[type="email"], & input[type="text"] {
     width: 100%;
-    border: 0.075rem solid formLabelColor;
+    border: 0.075rem solid $formLabelColor;
     padding: 0.5rem;
     border-radius: 0.25rem;
     margin-bottom: 1rem;
@@ -133,11 +133,10 @@
     resize: none;
     width: 100%;
     height: 5rem;
-    border: 0.075rem solid formLabelColor;
+    border: 0.075rem solid $formLabelColor;
     padding: 0.5rem;
     border-radius: 0.25rem;
   }
-
 }
 
 .sendCancelButtons {
@@ -150,7 +149,6 @@
   margin: 0.25rem 0 1rem;
 }
 
-
 .thankYou {
   margin: 1rem 0;
-}
\ No newline at end of file
+}
diff --git a/components/FeedbackForm/index.js b/components/FeedbackForm/index.js
index b32150d0b..382c5ff8d 100644
--- a/components/FeedbackForm/index.js
+++ b/components/FeedbackForm/index.js
@@ -4,7 +4,7 @@ import AriaModal from "react-aria-modal";
 
 import Button from "components/shared/Button";
 
-import { classNames, stylesheet } from "./FeedbackForm.css";
+import css from "./FeedbackForm.scss";
 
 class FeedbackForm extends React.Component {
   state = {
@@ -190,7 +190,7 @@ class FeedbackForm extends React.Component {
           getApplicationNode={this.getApplicationNode}
         >
           <form
-            className={classNames.feedbackForm}
+            className={css.feedbackForm}
             onSubmit={this.handleSubmit}
             key={this.state.timestamp}
             aria-live="assertive"
@@ -199,12 +199,12 @@ class FeedbackForm extends React.Component {
               type="checkbox"
               name="i_prefer_usps_mail"
               value="1"
-              className={classNames.miel}
+              className={css.miel}
               tabIndex="-1"
               autoComplete="off"
             />
             <input name="frompage" value={url} type="hidden" />
-            <h2 className={classNames.title}>
+            <h2 className={css.title}>
               {step === 1 && <span>Feedback</span>}
               {step === 2 && <span>Thank you!</span>}
             </h2>
@@ -258,7 +258,7 @@ class FeedbackForm extends React.Component {
               <div
                 id="feedback-counter"
                 aria-live="polite"
-                className={classNames.characterCount}
+                className={css.characterCount}
               >
                 {characters} characters remaining
               </div>}
@@ -274,11 +274,11 @@ class FeedbackForm extends React.Component {
               />}
 
             {step === 2 &&
-              <p className={classNames.thankYou}>
+              <p className={css.thankYou}>
                 Thank you for your feedback.
               </p>}
 
-            <div className={classNames.sendCancelButtons}>
+            <div className={css.sendCancelButtons}>
               {!isSending &&
                 step === 1 &&
                 <Button type="primary" {...buttonProps}>
@@ -287,7 +287,7 @@ class FeedbackForm extends React.Component {
               {isSending &&
                 <Button
                   type="secondary"
-                  className={classNames.disabledButton}
+                  className={css.disabledButton}
                   live="assertive"
                 >
                   Sending…
@@ -306,23 +306,16 @@ class FeedbackForm extends React.Component {
         </AriaModal>
       : false;
     return (
-      <div className={classNames.feedbackComponent}>
-        <a
-          href="#"
-          className={classNames.feedbackButton}
-          onClick={this.openForm}
-        >
+      <div className={css.feedbackComponent}>
+        <a href="#" className={css.feedbackButton} onClick={this.openForm}>
           Feedback
         </a>
         <div
           role="dialog"
-          className={`${classNames.feedbackModal} ${modalActive
-            ? classNames.open
-            : ""}`}
+          className={`${css.feedbackModal} ${modalActive ? css.open : ""}`}
         >
           {modal}
         </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/HomePageComponents/DPLAUsers/DPLAUsers.css b/components/HomePageComponents/DPLAUsers/DPLAUsers.scss
similarity index 62%
rename from components/HomePageComponents/DPLAUsers/DPLAUsers.css
rename to components/HomePageComponents/DPLAUsers/DPLAUsers.scss
index 4ad2830dc..348c54b2e 100644
--- a/components/HomePageComponents/DPLAUsers/DPLAUsers.css
+++ b/components/HomePageComponents/DPLAUsers/DPLAUsers.scss
@@ -1,6 +1,6 @@
-@value black80 from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   background-color: white;
@@ -10,28 +10,28 @@
   margin: 0 auto;
   padding: 2rem 1rem 0;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-top: 3rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 4rem 0;
     max-width: 70em;
   }
 }
 
 .header {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-style: italic;
   font-size: 1.5rem;
   text-align: center;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 2rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 2.25rem;
   }
 }
@@ -45,17 +45,17 @@
   height: 100%;
   text-align: center;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 2rem 1rem;
   }
 }
 
 .itemHeader {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-style: italic;
   font-size: 1.25rem;
-  margin: 1rem 0 .5rem;
+  margin: 1rem 0 0.5rem;
 }
 
 .itemImg {
@@ -67,22 +67,22 @@
   text-align: center;
   margin-top: 1rem;
   padding-bottom: 2rem;
-  color: black80;
+  color: $black80;
 
   & p {
     max-width: 80%;
     margin: 0 auto;
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       font-size: 1.25rem;
     }
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       max-width: 60%;
     }
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 2rem;
   }
 }
@@ -95,7 +95,7 @@
     text-decoration: none;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 2.5rem;
   }
 }
diff --git a/components/HomePageComponents/DPLAUsers/index.js b/components/HomePageComponents/DPLAUsers/index.js
index 217e0096b..e81061e5c 100644
--- a/components/HomePageComponents/DPLAUsers/index.js
+++ b/components/HomePageComponents/DPLAUsers/index.js
@@ -3,24 +3,25 @@ import React from "react";
 import GuideLink from "components/shared/GuideLink";
 import HeadingRule from "components/shared/HeadingRule";
 import Button from "components/shared/Button";
-import { stylesheet, classNames } from "./DPLAUsers.css";
+
+import css from "./DPLAUsers.scss";
 
 const DPLAUsers = ({ guides }) =>
-  <div className={classNames.wrapper}>
-    <div className={`${classNames.DPLAUsers} site-max-width`}>
-      <h2 className={classNames.header}>How can I use DPLA?</h2>
+  <div className={css.wrapper}>
+    <div className={`${css.DPLAUsers} site-max-width`}>
+      <h2 className={css.header}>How can I use DPLA?</h2>
       <HeadingRule />
       <div className="row">
         {guides.map(guide =>
           <div
-            className={`${classNames.itemColumn} col-xs-12 col-sm-6 col-lg-3`}
+            className={`${css.itemColumn} col-xs-12 col-sm-6 col-lg-3`}
             key={guide.slug}
           >
             <GuideLink guide={guide} />
           </div>
         )}
       </div>
-      <div className={classNames.caption}>
+      <div className={css.caption}>
         <p>
           If you’re new to DPLA, these research guides will give you a head
           start using our site. The guides reflect a few key activities that
@@ -31,14 +32,13 @@ const DPLAUsers = ({ guides }) =>
           type="secondary"
           size="large"
           prefetch
-          className={classNames.captionButton}
+          className={css.captionButton}
           url={"/guides"}
         >
           View all user guides
         </Button>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default DPLAUsers;
diff --git a/components/HomePageComponents/HomeHero/HomeHero.css b/components/HomePageComponents/HomeHero/HomeHero.scss
similarity index 71%
rename from components/HomePageComponents/HomeHero/HomeHero.css
rename to components/HomePageComponents/HomeHero/HomeHero.scss
index b7405829d..8a83371eb 100644
--- a/components/HomePageComponents/HomeHero/HomeHero.css
+++ b/components/HomePageComponents/HomeHero/HomeHero.scss
@@ -1,6 +1,6 @@
-@value linkColor, secondaryButtonColor, mobileNavColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont, sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   background-color: rgb(47, 74, 87);
@@ -12,7 +12,7 @@
     padding-bottom: 7rem; /* adds 5rem to allow for overlapping feature */
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding-top: 2rem;
   }
 }
@@ -24,18 +24,18 @@
   padding: 1rem;
   margin: 0 auto;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: flex;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 0;
   }
 }
 
 .dplaLogo {
   width: 24rem;
-  background: url("static/images/dpla-logo.svg") no-repeat 0 50%;
+  background: url("/static/images/dpla-logo.svg") no-repeat 0 50%;
 
   & h1 {
     margin-left: -1000rem;
@@ -47,28 +47,28 @@
   padding: 2rem 1rem 3rem;
   max-width: 44rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 4rem 0;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 4rem 0;
   }
 }
 
 .headline {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-size: 1.5625rem;
   font-weight: normal;
   line-height: 1.25;
   padding: 0;
   text-align: center;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.5rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 2.25rem;
   }
 }
@@ -91,11 +91,11 @@
     box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.35);
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     height: 4rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-top: 4rem;
   }
 }
@@ -121,8 +121,8 @@
   }
 
   &::placeholder {
-    transition: opacity .15s ease-out;
-    color: mobileNavColor;
+    transition: opacity 0.15s ease-out;
+    color: $mobileNavColor;
   }
 
   &:focus + .shadow {
@@ -133,7 +133,7 @@
     opacity: 0.25;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     border-radius: 3px;
     padding-left: 1.5rem;
     /* Clear right for button */
@@ -143,12 +143,12 @@
 }
 
 .searchButton {
-  transition: background-color .2s ease-out;
+  transition: background-color 0.2s ease-out;
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
-  background-color: secondaryButtonColor;
+  background-color: $secondaryButtonColor;
   color: white;
   font-weight: 600;
   padding: 0 1rem;
@@ -156,10 +156,10 @@
   z-index: 2;
 
   &:hover {
-    background-color: #53A9D2;
+    background-color: #53a9d2;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: flex;
     font-size: 1.2rem;
     padding: 0 2rem;
@@ -172,15 +172,19 @@
   font-size: 1rem;
   margin: 2rem auto 0;
   text-align: center;
-  
-  @media (min-width: mediumRem) {
+
+  @media (min-width: $mediumRem) {
     font-size: 1.25rem;
   }
-  
-  & a {
+
+  & a, & a:visited {
     display: inline-block;
     margin: 0.75rem 1rem 0;
     color: white;
     text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 }
diff --git a/components/HomePageComponents/HomeHero/index.js b/components/HomePageComponents/HomeHero/index.js
index e6e7b7910..bec25c4e8 100644
--- a/components/HomePageComponents/HomeHero/index.js
+++ b/components/HomePageComponents/HomeHero/index.js
@@ -3,41 +3,41 @@ import Link from "next/link";
 
 import Button from "components/shared/Button";
 
-import { stylesheet, classNames } from "./HomeHero.css";
+import css from "./HomeHero.scss";
 
-const bgImage = "static/images/home-hero-bg.png";
+const bgImage = "/static/images/home-hero-bg.png";
 
 const HomeHero = ({ headerDescription, feature }) =>
   <div
-    className={`${classNames.wrapper} ${feature ? classNames.withFeature : ""}`}
+    className={`${css.wrapper} ${feature ? css.withFeature : ""}`}
     style={{ backgroundImage: `url(${bgImage})` }}
   >
-    <div className={`${classNames.header} site-max-width`}>
-      <div className={classNames.dplaLogo}>
+    <div className={`${css.header} site-max-width`}>
+      <div className={css.dplaLogo}>
         <h1>Digital Public Library of America</h1>
       </div>
       <Button type="primary" size="large" url="/donate">
         Donate
       </Button>
     </div>
-    <div className={classNames.content}>
-      <p className={classNames.headline}>{headerDescription}</p>
+    <div className={css.content}>
+      <p className={css.headline}>{headerDescription}</p>
       <form action="/search">
-        <div className={classNames.search}>
+        <div className={css.search}>
           <input
-            className={classNames.searchInput}
+            className={css.searchInput}
             aria-label="Search the collection"
             placeholder="Search the collection"
             name="q"
             autoComplete="off"
             type="search"
           />
-          <button type="submit" className={classNames.searchButton}>
+          <button type="submit" className={css.searchButton}>
             <span>Search</span>
           </button>
         </div>
       </form>
-      <div className={classNames.links}>
+      <div className={css.links}>
         <Link prefetch href="/browse-by-topic">
           <a title="Browse DPLA by a curated set of topics">Browse by Topic</a>
         </Link>
@@ -46,7 +46,6 @@ const HomeHero = ({ headerDescription, feature }) =>
         </Link>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default HomeHero;
diff --git a/components/HomePageComponents/HomePageSlider/HomePageSlider.css b/components/HomePageComponents/HomePageSlider/HomePageSlider.scss
similarity index 62%
rename from components/HomePageComponents/HomePageSlider/HomePageSlider.css
rename to components/HomePageComponents/HomePageSlider/HomePageSlider.scss
index 1e9903a78..016013d30 100644
--- a/components/HomePageComponents/HomePageSlider/HomePageSlider.css
+++ b/components/HomePageComponents/HomePageSlider/HomePageSlider.scss
@@ -1,12 +1,12 @@
-@value linkColor, outlineColor, warmerBackgroundColor, colderBackgroundColor, subLinkColor, elephantBlue, onionBrown, black, casablancaOrange from "../../../css/colors.css";
-@value mediumRem, smallRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 
   &.theme_blue {
-    background-color: colderBackgroundColor;
+    background-color: $colderBackgroundColor;
   }
 }
 
@@ -14,12 +14,12 @@
   margin: auto;
   padding: 2rem 1rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 4rem 0;
   }
 }
@@ -35,43 +35,48 @@
   align-items: baseline;
   margin-bottom: 1rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-bottom: 1.5rem;
   }
 }
 
 .moreLink {
-  color: linkColor;
-  font-size: 1.125rem;
+  color: $linkColor;
+  font-size: 1rem;
   font-weight: 600;
+  white-space: nowrap;
+
+  @media (min-width: $smallRem) {
+    font-size: 1.125rem;
+  }
 }
 
 .moreLinkNoun {
   display: none;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline;
   }
 }
 
 .moreLinkChevron {
-  width: 7px;
-  height: 13px;
+  height: 0.75rem;
+  padding-left: 0.25rem;
   position: relative;
-  top: 1px;
-  padding-left: 10px;
+  top: 0;
+  width: 0.5rem;
 }
 
 .title {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 1.25rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.5rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 2.25rem;
   }
 }
@@ -83,7 +88,7 @@
 .item {
   display: block;
   position: relative;
-  padding-right: .5rem;
+  padding-right: 0.5rem;
 
   &:last-child {
     margin-right: 0;
@@ -109,13 +114,12 @@
 }
 
 .itemText {
-  color: black;
   font-size: 1rem;
   margin-top: 0.5rem;
   font-weight: 600;
   line-height: 1.25;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-top: 0.9rem;
   }
 }
@@ -126,12 +130,12 @@
   top: 40%;
   background-color: rgba(255, 255, 255, 0.95);
   box-shadow: 0px 0 15px 0px rgba(0, 0, 0, 0.25);
-  transition: box-shadow .5s ease-out, background-color .5s ease-out;
+  transition: box-shadow 0.5s ease-out, background-color 0.5s ease-out;
   width: 3rem;
   height: 3rem;
   border-radius: 100%;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     top: 45%;
     height: 5rem;
     box-shadow: none;
@@ -139,47 +143,46 @@
     border-radius: 3px;
   }
 
-  &:hover,
-  &:focus {
+  &:hover, &:focus {
     background-color: white;
     box-shadow: 0px 0 20px 0px rgba(0, 0, 0, 0.3);
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       background-color: rgba(0, 0, 0, 0.05);
       box-shadow: none;
     }
   }
 
   &:focus {
-    outline: 0.25rem solid outlineColor;
+    outline: 0.25rem solid $outlineColor;
   }
 
   & img {
-    width: .9rem;
+    width: 0.9rem;
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       width: 1.5rem;
     }
   }
 }
 
 .prevArrow {
-  left: -.5rem !important;
+  left: -0.5rem !important;
 
   & img {
     transform: rotate(180deg);
     margin-left: -0.25rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     left: -3.5rem !important;
   }
 }
 
 .nextArrow {
-  right: -.5rem !important;
+  right: -0.5rem !important;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     right: -3.5rem !important;
   }
 
@@ -191,32 +194,31 @@
 .featuredTag {
   text-transform: uppercase;
   position: absolute;
-  background-color: casablancaOrange;
-  top: .75rem;
-  left: .5rem;
-  padding: .25rem .5rem;
+  background-color: $featuredBannerColor;
+  top: 0.75rem;
+  left: 0.5rem;
+  padding: 0.25rem 0.5rem;
   font-weight: bold;
   letter-spacing: 0.05rem;
   font-size: 0.8rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     left: -0.25rem;
-    padding: .35rem .85rem;
+    padding: 0.35rem 0.85rem;
   }
 }
 
 /* Vendor overrides: react-slick */
 
 .content {
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     & :global .slick-list {
       /* Offset for the featuredTag */
-      padding-left: .25rem;
+      padding-left: 0.25rem;
     }
   }
 
-  & :global .slick-prev:before,
-  & :global .slick-next:before {
+  & :global .slick-prev:before, & :global .slick-next:before {
     content: none;
   }
 
diff --git a/components/HomePageComponents/HomePageSlider/index.js b/components/HomePageComponents/HomePageSlider/index.js
index 7b7f17dab..346527144 100644
--- a/components/HomePageComponents/HomePageSlider/index.js
+++ b/components/HomePageComponents/HomePageSlider/index.js
@@ -5,8 +5,7 @@ import ReactMarkdown from "react-markdown";
 
 import { NextArrow, PrevArrow } from "components/shared/CarouselNavArrows";
 
-import { stylesheet, classNames } from "./HomePageSlider.css";
-import { classNames as breakpoints } from "css/breakpoints.css";
+import css from "./HomePageSlider.scss";
 
 const moreLinkChevron = "static/images/chevron-thick-orange.svg";
 const moreLinkChevronBlue = "static/images/chevron-thick-blue.svg";
@@ -20,22 +19,18 @@ const HomePageSlider = ({
   title,
   theme
 }) =>
-  <div
-    className={`${classNames.wrapper} ${theme === "blue"
-      ? classNames.theme_blue
-      : ""} `}
-  >
-    <div className={`${classNames.content} site-max-width`}>
-      <div className={classNames.heading}>
-        <h2 className={classNames.title}>{title}</h2>
+  <div className={`${css.wrapper} ${theme === "blue" ? css.theme_blue : ""} `}>
+    <div className={`${css.content} site-max-width`}>
+      <div className={css.heading}>
+        <h2 className={css.title}>{title}</h2>
         <Link prefetch href={browseLinkUrl}>
-          <a className={`hover-underline ${classNames.moreLink}`}>
+          <a className={`hover-underline ${css.moreLink}`}>
             Browse all{" "}
-            <span className={classNames.moreLinkNoun}>{browseLinkName}</span>
+            <span className={css.moreLinkNoun}>{browseLinkName}</span>
             <img
               alt="Browse exhibitions"
               aria-hidden="true"
-              className={classNames.moreLinkChevron}
+              className={css.moreLinkChevron}
               src={moreLinkChevron}
             />
           </a>
@@ -44,21 +39,13 @@ const HomePageSlider = ({
       <Slider
         slidesToShow={slidesToShow ? slidesToShow : 2.5}
         infinite={false}
-        nextArrow={
-          <NextArrow
-            className={`${classNames.arrow} ${classNames.nextArrow}`}
-          />
-        }
-        prevArrow={
-          <PrevArrow
-            className={`${classNames.arrow} ${classNames.prevArrow}`}
-          />
-        }
+        nextArrow={<NextArrow className={`${css.arrow} ${css.nextArrow}`} />}
+        prevArrow={<PrevArrow className={`${css.arrow} ${css.prevArrow}`} />}
         draggable={false}
         slidesToScroll={slidesToShow ? Math.floor(slidesToShow) : 2}
         responsive={[
           {
-            breakpoint: ~~breakpoints.smallPx,
+            breakpoint: 640,
             settings: {
               slidesToShow: 1.125,
               arrows: false,
@@ -72,17 +59,17 @@ const HomePageSlider = ({
           ({ name, repImageUrl, thumbnailUrl, isFeatured, href, as }, index) =>
             <div key={`${name}—${index}`}>
               <Link prefetch href={href} as={as}>
-                <a className={classNames.item}>
-                  <div className={classNames.itemImgWrapper}>
+                <a className={css.item}>
+                  <div className={css.itemImgWrapper}>
                     <div
-                      className={classNames.itemImg}
+                      className={css.itemImg}
                       style={{
                         backgroundImage: `url(${repImageUrl || thumbnailUrl})`
                       }}
                     />
                   </div>
                   <ReactMarkdown
-                    className={classNames.itemText}
+                    className={css.itemText}
                     source={name}
                     allowedTypes={["emphasis"]}
                     unwrapDisallowed
diff --git a/components/HomePageComponents/HomePro.js b/components/HomePageComponents/HomePro.js
index aa07c20c8..f2f4a583c 100644
--- a/components/HomePageComponents/HomePro.js
+++ b/components/HomePageComponents/HomePro.js
@@ -7,16 +7,16 @@ import WebsiteFeature from "shared/WebsiteFeature";
 import WPEdit from "shared/WPEdit";
 import StayInformed from "shared/StayInformed";
 
-import { stylesheet, classNames } from "./HomePro.css";
+import css from "./HomePro.scss";
 
 const HomePro = ({ url, news, content }) =>
   <div>
     <div
-      className={`${classNames.heroWrapper} ${content.acf.feature
-        ? classNames.withFeature
+      className={`${css.heroWrapper} ${content.acf.feature
+        ? css.withFeature
         : ""}`}
     >
-      <div className={`${classNames.heroText} site-max-width`}>
+      <div className={`${css.heroText} site-max-width`}>
         <h1>
           Welcome to the DPLA
           Professional Community
@@ -37,12 +37,12 @@ const HomePro = ({ url, news, content }) =>
         buttonUrl={content.acf.feature.button_url}
         imageSrc={content.acf.feature.image}
       />}
-    <div className={`${classNames.sectionList}`}>
+    <div className={`${css.sectionList}`}>
       <ul className={`site-max-width`}>
         <li>
           <Link as="/hubs" href="/pro/wp/hubs?section=hubs">
             <a>
-              <IconComponent className={classNames.icon} name="network" />
+              <IconComponent className={css.icon} name="network" />
               Hub Network
             </a>
           </Link>
@@ -50,7 +50,7 @@ const HomePro = ({ url, news, content }) =>
         <li>
           <Link as="/prospective-hubs" href="/pro/wp?section=prospective-hubs">
             <a>
-              <IconComponent className={classNames.icon} name="prospective" />
+              <IconComponent className={css.icon} name="prospective" />
               Prospective Hubs
             </a>
           </Link>
@@ -58,7 +58,7 @@ const HomePro = ({ url, news, content }) =>
         <li>
           <Link as="/developers" href="/pro/wp?section=developers">
             <a>
-              <IconComponent className={classNames.icon} name="developers" />
+              <IconComponent className={css.icon} name="developers" />
               Developers
             </a>
           </Link>
@@ -66,7 +66,7 @@ const HomePro = ({ url, news, content }) =>
         <li>
           <Link as="/education" href="/pro/wp?section=education">
             <a>
-              <IconComponent className={classNames.icon} name="education" />
+              <IconComponent className={css.icon} name="education" />
               Education
             </a>
           </Link>
@@ -74,7 +74,7 @@ const HomePro = ({ url, news, content }) =>
         <li>
           <Link as="/community-reps" href="/pro/wp?section=community-reps">
             <a>
-              <IconComponent className={classNames.icon} name="community" />
+              <IconComponent className={css.icon} name="community" />
               Community Reps
             </a>
           </Link>
@@ -82,7 +82,7 @@ const HomePro = ({ url, news, content }) =>
         <li>
           <Link as="/ebooks" href="/pro/wp?section=ebooks">
             <a>
-              <IconComponent className={classNames.icon} name="ebooks" />
+              <IconComponent className={css.icon} name="ebooks" />
               Ebooks
             </a>
           </Link>
@@ -91,7 +91,6 @@ const HomePro = ({ url, news, content }) =>
     </div>
     <NewsLane title="DPLA News" items={news} />
     <StayInformed />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default HomePro;
diff --git a/components/HomePageComponents/HomePro.css b/components/HomePageComponents/HomePro.scss
similarity index 76%
rename from components/HomePageComponents/HomePro.css
rename to components/HomePageComponents/HomePro.scss
index affec4797..694c79720 100644
--- a/components/HomePageComponents/HomePro.css
+++ b/components/HomePageComponents/HomePro.scss
@@ -1,10 +1,10 @@
-@value proIconColor, linkColor, warmerBackgroundColor, colderBackgroundColor from "../../css/colors.css";
-@value serifFont from "../../css/typography.css";
-@value smallRem, mediumRem, largeRem from "../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/typography";
+@import "stylesheets/breakpoints";
 
 .heroWrapper {
   background-color: rgb(47, 74, 87);
-  background-image: url("static/images/pro/home-hero-bg.png");
+  background-image: url("/static/images/pro/home-hero-bg.png");
   background-position: center/100%;
   background-size: cover;
   background-repeat: no-repeat;
@@ -23,7 +23,7 @@
   padding: 2rem 1rem;
 
   & h1 {
-    font-family: serifFont;
+    font-family: $serifFont;
     font-weight: normal;
     font-size: 1.8rem;
     max-width: 24rem;
@@ -35,7 +35,7 @@
     margin-left: 0;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     flex-direction: row;
     padding: 4rem 1rem 2rem;
 
@@ -52,7 +52,7 @@
     }
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 8.5rem 0rem 4rem;
 
     & h1 {
@@ -82,12 +82,12 @@
   }
 
   & a {
-    background: colderBackgroundColor;
+    background: $colderBackgroundColor;
     border-radius: 0.25rem;
     /* color: white; */
     height: 100%;
     font-size: 1.6rem;
-    font-family: serifFont;
+    font-family: $serifFont;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -95,7 +95,7 @@
   }
 
   & svg {
-    fill: proIconColor;
+    fill: $proIconColor;
     width: 100%;
     margin-bottom: 1rem;
   }
diff --git a/components/HomePageComponents/HomeUser.css b/components/HomePageComponents/HomeUser.css
deleted file mode 100644
index 180912a0b..000000000
--- a/components/HomePageComponents/HomeUser.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@value warmerBackgroundColor from "../../css/colors.css";
-
-.wrapper {
-  background-color: warmerBackgroundColor;
-}
\ No newline at end of file
diff --git a/components/HomePageComponents/HomeUser.js b/components/HomePageComponents/HomeUser.js
index 0b69ea82e..1c2f42d91 100644
--- a/components/HomePageComponents/HomeUser.js
+++ b/components/HomePageComponents/HomeUser.js
@@ -8,13 +8,7 @@ import StayInformed from "shared/StayInformed";
 import WebsiteFeature from "shared/WebsiteFeature";
 import WPEdit from "shared/WPEdit";
 
-import { stylesheet } from "./HomePageSlider/HomePageSlider.css";
-import {
-  stylesheet as userStylesheet,
-  classNames as userClassNames
-} from "./HomeUser.css";
-import { stylesheet as guidesStylesheet } from "shared/GuideLink/GuideLink.css";
-import { stylesheet as arrowStylesheet } from "shared/CarouselNavArrows/CarouselNavArrows.css";
+import css from "./HomeUser.scss";
 
 const HomeUser = ({
   url,
@@ -25,7 +19,7 @@ const HomeUser = ({
   news,
   content
 }) =>
-  <div className={userClassNames.wrapper}>
+  <div className={css.wrapper}>
     <HomeHero
       headerDescription={headerDescription}
       feature={content.acf.feature}
@@ -62,11 +56,6 @@ const HomeUser = ({
     <DPLAUsers guides={guides} />
     <NewsLane title="DPLA News" items={news} />
     <StayInformed />
-    {/* <SocialMedia /> */}
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: userStylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: arrowStylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: guidesStylesheet }} />
   </div>;
 
 export default HomeUser;
diff --git a/components/HomePageComponents/HomeUser.scss b/components/HomePageComponents/HomeUser.scss
new file mode 100644
index 000000000..47df6c30b
--- /dev/null
+++ b/components/HomePageComponents/HomeUser.scss
@@ -0,0 +1,5 @@
+@import "stylesheets/colors";
+
+.wrapper {
+  background-color: $warmerBackgroundColor;
+}
diff --git a/components/HomePageComponents/SocialMedia/SocialMedia.css b/components/HomePageComponents/SocialMedia/SocialMedia.css
deleted file mode 100644
index 691f98535..000000000
--- a/components/HomePageComponents/SocialMedia/SocialMedia.css
+++ /dev/null
@@ -1,99 +0,0 @@
-@value alabasterGray, elephantBlue, dimGray, black, linkColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem, mediumPlusRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
-
-.socialMedia {
-  margin: auto;
-  padding: 2rem 1rem;
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: smallRem) {
-    flex-direction: row;
-  }
-
-  @media (min-width: mediumRem) {
-    padding: 3rem 1rem;
-  }
-
-  @media (min-width: largeRem) {
-    padding: 4rem 0;
-  }
-}
-
-.wrapper {
-  background-color: alabasterGray;
-}
-
-.header {
-  font-family: serifFont;
-  font-weight: normal;
-  margin-bottom: 24px;
-  white-space: nowrap;
-  font-weight: bold;
-  font-size: 1rem;
-  line-height: 1.25;
-  text-transform: uppercase;
-  color: black;
-}
-
-.twitter {
-  flex: 1;
-  color: dimGray;
-  font-size: 1.0625rem;
-  line-height: 1.4375;
-  padding-right: 27px;
-  margin-bottom: 25px;
-}
-
-.twitterText {
-  margin-bottom: 6px;
-}
-
-.twitterDate {
-  text-transform: uppercase;
-  color: linkColor;
-  font-weight: 600;
-  font-size: 0.9375rem;
-  line-height: 1.1875;
-  margin-bottom: 19px;
-}
-
-.visitLink {
-  font-size: 1.125rem;
-  line-height: 1.4375;
-  font-weight: 600;
-  color: linkColor;
-}
-
-.instagram {
-  flex: 2;
-}
-
-.instagramImages {
-  display: flex;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-
-  @media (min-width: mediumPlusRem) {
-    flex-wrap: nowrap;
-  }
-}
-
-.instagramImage {
-  padding: 0px 6px 6px 0;
-  width: calc(50% - 6px);
-  height: calc(50% - 6px);
-
-  @media (min-width: mediumPlusRem) {
-    width: calc(25% - 6px);
-  }
-}
-
-.externalLinkIcon {
-  width: 16px;
-  height: 16px;
-  padding-left: 9px;
-  position: relative;
-  top: 2px;
-}
diff --git a/components/HomePageComponents/SocialMedia/index.js b/components/HomePageComponents/SocialMedia/index.js
deleted file mode 100644
index 2f0eca6dd..000000000
--- a/components/HomePageComponents/SocialMedia/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-
-import {
-  INSTAGRAM_URL,
-  INSTAGRAM_LINK_TITLE,
-  TWITTER_URL,
-  TWITTER_LINK_TITLE
-} from "../../../constants/site.js";
-import { stylesheet, classNames } from "./SocialMedia.css";
-
-const externalLinkIcon = "static/images/external-link.svg";
-
-const mockImages = [
-  { url: "http://lorempixel.com/170/170/food", description: "placeholder" },
-  { url: "http://lorempixel.com/170/171/food", description: "placeholder" },
-  { url: "http://lorempixel.com/170/172/food", description: "placeholder" },
-  { url: "http://lorempixel.com/170/173/food", description: "placeholder" }
-];
-
-const Instagram = ({ images }) =>
-  <div className={classNames.instagram}>
-    <h1 className={classNames.header}>On Instagram</h1>
-    <div className={classNames.instagramImages}>
-      {images.map(({ url, description }) =>
-        <img
-          alt={description}
-          className={classNames.instagramImage}
-          src={url}
-        />
-      )}
-    </div>
-    <a
-      href={INSTAGRAM_URL}
-      className={classNames.visitLink}
-      title={INSTAGRAM_LINK_TITLE}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <span>Visit @digpublib</span>
-      <img
-        className={classNames.externalLinkIcon}
-        alt="visit @digpublib"
-        src={externalLinkIcon}
-      />
-    </a>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-  </div>;
-
-const Twitter = ({ message, time }) =>
-  <div className={classNames.twitter}>
-    <h1 className={classNames.header}>On Twitter</h1>
-    <p
-      className={classNames.twitterText}
-      dangerouslySetInnerHTML={{ __html: message }}
-    />
-    <p className={classNames.twitterDate}>
-      {time}
-    </p>
-    <a
-      href={TWITTER_URL}
-      className={classNames.visitLink}
-      title={TWITTER_LINK_TITLE}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <span>Visit @DPLA</span>
-      <img
-        className={classNames.externalLinkIcon}
-        alt="visit @DPLA"
-        src={externalLinkIcon}
-      />
-    </a>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-  </div>;
-
-const SocialMedia = (/* data */) =>
-  <div className={classNames.wrapper}>
-    <div className={`${classNames.socialMedia} site-max-width`}>
-      <Twitter
-        time="23H AGO"
-        message="TODAY: Our friends @internetarchive host a live AMA on their @macfound #100andChange plan to open access to 4M books…"
-      />
-      <Instagram images={mockImages} />
-    </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-  </div>;
-
-export default SocialMedia;
diff --git a/components/ItemComponents/BreadcrumbsModule/BreadcrumbsModule.css b/components/ItemComponents/BreadcrumbsModule/BreadcrumbsModule.scss
similarity index 65%
rename from components/ItemComponents/BreadcrumbsModule/BreadcrumbsModule.css
rename to components/ItemComponents/BreadcrumbsModule/BreadcrumbsModule.scss
index e1c1f57fb..507c12f91 100644
--- a/components/ItemComponents/BreadcrumbsModule/BreadcrumbsModule.css
+++ b/components/ItemComponents/BreadcrumbsModule/BreadcrumbsModule.scss
@@ -1,11 +1,11 @@
-@value warmerBackgroundColor, linkColor from "../../../css/colors.css";
-@value smallRem, mediumRem from "../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .previousItemButton, .nextItemButton {
-  color: linkColor;
+  color: $linkColor;
   font-weight: 600;
   font-size: 0.75rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1rem;
   }
 }
@@ -13,7 +13,7 @@
 .previousChevron, .nextChevron {
   height: 8px;
   width: 5px;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     height: 9px;
   }
 }
@@ -21,21 +21,21 @@
 .previousChevron {
   transform: rotate(180deg);
   margin-right: 0.25rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 0.5rem;
   }
 }
 
 .nextChevron {
   margin-left: 0.25rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-left: 0.5rem;
   }
 }
 
 .previousItemButton {
   margin-right: 0.75rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 2rem;
   }
 }
@@ -49,7 +49,7 @@
 .hideOnSmallScreens {
   display: none;
   visibility: hidden;
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: inherit;
     visibility: visible;
   }
diff --git a/components/ItemComponents/BreadcrumbsModule/index.js b/components/ItemComponents/BreadcrumbsModule/index.js
index 169e88dac..8c547c3f0 100644
--- a/components/ItemComponents/BreadcrumbsModule/index.js
+++ b/components/ItemComponents/BreadcrumbsModule/index.js
@@ -6,10 +6,9 @@ import Breadcrumbs from "shared/Breadcrumbs";
 import { removeQueryParams } from "utilFunctions";
 import { UNTITLED_TEXT } from "constants/site";
 
-import { stylesheet, classNames } from "./BreadcrumbsModule.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import css from "./BreadcrumbsModule.scss";
 
-const { container } = utilClassNames;
 const chevron = "/static/images/chevron-thick-orange.svg";
 
 // const PreviousItemLink = ({ query, searchItemCount, paginationInfo }) => {
@@ -43,10 +42,10 @@ const chevron = "/static/images/chevron-thick-orange.svg";
 //         }
 //       }}
 //     >
-//       <a className={`${classNames.previousItemButton} hover-underline`}>
-//         <img src={chevron} alt="" className={classNames.previousChevron} />
+//       <a className={`${css.previousItemButton} hover-underline`}>
+//         <img src={chevron} alt="" className={css.previousChevron} />
 //         <span>
-//           Previous <span className={classNames.hideOnSmallScreens}>Item</span>
+//           Previous <span className={css.hideOnSmallScreens}>Item</span>
 //         </span>
 //       </a>
 //     </Link>
@@ -82,11 +81,11 @@ const chevron = "/static/images/chevron-thick-orange.svg";
 //         }
 //       }}
 //     >
-//       <a className={`${classNames.nextItemButton} hover-underline`}>
+//       <a className={`${css.nextItemButton} hover-underline`}>
 //         <span>
-//           Next <span className={classNames.hideOnSmallScreens}>Item</span>
+//           Next <span className={css.hideOnSmallScreens}>Item</span>
 //         </span>
-//         <img src={chevron} alt="" className={classNames.nextChevron} />
+//         <img src={chevron} alt="" className={css.nextChevron} />
 //       </a>
 //     </Link>
 //   );
@@ -98,8 +97,8 @@ const BreadcrumbsModule = ({
   // searchItemCount,
   // paginationInfo
 }) =>
-  <div className={utilClassNames.breadcrumbsWrapper}>
-    <div className={[container, utilClassNames.breadcrumbsModule].join(" ")}>
+  <div className={utils.breadcrumbsWrapper}>
+    <div className={[utils.container, utils.breadcrumbsModule].join(" ")}>
       <Breadcrumbs
         breadcrumbs={breadcrumbs.map(breadcrumb =>
           Object.assign({}, breadcrumb, {
@@ -108,7 +107,7 @@ const BreadcrumbsModule = ({
         )}
       />
       {/*(route.query.previous >= 0 || route.query.next) &&
-        <div className={classNames.navButtonsWrapper}>
+        <div className={css.navButtonsWrapper}>
           {route.query.previous &&
             route.query.previous >= 0 &&
             <PreviousItemLink
@@ -125,7 +124,6 @@ const BreadcrumbsModule = ({
             />}
           </div>*/}
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default BreadcrumbsModule;
diff --git a/components/ItemComponents/Content/Content.css b/components/ItemComponents/Content/Content.scss
similarity index 71%
rename from components/ItemComponents/Content/Content.css
rename to components/ItemComponents/Content/Content.scss
index f6ebe7607..80e109844 100644
--- a/components/ItemComponents/Content/Content.css
+++ b/components/ItemComponents/Content/Content.scss
@@ -1,41 +1,40 @@
-@value subLinkColor, linkColor, warmerBackgroundColor, dimmedTextColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont, sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
-@value tablePadding: 1.125rem;
+$tablePadding: 1.125rem;
 
 .content {
   padding-bottom: 1rem;
   flex: 1;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 3rem;
     padding-bottom: 3rem;
   }
 }
 
 .contentTable {
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     width: 100%;
   }
 }
 
 .tableHeadingWrapper {
-  vertical-align: top;
-  width: 140px;
-  padding-top: 0.25rem;
   display: block;
+  padding-top: 0.25rem;
+  width: 140px;
 }
 
 .tableHeading {
+  color: $dimmedTextColor;
   font-size: 0.875rem;
   font-weight: 600;
-  color: dimmedTextColor;
 }
 
 .tableRow {
   display: flex;
   flex-direction: column;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: table-row;
   }
 }
@@ -49,14 +48,14 @@
 
 .tableRow td {
   padding-bottom: 0.5rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-bottom: 1rem;
   }
 }
 
 .tableRow:last-child td {
   padding-bottom: 0.5rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-bottom: 0;
   }
 }
@@ -79,8 +78,8 @@
 .showMore {
   cursor: pointer;
   display: block;
-  padding: .25rem 0;
-  border-top: .075rem solid gray;
+  padding: 0.25rem 0;
+  border-top: 0.075rem solid gray;
   font-size: 1rem;
 
   &.open {
@@ -88,7 +87,7 @@
   }
 
   @media (max-width: mediumRem) {
-    padding: .25rem 1rem 1rem;
+    padding: 0.25rem 1rem 1rem;
   }
 
   @media print {
@@ -109,15 +108,15 @@
 .mainMetadata {
   border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
 
-  @media (min-width: smallRem) {
-    padding-bottom: tablePadding;
+  @media (min-width: $smallRem) {
+    padding-bottom: $tablePadding;
   }
 }
 
 .mainMetadataText {
   font-size: 1rem;
   margin-bottom: 0;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.25rem;
   }
 }
@@ -129,7 +128,7 @@
 }
 
 .sourceLink, .sourceLink:visited {
-  background-color: subLinkColor;
+  background-color: $subLinkColor;
   width: 100%;
   color: white;
   border-radius: 2px;
@@ -144,7 +143,7 @@
     text-decoration: none;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: 242px;
   }
 }
@@ -159,8 +158,8 @@
 
 .otherMetadata {
   padding: 1rem 0 0;
-  @media (min-width: smallRem) {
-    padding: tablePadding 0;
+  @media (min-width: $smallRem) {
+    padding: $tablePadding 0;
   }
 }
 
@@ -170,8 +169,8 @@
 
 .rightsMetadata {
   padding-top: 1rem;
-  @media (min-width: smallRem) {
-    padding-top: tablePadding;
+  @media (min-width: $smallRem) {
+    padding-top: $tablePadding;
   }
 }
 
@@ -188,9 +187,9 @@
 }
 
 .url {
-  font-family: monoFont;
+  font-family: $monoFont;
   padding: 9px 12px 12px;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   border-radius: 2px;
   font-size: 0.875rem;
   display: block;
diff --git a/components/ItemComponents/Content/GaItemWrapper.js b/components/ItemComponents/Content/GaItemWrapper.js
index f3bcb00e7..68b22aa6c 100644
--- a/components/ItemComponents/Content/GaItemWrapper.js
+++ b/components/ItemComponents/Content/GaItemWrapper.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactGA from "react-ga";
 import Router from "next/router";
+
 import { gaTrackingId } from "constants/env";
 import {
   bindLinkEvent,
diff --git a/components/ItemComponents/Content/ItemImage/ItemImage.css b/components/ItemComponents/Content/ItemImage/ItemImage.scss
similarity index 64%
rename from components/ItemComponents/Content/ItemImage/ItemImage.css
rename to components/ItemComponents/Content/ItemImage/ItemImage.scss
index c84bfd1a2..7d787aafd 100644
--- a/components/ItemComponents/Content/ItemImage/ItemImage.css
+++ b/components/ItemComponents/Content/ItemImage/ItemImage.scss
@@ -1,5 +1,5 @@
-@value warmerBackgroundColor from "../../../../css/colors.css";
-@value smallRem, mediumRem from "../../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .imageWrapper {
   height: 100%;
@@ -12,11 +12,11 @@
   flex-shrink: 0;
   margin-bottom: 0.75rem;
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     height: auto;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     max-width: 20rem;
   }
 }
@@ -27,7 +27,7 @@
 }
 
 .defaultImageWrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .image {
diff --git a/components/ItemComponents/Content/ItemImage/index.js b/components/ItemComponents/Content/ItemImage/index.js
index 1dc99c33e..87202b9c6 100644
--- a/components/ItemComponents/Content/ItemImage/index.js
+++ b/components/ItemComponents/Content/ItemImage/index.js
@@ -1,8 +1,9 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./ItemImage.css";
 import { getDefaultThumbnail } from "utilFunctions";
 
+import css from "./ItemImage.scss";
+
 class ItemImage extends React.Component {
   state = {
     updateToDefaultImage: false
@@ -23,17 +24,16 @@ class ItemImage extends React.Component {
     const useDefaultWrapper = updateToDefaultImage || useDefaultImage;
     return (
       <div
-        className={`${classNames.imageWrapper}
+        className={`${css.imageWrapper}
           ${useDefaultWrapper
-            ? classNames.defaultImageWrapper + " " + defaultImageClass
+            ? css.defaultImageWrapper + " " + defaultImageClass
             : ""}`}
       >
         <img
           src={updateToDefaultImage ? getDefaultThumbnail(type) : url}
           alt={title}
-          className={classNames.image}
+          className={css.image}
         />
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/ItemComponents/Content/JsonLdMarkup.js b/components/ItemComponents/Content/JsonLdMarkup.js
index fd274a135..69feb77c6 100644
--- a/components/ItemComponents/Content/JsonLdMarkup.js
+++ b/components/ItemComponents/Content/JsonLdMarkup.js
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { joinIfArray } from "utilFunctions";
 
 /**
diff --git a/components/ItemComponents/Content/MainMetadata.js b/components/ItemComponents/Content/MainMetadata.js
index 7d4e37425..801cbf5a6 100644
--- a/components/ItemComponents/Content/MainMetadata.js
+++ b/components/ItemComponents/Content/MainMetadata.js
@@ -5,7 +5,7 @@ import Row from "./Row";
 import { joinIfArray, readMyRights, showMoreDescription } from "utilFunctions";
 import { rightsURLs } from "constants/site.js";
 
-import { classNames, stylesheet } from "./Content.css";
+import css from "./Content.scss";
 
 const externalLinkIcon = "/static/images/external-link-white.svg";
 
@@ -16,7 +16,7 @@ const externalLinkIcon = "/static/images/external-link-white.svg";
 const RightsBadge = ({ url }) => {
   const myRights = readMyRights(url);
   return myRights
-    ? <div className={classNames.rightsStatement}>
+    ? <div className={css.rightsStatement}>
         <a
           href={myRights.url}
           title="Learn more about the copyright status of this item"
@@ -34,26 +34,26 @@ const MainMetadata = ({ item }) => {
     : false;
 
   return (
-    <div className={classNames.mainMetadata}>
-      <table className={classNames.contentTable}>
+    <div className={css.mainMetadata}>
+      <table className={css.contentTable}>
         <tbody>
-          <tr className={classNames.tableRow}>
-            <td className={classNames.tableHeadingWrapper} />
-            <td className={classNames.tableItem}>
+          <tr className={css.tableRow}>
+            <td className={css.tableHeadingWrapper} />
+            <td className={css.tableItem}>
               <ItemImage
                 title=""
                 type={item.type}
                 url={item.thumbnailUrl}
-                defaultImageClass={classNames.defaultItemImage}
+                defaultImageClass={css.defaultItemImage}
                 useDefaultImage={item.useDefaultImage}
               />
               <a
                 href={item.sourceUrl}
                 rel="noopener noreferrer"
                 target="_blank"
-                className={`${classNames.sourceLink} clickThrough`}
+                className={`${css.sourceLink} clickThrough`}
               >
-                <span className={classNames.sourceLinkText}>
+                <span className={css.sourceLinkText}>
                   {item.type === "image"
                     ? "View Full Image"
                     : item.type === "text"
@@ -63,7 +63,7 @@ const MainMetadata = ({ item }) => {
                 <img
                   src={externalLinkIcon}
                   alt=""
-                  className={classNames.externalLinkIcon}
+                  className={css.externalLinkIcon}
                 />
               </a>
               {item.edmRights && <RightsBadge url={item.edmRights} />}
@@ -80,35 +80,23 @@ const MainMetadata = ({ item }) => {
             </td>
           </tr>
           {item.date &&
-            <tr className={classNames.tableRow}>
-              <td className={classNames.tableHeadingWrapper}>
-                <h2 className={classNames.tableHeading}>Created Date</h2>
+            <tr className={css.tableRow}>
+              <td className={css.tableHeadingWrapper}>
+                <h2 className={css.tableHeading}>Created Date</h2>
               </td>
-              <td
-                className={[
-                  classNames.tableItem,
-                  classNames.mainMetadataText
-                ].join(" ")}
-              >
+              <td className={[css.tableItem, css.mainMetadataText].join(" ")}>
                 {item.date.displayDate}
               </td>
             </tr>}
           {item.description &&
-            <tr className={classNames.tableRow}>
-              <td className={classNames.tableHeadingWrapper}>
-                <h2 className={classNames.tableHeading}>Description</h2>
+            <tr className={css.tableRow}>
+              <td className={css.tableHeadingWrapper}>
+                <h2 className={css.tableHeading}>Description</h2>
               </td>
-              <td
-                className={[
-                  classNames.tableItem,
-                  classNames.mainMetadataText
-                ].join(" ")}
-              >
+              <td className={[css.tableItem, css.mainMetadataText].join(" ")}>
                 <div
                   id="dpla-description"
-                  className={
-                    descriptionIsLong ? classNames.longDescription : ""
-                  }
+                  className={descriptionIsLong ? css.longDescription : ""}
                 >
                   {joinIfArray(item.description)}
                 </div>
@@ -116,12 +104,12 @@ const MainMetadata = ({ item }) => {
                   <div
                     id="dpla-showmore"
                     aria-hidden="true"
-                    className={classNames.showMore}
+                    className={css.showMore}
                   >
                     <span
                       className={`link`}
                       onClick={() =>
-                        showMoreDescription({ className: classNames.open })}
+                        showMoreDescription({ className: css.open })}
                     >
                       Show full description
                     </span>
diff --git a/components/ItemComponents/Content/OtherMetadata.js b/components/ItemComponents/Content/OtherMetadata.js
index 14a25bf0e..fee37299c 100644
--- a/components/ItemComponents/Content/OtherMetadata.js
+++ b/components/ItemComponents/Content/OtherMetadata.js
@@ -2,9 +2,10 @@ import React from "react";
 import Link from "next/link";
 import Row from "./Row";
 
-import { classNames, stylesheet } from "./Content.css";
 import { makeURLsClickable, joinIfArray, readMyRights } from "utilFunctions";
 
+import css from "./Content.scss";
+
 const getItemSpatial = item =>
   Array.isArray(item.spatial) ? item.spatial[0].name : item.spatial.name;
 
@@ -24,8 +25,8 @@ const FacetLink = ({ facet, value, facetLabel }) =>
   </span>;
 
 const OtherMetadata = ({ item }) =>
-  <div className={classNames.otherMetadata}>
-    <table className={classNames.contentTable}>
+  <div className={css.otherMetadata}>
+    <table className={css.contentTable}>
       <tbody>
         <Row heading="Partner">
           <FacetLink facet="partner" value={item.partner} />
@@ -44,7 +45,7 @@ const OtherMetadata = ({ item }) =>
         {item.publisher &&
           <Row heading="Publisher">{joinIfArray(item.publisher)}</Row>}
         {item.subject &&
-          <Row className={classNames.subjects} heading="Subjects">
+          <Row className={css.subjects} heading="Subjects">
             {item.subject.map((subj, i, subjects) =>
               <span key={i}>
                 <FacetLink facet="subject" value={subj.name} />
diff --git a/components/ItemComponents/Content/Row.js b/components/ItemComponents/Content/Row.js
index 4ccdc23db..50871bccf 100644
--- a/components/ItemComponents/Content/Row.js
+++ b/components/ItemComponents/Content/Row.js
@@ -1,18 +1,14 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./Content.css";
+import css from "./Content.scss";
 
 const Row = ({ heading, value, linkInfo, children, className }) =>
   children
-    ? <tr className={[classNames.tableRow, className].join(" ")}>
-        <td className={classNames.tableHeadingWrapper}>
-          <h2 className={classNames.tableHeading}>{heading}</h2>
+    ? <tr className={[css.tableRow, className].join(" ")}>
+        <td className={css.tableHeadingWrapper}>
+          <h2 className={css.tableHeading}>{heading}</h2>
         </td>
-        <td
-          className={[classNames.tableItem, classNames.otherMetadataItem].join(
-            " "
-          )}
-        >
+        <td className={[css.tableItem, css.otherMetadataItem].join(" ")}>
           {children}
         </td>
       </tr>
diff --git a/components/ItemComponents/Content/index.js b/components/ItemComponents/Content/index.js
index 32cceadf1..2602370a6 100644
--- a/components/ItemComponents/Content/index.js
+++ b/components/ItemComponents/Content/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { classNames, stylesheet } from "./Content.css";
 
 import MainMetadata from "./MainMetadata";
 import OtherMetadata from "./OtherMetadata";
@@ -8,14 +7,15 @@ import GaItemWrapper from "./GaItemWrapper";
 
 import { UNTITLED_TEXT } from "constants/site";
 
+import css from "./Content.scss";
+
 const Content = ({ item, url }) =>
-  <div className={classNames.content}>
-    <h1 className={classNames.title}>
+  <div className={css.content}>
+    <h1 className={css.title}>
       {item.title && item.title !== "" ? item.title : UNTITLED_TEXT}
     </h1>
     <MainMetadata item={item} />
     <OtherMetadata item={item} />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
     <JsonLdMarkup item={item} url={url} />
   </div>;
 
diff --git a/components/ItemComponents/itemComponent.css b/components/ItemComponents/itemComponent.scss
similarity index 57%
rename from components/ItemComponents/itemComponent.css
rename to components/ItemComponents/itemComponent.scss
index 45d973cb2..52669a605 100644
--- a/components/ItemComponents/itemComponent.css
+++ b/components/ItemComponents/itemComponent.scss
@@ -1,6 +1,6 @@
-@value colderBackgroundColor from "../../css/colors.css";
-@value smallRem, mediumRem from "../../css/breakpoints.css";
-@value sansFont from "../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .faveAndCiteButtons {
   align-self: baseline;
@@ -8,7 +8,7 @@
   width: 100%;
   margin-bottom: 1rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: 225px;
   }
 }
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-top: 2rem;
     flex-direction: row;
   }
@@ -28,9 +28,9 @@
   margin-top: 0.5rem;
   width: 100%;
   text-align: center;
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
 }
 
 .notFound {
   margin: 0 0 3rem;
-}
\ No newline at end of file
+}
diff --git a/components/MainLayout/components/Footer/Footer.css b/components/MainLayout/components/Footer/Footer.scss
similarity index 65%
rename from components/MainLayout/components/Footer/Footer.css
rename to components/MainLayout/components/Footer/Footer.scss
index 7dc938419..8463f4e62 100644
--- a/components/MainLayout/components/Footer/Footer.css
+++ b/components/MainLayout/components/Footer/Footer.scss
@@ -1,10 +1,10 @@
-@value minuitBlue, ebonyClayBlue, linkColor, gray75 from "../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
-@value sansFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   color: white;
-  background-color: ebonyClayBlue;
+  background-color: $footerLightColor;
   position: relative;
 
   @media print {
@@ -15,14 +15,14 @@
 .footer {
   padding: 2rem 1rem;
   line-height: 1.5;
-  color: gray75;
+  color: $gray75;
   margin: 0 auto;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 3rem 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 3rem 0;
   }
 
@@ -34,7 +34,7 @@
       text-decoration: underline;
     }
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       font-size: 1.15rem;
     }
   }
@@ -45,7 +45,7 @@
   &:nth-of-type(n + 3) {
     margin-top: 1rem;
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       margin-top: 0;
     }
   }
@@ -57,7 +57,7 @@
   color: white;
   margin-bottom: 1rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 1.25rem;
   }
 }
@@ -71,31 +71,31 @@
     text-decoration: none;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 0;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     float: right;
     width: auto;
   }
 }
 
 .smallFooterWrapper {
-  background-color: minuitBlue;
+  background-color: $footerDarkColor;
 }
 
 .smallFooter {
   padding: 2rem 1rem;
   margin: 0 auto;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 2rem 0;
   }
 }
@@ -105,7 +105,7 @@
   margin: 0 auto;
   width: 15rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin: 0;
     width: 18rem;
   }
@@ -115,7 +115,7 @@
   text-align: center;
   margin-top: 2rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 0;
   }
 }
@@ -129,7 +129,7 @@
     padding: none;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     width: 1.5rem;
     height: 1.5rem;
   }
diff --git a/components/MainLayout/components/Footer/FooterPro.js b/components/MainLayout/components/Footer/FooterPro.js
index 99ebba5ff..3fc3fc9a0 100644
--- a/components/MainLayout/components/Footer/FooterPro.js
+++ b/components/MainLayout/components/Footer/FooterPro.js
@@ -5,13 +5,13 @@ import Button from "components/shared/Button";
 
 import { USER_BASE_URL } from "constants/env";
 
-import { classNames, stylesheet } from "./Footer.css";
+import css from "./Footer.scss";
 
 const FooterPro = () =>
-  <div className={`${classNames.footer} site-max-width`}>
+  <div className={`${css.footer} site-max-width`}>
     <div className="row">
-      <div className={`${classNames.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
-        <h2 className={classNames.linkHeader}>About Us</h2>
+      <div className={`${css.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
+        <h2 className={css.linkHeader}>About Us</h2>
         <ul>
           <li>
             <Link as="/about" href="/pro/wp?section=about-dpla-pro">
@@ -35,8 +35,8 @@ const FooterPro = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
-        <h2 className={classNames.linkHeader}>Communities</h2>
+      <div className={`${css.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
+        <h2 className={css.linkHeader}>Communities</h2>
         <ul>
           <li>
             <Link as="/hubs" href="/pro/wp/hubs?section=hubs">
@@ -73,8 +73,8 @@ const FooterPro = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-6 col-md-3`}>
-        <h2 className={classNames.linkHeader}>DPLA</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-6 col-md-3`}>
+        <h2 className={css.linkHeader}>DPLA</h2>
         <ul>
           <li>
             <Link href={USER_BASE_URL}>
@@ -112,7 +112,7 @@ const FooterPro = () =>
         <Button
           type="primary"
           size="large"
-          className={classNames.donateButton}
+          className={css.donateButton}
           url="/donate"
         >
           Donate
diff --git a/components/MainLayout/components/Footer/FooterUser.js b/components/MainLayout/components/Footer/FooterUser.js
index ef460ed0f..4e62caee5 100644
--- a/components/MainLayout/components/Footer/FooterUser.js
+++ b/components/MainLayout/components/Footer/FooterUser.js
@@ -5,13 +5,13 @@ import Button from "components/shared/Button";
 
 import { PRO_BASE_URL } from "constants/env";
 
-import { classNames, stylesheet } from "./Footer.css";
+import css from "./Footer.scss";
 
 const FooterUser = () =>
-  <div className={`${classNames.footer} site-max-width`}>
+  <div className={`${css.footer} site-max-width`}>
     <div className="row">
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
-        <h2 className={classNames.linkHeader}>DPLA</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
+        <h2 className={css.linkHeader}>DPLA</h2>
         <ul>
           <li>
             <Link
@@ -51,8 +51,8 @@ const FooterUser = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
-        <h2 className={classNames.linkHeader}>Tools</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
+        <h2 className={css.linkHeader}>Tools</h2>
         <ul>
           <li>
             <Link href="/primary-source-sets">
@@ -81,8 +81,8 @@ const FooterUser = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
-        <h2 className={classNames.linkHeader}>DPLA Pro</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
+        <h2 className={css.linkHeader}>DPLA Pro</h2>
         <ul>
           <li>
             <Link href={PRO_BASE_URL}>
@@ -135,7 +135,7 @@ const FooterUser = () =>
         <Button
           type="primary"
           size="large"
-          className={classNames.donateButton}
+          className={css.donateButton}
           url="/donate"
         >
           Donate
diff --git a/components/MainLayout/components/Footer/index.js b/components/MainLayout/components/Footer/index.js
index cbce489ab..06bd5a2c0 100644
--- a/components/MainLayout/components/Footer/index.js
+++ b/components/MainLayout/components/Footer/index.js
@@ -6,7 +6,7 @@ import FooterUser from "./FooterUser";
 
 import { SITE_ENV } from "constants/env";
 
-import { classNames, stylesheet } from "./Footer.css";
+import css from "./Footer.scss";
 
 const logo = "/static/images/dpla-logo.svg";
 const fbIcon = "/static/images/facebook.svg";
@@ -15,26 +15,22 @@ const tumblrIcon = "/static/images/tumblr.svg";
 const twitterIcon = "/static/images/twitter.svg";
 
 const Footer = () =>
-  <footer className={classNames.wrapper}>
+  <footer className={css.wrapper}>
     {SITE_ENV === "user" && <FooterUser />}
     {SITE_ENV === "pro" && <FooterPro />}
-    <div className={classNames.smallFooterWrapper}>
-      <div className={`${classNames.smallFooter} site-max-width`}>
+    <div className={css.smallFooterWrapper}>
+      <div className={`${css.smallFooter} site-max-width`}>
         <Link href="/">
-          <a><img className={classNames.logo} alt="DPLA Home" src={logo} /></a>
+          <a><img className={css.logo} alt="DPLA Home" src={logo} /></a>
         </Link>
-        <div className={classNames.socialIcons}>
+        <div className={css.socialIcons}>
           <a
             href="https://www.facebook.com/digitalpubliclibraryofamerica"
             title="Facebook"
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Facebook"
-              src={fbIcon}
-            />
+            <img className={css.socialButton} alt="Facebook" src={fbIcon} />
           </a>
           <a
             href="https://www.instagram.com/digpublib/"
@@ -42,11 +38,7 @@ const Footer = () =>
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Instagram"
-              src={igIcon}
-            />
+            <img className={css.socialButton} alt="Instagram" src={igIcon} />
           </a>
           <a
             href="http://digitalpubliclibraryofamerica.tumblr.com/"
@@ -54,11 +46,7 @@ const Footer = () =>
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Tumblr"
-              src={tumblrIcon}
-            />
+            <img className={css.socialButton} alt="Tumblr" src={tumblrIcon} />
           </a>
           <a
             href="https://twitter.com/dpla"
@@ -66,15 +54,10 @@ const Footer = () =>
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Twitter"
-              src={twitterIcon}
-            />
+            <img className={css.socialButton} alt="Twitter" src={twitterIcon} />
           </a>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </footer>;
 export default Footer;
diff --git a/components/MainLayout/components/GlobalHeader/index.js b/components/MainLayout/components/GlobalHeader/index.js
index cd63a0878..bfad27813 100644
--- a/components/MainLayout/components/GlobalHeader/index.js
+++ b/components/MainLayout/components/GlobalHeader/index.js
@@ -1,30 +1,27 @@
 import React from "react";
 import Link from "next/link";
+
 import NavigationUser from "../shared/NavigationUser";
 import NavigationPro from "../shared/NavigationPro";
 
-import {
-  stylesheet as desktopStylesheet,
-  classNames as desktopClassNames
-} from "../shared/DesktopStyles.css";
+import css from "../shared/DesktopStyles.scss";
 
 import { SITE_ENV } from "constants/env";
 
 const GlobalHeader = ({ isHome }) =>
-  <div className={desktopClassNames.header}>
+  <div className={css.header}>
     {SITE_ENV !== "pro" &&
       <NavigationUser
-        className={`${desktopClassNames.linksContainer} site-max-width`}
-        classNames={desktopClassNames}
+        className={`${css.linksContainer} site-max-width`}
+        css={css}
         isHome={isHome}
       />}
     {SITE_ENV === "pro" &&
       <NavigationPro
-        className={`${desktopClassNames.linksContainer} site-max-width`}
-        classNames={desktopClassNames}
+        className={`${css.linksContainer} site-max-width`}
+        css={css}
         isHome={isHome}
       />}
-    <style dangerouslySetInnerHTML={{ __html: desktopStylesheet }} />
   </div>;
 
 export default GlobalHeader;
diff --git a/components/MainLayout/components/PageHeader/PageHeader.css b/components/MainLayout/components/PageHeader/PageHeader.scss
similarity index 63%
rename from components/MainLayout/components/PageHeader/PageHeader.css
rename to components/MainLayout/components/PageHeader/PageHeader.scss
index 26dbbde3a..4ba42178d 100644
--- a/components/MainLayout/components/PageHeader/PageHeader.css
+++ b/components/MainLayout/components/PageHeader/PageHeader.scss
@@ -1,12 +1,12 @@
-@value userSiteColor, proSiteColor, secondaryButtonColor, navColor from "../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .headerSearchBar {
-  background-color: userSiteColor;
+  background-color: $userSiteColor;
   width: 100%;
 
   &.pro {
-    background-color: proSiteColor;
+    background-color: $proSiteColor;
   }
 }
 
@@ -16,12 +16,12 @@
   margin: auto;
 
   &.pro {
-    @media (max-width: mediumRem) {
+    @media (max-width: $mediumRem) {
       padding: 0;
     }
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 0;
   }
 }
@@ -29,31 +29,32 @@
 .searchBar {
   align-items: center;
   display: flex;
+  flex-direction: row;
   height: 2.5rem;
-  width: 100%;
   margin: auto 0 auto auto;
-  
-  @media (min-width: mediumRem) {
+  width: 100%;
+
+  @media (min-width: $mediumRem) {
     padding-left: 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
+    justify-self: flex-end;
     padding-left: 0;
     width: 50%;
-    justify-self: flex-end;
   }
 }
 
 .searchInput {
-  font-size: 1rem;
   border: none;
   border-radius: 0.25rem 0 0 0.25rem;
-  padding-left: 1rem;
   flex-grow: 1;
+  font-size: 1rem;
   height: 100%;
+  padding-left: 1rem;
   width: 65%;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: auto;
   }
 
@@ -71,14 +72,14 @@
 }
 
 .searchInput::placeholder {
-  transition: opacity .2s ease-out;
-  color: secondaryButtonColor;
+  transition: opacity 0.2s ease-out;
+  color: $secondaryButtonColor;
   opacity: 0.5;
 }
 
 .searchButton {
-  transition: background-color .2s ease-out;
-  background-color: secondaryButtonColor;
+  transition: background-color 0.2s ease-out;
+  background-color: $secondaryButtonColor;
   border-radius: 0 0.25rem 0.25rem 0;
   height: 100%;
   font-size: 1rem;
@@ -86,12 +87,12 @@
   padding: 0 1rem;
   width: 35%;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: auto;
   }
 
   &:hover {
-    background-color: navColor;
+    background-color: $navColor;
   }
 }
 
@@ -99,11 +100,11 @@
   padding: 0.5rem 0;
   display: none; /* hide logo in small screens */
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: block;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 1rem 0;
   }
 }
@@ -112,7 +113,7 @@
   width: 16rem;
   height: 1.95rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     width: 18rem;
     height: 2.2rem;
   }
diff --git a/components/MainLayout/components/PageHeader/index.js b/components/MainLayout/components/PageHeader/index.js
index 5cd5d0f35..76f1cb690 100644
--- a/components/MainLayout/components/PageHeader/index.js
+++ b/components/MainLayout/components/PageHeader/index.js
@@ -5,29 +5,27 @@ import DPLALogoWide from "../../../../static/images/dpla-logo-white.svg";
 
 import { SITE_ENV } from "constants/env";
 
-import { stylesheet, classNames } from "./PageHeader.css";
+import css from "./PageHeader.scss";
 
 const PageHeader = ({ searchQuery, hideSearchBar }) =>
   <div
-    className={`${classNames.headerSearchBar} ${SITE_ENV === "pro"
-      ? classNames.pro
-      : ""}`}
+    className={`${css.headerSearchBar} ${SITE_ENV === "pro" ? css.pro : ""}`}
   >
     <div
-      className={`${classNames.flexWrapper}  ${SITE_ENV === "pro"
-        ? classNames.pro
+      className={`${css.flexWrapper}  ${SITE_ENV === "pro"
+        ? css.pro
         : ""} site-max-width`}
     >
       <Link prefetch as="/" href={SITE_ENV === "user" ? "/" : "/pro"}>
-        <a className={classNames.logo} title="Home Page">
-          <DPLALogoWide className={classNames.logoImg} />
+        <a className={css.logo} title="Home Page">
+          <DPLALogoWide className={css.logoImg} />
         </a>
       </Link>
       {!hideSearchBar &&
         SITE_ENV !== "pro" &&
-        <form action="/search" className={classNames.searchBar}>
+        <form action="/search" className={css.searchBar}>
           <input
-            className={classNames.searchInput}
+            className={css.searchInput}
             name="q"
             type="search"
             placeholder="Search the collection"
@@ -35,12 +33,11 @@ const PageHeader = ({ searchQuery, hideSearchBar }) =>
             autoComplete="off"
             defaultValue={searchQuery}
           />
-          <button type="submit" className={classNames.searchButton}>
+          <button type="submit" className={css.searchButton}>
             Search
           </button>
         </form>}
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default PageHeader;
diff --git a/components/MainLayout/components/SmallScreenHeader/SmallScreenStyles.css b/components/MainLayout/components/SmallScreenHeader/SmallScreenStyles.scss
similarity index 75%
rename from components/MainLayout/components/SmallScreenHeader/SmallScreenStyles.css
rename to components/MainLayout/components/SmallScreenHeader/SmallScreenStyles.scss
index 20f9cfc27..bdb57f216 100644
--- a/components/MainLayout/components/SmallScreenHeader/SmallScreenStyles.css
+++ b/components/MainLayout/components/SmallScreenHeader/SmallScreenStyles.scss
@@ -1,13 +1,13 @@
-@value smallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
-@value navColor, mobileNavColor from "../../../../css/colors.css";
-@value sansFont from "../../../../css/typography.css";
+@import "stylesheets/breakpoints";
+@import "stylesheets/colors";
+@import "stylesheets/typography";
 
 .wrapper {
   display: block;
-  background-color: mobileNavColor;
+  background-color: $mobileNavColor;
 
   /* The GlobalHeader component handles the navigation on larger screens */
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: none;
   }
 }
@@ -21,7 +21,7 @@
 .logo {
   width: 60%;
   max-width: 15rem;
-  margin: .5rem 1rem;
+  margin: 0.5rem 1rem;
   background: url("/static/images/dpla-logo-white.svg") 0/100% no-repeat;
   display: flex;
 
@@ -43,15 +43,15 @@
   font-size: 0.75rem;
   display: flex;
   justify-content: center;
-  background-color: navColor;
+  background-color: $navColor;
 
   &.isOpen {
-    background-color: rgba(0, 0, 0, .15);
+    background-color: rgba(0, 0, 0, 0.15);
   }
 }
 
 .searchContainer {
-  background-color: navColor;
+  background-color: $navColor;
   height: 0;
   visibility: hidden;
   transition: height 0.15s ease-in-out, visibility 0s 0.15s;
@@ -83,12 +83,12 @@
 
   &::placeholder {
     color: white;
-    opacity: .5;
+    opacity: 0.5;
   }
 }
 
 .menuContainer {
-  background-color: navColor;
+  background-color: $navColor;
   margin: auto;
   padding: 0 2rem;
   font-size: 1.25rem;
@@ -110,7 +110,7 @@
   & a, & a:visited {
     color: white;
     display: block;
-    margin: .5rem 0;
+    margin: 0.5rem 0;
   }
 }
 
@@ -119,15 +119,15 @@
 }
 
 .secondaryLinks {
-  opacity: .85;
+  opacity: 0.85;
 }
 
 .tertiaryLinks {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .secondaryLinks, .tertiaryLinks {
   margin-top: 1.5rem;
-  padding-top: .75rem;
-  border-top: .075rem solid rgba(255, 255, 255, 0.5);
+  padding-top: 0.75rem;
+  border-top: 0.075rem solid rgba(255, 255, 255, 0.5);
 }
diff --git a/components/MainLayout/components/SmallScreenHeader/index.js b/components/MainLayout/components/SmallScreenHeader/index.js
index 5500cf00c..93e9155ed 100644
--- a/components/MainLayout/components/SmallScreenHeader/index.js
+++ b/components/MainLayout/components/SmallScreenHeader/index.js
@@ -3,7 +3,7 @@ import Link from "next/link";
 import NavigationUser from "../shared/NavigationUser";
 import NavigationPro from "../shared/NavigationPro";
 
-import { stylesheet, classNames } from "./SmallScreenStyles.css";
+import css from "./SmallScreenStyles.scss";
 
 import { SITE_ENV } from "constants/env";
 
@@ -32,10 +32,10 @@ class SmallScreenHeader extends Component {
     const { isSearchPage, route, isHome } = this.props;
 
     return (
-      <div className={`${classNames.wrapper}`}>
-        <div className={classNames.header}>
+      <div className={`${css.wrapper}`}>
+        <div className={css.header}>
           <Link prefetch as="/" href={SITE_ENV === "user" ? "/" : "/pro"}>
-            <a className={classNames.logo}>
+            <a className={css.logo}>
               <span>Digital Public Library of America</span>
             </a>
           </Link>
@@ -43,9 +43,7 @@ class SmallScreenHeader extends Component {
             type="button"
             aria-expanded={menuIsOpen}
             onClick={this.toggleMenu}
-            className={`${classNames.menuButton} ${menuIsOpen
-              ? classNames.isOpen
-              : ""}`}
+            className={`${css.menuButton} ${menuIsOpen ? css.isOpen : ""}`}
           >
             {!menuIsOpen && <span>Show<br />Menu</span>}
             {menuIsOpen && <span>Hide<br />Menu</span>}
@@ -53,21 +51,20 @@ class SmallScreenHeader extends Component {
         </div>
         {SITE_ENV !== "pro" &&
           <NavigationUser
-            className={`${classNames.menuContainer} ${menuIsOpen
-              ? classNames.isOpen
+            className={`${css.menuContainer} ${menuIsOpen
+              ? css.isOpen
               : ""} site-max-width`}
-            classNames={classNames}
+            css={css}
             isHome={isHome}
           />}
         {SITE_ENV === "pro" &&
           <NavigationPro
-            className={`${classNames.menuContainer} ${menuIsOpen
-              ? classNames.isOpen
+            className={`${css.menuContainer} ${menuIsOpen
+              ? css.isOpen
               : ""} site-max-width`}
-            classNames={classNames}
+            css={css}
             isHome={isHome}
           />}
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/MainLayout/components/shared/DesktopStyles.css b/components/MainLayout/components/shared/DesktopStyles.scss
similarity index 65%
rename from components/MainLayout/components/shared/DesktopStyles.css
rename to components/MainLayout/components/shared/DesktopStyles.scss
index 788b9df1f..14c5199a2 100644
--- a/components/MainLayout/components/shared/DesktopStyles.css
+++ b/components/MainLayout/components/shared/DesktopStyles.scss
@@ -1,13 +1,13 @@
-@value navColor from "../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
-@value sansFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .header {
   display: none;
-  background-color: navColor;
+  background-color: $navColor;
 
   /* The SmallScreenGlobalHeader component handles the navigation on small screens */
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: block;
   }
 
@@ -24,7 +24,7 @@
   font-size: 0.875rem;
   font-weight: 600;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-left: 0;
     padding-right: 0;
   }
@@ -37,9 +37,9 @@
   text-transform: uppercase;
 
   & > li {
-    margin-right: .75rem;
+    margin-right: 0.75rem;
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       margin-right: 1rem;
     }
   }
@@ -50,18 +50,18 @@
     display: inline-block;
     padding: 0.5rem 0;
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       padding: 0.5rem 0;
     }
   }
 }
 
 .secondaryLinks {
-  opacity: .85;
+  opacity: 0.85;
 }
 
 .tertiaryLinks {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .divider {
@@ -69,9 +69,9 @@
   height: 20px;
   width: 1px;
   background-color: rgba(255, 255, 255, 0.6);
-  margin-right: .75rem;
+  margin-right: 0.75rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-right: 1rem;
   }
 }
diff --git a/components/MainLayout/components/shared/NavigationPro.js b/components/MainLayout/components/shared/NavigationPro.js
index 5e59e73c0..d94fb5659 100644
--- a/components/MainLayout/components/shared/NavigationPro.js
+++ b/components/MainLayout/components/shared/NavigationPro.js
@@ -3,9 +3,9 @@ import Link from "next/link";
 
 import { USER_BASE_URL } from "constants/env";
 
-const NavigationPro = ({ className, style, classNames, isHome }) =>
-  <div className={className} style={style}>
-    <ul className={classNames.links}>
+const NavigationPro = ({ isHome, className, css }) =>
+  <div className={className}>
+    <ul className={css.links}>
       {!isHome &&
         <li>
           <Link prefetch as="/" href="/pro">
@@ -25,8 +25,8 @@ const NavigationPro = ({ className, style, classNames, isHome }) =>
         </Link>
       </li>
     </ul>
-    <span className={classNames.divider} />
-    <ul className={`${classNames.links} ${classNames.secondaryLinks}`}>
+    <span className={css.divider} />
+    <ul className={`${css.links} ${css.secondaryLinks}`}>
       <li>
         <Link prefetch as="/about" href="/pro/wp?section=about-dpla-pro">
           <a>About</a>
@@ -38,8 +38,8 @@ const NavigationPro = ({ className, style, classNames, isHome }) =>
         </Link>
       </li>
     </ul>
-    <span className={classNames.divider} />
-    <ul className={`${classNames.links} ${classNames.tertiaryLinks}`}>
+    <span className={css.divider} />
+    <ul className={`${css.links} ${css.tertiaryLinks}`}>
       <li>
         <Link href={USER_BASE_URL}>
           <a>DPLA Main Site</a>
diff --git a/components/MainLayout/components/shared/NavigationUser.js b/components/MainLayout/components/shared/NavigationUser.js
index 0226cae11..8a17611f0 100644
--- a/components/MainLayout/components/shared/NavigationUser.js
+++ b/components/MainLayout/components/shared/NavigationUser.js
@@ -3,9 +3,9 @@ import Link from "next/link";
 
 import { PRO_BASE_URL } from "constants/env";
 
-const NavigationUser = ({ className, style, classNames, isHome }) =>
-  <div className={className} style={style}>
-    <ul className={classNames.links}>
+const NavigationUser = ({ isHome, className, css }) =>
+  <div className={className}>
+    <ul className={css.links}>
       {!isHome &&
         <li>
           <Link prefetch href="/">
@@ -39,8 +39,8 @@ const NavigationUser = ({ className, style, classNames, isHome }) =>
         </Link>
       </li>
     </ul>
-    <span className={classNames.divider} />
-    <ul className={`${classNames.links} ${classNames.secondaryLinks}`}>
+    <span className={css.divider} />
+    <ul className={`${css.links} ${css.secondaryLinks}`}>
       <li>
         <Link prefetch as="/about" href="/about?section=about-us">
           <a>About DPLA</a>
@@ -52,8 +52,8 @@ const NavigationUser = ({ className, style, classNames, isHome }) =>
         </Link>
       </li>
     </ul>
-    <span className={classNames.divider} />
-    <ul className={`${classNames.links} ${classNames.tertiaryLinks}`}>
+    <span className={css.divider} />
+    <ul className={`${css.links} ${css.tertiaryLinks}`}>
       <li>
         <Link href={PRO_BASE_URL}>
           <a>DPLA Pro</a>
diff --git a/components/MainLayout/index.js b/components/MainLayout/index.js
index 87bb4b53e..5d5795416 100644
--- a/components/MainLayout/index.js
+++ b/components/MainLayout/index.js
@@ -14,10 +14,6 @@ import GaWrapper from "shared/GaWrapper";
 import { SITE_ENV } from "constants/env";
 import { getCurrentUrl, getCurrentFullUrl } from "utilFunctions";
 
-Router.onAppUpdated = function(nextRoute) {
-  location.href = nextRoute;
-};
-
 const MainLayout = ({
   children,
   route,
diff --git a/components/NewsComponents/TagList/TagList.css b/components/NewsComponents/TagList/TagList.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/NewsComponents/TagList/index.js b/components/NewsComponents/TagList/index.js
index 1a27cc780..f83e80e82 100644
--- a/components/NewsComponents/TagList/index.js
+++ b/components/NewsComponents/TagList/index.js
@@ -4,8 +4,6 @@ import Link from "next/link";
 import { TITLE, DESCRIPTION, NEWS_TAGS } from "constants/news";
 import { SITE_ENV } from "constants/env";
 
-import { classNames, stylesheet } from "./TagList.css";
-
 const TagList = ({ url, currentTag, keywords, author }) =>
   <ul className="collapsed">
     {(currentTag || author !== "" || keywords !== "") &&
@@ -33,7 +31,6 @@ const TagList = ({ url, currentTag, keywords, author }) =>
         : <span>{tag.name}</span>;
       return <li key={id}>{markup}</li>;
     })}
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </ul>;
 
 export default TagList;
diff --git a/components/PartnerBrowseComponents/PartnerBrowseContent.css b/components/PartnerBrowseComponents/PartnerBrowseContent.scss
similarity index 65%
rename from components/PartnerBrowseComponents/PartnerBrowseContent.css
rename to components/PartnerBrowseComponents/PartnerBrowseContent.scss
index dd5c9a2d9..eed01341e 100644
--- a/components/PartnerBrowseComponents/PartnerBrowseContent.css
+++ b/components/PartnerBrowseComponents/PartnerBrowseContent.scss
@@ -1,6 +1,6 @@
-@value warmerBackgroundColor, dimmedTextColor from "../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../css/breakpoints.css";
-@value monoFont, serifFont from "../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .featureTitle {
   width: 100%;
@@ -11,7 +11,7 @@
   line-height: 1.25;
   margin-top: 2rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-top: 4rem;
   }
 }
@@ -31,7 +31,7 @@
 }
 
 .name {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-size: 1.3125rem;
   max-width: 75%;
   margin-right: 0.75rem;
@@ -39,6 +39,6 @@
 
 .itemCount {
   margin-left: auto;
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   font-size: 1.25rem;
 }
diff --git a/components/PartnerBrowseComponents/index.js b/components/PartnerBrowseComponents/index.js
index eb0c0b5f1..d6bd4a91e 100644
--- a/components/PartnerBrowseComponents/index.js
+++ b/components/PartnerBrowseComponents/index.js
@@ -1,15 +1,16 @@
 import React from "react";
 import Link from "next/link";
-import { classNames, stylesheet } from "./PartnerBrowseContent.css";
 
 import { addCommasToNumber } from "utilFunctions";
-import { classNames as utilClassNames } from "css/utils.css";
+
+import utils from "stylesheets/utils.scss";
+import css from "./PartnerBrowseContent.scss";
 
 const Partner = ({ name, itemCount, index }) =>
   <Link href={`/search?partner="${name}"`}>
-    <a className={classNames.partnerLink}>
-      <span className={classNames.name}>{name}</span>
-      <span className={classNames.itemCount}>
+    <a className={css.partnerLink}>
+      <span className={css.name}>{name}</span>
+      <span className={css.itemCount}>
         {addCommasToNumber(itemCount)}
       </span>
     </a>
@@ -27,15 +28,14 @@ const mapPartnersToComponents = partners =>
   );
 
 const PartnerBrowseContent = ({ route, partners }) =>
-  <div className={classNames.wrapper}>
-    <div className={`${utilClassNames.container} ${classNames.partnerBrowse}`}>
+  <div className={css.wrapper}>
+    <div className={`${utils.container} ${css.partnerBrowse}`}>
       <div className={`row`}>
-        <ul className={`${classNames.partners} col-xs-12`}>
+        <ul className={`${css.partners} col-xs-12`}>
           {mapPartnersToComponents(partners)}
         </ul>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default PartnerBrowseContent;
diff --git a/components/PrimarySourceSetsComponents/AllSets/components/FiltersBar/index.js b/components/PrimarySourceSetsComponents/AllSets/components/FiltersBar/index.js
index 8570b56d9..6be0e20fb 100644
--- a/components/PrimarySourceSetsComponents/AllSets/components/FiltersBar/index.js
+++ b/components/PrimarySourceSetsComponents/AllSets/components/FiltersBar/index.js
@@ -2,17 +2,17 @@ import React from "react";
 import Select from "react-select";
 import Router from "next/router";
 
-import "react-select/dist/react-select.css";
-import { classNames, stylesheet } from "shared/FiltersBar/FiltersBar.css";
 import {
   sortOptions,
   mapTimePeriodNameToSlug,
   mapSubjectNameToSlug
 } from "constants/primarySourceSets";
 
+import css from "shared/FiltersBar/FiltersBar.scss";
+
 const SortValue = props =>
-  <span className={classNames.sortValue}>
-    <span className={classNames.sortByText}>Sort by</span>
+  <span className={css.sortValue}>
+    <span className={css.sortByText}>Sort by</span>
     <span>
       {props.value.label}
     </span>
@@ -66,16 +66,16 @@ class FiltersBar extends React.Component {
 
   render() {
     return (
-      <div className={classNames.filtersWrapper}>
-        <div className={`${classNames.filters} site-max-width`}>
+      <div className={css.filtersWrapper}>
+        <div className={`${css.filters} site-max-width`}>
           <div className="row">
-            <div className={`${classNames.filter} col-xs-12 col-md-3`}>
+            <div className={`${css.filter} col-xs-12 col-md-3`}>
               <Select
                 clearable={false}
                 searchable={false}
                 value={this.state.subjectValue}
                 onChange={this.onSubjectChange}
-                className={classNames.select}
+                className={css.select}
                 options={[
                   { value: "all-subjects", label: "All Subjects" }
                 ].concat(
@@ -86,12 +86,12 @@ class FiltersBar extends React.Component {
                 )}
               />
             </div>
-            <div className={`${classNames.filter} col-xs-12 col-md-3`}>
+            <div className={`${css.filter} col-xs-12 col-md-3`}>
               <Select
                 clearable={false}
                 searchable={false}
                 value={this.state.timePeriodValue}
-                className={classNames.select}
+                className={css.select}
                 onChange={this.onTimePeriodChange}
                 options={[
                   { value: "all-time-periods", label: "All Time Periods" }
@@ -103,12 +103,12 @@ class FiltersBar extends React.Component {
                 )}
               />
             </div>
-            <div className={`${classNames.filter} col-xs-12 col-md-4`}>
+            <div className={`${css.filter} col-xs-12 col-md-4`}>
               <Select
                 clearable={false}
                 searchable={false}
                 value={this.state.sortValue}
-                className={[classNames.select, classNames.sortSelect].join(" ")}
+                className={[css.select, css.sortSelect].join(" ")}
                 onChange={this.onSortChange}
                 valueComponent={SortValue}
                 options={sortOptions}
@@ -116,7 +116,6 @@ class FiltersBar extends React.Component {
             </div>
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/PrimarySourceSetsComponents/AllSets/components/SetsList/SetsList.css b/components/PrimarySourceSetsComponents/AllSets/components/SetsList/SetsList.scss
similarity index 53%
rename from components/PrimarySourceSetsComponents/AllSets/components/SetsList/SetsList.css
rename to components/PrimarySourceSetsComponents/AllSets/components/SetsList/SetsList.scss
index fc816e0d4..ec47f27f8 100644
--- a/components/PrimarySourceSetsComponents/AllSets/components/SetsList/SetsList.css
+++ b/components/PrimarySourceSetsComponents/AllSets/components/SetsList/SetsList.scss
@@ -1,5 +1,5 @@
-@value warmerBackgroundColor, subLinkColor, black from "../../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .setsWrapper {
   margin: -0.2rem auto 1rem;
@@ -9,29 +9,29 @@
     margin-left: -0.1rem;
     margin-right: -0.1rem;
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       margin-left: -0.5rem;
       margin-right: -0.5rem;
     }
   }
 
   & :global .col-xs-6, & :global .col-md-4 {
-    padding-left: .1rem;
-    padding-right: .1rem;
+    padding-left: 0.1rem;
+    padding-right: 0.1rem;
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       padding-left: 0.5rem;
       padding-right: 0.5rem;
     }
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 0 1rem;
-    margin-top: .5rem;
+    margin-top: 0.5rem;
     margin-bottom: 2rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 0;
     margin-top: 1.5rem;
     margin-bottom: 4rem;
@@ -39,31 +39,31 @@
 }
 
 .itemWrapper {
-  margin-top: .2rem;
+  margin-top: 0.2rem;
   margin-bottom: 1rem;
   display: flex;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 1rem;
   }
 }
 
 .item {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     background-color: transparent;
   }
 }
 
 .itemContent {
-  padding: 0 .75rem .75rem;
+  padding: 0 0.75rem 0.75rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 0 1rem 1rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 0 0 1rem;
   }
 }
@@ -71,7 +71,7 @@
 .image {
   width: 100%;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     border-radius: 3px;
   }
 }
@@ -83,30 +83,30 @@
     text-decoration: underline;
   }
 
-  @media (mediumRem) {
+  @media ($mediumRem) {
     font-size: 1.25rem;
   }
 }
 
 .timePeriod {
-  font-size: .875rem;
-  margin-top: .25rem;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
 
   & a {
-    color: subLinkColor;
+    color: $subLinkColor;
   }
 
-  @media (mediumRem) {
+  @media ($mediumRem) {
     font-size: 1.25rem;
   }
 }
 
 .tags {
-  font-size: .875rem;
-  margin-top: .25rem;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
 
   & a {
-    color: subLinkColor;
+    color: $subLinkColor;
   }
 }
 
diff --git a/components/PrimarySourceSetsComponents/AllSets/components/SetsList/index.js b/components/PrimarySourceSetsComponents/AllSets/components/SetsList/index.js
index 18f9bff39..5f09b9e6f 100644
--- a/components/PrimarySourceSetsComponents/AllSets/components/SetsList/index.js
+++ b/components/PrimarySourceSetsComponents/AllSets/components/SetsList/index.js
@@ -8,17 +8,14 @@ import {
   mapSubjectNameToSlug
 } from "constants/primarySourceSets";
 
-import { classNames, stylesheet } from "./SetsList.css";
+import css from "./SetsList.scss";
 
 const SetsList = ({ sets, route }) =>
-  <div className={`${classNames.setsWrapper} site-max-width`}>
+  <div className={`${css.setsWrapper} site-max-width`}>
     <ul className="row">
       {sets.itemListElement.map(set =>
-        <li
-          className={`${classNames.itemWrapper} col-xs-6 col-md-4`}
-          key={set.name}
-        >
-          <div className={classNames.item}>
+        <li className={`${css.itemWrapper} col-xs-6 col-md-4`} key={set.name}>
+          <div className={css.item}>
             <Link
               prefetch
               href={{
@@ -42,11 +39,11 @@ const SetsList = ({ sets, route }) =>
                 <img
                   alt=""
                   src={set.repImageUrl || set.thumbnailUrl}
-                  className={classNames.image}
+                  className={css.image}
                 />
               </a>
             </Link>
-            <div className={classNames.itemContent}>
+            <div className={css.itemContent}>
               <Link
                 prefetch
                 href={`/primary-source-sets/set?set=${extractSourceSetSlug(
@@ -54,10 +51,7 @@ const SetsList = ({ sets, route }) =>
                 )}`}
                 as={`/primary-source-sets/${extractSourceSetSlug(set["@id"])}`}
               >
-                <a
-                  className={`${classNames.title} hover-underline`}
-                  title={set.name}
-                >
+                <a className={`${css.title} hover-underline`} title={set.name}>
                   <ReactMarkdown
                     source={set.name}
                     allowedTypes={["emphasis"]}
@@ -65,14 +59,14 @@ const SetsList = ({ sets, route }) =>
                   />
                 </a>
               </Link>
-              <ul className={classNames.timePeriod}>
+              <ul className={css.timePeriod}>
                 {set.about
                   .filter(
                     ({ disambiguatingDescription }) =>
                       disambiguatingDescription === "Time Period"
                   )
                   .map((tag, i, tags) =>
-                    <li className={classNames.tag} key={`${tag}—${i}`}>
+                    <li className={css.tag} key={`${tag}—${i}`}>
                       <Link
                         prefetch
                         href={{
@@ -90,14 +84,14 @@ const SetsList = ({ sets, route }) =>
                     </li>
                   )}
               </ul>
-              <ul className={classNames.tags}>
+              <ul className={css.tags}>
                 {set.about
                   .filter(
                     ({ disambiguatingDescription }) =>
                       disambiguatingDescription === "Subject"
                   )
                   .map((tag, i, tags) =>
-                    <li key={tag.name} className={classNames.tag}>
+                    <li key={tag.name} className={css.tag}>
                       <Link
                         prefetch
                         href={{
@@ -120,7 +114,6 @@ const SetsList = ({ sets, route }) =>
         </li>
       )}
     </ul>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default SetsList;
diff --git a/components/PrimarySourceSetsComponents/BreadcrumbsModule/components/StudentMode/StudentMode.css b/components/PrimarySourceSetsComponents/BreadcrumbsModule/components/StudentMode/StudentMode.css
deleted file mode 100644
index a38fe3e24..000000000
--- a/components/PrimarySourceSetsComponents/BreadcrumbsModule/components/StudentMode/StudentMode.css
+++ /dev/null
@@ -1,72 +0,0 @@
-@value warmerBackgroundColor, linkColor from "../../../../../css/colors.css";
-
-.studentMode {
-  font-weight: 600;
-  color: #797876;
-  text-transform: uppercase;
-  position: relative;
-  /*
-    increase hitbox of button so that tooltip
-    doesn't disappear before you can hover over it, then recenter it
-  */
-  padding: 0 0 22px;
-  align-self: flex-end;
-  @media (min-width: smallRem) {
-    margin-top: 20px;
-    align-self: center;
-  }
-}
-
-.studentModeText {
-  font-size: 0.9375rem;
-  line-height: 1.1875;
-  display: inline;
-  margin-right: 8px;
-}
-
-.questionIcon {
-  width: 18px;
-  height: 18px;
-  position: relative;
-  top: 3px;
-}
-
-.tooltip {
-  background-color: rgba(22, 63, 81, 0.95);
-  color: white;
-  font-size: 0.875rem;
-  line-height: 1;
-  padding: 20px;
-  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.19);
-  position: absolute;
-  width: 266px;
-  text-transform: none;
-  text-align: left;
-  left: -125px;
-  top: 45px;
-  border-radius: 2px;
-  z-index: 1;
-}
-
-.tooltip::before {
-  content: "";
-  display: block;
-  width: 0;
-  height: 0;
-  border-left: 12px solid transparent;
-  border-right: 12px solid transparent;
-  border-bottom: 12px solid rgba(22, 63, 81, 0.95);
-  position: absolute;
-  top: -12px;
-  right: 23px;
-}
-
-.tooltipText {
-  margin-bottom: 10px;
-  font-weight: normal;
-}
-
-.tooltipLink {
-  font-weight: 600;
-  border-bottom: 1px solid white;
-}
diff --git a/components/PrimarySourceSetsComponents/BreadcrumbsModule/components/StudentMode/index.js b/components/PrimarySourceSetsComponents/BreadcrumbsModule/components/StudentMode/index.js
deleted file mode 100644
index c4680af6c..000000000
--- a/components/PrimarySourceSetsComponents/BreadcrumbsModule/components/StudentMode/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import Link from "next/link";
-
-import { stylesheet, classNames } from "./StudentMode.css";
-import Tooltip from "../../../../Tooltip";
-
-import removeQueryParams from "utilFunctions/removeQueryParams";
-
-const question = "/static/images/question.svg";
-
-const prettifyUrl = (url, set, source) => {
-  let result = url.replace(/\/set/, `/${set}`);
-  if (source) {
-    result = result.replace(/\/sources/, `/sources/${source}`);
-  }
-  return result;
-};
-
-class StudentMode extends React.Component {
-  componentWillMount() {
-    this.setState({ showTooltip: false });
-  }
-
-  showTooltip() {
-    this.setState({ showTooltip: true });
-  }
-
-  hideTooltip() {
-    this.setState({ showTooltip: false });
-  }
-
-  toggleTooltip() {
-    this.setState({ showTooltip: !this.state.showTooltip });
-  }
-
-  render() {
-    const { route } = this.props;
-    return (
-      <button
-        aria-describedby="student-mode-tooltip"
-        className={classNames.studentMode}
-        onMouseOver={() => this.showTooltip()}
-        onFocus={() => this.showTooltip()}
-        onBlur={() => this.hideTooltip()}
-        onMouseLeave={() => this.hideTooltip()}
-        onClick={() => this.toggleTooltip()}
-        tabIndex="0"
-      >
-        <h3 className={classNames.studentModeText}>Student Mode</h3>
-        <img src={question} alt="" className={classNames.questionIcon} />
-        <Tooltip
-          id="student-mode-tooltip"
-          isHidden={!this.state.showTooltip}
-          className={classNames.tooltip}
-        >
-          <p className={classNames.tooltipText}>
-            You’re viewing this Primary Source Set with the teaching guides
-            hidden.
-          </p>
-          <Link
-            prefetch
-            href={{
-              pathname: this.props.route.pathname,
-              query: removeQueryParams(route.query, ["studentMode"])
-            }}
-            as={{
-              pathname: prettifyUrl(
-                route.pathname,
-                route.query.set,
-                route.query.source
-              ),
-              query: removeQueryParams(route.query, [
-                "studentMode",
-                "set",
-                "source"
-              ])
-            }}
-          >
-            <a className={classNames.tooltipLink}>Turn on Teaching Guides</a>
-          </Link>
-        </Tooltip>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-      </button>
-    );
-  }
-}
-
-export default StudentMode;
diff --git a/components/PrimarySourceSetsComponents/BreadcrumbsModule/index.js b/components/PrimarySourceSetsComponents/BreadcrumbsModule/index.js
index 2a556df66..b29921973 100644
--- a/components/PrimarySourceSetsComponents/BreadcrumbsModule/index.js
+++ b/components/PrimarySourceSetsComponents/BreadcrumbsModule/index.js
@@ -2,13 +2,11 @@ import React from "react";
 
 import Breadcrumbs from "shared/Breadcrumbs";
 
-import { stylesheet, classNames as utilClassNames } from "css/utils.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
 
 const BreadcrumbsModule = ({ route, breadcrumbs }) =>
-  <div className={utilClassNames.breadcrumbsWrapper}>
-    <div className={[container, utilClassNames.breadcrumbsModule].join(" ")}>
+  <div className={utils.breadcrumbsWrapper}>
+    <div className={[utils.container, utils.breadcrumbsModule].join(" ")}>
       <Breadcrumbs
         breadcrumbs={breadcrumbs.map(breadcrumb =>
           Object.assign({}, breadcrumb, {
@@ -17,7 +15,6 @@ const BreadcrumbsModule = ({ route, breadcrumbs }) =>
         )}
       />
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default BreadcrumbsModule;
diff --git a/components/PrimarySourceSetsComponents/PSSFooter/PSSFooter.css b/components/PrimarySourceSetsComponents/PSSFooter/PSSFooter.css
deleted file mode 100644
index 23ef49787..000000000
--- a/components/PrimarySourceSetsComponents/PSSFooter/PSSFooter.css
+++ /dev/null
@@ -1,31 +0,0 @@
-@value warmerBackgroundColor, linkColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
-
-.wrapper {
-  background-color: warmerBackgroundColor;
-  padding: 1.5rem 0;
-}
-
-.otherInfo {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: column;
-  @media (min-width: smallRem) {
-    flex-direction: row;
-  }
-}
-
-.p {
-  font-size: 0.875rem;
-  @media (min-width: smallRem) {
-    max-width: 450px;
-  }
-}
-
-.p:first-child {
-  margin-bottom: 1rem;
-  @media (min-width: smallRem) {
-    margin-bottom: 0
-  }
-}
diff --git a/components/PrimarySourceSetsComponents/PSSFooter/PSSFooter.scss b/components/PrimarySourceSetsComponents/PSSFooter/PSSFooter.scss
new file mode 100644
index 000000000..5c0997c4b
--- /dev/null
+++ b/components/PrimarySourceSetsComponents/PSSFooter/PSSFooter.scss
@@ -0,0 +1,32 @@
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+
+.wrapper {
+  background-color: $warmerBackgroundColor;
+  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
+  padding: 1.5rem 0;
+}
+
+.otherInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  @media (min-width: $smallRem) {
+    flex-direction: row;
+  }
+}
+
+.p {
+  font-size: 0.875rem;
+  @media (min-width: $smallRem) {
+    max-width: 450px;
+  }
+}
+
+.p:first-child {
+  margin-bottom: 1rem;
+  @media (min-width: $smallRem) {
+    margin-bottom: 0;
+  }
+}
diff --git a/components/PrimarySourceSetsComponents/PSSFooter/index.js b/components/PrimarySourceSetsComponents/PSSFooter/index.js
index 62db3712b..40d9bf7de 100644
--- a/components/PrimarySourceSetsComponents/PSSFooter/index.js
+++ b/components/PrimarySourceSetsComponents/PSSFooter/index.js
@@ -1,15 +1,15 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames, stylesheet } from "./PSSFooter.css";
-import { classNames as utilClassNames } from "css/utils.css";
 import { DPLA_CONTACT_EMAIL, PSS_SUGGESTION_URL } from "constants/site";
 
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./PSSFooter.scss";
+
 const OtherInfo = () =>
-  <div className={classNames.wrapper}>
-    <div className={[container, classNames.otherInfo].join(" ")}>
-      <p className={classNames.p}>
+  <div className={css.wrapper}>
+    <div className={[utils.container, css.otherInfo].join(" ")}>
+      <p className={css.p}>
         <span>
           These sets were created and reviewed by the teachers on the&nbsp;
         </span>
@@ -19,7 +19,7 @@ const OtherInfo = () =>
           </a>
         </Link>
       </p>
-      <p className={classNames.p}>
+      <p className={css.p}>
         <span>
           To give feedback, contact us at {" "}
           <a className="link" href={`mailto:${DPLA_CONTACT_EMAIL}`}>
@@ -36,7 +36,6 @@ const OtherInfo = () =>
         </span>
       </p>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default OtherInfo;
diff --git a/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/RelatedSets.css b/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/RelatedSets.css
deleted file mode 100644
index 10373db1b..000000000
--- a/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/RelatedSets.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@value warmerBackgroundColor, elephantBlue from "../../../../css/colors.css";
-@value largeRem from "../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../css/typography.css";
-
-.wrapper {
-  background-color: warmerBackgroundColor;
-  width: 100%;
-}
-
-.relatedSets {
-  padding: 2rem 1rem;
-
-  /* overrides for react-slick css*/
-  & :global .slick-prev:before,
-  & :global .slick-next:before {
-    content: none;
-  }
-
-  & :global .slick-disabled {
-    display: none;
-  }
-
-  @media (min-width: largeRem) {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.header {
-  font-family: serifFont;
-  font-weight: bold;
-  font-size: 1rem;
-  text-transform: uppercase;
-}
-
-.setLink {
-  display: block;
-  margin-top: 1rem;
-}
-
-.setLink:hover .title {
-  text-decoration: underline;
-}
-
-.title {
-  font-size: .875rem;
-  font-weight: 600;
-  margin-top: .5rem;
-}
-
-.setImage {
-  width: 100%;
-  height: auto;
-  border-radius: 3px;
-}
diff --git a/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/RelatedSets.scss b/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/RelatedSets.scss
new file mode 100644
index 000000000..2413bb5c8
--- /dev/null
+++ b/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/RelatedSets.scss
@@ -0,0 +1,60 @@
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
+
+.wrapper {
+  background-color: $warmerBackgroundColor;
+  width: 100%;
+}
+
+.relatedSets {
+  padding: 2rem 1rem;
+
+  /* overrides for react-slick css*/
+  & :global {
+    .slick-prev:before, .slick-next:before {
+      content: none;
+    }
+
+    .slick-disabled {
+      display: none;
+    }
+  }
+
+  @media (min-width: $largeRem) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.item {
+  padding: 0 0.5rem;
+}
+
+.header {
+  font-family: $serifFont;
+  font-weight: bold;
+  font-size: 1rem;
+  text-transform: uppercase;
+}
+
+.setLink {
+  display: block;
+  margin-top: 1rem;
+}
+
+.setLink:hover .title {
+  text-decoration: underline;
+}
+
+.title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-top: 0.5rem;
+}
+
+.setImage {
+  width: 100%;
+  height: auto;
+  border-radius: 3px;
+}
diff --git a/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/index.js b/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/index.js
index c784e59ab..6d27431b6 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/index.js
+++ b/components/PrimarySourceSetsComponents/SingleSet/RelatedSets/index.js
@@ -7,42 +7,35 @@ import { NextArrow, PrevArrow } from "components/shared/CarouselNavArrows";
 
 import { extractSourceSetSlug } from "utilFunctions/";
 
-import { stylesheet, classNames } from "./RelatedSets.css";
-import { classNames as utilClassNames } from "css/utils.css";
-import { classNames as breakpoints } from "css/breakpoints.css";
-import { stylesheet as navArrowStyles } from "components/shared/CarouselNavArrows/CarouselNavArrows.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./RelatedSets.scss";
 
 const RelatedSets = ({ sets }) => {
   return (
-    <div className={classNames.wrapper}>
-      <div className={[container, classNames.relatedSets].join(" ")}>
-        <h2 className={classNames.header}>Related Primary Source Sets</h2>
+    <div className={css.wrapper}>
+      <div className={[utils.container, css.relatedSets].join(" ")}>
+        <h2 className={css.header}>Related Primary Source Sets</h2>
         <Slider
           slidesToShow={4.5}
           infinite={false}
-          nextArrow={<NextArrow className={classNames.navArrow} />}
-          prevArrow={<PrevArrow className={classNames.navArrow} />}
+          nextArrow={<NextArrow className={css.navArrow} />}
+          prevArrow={<PrevArrow className={css.navArrow} />}
           draggable={false}
           slidesToScroll={4}
           responsive={[
             {
-              breakpoint: ~~breakpoints.smallPx,
+              breakpoint: 640,
               settings: {
-                slidesToShow: 2.5,
+                slidesToShow: 1.5,
                 arrows: false,
                 draggable: true,
-                slidesToScroll: 2
+                slidesToScroll: 1
               }
             }
           ]}
         >
           {sets.map((set, index) =>
-            <div
-              key={`${set.name}-${index}`}
-              className="col-12 col-xs-6 col-md-3"
-            >
+            <div key={`${set.name}-${index}`} className={`${css.item}`}>
               <Link
                 prefetch
                 href={`/primary-source-sets/set?set=${extractSourceSetSlug(
@@ -50,15 +43,15 @@ const RelatedSets = ({ sets }) => {
                 )}`}
                 as={`/primary-source-sets/${extractSourceSetSlug(set["@id"])}`}
               >
-                <a className={classNames.setLink}>
+                <a className={css.setLink}>
                   <img
                     alt=""
                     src={set.repImageUrl || set.thumbnailUrl}
-                    className={classNames.setImage}
+                    className={css.setImage}
                   />
                   <ReactMarkdown
                     source={set.name}
-                    className={classNames.title}
+                    className={css.title}
                     allowedTypes={["emphasis"]}
                     unwrapDisallowed
                   />
@@ -68,8 +61,6 @@ const RelatedSets = ({ sets }) => {
           )}
         </Slider>
       </div>
-      <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-      <style dangerouslySetInnerHTML={{ __html: navArrowStyles }} />
     </div>
   );
 };
diff --git a/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/ResourcesTabs.css b/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/ResourcesTabs.scss
similarity index 70%
rename from components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/ResourcesTabs.css
rename to components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/ResourcesTabs.scss
index 67dfa7acd..731d2575a 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/ResourcesTabs.css
+++ b/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/ResourcesTabs.scss
@@ -1,6 +1,6 @@
-@value warmerBackgroundColor, linkColor from "../../../../css/colors.css";
-@value xSmallRem, smallRem from "../../../../css/breakpoints.css";
-@value sansFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   width: 100%;
@@ -12,7 +12,7 @@
 }
 
 .tabsWrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   width: 100%;
   border-bottom: 1px solid rgba(53, 53, 53, 0.1);
   margin-bottom: 1rem;
@@ -27,7 +27,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  @media (min-width: xSmallRem) {
+  @media (min-width: $xSmallRem) {
     width: auto;
     padding: 0 1rem;
     display: block;
@@ -42,7 +42,7 @@
   margin-right: 1rem;
   flex: 1;
   display: inline-block;
-  
+
   & a {
     display: block;
     padding: 0;
@@ -51,7 +51,7 @@
     border-bottom: 0.2rem solid transparent;
     height: 100%;
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       padding: 0 1rem 1rem;
     }
 
@@ -61,15 +61,15 @@
     }
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 0;
     font-size: 1rem;
   }
 }
 
 .activeTab a, .activeTab a:hover {
-  color: linkColor;
-  border-bottom: 0.2rem solid linkColor;
+  color: $linkColor;
+  border-bottom: 0.2rem solid $linkColor;
 }
 
 .tab:last-child {
@@ -78,7 +78,7 @@
 
 .hideOnSmallScreen {
   display: none;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline-block;
   }
 }
diff --git a/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/index.js b/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/index.js
index ba52622d3..04d4ee0a6 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/index.js
+++ b/components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/index.js
@@ -1,26 +1,23 @@
 import React from "react";
 import Link from "next/link";
 
-import { stylesheet, classNames } from "./ResourcesTabs.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import css from "./ResourcesTabs.scss";
 
 class ResourcesTabs extends React.Component {
   render() {
     const { currentTab, route } = this.props;
     return (
-      <div id="tabs" className={`${classNames.wrapper}`}>
-        <div className={`${classNames.tabsWrapper} sourceSetTabsWrapper`}>
-          <ul
-            role="tablist"
-            className={`${classNames.tabs} ${utilClassNames.container}`}
-          >
+      <div id="tabs" className={`${css.wrapper}`}>
+        <div className={`${css.tabsWrapper} sourceSetTabsWrapper`}>
+          <ul role="tablist" className={`${css.tabs} ${utils.container}`}>
             <li
               id="tab-sourceset"
               role="tab"
               aria-selected={currentTab === "sourceSet"}
               className={[
-                classNames.tab,
-                currentTab === "sourceSet" && classNames.activeTab
+                css.tab,
+                currentTab === "sourceSet" && css.activeTab
               ].join(" ")}
             >
               <Link
@@ -38,8 +35,8 @@ class ResourcesTabs extends React.Component {
               role="tab"
               aria-selected={currentTab === "additionalResources"}
               className={[
-                classNames.tab,
-                currentTab === "additionalResources" && classNames.activeTab
+                css.tab,
+                currentTab === "additionalResources" && css.activeTab
               ].join(" ")}
             >
               <Link
@@ -59,8 +56,8 @@ class ResourcesTabs extends React.Component {
               role="tab"
               aria-selected={currentTab === "teachingGuide"}
               className={[
-                classNames.tab,
-                currentTab === "teachingGuide" && classNames.activeTab
+                css.tab,
+                currentTab === "teachingGuide" && css.activeTab
               ].join(" ")}
             >
               <Link
@@ -78,7 +75,6 @@ class ResourcesTabs extends React.Component {
           </ul>
         </div>
         {this.props.children}
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/SourceSetInfo.css b/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/SourceSetInfo.scss
similarity index 72%
rename from components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/SourceSetInfo.css
rename to components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/SourceSetInfo.scss
index a66bd199b..65fe816bb 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/SourceSetInfo.css
+++ b/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/SourceSetInfo.scss
@@ -1,6 +1,6 @@
-@value warmerBackgroundColor, linkColor, colderBackgroundColor from "../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .tools {
   margin: 1rem 0 0;
@@ -33,17 +33,17 @@
 
 .wrapper {
   width: 100%;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .sourceSetInfo {
   padding: 0 0 2rem 0;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 1.5rem 1rem 3rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-left: 0;
     padding-right: 0;
   }
@@ -63,7 +63,7 @@
   position: relative;
   margin-bottom: 1rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-bottom: 1.5rem;
   }
 
@@ -79,7 +79,7 @@
   padding-top: 42%;
   width: 100%;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     border-radius: 3px;
   }
 
@@ -89,7 +89,11 @@
 }
 
 .bannerTextWrapper {
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 1) 100%
+  );
   color: white;
   display: flex;
   flex-direction: column;
@@ -100,12 +104,12 @@
   position: absolute;
   top: 0;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 1.5rem;
     border-radius: 3px;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 2rem;
   }
 
@@ -117,17 +121,17 @@
 }
 
 .bannerTitle {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 1.5rem;
   color: white;
   line-height: 1.1;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 2rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 2.5rem;
   }
 
@@ -139,15 +143,15 @@
 .showMore {
   cursor: pointer;
   display: block;
-  padding: .25rem 0;
-  border-top: .075rem solid gray;
+  padding: 0.25rem 0;
+  border-top: 0.075rem solid gray;
 
   &.open {
     display: none;
   }
 
-  @media (max-width: mediumRem) {
-    padding: .25rem 1rem 1rem;
+  @media (max-width: $mediumRem) {
+    padding: 0.25rem 1rem 1rem;
     font-size: 0.9rem;
   }
 
@@ -162,7 +166,7 @@
   margin-bottom: 1rem;
   max-height: 5.5rem;
   overflow: hidden;
-  font-family: serifFont;
+  font-family: $serifFont;
 
   @media print {
     overflow: inherit;
@@ -174,7 +178,7 @@
     max-height: none;
   }
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     margin-bottom: 0;
 
     &.open {
@@ -182,12 +186,12 @@
     }
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.125rem;
     padding: 0;
     margin-bottom: 2rem;
   }
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-bottom: 0;
   }
 
@@ -198,14 +202,14 @@
 }
 
 .sidebar {
-  border: 1px solid #E7E7E7;
+  border: 1px solid #e7e7e7;
   background-color: white;
   padding: 1rem 1rem 1.5rem;
   margin: 0 1rem;
   border-radius: 3px;
   align-self: baseline;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin: 0;
   }
 }
@@ -235,7 +239,7 @@
 .citeButton {
   width: 100%;
   text-align: center;
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
 }
 
 .link p {
@@ -243,5 +247,5 @@
 }
 
 .comma {
-  color: linkColor;
+  color: $linkColor;
 }
diff --git a/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/index.js b/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/index.js
index b792e09cf..c526acbd3 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/index.js
+++ b/components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/index.js
@@ -9,10 +9,8 @@ import {
 import Button from "components/shared/Button";
 import CiteButton from "components/shared/CiteButton";
 
-import { stylesheet, classNames } from "./SourceSetInfo.css";
-import { classNames as utilClassNames } from "css/utils.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./SourceSetInfo.scss";
 
 import { GOOGLE_CLASSROOMS_SHARE_URL } from "constants/site";
 const googleClassroom = "/static/images/google-classroom.svg";
@@ -24,7 +22,11 @@ const extractSubjects = tags =>
   tags.filter(tag => !tag.sameAs).map(tag => tag.name);
 
 class SourceSetInfo extends React.Component {
-  state = { isOpen: false };
+  state = { isOpen: false, href: "" };
+
+  componentDidMount() {
+    this.setState({ isOpen: this.isOpen, href: window.location.href });
+  }
 
   componentWillReceiveProps() {
     this.setState({ isOpen: this.props.openDescription || false });
@@ -38,21 +40,21 @@ class SourceSetInfo extends React.Component {
     const { set, currentFullUrl } = this.props;
     const authorList = set.author.map(author => author.name);
     return (
-      <div id="main" role="main" className={classNames.wrapper}>
-        <div className={[classNames.sourceSetInfo, container].join(" ")}>
-          <div className={`${classNames.removeScroll} row`}>
-            <div className={`${classNames.removeScroll} col-xs-12 col-md-8`}>
-              <div className={classNames.banner}>
+      <div id="main" role="main" className={css.wrapper}>
+        <div className={[css.sourceSetInfo, utils.container].join(" ")}>
+          <div className={`${css.removeScroll} row`}>
+            <div className={`${css.removeScroll} col-xs-12 col-md-8`}>
+              <div className={css.banner}>
                 <div
-                  className={classNames.bannerImage}
+                  className={css.bannerImage}
                   style={{
                     backgroundImage: `url(${set.repImageUrl ||
                       set.thumbnailUrl})`,
                     backgroundPosition: "50% 25%"
                   }}
                 />
-                <div className={classNames.bannerTextWrapper}>
-                  <h1 className={classNames.bannerTitle}>
+                <div className={css.bannerTextWrapper}>
+                  <h1 className={css.bannerTitle}>
                     <ReactMarkdown
                       source={set.name}
                       allowedTypes={["emphasis"]}
@@ -64,16 +66,16 @@ class SourceSetInfo extends React.Component {
               <ReactMarkdown
                 id="dpla-description"
                 source={set.hasPart.find(item => item.name === "Overview").text}
-                className={`${classNames.description} sourceSetDescription ${classNames.description} ${this
+                className={`${css.description} sourceSetDescription ${css.description} ${this
                   .state.isOpen
-                  ? classNames.open
+                  ? css.open
                   : ""}`}
               />
               <div
                 id="dpla-showmore"
                 aria-hidden="true"
-                className={`${classNames.showMore} ${this.state.isOpen
-                  ? classNames.open
+                className={`${css.showMore} ${this.state.isOpen
+                  ? css.open
                   : ""}`}
               >
                 <span
@@ -84,11 +86,11 @@ class SourceSetInfo extends React.Component {
                 </span>
               </div>
             </div>
-            <div className={`${classNames.removeScroll} col-xs-12 col-md-4`}>
-              <div className={`${classNames.sidebar} sourceSetSidebar`}>
-                <div className={classNames.metadata}>
-                  <div className={classNames.metadatum}>
-                    <h2 className={classNames.metadataHeader}>
+            <div className={`${css.removeScroll} col-xs-12 col-md-4`}>
+              <div className={`${css.sidebar} sourceSetSidebar`}>
+                <div className={css.metadata}>
+                  <div className={css.metadatum}>
+                    <h2 className={css.metadataHeader}>
                       Created By
                     </h2>
                     {set.author.map(author =>
@@ -100,8 +102,8 @@ class SourceSetInfo extends React.Component {
                       />
                     )}
                   </div>
-                  <div className={classNames.metadatum}>
-                    <h2 className={classNames.metadataHeader}>
+                  <div className={css.metadatum}>
+                    <h2 className={css.metadataHeader}>
                       Time Period
                     </h2>
                     <ul>
@@ -116,7 +118,7 @@ class SourceSetInfo extends React.Component {
                               }
                             }}
                           >
-                            <a className={`link ${classNames.link}`}>
+                            <a className={`link ${css.link}`}>
                               <ReactMarkdown
                                 source={period}
                                 allowedTypes={["emphasis"]}
@@ -128,8 +130,8 @@ class SourceSetInfo extends React.Component {
                       )}
                     </ul>
                   </div>
-                  <div className={classNames.metadatum}>
-                    <h2 className={classNames.metadataHeader}>Subjects</h2>
+                  <div className={css.metadatum}>
+                    <h2 className={css.metadataHeader}>Subjects</h2>
                     <ul>
                       {extractSubjects(set.about).map((subject, i, subjects) =>
                         <li key={subject}>
@@ -142,7 +144,7 @@ class SourceSetInfo extends React.Component {
                               }
                             }}
                           >
-                            <a className={`link ${classNames.link}`}>
+                            <a className={`link ${css.link}`}>
                               <ReactMarkdown
                                 source={subject}
                                 allowedTypes={["emphasis"]}
@@ -155,40 +157,40 @@ class SourceSetInfo extends React.Component {
                     </ul>
                   </div>
                 </div>
-                <div className={classNames.citeButton}>
+                <div className={css.citeButton}>
                   <CiteButton
                     creator={authorList}
                     displayDate={new Date(set.dateCreated).getFullYear()}
                     sourceUrl={currentFullUrl}
-                    className={classNames.citeButton}
+                    className={css.citeButton}
                     toCiteText="set"
                     title={set.name.replace(/\*/g, "")}
                   />
                 </div>
-                <div className={classNames.tools}>
-                  <div className={classNames.toolLinkAndIcon}>
-                    <img
-                      src={googleClassroom}
-                      alt=""
-                      className={classNames.toolIcon}
-                    />
-                    <a
-                      href={`${GOOGLE_CLASSROOMS_SHARE_URL}?url=${window.location.href
-                        .replace("teaching-guide", "")
-                        .replace("additional-resources", "")}`}
-                      className={classNames.toolLink}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      Share to Google Classroom
-                    </a>
-                  </div>
-                </div>
+                {this.state.href !== "" &&
+                  <div className={css.tools}>
+                    <div className={css.toolLinkAndIcon}>
+                      <img
+                        src={googleClassroom}
+                        alt=""
+                        className={css.toolIcon}
+                      />
+                      <a
+                        href={`${GOOGLE_CLASSROOMS_SHARE_URL}?url=${this.state.href
+                          .replace("teaching-guide", "")
+                          .replace("additional-resources", "")}`}
+                        className={css.toolLink}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        Share to Google Classroom
+                      </a>
+                    </div>
+                  </div>}
               </div>
             </div>
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/SourceSetSources.css b/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/SourceSetSources.scss
similarity index 72%
rename from components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/SourceSetSources.css
rename to components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/SourceSetSources.scss
index 7b7b8812d..889b85c55 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/SourceSetSources.css
+++ b/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/SourceSetSources.scss
@@ -1,12 +1,12 @@
-@value warmerBackgroundColor from "../../../../css/colors.css";
-@value xSmallRem, smallRem, largeRem from "../../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .sourceSetSources {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 4rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-top: 3rem;
   }
 }
@@ -18,7 +18,7 @@
     margin-right: 0;
   }
   margin-bottom: 28px;
-  @media (min-width: xSmallRem) {
+  @media (min-width: $xSmallRem) {
     flex-basis: calc(33% - 15px);
     margin-right: 29px;
     &:nth-child(2n) {
@@ -28,7 +28,7 @@
       margin-right: 0;
     }
   }
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     flex-basis: calc(25% - 15px);
     margin-right: 20px;
     &:nth-child(2n) {
@@ -44,14 +44,14 @@
 }
 
 .imageWrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 9px;
   position: relative;
   height: 180px;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
   }
 }
 
@@ -62,14 +62,14 @@
 }
 
 .image {
-  margin: .5rem;
+  margin: 0.5rem;
   max-width: 100%;
   max-height: 100%;
 }
 
 .title {
   font-size: 0.75rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 0.875rem;
   }
 }
diff --git a/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/index.js b/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/index.js
index 047a7a376..050c0c837 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/index.js
+++ b/components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/index.js
@@ -3,24 +3,18 @@ import ReactMarkdown from "react-markdown";
 
 import Link from "next/link";
 
-import { stylesheet, classNames } from "./SourceSetSources.css";
-import { classNames as utilClassNames } from "css/utils.css";
-import removeQueryParams from "utilFunctions/removeQueryParams";
-import extractSourceId from "utilFunctions/extractSourceId";
+import { removeQueryParams, extractSourceId } from "utilFunctions";
 
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./SourceSetSources.scss";
 
 const SourceSetSources = ({ route, sources }) =>
-  <div
-    role="tabpanel"
-    aria-labelledby="tab-sourceset"
-    className={classNames.wrapper}
-  >
-    <ul className={[classNames.sourceSetSources, container].join(" ")}>
+  <div role="tabpanel" aria-labelledby="tab-sourceset" className={css.wrapper}>
+    <ul className={[css.sourceSetSources, utils.container].join(" ")}>
       {sources.map(({ name, thumbnailUrl, useDefaultImage }, i) => {
         const sourceId = extractSourceId(sources[i]["@id"]);
         return (
-          <li className={classNames.set} key={i}>
+          <li className={css.set} key={i}>
             <Link
               key={name}
               prefetch
@@ -39,14 +33,14 @@ const SourceSetSources = ({ route, sources }) =>
             >
               <a>
                 <div
-                  className={`${classNames.imageWrapper} ${useDefaultImage
-                    ? classNames.defaultImageWrapper
+                  className={`${css.imageWrapper} ${useDefaultImage
+                    ? css.defaultImageWrapper
                     : ""}`}
                 >
-                  <img alt="" src={thumbnailUrl} className={classNames.image} />
+                  <img alt="" src={thumbnailUrl} className={css.image} />
                 </div>
                 <ReactMarkdown
-                  className={classNames.title}
+                  className={css.title}
                   source={name}
                   allowedTypes={["emphasis"]}
                   unwrapDisallowed
@@ -57,7 +51,6 @@ const SourceSetSources = ({ route, sources }) =>
         );
       })}
     </ul>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default SourceSetSources;
diff --git a/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.css b/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.scss
similarity index 79%
rename from components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.css
rename to components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.scss
index 25e158c41..bf6e5d7e5 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.css
+++ b/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.scss
@@ -1,6 +1,6 @@
-@value linkColor, subLinkColor, warmerBackgroundColor from "../../../../css/colors.css";
-@value mediumRem, smallRem, largeRem from "../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   width: 100%;
@@ -9,7 +9,7 @@
 .teachingGuide {
   /*flex-direction: column-reverse;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     flex-direction: row;
   }*/
 }
@@ -19,11 +19,11 @@
 }
 
 .content {
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-bottom: 2rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-top: 2rem;
     margin-bottom: 4rem;
   }
@@ -38,7 +38,7 @@
   line-height: 1.125;
   margin-top: 1rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-top: 2rem;
   }
 }
@@ -65,7 +65,7 @@
 }
 
 .toolLink {
-  color: subLinkColor;
+  color: $subLinkColor;
   font-size: 1rem;
   line-height: 1.25;
   font-weight: 600;
@@ -103,7 +103,7 @@
   font-size: 0.875rem;
   margin-top: 50px;
   border: 2px solid rgba(0, 0, 0, 0.04);
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   padding: 18px 20px 20px;
   margin-bottom: 1rem;
 }
@@ -115,11 +115,11 @@
 }
 
 .aboutThisHeader {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: bold;
   font-size: 1rem;
   text-transform: uppercase;
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
 }
 
 .aboutThisLink {
diff --git a/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/index.js b/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/index.js
index af5c080e1..c915ed777 100644
--- a/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/index.js
+++ b/components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/index.js
@@ -3,14 +3,12 @@ import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 
 import removeQueryParams from "utilFunctions/removeQueryParams";
-import { classNames, stylesheet } from "./TeachersGuide.css";
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import { GOOGLE_CLASSROOMS_SHARE_URL } from "constants/site";
+
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "./TeachersGuide.scss";
 
-const { container } = utilClassNames;
 const printer = "/static/images/printer.svg";
 const link = "/static/images/link.svg";
 
@@ -18,15 +16,15 @@ const printHandler = () => window.print();
 
 const TeachersGuide = ({ route, teachingGuide, setName, currentPath }) =>
   <div
-    className={classNames.wrapper}
+    className={css.wrapper}
     role="tabpanel"
     aria-labelledby="tab-teachingguide"
   >
-    <div className={`${classNames.teachingGuide} ${container}`}>
+    <div className={`${css.teachingGuide} ${utils.container}`}>
       <div className="row">
         <div className="col-xs-12 col-md-8">
-          <div className={classNames.content}>
-            <div className={contentClasses.content}>
+          <div className={css.content}>
+            <div className={contentCss.content}>
               <h3>Discussion questions</h3>
               <ReactMarkdown
                 source={
@@ -42,8 +40,8 @@ const TeachersGuide = ({ route, teachingGuide, setName, currentPath }) =>
                 }
               />
             </div>
-            <div className={classNames.aboutThis}>
-              <h3 className={classNames.aboutThisHeader}>About This Guide</h3>
+            <div className={css.aboutThis}>
+              <h3 className={css.aboutThisHeader}>About This Guide</h3>
               <div>
                 This teaching guide helps instructors use a specific primary
                 source
@@ -56,7 +54,7 @@ const TeachersGuide = ({ route, teachingGuide, setName, currentPath }) =>
                     query: removeQueryParams(route.query, ["set"])
                   }}
                 >
-                  <a className={`link ${classNames.aboutThisLink}`}>
+                  <a className={`link ${css.aboutThisLink}`}>
                     <ReactMarkdown
                       source={teachingGuide.isPartOf.name}
                       allowedTypes={["emphasis"]}
@@ -74,49 +72,44 @@ const TeachersGuide = ({ route, teachingGuide, setName, currentPath }) =>
             </div>
           </div>
         </div>
-        <div className={`col-xs-12 col-md-4 ${classNames.sidebar}`}>
-          <div
-            className={[
-              classNames.teacherTools,
-              classNames.sidebarSection
-            ].join(" ")}
-          >
-            <h3 className={classNames.sidebarHeader}>Created By</h3>
+        <div className={`col-xs-12 col-md-4 ${css.sidebar}`}>
+          <div className={[css.teacherTools, css.sidebarSection].join(" ")}>
+            <h3 className={css.sidebarHeader}>Created By</h3>
             {teachingGuide.author.map((author, i) =>
               <ReactMarkdown
-                className={classNames.sidebarSection}
+                className={css.sidebarSection}
                 key={i}
                 source={author.name + ", " + author.affiliation.name}
                 allowedTypes={["emphasis"]}
                 unwrapDisallowed
               />
             )}
-            <h3 className={classNames.sidebarHeader}>Teacher Tools</h3>
-            <div className={classNames.tools}>
-              <div className={classNames.toolLinkAndIcon}>
-                <img src={printer} alt="" className={classNames.toolIcon} />
+            <h3 className={css.sidebarHeader}>Teacher Tools</h3>
+            <div className={css.tools}>
+              <div className={css.toolLinkAndIcon}>
+                <img src={printer} alt="" className={css.toolIcon} />
                 <a
                   onClick={printHandler}
-                  className={`${classNames.toolLink} ${classNames.print}`}
+                  className={`${css.toolLink} ${css.print}`}
                 >
                   Print this Guide
                 </a>
               </div>
             </div>
           </div>
-          <div className={classNames.sidebarSection}>
-            <h3 className={classNames.sidebarHeader}>
+          <div className={css.sidebarSection}>
+            <h3 className={css.sidebarHeader}>
               Primary source analysis
             </h3>
             <p>For each source, ask students to indicate:</p>
-            <ul className={classNames.ul}>
+            <ul className={css.ul}>
               <li>the author's point of view</li>
               <li>the author's purpose</li>
               <li>historical context</li>
               <li>audience</li>
             </ul>
             <p>For inquiry-based learning, ask students to:</p>
-            <ul className={classNames.ul}>
+            <ul className={css.ul}>
               <li>
                 explain how a source tells its story and/or makes its argument
               </li>
@@ -129,10 +122,10 @@ const TeachersGuide = ({ route, teachingGuide, setName, currentPath }) =>
               <li>identify questions for further investigation</li>
             </ul>
           </div>
-          <div className={classNames.sidebarSection}>
-            <h3 className={classNames.sidebarHeader}>Additional tools</h3>
-            <ul className={classNames.ul}>
-              <li className={classNames.additionalToolWrapper}>
+          <div className={css.sidebarSection}>
+            <h3 className={css.sidebarHeader}>Additional tools</h3>
+            <ul className={css.ul}>
+              <li className={css.additionalToolWrapper}>
                 <a
                   className="link"
                   href="https://www.archives.gov/education/lessons/worksheets"
@@ -142,7 +135,7 @@ const TeachersGuide = ({ route, teachingGuide, setName, currentPath }) =>
                   Document Analysis Worksheets from the National Archives
                 </a>
               </li>
-              <li className={classNames.additionalToolWrapper}>
+              <li className={css.additionalToolWrapper}>
                 <a
                   className="link"
                   href="https://www.loc.gov/teachers/usingprimarysources/"
@@ -157,8 +150,6 @@ const TeachersGuide = ({ route, teachingGuide, setName, currentPath }) =>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
   </div>;
 
 export default TeachersGuide;
diff --git a/components/PrimarySourceSetsComponents/Source/Source.css b/components/PrimarySourceSetsComponents/Source/Source.css
deleted file mode 100644
index 8b1378917..000000000
--- a/components/PrimarySourceSetsComponents/Source/Source.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/ContentAndMetadata.css b/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/ContentAndMetadata.scss
similarity index 71%
rename from components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/ContentAndMetadata.css
rename to components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/ContentAndMetadata.scss
index a8774d35c..e58f4e00a 100644
--- a/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/ContentAndMetadata.css
+++ b/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/ContentAndMetadata.scss
@@ -1,6 +1,6 @@
-@value colderBackgroundColor, lightBorderColor, warmerBackgroundColor, subLinkColor from "../../../../../css/colors.css";
-@value smallRem, mediumRem from "../../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .contentAndMetadata {
   padding-top: 1rem;
@@ -10,7 +10,7 @@
   flex: 5;
   margin-right: 1rem;
   width: 100%;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: auto;
   }
 }
@@ -19,7 +19,7 @@
   display: flex;
   align-items: flex-start;
   flex-direction: column;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     flex-direction: row;
   }
 }
@@ -28,7 +28,7 @@
   font-size: 1.625rem;
   font-weight: 600;
   margin-bottom: 1.5rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     max-width: 70%;
   }
 }
@@ -36,17 +36,17 @@
 .content {
   margin-bottom: 1rem;
   height: 28rem;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 
   &.compact {
-    height:auto;
+    height: auto;
   }
 
-  @media (max-width: mediumRem) {
-    height: 75vh; /* this is tied to the mediaViewers.css height */
+  @media (max-width: $mediumRem) {
+    height: 75vh; /* this is tied to the mediaViewers.scss height */
 
     &.compact {
-      height:auto;
+      height: auto;
     }
   }
 }
@@ -60,7 +60,7 @@
 .longDescription {
   max-height: 10rem;
   overflow: hidden;
-  font-family: serifFont;
+  font-family: $serifFont;
 
   @media print {
     overflow: inherit;
@@ -76,16 +76,16 @@
 .showMore {
   cursor: pointer;
   display: block;
-  padding: .25rem 0;
-  border-top: .075rem solid gray;
+  padding: 0.25rem 0;
+  border-top: 0.075rem solid gray;
   font-size: 1rem;
 
   &.open {
     display: none;
   }
 
-  @media (max-width: mediumRem) {
-    padding: .25rem 1rem 1rem;
+  @media (max-width: $mediumRem) {
+    padding: 0.25rem 1rem 1rem;
   }
 
   @media print {
@@ -105,14 +105,14 @@
   flex: 2;
   margin-top: 0.75rem;
   width: 100%;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-top: 0;
     width: auto;
   }
 }
 
 .sourceInfo {
-  border: 1px solid lightBorderColor;
+  border: 1px solid $lightBorderColor;
   background-color: white;
   padding: 18px 20px 24px;
   border-radius: 3px;
@@ -127,8 +127,8 @@
   line-height: 1.4375;
   padding: 10px 0;
   width: 100%;
-  color: subLinkColor;
-  background-color: colderBackgroundColor;
+  color: $subLinkColor;
+  background-color: $colderBackgroundColor;
   margin-bottom: 15px;
   text-align: center;
 }
@@ -147,7 +147,7 @@
 }
 
 .divider {
-  border-bottom: 0.075rem solid lightBorderColor;
+  border-bottom: 0.075rem solid $lightBorderColor;
   margin: 1rem 0;
 }
 
@@ -160,7 +160,7 @@
 }
 
 .sourceLink, .sourceLink:visited {
-  color: subLinkColor;
+  color: $subLinkColor;
   font-weight: 600;
   display: flex;
 }
@@ -184,7 +184,7 @@
 }
 
 .tipsForStudents {
-  border: 1px solid lightBorderColor;
+  border: 1px solid $lightBorderColor;
   font-size: 0.875rem;
   line-height: 1.125;
   padding: 20px;
@@ -192,7 +192,7 @@
 
 .tipsForStudentsHeader {
   text-transform: uppercase;
-  font-family: serifFont;
+  font-family: $serifFont;
   font-size: 1rem;
   line-height: 1.25;
   margin-bottom: 9px;
@@ -225,7 +225,7 @@
   width: 100%;
   margin-bottom: 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     max-width: 245px;
   }
 }
@@ -233,5 +233,5 @@
 .citeButton {
   margin-bottom: 0.5rem;
   text-align: center;
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
 }
diff --git a/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/GaPssWrapper.js b/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/GaPssWrapper.js
index 42db52ecb..5ef6048a6 100644
--- a/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/GaPssWrapper.js
+++ b/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/GaPssWrapper.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactGA from "react-ga";
 import Router from "next/router";
+
 import { gaTrackingId } from "constants/env";
 import {
   getFullPath,
diff --git a/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/index.js b/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/index.js
index 23d2ec742..2a0edc079 100644
--- a/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/index.js
+++ b/components/PrimarySourceSetsComponents/Source/components/ContentAndMetadata/index.js
@@ -20,11 +20,8 @@ import {
   trackGaEvent
 } from "utilFunctions";
 
-import { classNames, stylesheet } from "./ContentAndMetadata.css";
-
-import { classNames as utilClassNames } from "css/utils.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./ContentAndMetadata.scss";
 
 const link = "/static/images/link.svg";
 const external = "/static/images/external-link-black.svg";
@@ -119,21 +116,21 @@ class ContentAndMetadata extends React.Component {
       : false;
 
     return (
-      <div className={classNames.wrapper}>
-        <div className={[classNames.contentAndMetadata, container].join(" ")}>
-          <h1 className={classNames.contentHeader}>
+      <div className={css.wrapper}>
+        <div className={[css.contentAndMetadata, utils.container].join(" ")}>
+          <h1 className={css.contentHeader}>
             <ReactMarkdown
               source={source.name}
               allowedTypes={["emphasis"]}
               unwrapDisallowed
             />
           </h1>
-          <div className={classNames.flexWrapper}>
-            <div className={classNames.contentWrapper}>
+          <div className={css.flexWrapper}>
+            <div className={css.contentWrapper}>
               <div
-                className={`${classNames.content} ${viewerComponent.type
-                  .name === "AudioPlayer"
-                  ? classNames.compact
+                className={`${css.content} ${viewerComponent.type.name ===
+                  "AudioPlayer"
+                  ? css.compact
                   : ""}`}
               >
                 {viewerComponent}
@@ -141,9 +138,9 @@ class ContentAndMetadata extends React.Component {
               {source.text &&
                 <ReactMarkdown
                   id="dpla-description"
-                  className={`${classNames.description} ${descriptionIsLong
-                    ? classNames.longDescription
-                    : ""} ${this.state.isOpen ? classNames.open : ""}`}
+                  className={`${css.description} ${descriptionIsLong
+                    ? css.longDescription
+                    : ""} ${this.state.isOpen ? css.open : ""}`}
                   source={source.text.replace(/<br>/g, "\n\n")}
                   renderers={{
                     linkReference: reference => {
@@ -163,8 +160,8 @@ class ContentAndMetadata extends React.Component {
                 <div
                   id="dpla-showmore"
                   aria-hidden="true"
-                  className={`${classNames.showMore} ${this.state.isOpen
-                    ? classNames.open
+                  className={`${css.showMore} ${this.state.isOpen
+                    ? css.open
                     : ""}`}
                 >
                   <span
@@ -176,12 +173,12 @@ class ContentAndMetadata extends React.Component {
                 </div>}
 
             </div>
-            <div className={classNames.metadata}>
-              <div className={classNames.sourceInfo}>
-                <div className={classNames.buttons}>
+            <div className={css.metadata}>
+              <div className={css.sourceInfo}>
+                <div className={css.buttons}>
                   {getSourceCitation(source) &&
                     <div
-                      className={`${classNames.citeButton} ${classNames.faveAndCiteButtons}`}
+                      className={`${css.citeButton} ${css.faveAndCiteButtons}`}
                     >
                       <CiteButton
                         toCiteText="item"
@@ -191,54 +188,54 @@ class ContentAndMetadata extends React.Component {
                       />
                     </div>}
                 </div>
-                {/* <a href={fullContentUrl} download className={classNames.button}>
+                {/* <a href={fullContentUrl} download className={css.button}>
                 Download
               </a> */}
                 {getSourceCitation(source, "credits") &&
                   <ReactMarkdown
-                    className={classNames.courtesyOf}
+                    className={css.courtesyOf}
                     source={joinIfArray(getSourceCitation(source, "credits"))}
                     allowedTypes={["emphasis"]}
                     unwrapDisallowed
                   />}
                 {source.mainEntity[0]["dct:provenance"] &&
                   <ReactMarkdown
-                    className={classNames.courtesyOf}
+                    className={css.courtesyOf}
                     source={source.mainEntity[0]["dct:provenance"].name}
                     allowedTypes={["emphasis"]}
                     unwrapDisallowed
                   />}
                 {source.copyright &&
-                  <div className={classNames.copyrightInfo}>
+                  <div className={css.copyrightInfo}>
                     <ReactMarkdown
-                      className={classNames.copyrightText}
+                      className={css.copyrightText}
                       source={source.copyright}
                       allowedTypes={["emphasis"]}
                       unwrapDisallowed
                     />
                   </div>}
-                <div className={classNames.divider} />
+                <div className={css.divider} />
                 {source.mainEntity[0]["dct:references"] &&
-                  <div className={classNames.linkWrapper}>
+                  <div className={css.linkWrapper}>
                     <a
-                      className={classNames.sourceLink}
+                      className={css.sourceLink}
                       href={`/item/${getItemId(source)}`}
                     >
                       <img
                         alt="Link icon"
                         src={link}
-                        className={classNames.linkIcon}
+                        className={css.linkIcon}
                       />
-                      <span className={classNames.linkText}>
+                      <span className={css.linkText}>
                         View item information
                       </span>
                     </a>
                   </div>}
                 {source.mainEntity[0]["dct:references"] &&
-                  <div className={classNames.linkWrapper}>
+                  <div className={css.linkWrapper}>
                     <a
                       href={getSourceLink(source)}
-                      className={`${classNames.sourceLink}`}
+                      className={`${css.sourceLink}`}
                       onClick={e => trackClickThrough(e, source)}
                       rel="noopener noreferrer"
                       target="_blank"
@@ -246,34 +243,33 @@ class ContentAndMetadata extends React.Component {
                       <img
                         alt="External link icon"
                         src={external}
-                        className={classNames.externalIcon}
+                        className={css.externalIcon}
                       />
-                      <span className={classNames.linkText}>
+                      <span className={css.linkText}>
                         View in {getPartner(source)}
                       </span>
                     </a>
                   </div>}
               </div>
-              <div className={classNames.tipsForStudents}>
-                <h2 className={classNames.tipsForStudentsHeader}>
+              <div className={css.tipsForStudents}>
+                <h2 className={css.tipsForStudentsHeader}>
                   Tips for Students
                 </h2>
-                <p className={classNames.tipDirections}>
+                <p className={css.tipDirections}>
                   For this source, consider:
                 </p>
-                <ul className={classNames.tips}>
-                  <li className={classNames.tip}>
+                <ul className={css.tips}>
+                  <li className={css.tip}>
                     the author's point of view
                   </li>
-                  <li className={classNames.tip}>the author's purpose</li>
-                  <li className={classNames.tip}>historical context</li>
-                  <li className={classNames.tip}>audience</li>
+                  <li className={css.tip}>the author's purpose</li>
+                  <li className={css.tip}>historical context</li>
+                  <li className={css.tip}>audience</li>
                 </ul>
               </div>
             </div>
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/CarouselSlider.js b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/CarouselSlider.js
index 2a7d0314d..bf2063134 100644
--- a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/CarouselSlider.js
+++ b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/CarouselSlider.js
@@ -7,17 +7,15 @@ import { PrevArrow, NextArrow } from "components/shared/CarouselNavArrows";
 
 import { extractSourceId, removeQueryParams } from "utilFunctions";
 
-import { stylesheet as navArrowStyles } from "components/shared/CarouselNavArrows/CarouselNavArrows.css";
-import { classNames } from "./SourceCarousel.css";
-import breakpoints from "css/breakpoints.css";
+import css from "./SourceCarousel.scss";
 
 const CarouselSlider = ({ currentSourceIdx, sources, route }) =>
   <div>
     <Slider
       slidesToShow={6}
       infinite={false}
-      nextArrow={<NextArrow className={classNames.carouselNavArrow} />}
-      prevArrow={<PrevArrow className={classNames.carouselNavArrow} />}
+      nextArrow={<NextArrow className={css.carouselNavArrow} />}
+      prevArrow={<PrevArrow className={css.carouselNavArrow} />}
       draggable={false}
       slidesToScroll={6}
       initialSlide={
@@ -28,19 +26,20 @@ const CarouselSlider = ({ currentSourceIdx, sources, route }) =>
       }
       responsive={[
         {
-          breakpoint: ~~breakpoints.smallPx,
+          breakpoint: 640,
           settings: {
             arrows: false,
             centerMode: true,
             centerPadding: "12.5%",
             slidesToShow: 1.25,
-            draggable: true
+            draggable: true,
+            slidesToScroll: 1
           }
         }
       ]}
     >
       {sources.map(({ name, thumbnailUrl, useDefaultImage }, i) =>
-        <div key={name}>
+        <div key={name} className={css.item}>
           {/* for some reason react-slick can't have <Link /> as direct child */}
           <Link
             prefetch
@@ -56,18 +55,18 @@ const CarouselSlider = ({ currentSourceIdx, sources, route }) =>
               })
             }}
           >
-            <a className={classNames.item}>
+            <a>
               <div
                 className={[
-                  classNames.itemImgWrapper,
-                  useDefaultImage ? classNames.defaultImageWrapper : "",
-                  i === currentSourceIdx && classNames.currentItemImgWrapper
+                  css.itemImgWrapper,
+                  useDefaultImage ? css.defaultImageWrapper : "",
+                  i === currentSourceIdx && css.currentItemImgWrapper
                 ].join(" ")}
               >
-                <img alt="" src={thumbnailUrl} className={classNames.itemImg} />
+                <img alt="" src={thumbnailUrl} className={css.itemImg} />
               </div>
               <ReactMarkdown
-                className={classNames.itemText}
+                className={css.itemText}
                 source={name}
                 allowedTypes={["emphasis"]}
                 unwrapDisallowed
@@ -77,7 +76,6 @@ const CarouselSlider = ({ currentSourceIdx, sources, route }) =>
         </div>
       )}
     </Slider>
-    <style dangerouslySetInnerHTML={{ __html: navArrowStyles }} />
   </div>;
 
 export default CarouselSlider;
diff --git a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/NextArrow.js b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/NextArrow.js
deleted file mode 100644
index 8813de760..000000000
--- a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/NextArrow.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import { classNames } from "./SourceCarousel.css";
-const largeChevron = "/static/images/chevron-thin.svg";
-
-const NextArrow = ({ onClick, className }) =>
-  <button className={classNames.nextArrow} onClick={onClick}>
-    <img
-      alt=""
-      className={[classNames.nextChevron, className].join(" ")}
-      src={largeChevron}
-    />
-  </button>;
-
-export default NextArrow;
diff --git a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/PrevArrow.js b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/PrevArrow.js
deleted file mode 100644
index ba4c807be..000000000
--- a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/PrevArrow.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import { classNames } from "./SourceCarousel.css";
-const largeChevron = "/static/images/chevron-thin.svg";
-
-const PrevArrow = ({ onClick, className }) =>
-  <button className={classNames.prevArrow} onClick={onClick}>
-    <img
-      alt=""
-      className={[classNames.backChevron, className].join(" ")}
-      src={largeChevron}
-    />
-  </button>;
-
-export default PrevArrow;
diff --git a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/SourceCarousel.css b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/SourceCarousel.scss
similarity index 63%
rename from components/PrimarySourceSetsComponents/Source/components/SourceCarousel/SourceCarousel.css
rename to components/PrimarySourceSetsComponents/Source/components/SourceCarousel/SourceCarousel.scss
index 4eb52955a..aa0711edd 100644
--- a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/SourceCarousel.css
+++ b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/SourceCarousel.scss
@@ -1,14 +1,14 @@
-@value linkColor, warmerBackgroundColor, secondaryButtonColor from "../../../../../css/colors.css";
-@value smallRem, mediumRem from "../../../../../css/breakpoints.css";
-@value sansFont from "../../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   padding: 0.75rem 0 0 0;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-top: 4rem;
     padding: 2rem 0;
-    background-color: warmerBackgroundColor;
+    background-color: $warmerBackgroundColor;
   }
 }
 
@@ -16,20 +16,16 @@
   padding-right: 0;
   padding-left: 0;
   /* overrides for react-slick css*/
-  & :global .slick-prev:before,
-  & :global .slick-next:before {
+  & :global .slick-prev:before, & :global .slick-next:before {
     content: none;
   }
-  & :global .slick-disabled,
-  & :global .slick-next,
-  & :global .slick-prev {
+  & :global .slick-disabled, & :global .slick-next, & :global .slick-prev {
     display: none;
   }
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-right: 1rem;
     padding-left: 1rem;
-    & :global .slick-next,
-    & :global .slick-prev {
+    & :global .slick-next, & :global .slick-prev {
       display: block;
     }
   }
@@ -40,7 +36,7 @@
 
 :global .slick-list {
   display: none;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: block;
   }
 }
@@ -50,12 +46,12 @@
   justify-content: space-between;
   align-items: baseline;
   flex-direction: column;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-bottom: 1rem;
   }
 }
 
-@media (min-width: smallRem) {
+@media (min-width: $smallRem) {
   .headerAndNav {
     flex-direction: row;
   }
@@ -66,7 +62,7 @@
   font-weight: normal;
   margin-left: 1rem;
   margin-right: 1rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-weight: 600;
     margin-left: 0;
     margin-right: 0;
@@ -78,40 +74,43 @@
   display: flex;
 }
 
+.item:last-child {
+  margin-right: 0;
+}
+
 .item {
   display: flex;
-  position: relative;
   flex-direction: column;
-}
-
-.item:last-child {
-  margin-right: 0;
+  padding: 0 0.5rem;
+  position: relative;
 }
 
 .itemText {
   font-size: 0.875rem;
   line-height: 1.0625;
   padding: 0 0.25rem;
-  width: 10rem;
+  width: 100%;
 }
 
 .itemImgWrapper {
   align-items: center;
   background-color: white;
+  border: 0.3rem solid transparent;
   display: flex;
   height: 10rem;
   justify-content: center;
   margin-bottom: 0.5rem;
-  width: 10rem;
+  padding: 1rem;
 }
 
 .itemImg {
-  margin: .75rem;
+  height: 100%;
   object-fit: contain;
+  width: 100%;
 }
 
 .currentItemImgWrapper {
-  border: 0.3rem solid secondaryButtonColor;
+  border: 0.3rem solid $secondaryButtonColor;
 }
 
 .prevAndNextButtons {
@@ -120,47 +119,49 @@
   margin-top: 0.75rem;
   justify-content: flex-end;
   width: 100%;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: auto;
   }
 }
 
-.nextItemButton,
-.previousItemButton {
-  width: 100%;
+.nextItemButton, .previousItemButton {
   font-size: 1rem;
-  padding: .75rem 0;
   font-weight: 600;
-  @media (min-width: smallRem) {
+  padding: 0.75rem 0;
+  white-space: nowrap;
+  width: 100%;
+
+  @media (min-width: $smallRem) {
     padding: 0;
     width: auto;
   }
 }
 
-.nextItemButton {
-  background-color: linkColor;
+.nextItemButton, .nextItemButton:visited {
+  background-color: $linkColor;
   color: white;
-  @media (min-width: smallRem) {
+
+  @media (min-width: $smallRem) {
     background-color: transparent;
   }
-  @media (min-width: smallRem) {
-    color: linkColor;
+  @media (min-width: $smallRem) {
+    color: $linkColor;
   }
 }
 
-.previousItemButton {
+.previousItemButton, .previousItemButton:visited {
   color: black;
-  background-color: #E3E0DA;
-  @media (min-width: smallRem) {
+  background-color: #e3e0da;
+  @media (min-width: $smallRem) {
     margin-right: 1rem;
-    color: linkColor;
+    color: $linkColor;
     background-color: transparent;
   }
 }
 
 .disabledNextOrPrevButton {
   cursor: not-allowed;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
 }
@@ -176,9 +177,9 @@
     fill: white;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     & path {
-      fill: linkColor;
+      fill: $linkColor;
     }
   }
 
@@ -189,9 +190,9 @@
       fill: black;
     }
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       & path {
-        fill: linkColor;
+        fill: $linkColor;
       }
     }
   }
@@ -209,13 +210,17 @@
 
 .defaultImageWrapper {
   align-items: center;
-  background-color: warmerBackgroundColor;
+  background-color: white;
   background-position: 50%;
   background-repeat: no-repeat;
   background-size: 30%;
   display: flex;
   justify-content: center;
 
+  & .itemImg {
+    width: 50%;
+  }
+
   & img {
     min-height: auto;
     min-width: auto;
diff --git a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/index.js b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/index.js
index 889ed788f..9a9c416aa 100644
--- a/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/index.js
+++ b/components/PrimarySourceSetsComponents/Source/components/SourceCarousel/index.js
@@ -5,20 +5,18 @@ import ReactMarkdown from "react-markdown";
 import CarouselSlider from "./CarouselSlider";
 import ThickChevron from "../../../../../static/images/chevron-thick-orange.svg";
 
-import extractSourceId from "utilFunctions/extractSourceId";
-import removeQueryParams from "utilFunctions/removeQueryParams";
+import { extractSourceId, removeQueryParams } from "utilFunctions";
 
-import { classNames, stylesheet } from "./SourceCarousel.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import css from "./SourceCarousel.scss";
 
-const { container } = utilClassNames;
 const thickChevron = "/static/images/chevron-thick-orange.svg";
 
 const SourceCarousel = ({ sources, set, currentSourceIdx, route }) =>
-  <div className={classNames.wrapper}>
-    <div className={[classNames.sourceCarousel, container].join(" ")}>
-      <div className={classNames.headerAndNav}>
-        <h2 className={classNames.header}>
+  <div className={css.wrapper}>
+    <div className={[css.sourceCarousel, utils.container].join(" ")}>
+      <div className={css.headerAndNav}>
+        <h2 className={css.header}>
           <span>{`Item ${currentSourceIdx + 1} of ${sources.length}
             in the Primary Source Set `}</span>
           <Link
@@ -35,7 +33,7 @@ const SourceCarousel = ({ sources, set, currentSourceIdx, route }) =>
               )
             }}
           >
-            <a className={`link ${classNames.linkToSourceSet}`}>
+            <a className={`link ${css.linkToSourceSet}`}>
               <ReactMarkdown
                 source={set.name}
                 allowedTypes={["emphasis"]}
@@ -44,7 +42,7 @@ const SourceCarousel = ({ sources, set, currentSourceIdx, route }) =>
             </a>
           </Link>
         </h2>
-        <div className={classNames.prevAndNextButtons}>
+        <div className={css.prevAndNextButtons}>
           {currentSourceIdx > 0
             ? <Link
                 prefetch
@@ -64,20 +62,18 @@ const SourceCarousel = ({ sources, set, currentSourceIdx, route }) =>
                   })
                 }}
               >
-                <a
-                  className={`${classNames.previousItemButton} hover-underline`}
-                >
+                <a className={`${css.previousItemButton} hover-underline`}>
                   <ThickChevron
-                    className={`${classNames.thickChevron} ${classNames.flippedH}`}
+                    className={`${css.thickChevron} ${css.flippedH}`}
                   />
                   <span>Previous Item</span>
                 </a>
               </Link>
             : <button
-                className={`${classNames.previousItemButton} ${classNames.disabledNextOrPrevButton}`}
+                className={`${css.previousItemButton} ${css.disabledNextOrPrevButton}`}
               >
                 <ThickChevron
-                  className={`${classNames.thickChevron} ${classNames.flippedH}`}
+                  className={`${css.thickChevron} ${css.flippedH}`}
                 />
                 <span>Previous Item</span>
               </button>}
@@ -100,16 +96,16 @@ const SourceCarousel = ({ sources, set, currentSourceIdx, route }) =>
                   })
                 }}
               >
-                <a className={`${classNames.nextItemButton} hover-underline`}>
+                <a className={`${css.nextItemButton} hover-underline`}>
                   <span>Next Item</span>
-                  <ThickChevron className={classNames.thickChevron} />
+                  <ThickChevron className={css.thickChevron} />
                 </a>
               </Link>
             : <button
-                className={`${classNames.nextItemButton} ${classNames.disabledNextOrPrevButton}`}
+                className={`${css.nextItemButton} ${css.disabledNextOrPrevButton}`}
               >
                 <span>Next Item</span>
-                <ThickChevron className={classNames.thickChevron} />
+                <ThickChevron className={css.thickChevron} />
               </button>}
         </div>
       </div>
@@ -119,7 +115,6 @@ const SourceCarousel = ({ sources, set, currentSourceIdx, route }) =>
         route={route}
       />
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default SourceCarousel;
diff --git a/components/SearchComponents/FiltersList/FiltersList.css b/components/SearchComponents/FiltersList/FiltersList.scss
similarity index 74%
rename from components/SearchComponents/FiltersList/FiltersList.css
rename to components/SearchComponents/FiltersList/FiltersList.scss
index 434cc53ac..82318fa86 100644
--- a/components/SearchComponents/FiltersList/FiltersList.css
+++ b/components/SearchComponents/FiltersList/FiltersList.scss
@@ -1,12 +1,12 @@
-@value warmerBackgroundColor, linkColor, darkSecondaryButtonColor, secondaryButtonColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
-@value sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .filtersListWrapper {
   width: 100%;
 
-  @media (min-width: smallRem) {
-    background-color: warmerBackgroundColor;
+  @media (min-width: $smallRem) {
+    background-color: $warmerBackgroundColor;
     box-shadow: inset 0 -0.075rem 0.075rem 0 rgba(0, 0, 0, 0.05);
   }
 }
@@ -24,7 +24,7 @@
     max-height: 20rem;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     max-height: none;
     visibility: visible;
     overflow: visible;
@@ -36,14 +36,14 @@
 }
 
 .labelAndFilters {
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: flex;
     align-items: center;
   }
 }
 
 .labelText {
-  color: darkSecondaryButtonColor;
+  color: $darkSecondaryButtonColor;
   font-weight: 600;
   font-size: 1rem;
   flex-shrink: 0;
@@ -51,7 +51,7 @@
   display: block;
   margin: 0.5rem 0;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 0.75rem;
     margin-top: 0.1rem;
   }
@@ -63,7 +63,7 @@
 }
 
 .filter {
-  background-color: secondaryButtonColor;
+  background-color: $secondaryButtonColor;
   color: white;
   font-size: 0.875rem;
   font-weight: 600;
@@ -93,7 +93,7 @@
 }
 
 .clearAll, .clearAll:visited {
-  color: linkColor;
+  color: $linkColor;
   font-weight: 600;
   flex-shrink: 0;
   font-size: 0.875rem;
@@ -104,10 +104,10 @@
     text-decoration: underline;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1rem;
     align-self: baseline;
-    color: linkColor;
+    color: $linkColor;
     margin-top: 0.2rem;
   }
 }
@@ -121,5 +121,5 @@
 }
 
 .clearAllIconPath {
-  fill: linkColor;
+  fill: $linkColor;
 }
diff --git a/components/SearchComponents/FiltersList/index.js b/components/SearchComponents/FiltersList/index.js
index 8f946988e..ff9884a34 100644
--- a/components/SearchComponents/FiltersList/index.js
+++ b/components/SearchComponents/FiltersList/index.js
@@ -8,8 +8,8 @@ import {
 } from "constants/search";
 import { removeQueryParams, joinIfArray } from "utilFunctions";
 
-import { classNames, stylesheet } from "./FiltersList.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import css from "./FiltersList.scss";
 
 const closeIcon = "/static/images/close-white.svg";
 
@@ -35,7 +35,7 @@ const clearFacet = (query, queryKey, facet) => {
 };
 
 const Filter = ({ name, queryKey, route }) =>
-  <li className={classNames.filter}>
+  <li className={css.filter}>
     <Link
       prefetch
       href={{
@@ -53,12 +53,12 @@ const Filter = ({ name, queryKey, route }) =>
       }}
     >
       <a
-        className={classNames.filterLink}
+        className={css.filterLink}
         title={`Remove ${name} filter`}
         aria-label={`Remove ${name} filter`}
       >
-        <span className={classNames.filterText}>{name}</span>
-        <img src={closeIcon} className={classNames.closeIcon} alt="" />
+        <span className={css.filterText}>{name}</span>
+        <img src={closeIcon} className={css.closeIcon} alt="" />
       </a>
     </Link>
   </li>;
@@ -70,15 +70,15 @@ class FiltersList extends React.Component {
     return Object.keys(query).some(queryKey =>
       possibleFacets.includes(mapURLPrettifiedFacetsToUgly[queryKey])
     )
-      ? <div className={classNames.filtersListWrapper}>
+      ? <div className={css.filtersListWrapper}>
           <div
             className={`${showFilters
-              ? classNames.isOpen
-              : ""} ${classNames.filtersList} ${utilClassNames.container}`}
+              ? css.isOpen
+              : ""} ${css.filtersList} ${utils.container}`}
           >
-            <div className={classNames.labelAndFilters}>
-              <span className={classNames.labelText}>Filtered by</span>
-              <ul className={classNames.filters}>
+            <div className={css.labelAndFilters}>
+              <span className={css.labelText}>Filtered by</span>
+              <ul className={css.filters}>
                 {Object.keys(query).map((queryKey, index) => {
                   const value = joinIfArray(query[queryKey], "|");
                   if (
@@ -118,9 +118,9 @@ class FiltersList extends React.Component {
                 query: Object.assign({}, clearAllFacets(query))
               }}
             >
-              <a className={classNames.clearAll}>
+              <a className={css.clearAll}>
                 <svg
-                  className={classNames.clearAllIcon}
+                  className={css.clearAllIcon}
                   width="18"
                   height="18"
                   viewBox="0 0 18 18"
@@ -129,7 +129,7 @@ class FiltersList extends React.Component {
                   <g fill="none" fillRule="evenodd">
                     <path d="M-9-9h36v36H-9z" />
                     <path
-                      className={classNames.clearAllIconPath}
+                      className={css.clearAllIconPath}
                       d="M11.1869671 9.0007313l6.6321036-6.6336231c.241215-.2405136.241215-.6305716 0-.8710852L16.5043505.1805657C16.3886778.0648899 16.2320966 0 16.0684517 0c-.1636448 0-.3202116.0648899-.4358987.1805657L8.9997271 6.8134666 2.3669012.1805657c-.230634-.23134078-.6404416-.23134078-.8710756 0L.18038312 1.496023c-.24051083.2405136-.24051083.6305716 0 .8710852L6.8132094 9.0007313.18038312 15.6329099c-.24051083.2405136-.24051083.6305716 0 .8717894l1.31544248 1.314735C1.6107941 17.9351083 1.7680795 18 1.9317247 18c.1629298 0 .3202116-.0648917.4351946-.1805657l6.6328258-6.6329009 6.6328259 6.6329009c.1156727.115674.2722539.1805657.4358988.1805657.1636448 0 .3202116-.0648917.4358987-.1805657l1.3147202-1.314735c.2412151-.2412178.2412151-.6312758 0-.8717894l-6.6321216-6.6321786z"
                     />
                   </g>
@@ -138,7 +138,6 @@ class FiltersList extends React.Component {
               </a>
             </Link>
           </div>
-          <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
         </div>
       : null;
   }
diff --git a/components/SearchComponents/MainContent/MainContent.css b/components/SearchComponents/MainContent/MainContent.scss
similarity index 61%
rename from components/SearchComponents/MainContent/MainContent.css
rename to components/SearchComponents/MainContent/MainContent.scss
index 233674103..54b59495d 100644
--- a/components/SearchComponents/MainContent/MainContent.css
+++ b/components/SearchComponents/MainContent/MainContent.scss
@@ -1,17 +1,17 @@
-@value warmerBackgroundColor from "../../../css/colors.css";
-@value smallRem, mediumRem from "../../../css/breakpoints.css";
-@value sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .mainContent {
   display: flex;
   flex-direction: column;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     padding-right: 0;
     padding-left: 0;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-bottom: 150px;
     margin-top: 2rem;
     flex-direction: row;
@@ -21,11 +21,11 @@
 .resultsAndPagination {
   flex-basis: 66%;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     flex-basis: 75%;
   }
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     margin-top: 1rem;
   }
 }
@@ -42,13 +42,13 @@
     max-height: 200rem;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-right: 1rem;
     max-height: none;
     visibility: visible;
     overflow: visible;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
   }
 }
diff --git a/components/SearchComponents/MainContent/Sidebar/Sidebar.css b/components/SearchComponents/MainContent/Sidebar/Sidebar.scss
similarity index 68%
rename from components/SearchComponents/MainContent/Sidebar/Sidebar.css
rename to components/SearchComponents/MainContent/Sidebar/Sidebar.scss
index 21f6f2250..73fa4e70b 100644
--- a/components/SearchComponents/MainContent/Sidebar/Sidebar.css
+++ b/components/SearchComponents/MainContent/Sidebar/Sidebar.scss
@@ -1,12 +1,12 @@
-@value formLabelColor, dimmedTextColor from "../../../../css/colors.css";
-@value smallRem, mediumRem from "../../../../css/breakpoints.css";
-@value sansFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .sidebar {
   flex-shrink: 0;
   margin: 0 0.5rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin: 0;
   }
 
@@ -15,7 +15,7 @@
     font-size: 1rem;
     font-weight: 600;
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       padding: 0.5rem;
       font-size: 1.2rem;
     }
@@ -39,15 +39,15 @@
 }
 
 .activeFacetName {
-  color: formLabelColor;
+  color: $formLabelColor;
   font-weight: bold;
 }
 
 .facetCount {
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   flex-basis: 20%;
   font-size: 0.8125rem;
-  margin-left: .25rem;
+  margin-left: 0.25rem;
   text-align: right;
 }
 
@@ -66,11 +66,11 @@
   }
 
   & input {
-    border: 0.05rem solid dimmedTextColor;
+    border: 0.05rem solid $dimmedTextColor;
     border-radius: 0.125rem;
     padding: 0.5rem 0.5rem;
   }
 }
 
 .dateButton {
-}
\ No newline at end of file
+}
diff --git a/components/SearchComponents/MainContent/Sidebar/index.js b/components/SearchComponents/MainContent/Sidebar/index.js
index 8070b1c21..d5f15184a 100644
--- a/components/SearchComponents/MainContent/Sidebar/index.js
+++ b/components/SearchComponents/MainContent/Sidebar/index.js
@@ -16,19 +16,15 @@ import {
   removeQueryParams
 } from "utilFunctions";
 
-import { classNames, stylesheet } from "./Sidebar.css";
+import css from "./Sidebar.scss";
 
 const FacetLink = ({ route, queryKey, termObject, disabled }) =>
   disabled
-    ? <span className={[classNames.facet].join(" ")}>
-        <span
-          className={[classNames.facetName, classNames.activeFacetName].join(
-            " "
-          )}
-        >
+    ? <span className={[css.facet].join(" ")}>
+        <span className={[css.facetName, css.activeFacetName].join(" ")}>
           {`${termObject.term} `}
         </span>
-        <span className={classNames.facetCount}>
+        <span className={css.facetCount}>
           {addCommasToNumber(termObject.count)}
         </span>
       </span>
@@ -45,11 +41,11 @@ const FacetLink = ({ route, queryKey, termObject, disabled }) =>
           })
         }}
       >
-        <a className={classNames.facet}>
-          <span className={classNames.facetName}>
+        <a className={css.facet}>
+          <span className={css.facetName}>
             {`${termObject.term} `}
           </span>
-          <span className={classNames.facetCount}>
+          <span className={css.facetCount}>
             {addCommasToNumber(termObject.count)}
           </span>
         </a>
@@ -164,10 +160,10 @@ class DateFacet extends React.Component {
       <form
         action={this.props.route.pathname}
         method="get"
-        className={classNames.dateRangeFacet}
+        className={css.dateRangeFacet}
         onSubmit={e => this.handleDateSubmit(e)}
       >
-        <label className={classNames.dateFacet} htmlFor="after-date">
+        <label className={css.dateFacet} htmlFor="after-date">
           <span>Between Year</span>
           <input
             id="after-date"
@@ -179,7 +175,7 @@ class DateFacet extends React.Component {
             onKeyDown={e => this.handleKeyDown(e)}
           />
         </label>
-        <label className={classNames.dateFacet} htmlFor="before-date">
+        <label className={css.dateFacet} htmlFor="before-date">
           <span>and Year</span>
           <input
             id="before-date"
@@ -194,11 +190,7 @@ class DateFacet extends React.Component {
         {Object.entries(formVals).map(([k, v], index) => {
           return <input type="hidden" name={k} key={index} value={v} />;
         })}
-        <Button
-          type="secondary"
-          className={classNames.dateButton}
-          mustSubmit={true}
-        >
+        <Button type="secondary" className={css.dateButton} mustSubmit={true}>
           Update
         </Button>
       </form>
@@ -229,7 +221,7 @@ class Sidebar extends React.Component {
       );
     let hasDates = false;
     return (
-      <div className={classNames.sidebar}>
+      <div className={css.sidebar}>
         <h2>Refine your search</h2>
         <Accordion
           items={Object.keys(facets).map((key, i) => {
@@ -275,7 +267,6 @@ class Sidebar extends React.Component {
             }
           })}
         />
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/SearchComponents/MainContent/index.js b/components/SearchComponents/MainContent/index.js
index 992212b4b..ab2667b82 100644
--- a/components/SearchComponents/MainContent/index.js
+++ b/components/SearchComponents/MainContent/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { classNames, stylesheet } from "./MainContent.css";
 
 import GridView from "components/shared/GridView";
 import ListView from "components/shared/ListView";
@@ -8,9 +7,8 @@ import Sidebar from "./Sidebar";
 
 import { removeQueryParams, extractItemId } from "utilFunctions";
 
-import { classNames as utilClassNames } from "css/utils.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./MainContent.scss";
 
 const addLinkInfoToResults = (results, query) =>
   results.map((item, idx) => {
@@ -35,16 +33,12 @@ const addLinkInfoToResults = (results, query) =>
   });
 
 const MainContent = ({ results, route, facets, paginationInfo, hideSidebar }) =>
-  <div className={classNames.wrapper}>
-    <div className={[container, classNames.mainContent].join(" ")}>
-      <div
-        className={`${!hideSidebar
-          ? classNames.isOpen
-          : ""} ${classNames.sidebar}`}
-      >
+  <div className={css.wrapper}>
+    <div className={[utils.container, css.mainContent].join(" ")}>
+      <div className={`${!hideSidebar ? css.isOpen : ""} ${css.sidebar}`}>
         <Sidebar route={route} facets={facets} />
       </div>
-      <div id="main" role="main" className={classNames.resultsAndPagination}>
+      <div id="main" role="main" className={css.resultsAndPagination}>
         {route.query.list_view === "grid"
           ? <GridView
               route={route}
@@ -65,7 +59,6 @@ const MainContent = ({ results, route, facets, paginationInfo, hideSidebar }) =>
         />
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default MainContent;
diff --git a/components/SearchComponents/OptionsBar/OptionsBar.css b/components/SearchComponents/OptionsBar/OptionsBar.scss
similarity index 83%
rename from components/SearchComponents/OptionsBar/OptionsBar.css
rename to components/SearchComponents/OptionsBar/OptionsBar.scss
index d01f2d954..32505207b 100644
--- a/components/SearchComponents/OptionsBar/OptionsBar.css
+++ b/components/SearchComponents/OptionsBar/OptionsBar.scss
@@ -1,10 +1,10 @@
-@value warmerBackgroundColor, dimmedTextColor, paginationLinkColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
-@value sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   width: 100%;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   box-shadow: inset 0 -0.075rem 0.075rem 0 rgba(0, 0, 0, 0.03);
 }
 
@@ -20,7 +20,7 @@
   font-size: 0.875rem;
   font-weight: 600;
   text-transform: capitalize;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.5rem;
     text-transform: none;
     font-weight: normal;
@@ -33,7 +33,7 @@
 
 .resultsCountQuery {
   display: none;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline-block;
   }
 }
@@ -71,7 +71,7 @@
   flex-direction: column-reverse;
   justify-content: space-between;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     flex-direction: row;
     align-items: center;
     padding: 0.75rem 1rem;
@@ -85,7 +85,7 @@
   padding-top: 0.5rem;
   border-top: 0.075rem solid rgba(0, 0, 0, 0.05);
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     margin-top: 0;
     padding-top: 0;
     border-top: none;
@@ -94,7 +94,7 @@
 
 .options {
   display: flex;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
   }
 }
 
@@ -105,7 +105,7 @@
 .optionHeader {
   font-size: 0.8125rem;
   line-height: 1.0625;
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   font-weight: normal;
   margin-bottom: 5px;
 }
@@ -156,7 +156,7 @@
   margin-left: 0.5rem;
   font-size: 0.875rem;
   color: rgba(0, 0, 0, 0.5);
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
 }
@@ -167,7 +167,7 @@
   align-items: center;
   font-weight: 600;
   font-size: 0.875rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
 }
@@ -186,12 +186,12 @@
 .activeFacetCount {
   display: none;
 }
-@media (max-width: smallRem) {
+@media (max-width: $smallRem) {
   .withActiveFacets {
-    color: paginationLinkColor;
+    color: $paginationLinkColor;
     & .filtersButtonChevron {
       & path {
-        fill: paginationLinkColor;
+        fill: $paginationLinkColor;
       }
     }
   }
diff --git a/components/SearchComponents/OptionsBar/index.js b/components/SearchComponents/OptionsBar/index.js
index 5869708cd..9a3468c54 100644
--- a/components/SearchComponents/OptionsBar/index.js
+++ b/components/SearchComponents/OptionsBar/index.js
@@ -12,10 +12,8 @@ import {
 import addCommasToNumber from "utilFunctions/addCommasToNumber";
 import { DEFAULT_PAGE_SIZE } from "constants/search";
 
-import { classNames, stylesheet } from "./OptionsBar.css";
-import { classNames as utilClassNames } from "css/utils.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./OptionsBar.scss";
 
 const gridViewIcon = "/static/images/grid-view-icon.svg";
 const listViewIcon = "/static/images/list-view-icon.svg";
@@ -87,36 +85,36 @@ class OptionsBar extends React.Component {
       numberOfActiveFacets
     } = this.props;
     return (
-      <div className={classNames.wrapper}>
-        <div className={[container, classNames.optionsBar].join(" ")}>
-          <div className={classNames.resultsAndFilter}>
-            <h1 className={classNames.resultsCount}>
+      <div className={css.wrapper}>
+        <div className={[utils.container, css.optionsBar].join(" ")}>
+          <div className={css.resultsAndFilter}>
+            <h1 className={css.resultsCount}>
               <span>{addCommasToNumber(this.props.itemCount)} results </span>
               {this.props.route.query.q &&
-                <span className={classNames.resultsCountQuery}>
+                <span className={css.resultsCountQuery}>
                   <span>for </span>
-                  <span className={classNames.resultsCountQueryText}>
+                  <span className={css.resultsCountQueryText}>
                     {this.props.route.query.q}
                   </span>
                 </span>}
             </h1>
-            <p className={classNames.pageNumber}>Page {currentPage}</p>
+            <p className={css.pageNumber}>Page {currentPage}</p>
             <button
               onClick={() => onClickToggleFilters()}
               aria-expanded={showFilters}
-              className={`${classNames.toggleFilters} ${showFilters
-                ? classNames.showFilters
+              className={`${css.toggleFilters} ${showFilters
+                ? css.showFilters
                 : ""} ${numberOfActiveFacets !== 0
-                ? classNames.withActiveFacets
+                ? css.withActiveFacets
                 : ""}`}
             >
               <span>Filter</span>
               {numberOfActiveFacets !== 0 &&
-                <span className={classNames.activeFacetCount}>
+                <span className={css.activeFacetCount}>
                   ({numberOfActiveFacets})
                 </span>}
               <svg
-                className={classNames.filtersButtonChevron}
+                className={css.filtersButtonChevron}
                 width="15px"
                 height="24px"
                 viewBox="0 0 15 24"
@@ -137,12 +135,9 @@ class OptionsBar extends React.Component {
               </svg>
             </button>
           </div>
-          <div className={classNames.options}>
-            <div className={classNames.optionWrapper}>
-              <h3
-                id="options-bar-page-size-label"
-                className={classNames.optionHeader}
-              >
+          <div className={css.options}>
+            <div className={css.optionWrapper}>
+              <h3 id="options-bar-page-size-label" className={css.optionHeader}>
                 Items per page
               </h3>
               <Select
@@ -152,17 +147,12 @@ class OptionsBar extends React.Component {
                 searchable={false}
                 value={this.state.pageSizeValue}
                 onChange={this.onPageSizeChange}
-                className={[classNames.select, classNames.itemsPerPage].join(
-                  " "
-                )}
+                className={[css.select, css.itemsPerPage].join(" ")}
                 options={pageSizeOptions}
               />
             </div>
-            <div className={classNames.optionWrapper}>
-              <h3
-                id="options-bar-sort-by-label"
-                className={classNames.optionHeader}
-              >
+            <div className={css.optionWrapper}>
+              <h3 id="options-bar-sort-by-label" className={css.optionHeader}>
                 Sort by
               </h3>
               <Select
@@ -171,16 +161,16 @@ class OptionsBar extends React.Component {
                 searchable={false}
                 instanceId="options-bar-sort-by"
                 value={this.state.sortValue}
-                className={[classNames.select, classNames.sortBy].join(" ")}
+                className={[css.select, css.sortBy].join(" ")}
                 onChange={this.onSortChange}
                 options={sortOptions}
               />
             </div>
             {/* <div>
-              <h3 className={classNames.optionHeader}>
+              <h3 className={css.optionHeader}>
                 Layout
               </h3>
-              <div className={classNames.viewButtons}>
+              <div className={css.viewButtons}>
                 <Link
                   prefetch
                   href={{
@@ -192,14 +182,14 @@ class OptionsBar extends React.Component {
                 >
                   <a
                     className={[
-                      classNames.listViewButton,
+                      css.listViewButton,
                       this.props.route.query.list_view === "grid"
-                        ? classNames.viewButtonInactive
-                        : classNames.viewButtonActive
+                        ? css.viewButtonInactive
+                        : css.viewButtonActive
                     ].join(" ")}
                   >
                     <img
-                      className={classNames.viewButtonIcon}
+                      className={css.viewButtonIcon}
                       src={listViewIcon}
                       alt="List View"
                     />
@@ -216,14 +206,14 @@ class OptionsBar extends React.Component {
                 >
                   <a
                     className={[
-                      classNames.gridViewButton,
+                      css.gridViewButton,
                       this.props.route.query.list_view === "grid"
-                        ? classNames.viewButtonActive
-                        : classNames.viewButtonInactive
+                        ? css.viewButtonActive
+                        : css.viewButtonInactive
                     ].join(" ")}
                   >
                     <img
-                      className={classNames.viewButtonIcon}
+                      className={css.viewButtonIcon}
                       src={gridViewIcon}
                       alt="Grid View"
                     />
@@ -233,7 +223,6 @@ class OptionsBar extends React.Component {
             </div> */}
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/SearchComponents/SearchComponents.css b/components/SearchComponents/SearchComponents.css
deleted file mode 100644
index 9d2e71058..000000000
--- a/components/SearchComponents/SearchComponents.css
+++ /dev/null
@@ -1 +0,0 @@
-@value warmerBackgroundColor from "../../css/colors.css";
diff --git a/components/Tooltip/Tooltip.css b/components/Tooltip/Tooltip.css
deleted file mode 100644
index f4d336fdf..000000000
--- a/components/Tooltip/Tooltip.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.hidden {
-  display: none;
-}
diff --git a/components/Tooltip/index.js b/components/Tooltip/index.js
deleted file mode 100644
index d3de806de..000000000
--- a/components/Tooltip/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import { stylesheet, classNames } from "./Tooltip.css";
-
-const Tooltip = ({ className, id, isHidden, children }) =>
-  <div
-    className={[className, isHidden && classNames.hidden].join(" ")}
-    id={id || className}
-    role="tooltip"
-    aria-hidden={isHidden}
-  >
-    {children}
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-  </div>;
-
-export default Tooltip;
diff --git a/components/TopicBrowseComponents/BreadcrumbsAndNav/BreadcrumbsAndNav.css b/components/TopicBrowseComponents/BreadcrumbsAndNav/BreadcrumbsAndNav.scss
similarity index 67%
rename from components/TopicBrowseComponents/BreadcrumbsAndNav/BreadcrumbsAndNav.css
rename to components/TopicBrowseComponents/BreadcrumbsAndNav/BreadcrumbsAndNav.scss
index 0e390d193..6b619b26b 100644
--- a/components/TopicBrowseComponents/BreadcrumbsAndNav/BreadcrumbsAndNav.css
+++ b/components/TopicBrowseComponents/BreadcrumbsAndNav/BreadcrumbsAndNav.scss
@@ -1,5 +1,4 @@
-@value warmerBackgroundColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
+@import "stylesheets/breakpoints";
 
 .breadcrumbsAndNav {
   height: 100%;
@@ -11,7 +10,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: baseline;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     justify-content: flex-start;
     align-items: center;
     flex-direction: row;
diff --git a/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/NavArrows.css b/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/NavArrows.scss
similarity index 80%
rename from components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/NavArrows.css
rename to components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/NavArrows.scss
index 636f58489..4442f70c5 100644
--- a/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/NavArrows.css
+++ b/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/NavArrows.scss
@@ -1,7 +1,7 @@
-@value linkColor from "../../../../../css/colors.css";
+@import "stylesheets/colors";
 
 .navLinks {
-  color: linkColor;
+  color: $linkColor;
   font-size: 1rem;
   line-height: 1.25;
   font-weight: 600;
diff --git a/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/index.js b/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/index.js
index f9045dad7..10afeee08 100644
--- a/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/index.js
+++ b/components/TopicBrowseComponents/BreadcrumbsAndNav/components/NavLinks/index.js
@@ -1,21 +1,21 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames, stylesheet } from "./NavArrows.css";
+import css from "./NavArrows.scss";
 
 const chevron = "/static/images/chevron-thick-orange.svg";
 
 const NavArrows = ({ previousSubtopic, nextSubtopic, topic, route }) =>
   nextSubtopic || previousSubtopic
-    ? <div className={classNames.navLinks}>
+    ? <div className={css.navLinks}>
         {previousSubtopic &&
           <Link
             prefetch
             as={`/browse-by-topic/${topic.slug}/${previousSubtopic.slug}`}
             href={`/${route.pathname}?topic=${topic.slug}&subtopic=${previousSubtopic.slug}`}
           >
-            <a className={classNames.prevLink}>
-              <img src={chevron} alt="" className={classNames.prevArrow} />
+            <a className={css.prevLink}>
+              <img src={chevron} alt="" className={css.prevArrow} />
               <span>Previous Section</span>
             </a>
           </Link>}
@@ -27,10 +27,9 @@ const NavArrows = ({ previousSubtopic, nextSubtopic, topic, route }) =>
           >
             <a>
               <span>Next Section</span>
-              <img src={chevron} alt="" className={classNames.nextArrow} />
+              <img src={chevron} alt="" className={css.nextArrow} />
             </a>
           </Link>}
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     : null;
 
diff --git a/components/TopicBrowseComponents/BreadcrumbsAndNav/index.js b/components/TopicBrowseComponents/BreadcrumbsAndNav/index.js
index 17a196ded..eb3e61d2f 100644
--- a/components/TopicBrowseComponents/BreadcrumbsAndNav/index.js
+++ b/components/TopicBrowseComponents/BreadcrumbsAndNav/index.js
@@ -3,9 +3,8 @@ import React from "react";
 import Breadcrumbs from "shared/Breadcrumbs";
 import NavLinks from "./components/NavLinks";
 
-import { classNames, stylesheet } from "./BreadcrumbsAndNav.css";
-import { classNames as utilClassNames } from "css/utils.css";
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./BreadcrumbsAndNav.scss";
 
 const BreadcrumbsAndNav = ({
   breadcrumbs,
@@ -14,11 +13,10 @@ const BreadcrumbsAndNav = ({
   topic,
   route
 }) =>
-  <div className={utilClassNames.breadcrumbsWrapper}>
-    <div className={[classNames.breadcrumbsAndNav, container].join(" ")}>
+  <div className={utils.breadcrumbsWrapper}>
+    <div className={[css.breadcrumbsAndNav, utils.container].join(" ")}>
       <Breadcrumbs breadcrumbs={breadcrumbs} />
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default BreadcrumbsAndNav;
diff --git a/components/TopicBrowseComponents/SubtopicItemsList/ItemList/ItemList.css b/components/TopicBrowseComponents/SubtopicItemsList/ItemList/ItemList.scss
similarity index 77%
rename from components/TopicBrowseComponents/SubtopicItemsList/ItemList/ItemList.css
rename to components/TopicBrowseComponents/SubtopicItemsList/ItemList/ItemList.scss
index 13824deee..0fb3ca152 100644
--- a/components/TopicBrowseComponents/SubtopicItemsList/ItemList/ItemList.css
+++ b/components/TopicBrowseComponents/SubtopicItemsList/ItemList/ItemList.scss
@@ -1,6 +1,4 @@
-@value riceCakeWhite from "../../../../css/colors.css";
-@value smallRem from "../../../../css/breakpoints.css";
-@value sansFont from "../../../../css/typography.css";
+@import "stylesheets/breakpoints";
 
 .itemList {
   flex: 1;
@@ -9,11 +7,11 @@
 
 .itemListHeader {
   display: flex;
-  border-bottom: 1px solid rgba(0,0,0,.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding-bottom: 10px;
   padding-right: 1rem;
   padding-left: 1rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-right: 0;
     padding-left: 0;
   }
diff --git a/components/TopicBrowseComponents/SubtopicItemsList/ItemList/index.js b/components/TopicBrowseComponents/SubtopicItemsList/ItemList/index.js
index a883961ec..6c485bd66 100644
--- a/components/TopicBrowseComponents/SubtopicItemsList/ItemList/index.js
+++ b/components/TopicBrowseComponents/SubtopicItemsList/ItemList/index.js
@@ -1,12 +1,12 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./ItemList.css";
-
 import ListView from "shared/ListView";
-import GridView from "shared/GridView";
+// import GridView from "shared/GridView";
+
+import css from "./ItemList.scss";
 
-const gridViewIcon = "/static/images/grid-view-icon.svg";
-const listViewIcon = "/static/images/list-view-icon.svg";
+// const gridViewIcon = "/static/images/grid-view-icon.svg";
+// const listViewIcon = "/static/images/list-view-icon.svg";
 
 class ItemList extends React.Component {
   componentWillMount() {
@@ -20,15 +20,15 @@ class ItemList extends React.Component {
     const { view } = this.state;
 
     return (
-      <div className={classNames.itemList}>
-        {/* <div className={classNames.itemListHeader}>
-          <div className={classNames.viewButtons}>
+      <div className={css.itemList}>
+        {/* <div className={css.itemListHeader}>
+          <div className={css.viewButtons}>
             <button
               className={[
-                classNames.listViewButton,
+                css.listViewButton,
                 view === "list"
-                  ? classNames.viewButtonActive
-                  : classNames.viewButtonInactive
+                  ? css.viewButtonActive
+                  : css.viewButtonInactive
               ].join(" ")}
               onClick={() => {
                 if (view !== "list") {
@@ -37,17 +37,17 @@ class ItemList extends React.Component {
               }}
             >
               <img
-                className={classNames.viewButtonIcon}
+                className={css.viewButtonIcon}
                 src={listViewIcon}
                 alt="List View"
               />
             </button>
             <button
               className={[
-                classNames.gridViewButton,
+                css.gridViewButton,
                 view === "grid"
-                  ? classNames.viewButtonActive
-                  : classNames.viewButtonInactive
+                  ? css.viewButtonActive
+                  : css.viewButtonInactive
               ].join(" ")}
               onClick={() => {
                 if (view !== "grid") {
@@ -56,21 +56,14 @@ class ItemList extends React.Component {
               }}
             >
               <img
-                className={classNames.viewButtonIcon}
+                className={css.viewButtonIcon}
                 src={gridViewIcon}
                 alt="Grid View"
               />
             </button>
           </div>
         </div> */}
-        {view === "grid"
-          ? <GridView
-              route={this.props.route}
-              items={items}
-              style={{ marginTop: "15px" }}
-            />
-          : <ListView route={this.props.route} items={items} />}
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+        <ListView route={this.props.route} items={items} />
       </div>
     );
   }
diff --git a/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/Sidebar.css b/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/Sidebar.scss
similarity index 70%
rename from components/TopicBrowseComponents/SubtopicItemsList/Sidebar/Sidebar.css
rename to components/TopicBrowseComponents/SubtopicItemsList/Sidebar/Sidebar.scss
index a91406d5e..d80bd3e93 100644
--- a/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/Sidebar.css
+++ b/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/Sidebar.scss
@@ -1,11 +1,11 @@
-@value warmerBackgroundColor, lightLinkColor from "../../../../css/colors.css";
-@value smallRem from "../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .sidebar {
   width: 100%;
   padding: 0 1rem;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: 300px;
     padding: 0;
     margin-right: 20px;
@@ -13,7 +13,7 @@
 }
 
 .subtopicInfo {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   margin-bottom: 30px;
 }
 
@@ -22,13 +22,13 @@
 }
 
 .image {
-  border-bottom: 4px solid lightLinkColor;
+  border-bottom: 4px solid $lightLinkColor;
   margin-bottom: 15px;
   width: 100%;
 }
 
 .title {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-size: 1.5rem;
   line-height: 1.25;
   margin-bottom: 10px;
diff --git a/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/index.js b/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/index.js
index 756a03e22..381c5872b 100644
--- a/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/index.js
+++ b/components/TopicBrowseComponents/SubtopicItemsList/Sidebar/index.js
@@ -1,33 +1,33 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./Sidebar.css";
+import css from "./Sidebar.scss";
 
 // const RelatedResource = ({ type, title, image }) =>
-//   <div className={classNames.relatedResource}>
-//     <img alt={title} src={image} className={classNames.relatedResourceImage} />
-//     <p className={classNames.relatedResourceTitle}>
+//   <div className={css.relatedResource}>
+//     <img alt={title} src={image} className={css.relatedResourceImage} />
+//     <p className={css.relatedResourceTitle}>
 //       {title}
 //     </p>
-//     <p className={classNames.relatedResourceType}>
+//     <p className={css.relatedResourceType}>
 //       {type}
 //     </p>
 //   </div>;
 
 const Sidebar = ({ image, title, description }) =>
-  <div className={classNames.sidebar}>
-    <div className={classNames.subtopicInfo}>
-      <img src={image} alt={title} className={classNames.image} />
-      <div className={classNames.subtopicInfoText}>
-        <h1 className={classNames.title}>
+  <div className={css.sidebar}>
+    <div className={css.subtopicInfo}>
+      <img src={image} alt={title} className={css.image} />
+      <div className={css.subtopicInfoText}>
+        <h1 className={css.title}>
           {title}
         </h1>
-        <p className={classNames.description}>
+        <p className={css.description}>
           {description}
         </p>
       </div>
     </div>
-    {/* <h3 className={classNames.relatedHeader}>You might also enjoy</h3>
-    <div className={classNames.relatedResources}>
+    {/* <h3 className={css.relatedHeader}>You might also enjoy</h3>
+    <div className={css.relatedResources}>
       <RelatedResource
         type="Exhibition"
         title="Race to the Moon"
@@ -39,7 +39,6 @@ const Sidebar = ({ image, title, description }) =>
         image="http://lorempixel.com/140/100/food"
       />
     </div> */}
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default Sidebar;
diff --git a/components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.css b/components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.scss
similarity index 70%
rename from components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.css
rename to components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.scss
index 6a890277b..6ec223f8d 100644
--- a/components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.css
+++ b/components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.scss
@@ -1,4 +1,4 @@
-@value smallRem from "../../../css/breakpoints.css";
+@import "stylesheets/breakpoints";
 
 .sidebarAndItemList {
   display: flex;
@@ -6,7 +6,7 @@
   flex-direction: column;
   padding-left: 0;
   padding-right: 0;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     flex-direction: row;
     padding-left: 1rem;
     padding-right: 1rem;
diff --git a/components/TopicBrowseComponents/Topic/MainContent/MainContent.css b/components/TopicBrowseComponents/Topic/MainContent/MainContent.scss
similarity index 59%
rename from components/TopicBrowseComponents/Topic/MainContent/MainContent.css
rename to components/TopicBrowseComponents/Topic/MainContent/MainContent.scss
index 10923a66b..0e5bbea2b 100644
--- a/components/TopicBrowseComponents/Topic/MainContent/MainContent.css
+++ b/components/TopicBrowseComponents/Topic/MainContent/MainContent.scss
@@ -1,21 +1,18 @@
-@value linkColor, warmerBackgroundColor, dimmedTextColor, lightLinkColor from "../../../../css/colors.css";
-@value mediumRem, smallRem, largeRem from "../../../../css/breakpoints.css";
-@value serifFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   background-color: white;
 }
 
 .container {
-  padding: 2rem 1rem 1rem;
-  margin: 0 auto;
-
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-bottom: 6rem;
   }
 }
@@ -23,16 +20,16 @@
 .header {
   text-align: center;
   font-size: 3rem;
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 4rem;
   }
 }
 
 .topicDescription {
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   font-size: 1.75rem;
   text-align: center;
 }
@@ -47,7 +44,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   color: rgba(0, 0, 0, 0.75);
   overflow: hidden;
 
@@ -65,23 +62,23 @@
 }
 
 .image {
-  transition: transform .45s ease-in-out;
+  transition: transform 0.45s ease-in-out;
   width: 100%;
   height: 14rem;
   background-size: cover;
-  background-position: 50%/50%;
+  background-position: 50% 50%;
 }
 
 .textWrapper {
-  border-top: 0.25rem solid lightLinkColor;
+  border-top: 0.25rem solid $lightLinkColor;
   padding-top: 1rem;
   z-index: 1;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .subtopicTitle {
-  color: dimmedTextColor;
-  font-family: serifFont;
+  color: $dimmedTextColor;
+  font-family: $serifFont;
   font-size: 1.75rem;
   font-weight: normal;
   line-height: 1.2;
diff --git a/components/TopicBrowseComponents/Topic/MainContent/index.js b/components/TopicBrowseComponents/Topic/MainContent/index.js
index 57c00982e..7ec897794 100644
--- a/components/TopicBrowseComponents/Topic/MainContent/index.js
+++ b/components/TopicBrowseComponents/Topic/MainContent/index.js
@@ -2,20 +2,21 @@ import React from "react";
 import Link from "next/link";
 
 import HeadingRule from "shared/HeadingRule";
-import { classNames, stylesheet } from "./MainContent.css";
-import { classNames as utilClassNames } from "css/utils.css";
+
+import utils from "stylesheets/utils.scss";
+import css from "./MainContent.scss";
 
 const MainContent = ({ topic }) =>
-  <div className={classNames.wrapper}>
-    <div className={`${classNames.container} site-max-width`}>
-      <h1 className={classNames.header}>{topic.name}</h1>
+  <div className={css.wrapper}>
+    <div className={`${utils.container} ${css.container} site-max-width`}>
+      <h1 className={css.header}>{topic.name}</h1>
       {topic.description &&
-        <p className={classNames.topicDescription}>{topic.description}</p>}
+        <p className={css.topicDescription}>{topic.description}</p>}
       <HeadingRule color="#F9BA3F" />
       <ul className="row">
         {topic.subtopics.map((subtopic, index) =>
           <li
-            className={`${classNames.subtopic} col-xs-12 col-sm-6 col-md-4`}
+            className={`${css.subtopic} col-xs-12 col-sm-6 col-md-4`}
             key={`${subtopic.name}-${index}`}
           >
             <Link
@@ -23,15 +24,15 @@ const MainContent = ({ topic }) =>
               as={`/browse-by-topic/${topic.slug}/${subtopic.slug}`}
               href={`/browse-by-topic/topic/subtopic?subtopic=${subtopic.slug}&topic=${topic.slug}`}
             >
-              <a className={classNames.subtopicAnchor}>
+              <a className={css.subtopicAnchor}>
                 <div
-                  className={classNames.image}
+                  className={css.image}
                   aria-hidden="true"
                   style={{ backgroundImage: `url(${subtopic.thumbnailUrl})` }}
                 />
-                <div className={classNames.textWrapper}>
-                  <h2 className={classNames.subtopicTitle}>{subtopic.name}</h2>
-                  <p className={classNames.subtopicDescription}>
+                <div className={css.textWrapper}>
+                  <h2 className={css.subtopicTitle}>{subtopic.name}</h2>
+                  <p className={css.subtopicDescription}>
                     {subtopic.description}
                   </p>
                 </div>
@@ -41,7 +42,6 @@ const MainContent = ({ topic }) =>
         )}
       </ul>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default MainContent;
diff --git a/components/TopicBrowseComponents/Topic/Suggestions/Suggestions.css b/components/TopicBrowseComponents/Topic/Suggestions/Suggestions.scss
similarity index 75%
rename from components/TopicBrowseComponents/Topic/Suggestions/Suggestions.css
rename to components/TopicBrowseComponents/Topic/Suggestions/Suggestions.scss
index bf50eea3c..1291f1ffe 100644
--- a/components/TopicBrowseComponents/Topic/Suggestions/Suggestions.css
+++ b/components/TopicBrowseComponents/Topic/Suggestions/Suggestions.scss
@@ -1,9 +1,9 @@
-@value warmerBackgroundColor, linkColor, lightLinkColor from "../../../../css/colors.css";
-@value monoFont, serifFont from "../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/typography";
 
 .suggestionsWrapper {
   width: 100%;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .suggestions {
@@ -11,8 +11,7 @@
   padding-bottom: 45px;
 
   /* overrides for react-slick css*/
-  & :global .slick-prev:before,
-  & :global .slick-next:before {
+  & :global .slick-prev:before, & :global .slick-next:before {
     content: none;
   }
 
@@ -23,7 +22,7 @@
 
 .header {
   text-transform: uppercase;
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: bold;
   font-size: 1rem;
   line-height: 1.25;
@@ -77,19 +76,19 @@
 }
 
 .exhibition .imageWrapper {
-  border-top: 4px solid linkColor;
+  border-top: 4px solid $linkColor;
 }
 
 .exhibition .resourceType {
-  color: linkColor;
+  color: $linkColor;
 }
 
 .topic .imageWrapper {
-  border-top: 4px solid lightLinkColor;
+  border-top: 4px solid $lightLinkColor;
 }
 
 .topic .resourceType {
-  color: lightLinkColor;
+  color: $lightLinkColor;
 }
 
 .navArrow {
diff --git a/components/TopicBrowseComponents/Topic/Suggestions/index.js b/components/TopicBrowseComponents/Topic/Suggestions/index.js
index b859dd008..646817209 100644
--- a/components/TopicBrowseComponents/Topic/Suggestions/index.js
+++ b/components/TopicBrowseComponents/Topic/Suggestions/index.js
@@ -3,28 +3,25 @@ import Link from "next/link";
 import Slider from "react-slick";
 import ReactMarkdown from "react-markdown";
 
-import { classNames, stylesheet } from "./Suggestions.css";
-import { classNames as utilClassNames } from "css/utils.css";
 import { NextArrow, PrevArrow } from "components/shared/CarouselNavArrows";
-import { stylesheet as navArrowStyles } from "components/shared/CarouselNavArrows/CarouselNavArrows.css";
-import { classNames as breakpoints } from "css/breakpoints.css";
 
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "./Suggestions.scss";
 
 const mapTypeToClass = type => {
   if (type === "Exhibition") {
-    return classNames.exhibition;
+    return css.exhibition;
   } else if (type === "Topic") {
-    return classNames.topic;
+    return css.topic;
   } else if (type === "Primary Source Set") {
-    return classNames.topic;
+    return css.topic;
   }
 };
 
 const Suggestions = ({ suggestions }) =>
-  <div className={classNames.suggestionsWrapper}>
-    <div className={[classNames.suggestions, container].join(" ")}>
-      <h2 className={classNames.header}>You might also enjoy</h2>
+  <div className={css.suggestionsWrapper}>
+    <div className={[css.suggestions, utils.container].join(" ")}>
+      <h2 className={css.header}>You might also enjoy</h2>
       {/* this is a little hacky but <Slider /> seems to throw away
         any class names you pass it as props, so we use this global css
         class to target the arrows */}
@@ -32,13 +29,13 @@ const Suggestions = ({ suggestions }) =>
         <Slider
           slidesToShow={4.5}
           infinite={false}
-          nextArrow={<NextArrow className={classNames.navArrow} />}
-          prevArrow={<PrevArrow className={classNames.navArrow} />}
+          nextArrow={<NextArrow className={css.navArrow} />}
+          prevArrow={<PrevArrow className={css.navArrow} />}
           draggable={false}
           slidesToScroll={4}
           responsive={[
             {
-              breakpoint: ~~breakpoints.smallPx,
+              breakpoint: 640,
               settings: {
                 slidesToShow: 1.5,
                 arrows: false,
@@ -53,23 +50,23 @@ const Suggestions = ({ suggestions }) =>
             <div
               key={suggestion.title}
               className={[
-                classNames.suggestedSlide,
-                classNames.suggestedItem,
+                css.suggestedSlide,
+                css.suggestedItem,
                 mapTypeToClass(suggestion.type)
               ].join(" ")}
             >
               <Link prefetch href={suggestion.href} as={suggestion.as}>
                 <a
-                  className={classNames.imageWrapper}
+                  className={css.imageWrapper}
                   style={{ backgroundImage: `url(${suggestion.thumbnailUrl})` }}
                 >
-                  <div className={classNames.gradientBackground}>
-                    <div className={classNames.typeAndTitle}>
-                      <p className={classNames.resourceType}>
+                  <div className={css.gradientBackground}>
+                    <div className={css.typeAndTitle}>
+                      <p className={css.resourceType}>
                         {suggestion.type}
                       </p>
                       <ReactMarkdown
-                        className={classNames.suggestionTitle}
+                        className={css.suggestionTitle}
                         source={suggestion.title}
                         allowedTypes={["emphasis"]}
                         unwrapDisallowed
@@ -83,8 +80,6 @@ const Suggestions = ({ suggestions }) =>
         </Slider>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: navArrowStyles }} />
   </div>;
 
 export default Suggestions;
diff --git a/components/TopicBrowseComponents/TopicsList/components/Callout/Callout.css b/components/TopicBrowseComponents/TopicsList/components/Callout/Callout.scss
similarity index 56%
rename from components/TopicBrowseComponents/TopicsList/components/Callout/Callout.css
rename to components/TopicBrowseComponents/TopicsList/components/Callout/Callout.scss
index a156e361c..0c36d87ac 100644
--- a/components/TopicBrowseComponents/TopicsList/components/Callout/Callout.css
+++ b/components/TopicBrowseComponents/TopicsList/components/Callout/Callout.scss
@@ -1,20 +1,20 @@
-@value warmerBackgroundColor, linkColor, dimmedTextColor from "../../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .calloutWrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   width: 100%;
   padding: 1rem;
   margin-top: 2rem;
   text-align: center;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -24,9 +24,9 @@
   max-width: 46rem;
   margin: auto;
   padding: 2rem;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     text-align: left;
     display: flex;
     align-items: center;
@@ -38,22 +38,22 @@
   margin-bottom: 1rem;
   text-align: left;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding-right: 1rem;
     margin-bottom: 0;
   }
 }
 
 .header {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 2rem;
 }
 
 .text {
-  margin-top: .5rem;;
+  margin-top: 0.5rem;
   font-size: 1.25rem;
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
 }
 
 .link {
@@ -65,4 +65,4 @@
     padding: 1rem 1.5rem;
     font-size: 1.25rem;
   }
-}
\ No newline at end of file
+}
diff --git a/components/TopicBrowseComponents/TopicsList/components/Callout/index.js b/components/TopicBrowseComponents/TopicsList/components/Callout/index.js
index 6146c3bae..45a5ff537 100644
--- a/components/TopicBrowseComponents/TopicsList/components/Callout/index.js
+++ b/components/TopicBrowseComponents/TopicsList/components/Callout/index.js
@@ -2,27 +2,21 @@ import React from "react";
 import Link from "next/link";
 
 import Button from "components/shared/Button";
-import { classNames, stylesheet } from "./Callout.css";
+import css from "./Callout.scss";
 
 const Callout = ({ topics }) =>
-  <div className={classNames.calloutWrapper}>
-    <div className={classNames.callout}>
-      <div className={classNames.content}>
-        <h2 className={classNames.header}>Enjoying these topics?</h2>
-        <p className={classNames.text}>
+  <div className={css.calloutWrapper}>
+    <div className={css.callout}>
+      <div className={css.content}>
+        <h2 className={css.header}>Enjoying these topics?</h2>
+        <p className={css.text}>
           You might also like our Online Exhibitions.
         </p>
       </div>
-      <Button
-        type="primary"
-        url="/exhibitions"
-        prefetch
-        className={classNames.link}
-      >
+      <Button type="primary" url="/exhibitions" prefetch className={css.link}>
         Visit Online Exhibitions
       </Button>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default Callout;
diff --git a/components/TopicBrowseComponents/TopicsList/components/Filters/index.js b/components/TopicBrowseComponents/TopicsList/components/Filters/index.js
index 87ce38063..37236825d 100644
--- a/components/TopicBrowseComponents/TopicsList/components/Filters/index.js
+++ b/components/TopicBrowseComponents/TopicsList/components/Filters/index.js
@@ -1,40 +1,35 @@
 import React from "react";
 import Select from "react-select";
 
-import "react-select/dist/react-select.css";
-import { classNames, stylesheet } from "shared/FiltersBar/FiltersBar.css";
+import css from "shared/FiltersBar/FiltersBar.scss";
 
 const SortValue = props =>
-  <span className={classNames.sortValue}>
-    <span className={classNames.sortByText}>Sort by </span>
+  <span className={css.sortValue}>
+    <span className={css.sortByText}>Sort by </span>
     <span>
       {props.value.label}
     </span>
   </span>;
 
 const FiltersBar = () =>
-  <div className={classNames.filtersWrapper}>
-    <div className={`${classNames.filters} site-max-width`}>
+  <div className={css.filtersWrapper}>
+    <div className={`${css.filters} site-max-width`}>
       <div className="row">
-        <div className={`${classNames.filter} col-xs-6 col-md-4`}>
-          <input
-            className={classNames.textInput}
-            placeholder="Filter by title"
-          />
+        <div className={`${css.filter} col-xs-6 col-md-4`}>
+          <input className={css.textInput} placeholder="Filter by title" />
         </div>
-        <div className={`${classNames.filter} col-xs-6 col-md-3`}>
+        <div className={`${css.filter} col-xs-6 col-md-3`}>
           <Select
             clearable={false}
             searchable={false}
             value="title"
-            className={[classNames.select, classNames.sortSelect].join(" ")}
+            className={[css.select, css.sortSelect].join(" ")}
             valueComponent={SortValue}
             options={[{ value: "title", label: "Title" }]}
           />
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default FiltersBar;
diff --git a/components/TopicBrowseComponents/TopicsList/components/FiltersBar/index.js b/components/TopicBrowseComponents/TopicsList/components/FiltersBar/index.js
index 8061c464a..727d67abc 100644
--- a/components/TopicBrowseComponents/TopicsList/components/FiltersBar/index.js
+++ b/components/TopicBrowseComponents/TopicsList/components/FiltersBar/index.js
@@ -1,40 +1,35 @@
 import React from "react";
 import Select from "react-select";
 
-import "react-select/dist/react-select.css";
-import { classNames, stylesheet } from "shared/FiltersBar/FiltersBar.css";
+import css from "shared/FiltersBar/FiltersBar.scss";
 
 const SortValue = props =>
-  <span className={classNames.sortValue}>
-    <span className={classNames.sortByText}>Sort by </span>
+  <span className={css.sortValue}>
+    <span className={css.sortByText}>Sort by </span>
     <span>
       {props.value.label}
     </span>
   </span>;
 
 const Filters = () =>
-  <div className={classNames.filtersWrapper}>
-    <div className={`${classNames.filters} site-max-width`}>
+  <div className={css.filtersWrapper}>
+    <div className={`${css.filters} site-max-width`}>
       <div className="row">
-        <div className={`${classNames.filter} col-xs-6 col-md-4`}>
-          <input
-            className={classNames.textInput}
-            placeholder="Filter by title"
-          />
+        <div className={`${css.filter} col-xs-6 col-md-4`}>
+          <input className={css.textInput} placeholder="Filter by title" />
         </div>
-        <div className={`${classNames.filter} col-xs-6 col-md-3`}>
+        <div className={`${css.filter} col-xs-6 col-md-3`}>
           <Select
             clearable={false}
             searchable={false}
             value="title"
-            className={[classNames.select, classNames.sortSelect].join(" ")}
+            className={[css.select, css.sortSelect].join(" ")}
             valueComponent={SortValue}
             options={[{ value: "title", label: "Title" }]}
           />
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default Filters;
diff --git a/components/TopicBrowseComponents/TopicsList/components/Topics/Topics.css b/components/TopicBrowseComponents/TopicsList/components/Topics/Topics.scss
similarity index 56%
rename from components/TopicBrowseComponents/TopicsList/components/Topics/Topics.css
rename to components/TopicBrowseComponents/TopicsList/components/Topics/Topics.scss
index 3016a3c33..fc3bcbc9a 100644
--- a/components/TopicBrowseComponents/TopicsList/components/Topics/Topics.css
+++ b/components/TopicBrowseComponents/TopicsList/components/Topics/Topics.scss
@@ -1,15 +1,15 @@
-@value linkColor, dimmedTextColor from "../../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../../css/breakpoints.css";
-@value serifFont from "../../../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .topicsWrapper {
   margin-top: 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-bottom: 4rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 2rem;
     margin-bottom: 6rem;
   }
@@ -19,10 +19,10 @@
   font-weight: normal;
   font-size: 0.9rem;
   font-style: italic;
-  font-family: serifFont;
-  color: dimmedTextColor;
+  font-family: $serifFont;
+  color: $dimmedTextColor;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 1.3rem;
   }
 }
@@ -32,7 +32,7 @@
   display: block;
   margin-top: 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 1.5rem;
   }
 }
@@ -51,10 +51,10 @@
   text-transform: uppercase;
   color: white;
   position: absolute;
-  background-color: linkColor;
+  background-color: $linkColor;
   top: 0.5rem;
   left: -0.25rem;
-  padding: .35rem .65rem;
+  padding: 0.35rem 0.65rem;
   font-weight: bold;
   font-size: 0.875rem;
 }
diff --git a/components/TopicBrowseComponents/TopicsList/components/Topics/index.js b/components/TopicBrowseComponents/TopicsList/components/Topics/index.js
index 293561d5f..2289e3894 100644
--- a/components/TopicBrowseComponents/TopicsList/components/Topics/index.js
+++ b/components/TopicBrowseComponents/TopicsList/components/Topics/index.js
@@ -1,12 +1,12 @@
 import React from "react";
 import Link from "next/link";
 
-import { stylesheet, classNames } from "./Topics.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import css from "./Topics.scss";
 
 const Topics = ({ topics }) =>
-  <div className={`${classNames.topicsWrapper} ${utilClassNames.container}`}>
-    <p className={classNames.topicsIntro}>
+  <div className={`${css.topicsWrapper} ${utils.container}`}>
+    <p className={css.topicsIntro}>
       This is a new feature designed to showcase content strengths in our
       collection. Look for new topics in the future!
     </p>
@@ -21,18 +21,17 @@ const Topics = ({ topics }) =>
             as={`/browse-by-topic/${topic.slug}`}
             href={`/browse-by-topic/topic?topic=${topic.slug}`}
           >
-            <a className={classNames.topic}>
-              {topic.isFeatured &&
-                <div className={classNames.ribbon}>Featured</div>}
+            <a className={css.topic}>
+              {topic.isFeatured && <div className={css.ribbon}>Featured</div>}
               {topic.isNew &&
                 !topic.isFeatured &&
-                <div className={classNames.ribbon}>New</div>}
+                <div className={css.ribbon}>New</div>}
               <img
                 alt=""
                 src={topic.acf.category_image}
-                className={classNames.image}
+                className={css.image}
               />
-              <div className={classNames.title}>
+              <div className={css.title}>
                 {topic.name}
               </div>
             </a>
@@ -40,7 +39,6 @@ const Topics = ({ topics }) =>
         </li>
       )}
     </ul>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default Topics;
diff --git a/components/shared/Accordion/Accordion.css b/components/shared/Accordion/Accordion.scss
similarity index 85%
rename from components/shared/Accordion/Accordion.css
rename to components/shared/Accordion/Accordion.scss
index 8272d44e9..80e7837b9 100644
--- a/components/shared/Accordion/Accordion.css
+++ b/components/shared/Accordion/Accordion.scss
@@ -1,8 +1,8 @@
-@value warmerBackgroundColor from "../../../css/colors.css";
+@import "stylesheets/colors";
 
 .subitems {
   height: auto;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   font-size: 0.875rem;
   padding: 0.5rem 0.7rem 0.7rem;
   max-height: 18rem;
@@ -29,7 +29,7 @@
 }
 
 .itemHeader {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   line-height: 1.1875;
   padding: 10px 13px 10px 11px;
   border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08);
diff --git a/components/shared/Accordion/index.js b/components/shared/Accordion/index.js
index 084df6c26..7705da047 100644
--- a/components/shared/Accordion/index.js
+++ b/components/shared/Accordion/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { stylesheet, classNames } from "./Accordion.css";
+import css from "./Accordion.scss";
 
 const addIcon = "/static/images/add.svg";
 const subtractIcon = "/static/images/subtract.svg";
@@ -49,14 +49,9 @@ class Accordion extends React.Component {
             item.type === "date"
           ) {
             return (
-              <li
-                key={i}
-                className={
-                  item.active ? classNames.active : classNames.inactive
-                }
-              >
+              <li key={i} className={item.active ? css.active : css.inactive}>
                 <button
-                  className={classNames.itemHeader}
+                  className={css.itemHeader}
                   aria-controls={`facets_${i}`}
                   aria-expanded={item.active}
                   onClick={() => this.onClickItem(i)}
@@ -66,13 +61,13 @@ class Accordion extends React.Component {
                     <img
                       src={subtractIcon}
                       alt=""
-                      className={classNames.subtractIcon}
+                      className={css.subtractIcon}
                     />}
                   {!item.active &&
-                    <img src={addIcon} alt="" className={classNames.addIcon} />}
+                    <img src={addIcon} alt="" className={css.addIcon} />}
                 </button>
                 {item.type === "term" &&
-                  <ul id={`facets_${i}`} className={classNames.subitems}>
+                  <ul id={`facets_${i}`} className={css.subitems}>
                     {item.subitems.map((subitem, j) =>
                       <li key={j}>{subitem.content}</li>
                     )}
@@ -80,7 +75,7 @@ class Accordion extends React.Component {
                 {item.type === "date" &&
                   <div
                     id={`facets_${i}`}
-                    className={`${classNames.subitems} ${classNames.date}`}
+                    className={`${css.subitems} ${css.date}`}
                   >
                     {item.subitems}
                   </div>}
@@ -88,7 +83,6 @@ class Accordion extends React.Component {
             );
           }
         })}
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </ul>
     );
   }
diff --git a/components/shared/Breadcrumbs/Breadcrumbs.css b/components/shared/Breadcrumbs/Breadcrumbs.scss
similarity index 56%
rename from components/shared/Breadcrumbs/Breadcrumbs.css
rename to components/shared/Breadcrumbs/Breadcrumbs.scss
index 2f31b9947..a1003a8b8 100644
--- a/components/shared/Breadcrumbs/Breadcrumbs.css
+++ b/components/shared/Breadcrumbs/Breadcrumbs.scss
@@ -1,5 +1,5 @@
-@value linkColor from "../../../css/colors.css";
-@value xSmallRem, smallRem from "../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .breadcrumbs {
   display: flex;
@@ -14,31 +14,48 @@
   text-overflow: ellipsis;
   overflow: hidden;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     display: inline;
     white-space: normal;
     max-width: none;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1rem;
   }
 }
 
 .breadcrumbLink {
-  display: inline-block;
+  display: block;
   max-width: 13.125rem;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  @media (min-width: smallRem) {
+
+  @media (min-width: $smallRem) {
     font-size: 1rem;
   }
 }
 
 .breadcrumbLinkWrapper {
-  display: flex;
   align-items: center;
+  display: flex;
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    background: url("/static/images/chevron-thick-orange.svg") no-repeat;
+    background-size: contain;
+    background-position: center;
+    height: 0.7rem;
+    position: relative;
+    top: 0;
+    padding: 0 0.7rem;
+
+    @media (min-width: $smallRem) {
+    }
+  }
 }
 
 .breadcrumbLink p, .activeBreadcrumb p {
@@ -46,20 +63,12 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  @media (min-width: xSmallRem) {
+
+  @media (min-width: $xSmallRem) {
     max-width: 9rem;
   }
-  @media (min-width: smallRem) {
-    max-width: 13.5rem;
-  }
-}
 
-.chevron {
-  height: 0.5rem;
-  position: relative;
-  top: 1px;
-  padding: 0 0.5rem;
-  @media (min-width: smallRem) {
-    padding: 0 0.75rem;
+  @media (min-width: $smallRem) {
+    max-width: 13.5rem;
   }
 }
diff --git a/components/shared/Breadcrumbs/index.js b/components/shared/Breadcrumbs/index.js
index eb7a1c9ce..6d41fef06 100644
--- a/components/shared/Breadcrumbs/index.js
+++ b/components/shared/Breadcrumbs/index.js
@@ -2,32 +2,32 @@ import React from "react";
 import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 
-import { stylesheet, classNames } from "./Breadcrumbs.css";
+import css from "./Breadcrumbs.scss";
+
 const chevron = "/static/images/chevron-thick-orange.svg";
 
 const Breadcrumbs = ({ breadcrumbs }) =>
-  <div className={classNames.breadcrumbs}>
+  <div className={css.breadcrumbs}>
     {breadcrumbs.map((breadcrumb, idx) => {
       if (idx < breadcrumbs.length - 1) {
         return (
-          <span className={classNames.breadcrumbLinkWrapper} key={`${idx}`}>
+          <div className={css.breadcrumbLinkWrapper} key={`${idx}`}>
             <Link prefetch href={breadcrumb.url} as={breadcrumb.as}>
               <a>
                 <ReactMarkdown
-                  className={`${classNames.breadcrumbLink}`}
+                  className={`${css.breadcrumbLink}`}
                   source={breadcrumb.title}
                   allowedTypes={["emphasis"]}
                   unwrapDisallowed
                 />
               </a>
             </Link>
-            <img alt="" src={chevron} className={classNames.chevron} />
-          </span>
+          </div>
         );
       } else {
         return (
           <ReactMarkdown
-            className={classNames.activeBreadcrumb}
+            className={css.activeBreadcrumb}
             source={breadcrumb.title}
             allowedTypes={["emphasis"]}
             unwrapDisallowed
@@ -36,7 +36,6 @@ const Breadcrumbs = ({ breadcrumbs }) =>
         );
       }
     })}
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default Breadcrumbs;
diff --git a/components/shared/BreadcrumbsModule/index.js b/components/shared/BreadcrumbsModule/index.js
index e363af82e..e8d0b970e 100644
--- a/components/shared/BreadcrumbsModule/index.js
+++ b/components/shared/BreadcrumbsModule/index.js
@@ -3,13 +3,11 @@ import Link from "next/link";
 
 import Breadcrumbs from "shared/Breadcrumbs";
 
-import { classNames as utilClassNames } from "css/utils.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
 
 const BreadcrumbsModule = ({ route, breadcrumbs }) =>
-  <div className={utilClassNames.breadcrumbsWrapper}>
-    <div className={[container, utilClassNames.breadcrumbsModule].join(" ")}>
+  <div className={utils.breadcrumbsWrapper}>
+    <div className={[utils.container, utils.breadcrumbsModule].join(" ")}>
       <Breadcrumbs
         breadcrumbs={breadcrumbs.map(breadcrumb =>
           Object.assign({}, breadcrumb, {
diff --git a/components/shared/Button/Button.css b/components/shared/Button/Button.css
deleted file mode 100644
index a7dea9cfc..000000000
--- a/components/shared/Button/Button.css
+++ /dev/null
@@ -1,87 +0,0 @@
-@value darkSecondaryButtonColor, secondaryButtonColor, colderBackgroundColor, linkHoverColor, donateFormButtonColor, linkColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-
-.buttonBase {
-  font-weight: normal;
-  border-radius: 2px;
-  font-size: 1rem;
-  padding: .5rem 1rem;
-  transition: background-color .15s ease-out;
-  white-space: nowrap;
-  display: inline-block;
-  cursor: pointer;
-  width: 100%;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-/* Types */
-
-.buttonPrimary, .buttonPrimary:visited {
-  color: white;
-  background-color: linkColor;
-
-  &:hover {
-    background-color: linkHoverColor;
-  }
-}
-
-.buttonSecondary, .buttonSecondary:visited {
-  color: white;
-  background-color: secondaryButtonColor;
-
-  &:hover {
-    background-color: darkSecondaryButtonColor;
-  }
-}
-
-.buttonGhost {
-  color: donateFormButtonColor;
-  background-color: colderBackgroundColor;
-
-  &:hover {
-    background-color: colderBackgroundColor;
-  }
-}
-
-.buttonDonate {
-  color: donateFormButtonColor;
-  background-color: colderBackgroundColor;
-  display: block;
-  width: 100%;
-  margin-bottom: 1rem;
-  padding: .75rem 2rem;
-
-  &.buttonLarge {
-    font-size: 1rem;
-  }
-
-  &.active, &:hover {
-    background-color: donateFormButtonColor;
-    color: colderBackgroundColor;
-  }
-
-  &:active {
-    background-color: donateFormButtonColor;
-    color: colderBackgroundColor;
-  }
-}
-
-/* Sizes */
-
-.buttonLarge {
-  font-size: 1rem;
-  padding: .75rem 2rem;
-
-  @media (min-width: mediumRem) {
-    font-size: 1.25rem;
-    padding: 1rem 2.5rem;
-  }
-}
-
-.buttonMedium {
-  font-size: 1rem;
-  padding: .5rem .75rem;
-}
diff --git a/components/shared/Button/Button.scss b/components/shared/Button/Button.scss
new file mode 100644
index 000000000..c930f3bf6
--- /dev/null
+++ b/components/shared/Button/Button.scss
@@ -0,0 +1,87 @@
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+
+.buttonBase {
+  font-weight: normal;
+  border-radius: 2px;
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  transition: background-color 0.15s ease-out;
+  white-space: nowrap;
+  display: inline-block;
+  cursor: pointer;
+  width: 100%;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* Types */
+
+.buttonPrimary, .buttonPrimary:visited {
+  color: white;
+  background-color: $linkColor;
+
+  &:hover {
+    background-color: $linkHoverColor;
+  }
+}
+
+.buttonSecondary, .buttonSecondary:visited {
+  color: white;
+  background-color: $secondaryButtonColor;
+
+  &:hover {
+    background-color: $darkSecondaryButtonColor;
+  }
+}
+
+.buttonGhost {
+  color: $donateFormButtonColor;
+  background-color: $colderBackgroundColor;
+
+  &:hover {
+    background-color: $colderBackgroundColor;
+  }
+}
+
+.buttonDonate {
+  color: $donateFormButtonColor;
+  background-color: $colderBackgroundColor;
+  display: block;
+  width: 100%;
+  margin-bottom: 1rem;
+  padding: 0.75rem 2rem;
+
+  &.buttonLarge {
+    font-size: 1rem;
+  }
+
+  &.active, &:hover {
+    background-color: $donateFormButtonColor;
+    color: $colderBackgroundColor;
+  }
+
+  &:active {
+    background-color: $donateFormButtonColor;
+    color: $colderBackgroundColor;
+  }
+}
+
+/* Sizes */
+
+.buttonLarge {
+  font-size: 1rem;
+  padding: 0.75rem 2rem;
+
+  @media (min-width: $mediumRem) {
+    font-size: 1.25rem;
+    padding: 1rem 2.5rem;
+  }
+}
+
+.buttonMedium {
+  font-size: 1rem;
+  padding: 0.5rem 0.75rem;
+}
diff --git a/components/shared/Button/index.js b/components/shared/Button/index.js
index 9d8e9333e..8b16d8f84 100644
--- a/components/shared/Button/index.js
+++ b/components/shared/Button/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames, stylesheet } from "./Button.css";
+import css from "./Button.scss";
 
 const Button = ({
   id,
@@ -29,7 +29,7 @@ const Button = ({
   live,
   url
 }) => {
-  let buttonClasses = `${classNames.buttonBase}`;
+  let buttonClasses = `${css.buttonBase}`;
 
   let props = {};
   if (id) props["id"] = id;
@@ -46,31 +46,31 @@ const Button = ({
 
   switch (type) {
     case "primary":
-      buttonClasses = `${buttonClasses} ${classNames.buttonPrimary}`;
+      buttonClasses = `${buttonClasses} ${css.buttonPrimary}`;
       break;
     case "secondary":
-      buttonClasses = `${buttonClasses} ${classNames.buttonSecondary}`;
+      buttonClasses = `${buttonClasses} ${css.buttonSecondary}`;
       break;
     case "ghost":
-      buttonClasses = `${buttonClasses} ${classNames.buttonGhost}`;
+      buttonClasses = `${buttonClasses} ${css.buttonGhost}`;
       break;
     case "donate":
-      buttonClasses = `${buttonClasses} ${classNames.buttonDonate}`;
+      buttonClasses = `${buttonClasses} ${css.buttonDonate}`;
       break;
   }
 
   switch (size) {
     case "large":
-      buttonClasses = `${buttonClasses} ${classNames.buttonLarge}`;
+      buttonClasses = `${buttonClasses} ${css.buttonLarge}`;
       break;
     case "medium":
-      buttonClasses = `${buttonClasses} ${classNames.buttonMedium}`;
+      buttonClasses = `${buttonClasses} ${css.buttonMedium}`;
       break;
   }
 
   switch (state) {
     case "active":
-      buttonClasses = `${buttonClasses} ${classNames.active}`;
+      buttonClasses = `${buttonClasses} ${css.active}`;
       break;
   }
 
@@ -97,7 +97,6 @@ const Button = ({
           >
             {children}
           </button>}
-      <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
     </div>
   );
 };
diff --git a/components/shared/CallToAction/CallToAction.css b/components/shared/CallToAction/CallToAction.scss
similarity index 63%
rename from components/shared/CallToAction/CallToAction.css
rename to components/shared/CallToAction/CallToAction.scss
index ee52104be..c80ed3fab 100644
--- a/components/shared/CallToAction/CallToAction.css
+++ b/components/shared/CallToAction/CallToAction.scss
@@ -1,12 +1,12 @@
-@value dimmedTextColor, warmerBackgroundColor, memberColor, darkSecondaryButtonColor, secondaryButtonColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .callToAction {
   background-color: white;
   padding: 2rem;
 
-  @media (max-width: largeRem) {
+  @media (max-width: $largeRem) {
     padding: 1rem;
   }
 }
@@ -20,7 +20,7 @@
   font-size: 1rem;
   margin: 0 auto;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     grid-template-columns: auto 34%;
     grid-template-rows: auto;
     grid-column-gap: 4rem;
@@ -29,7 +29,7 @@
 
 .callToActionText {
   & h2 {
-    font-family: serifFont;
+    font-family: $serifFont;
     font-size: 2.125em;
     font-weight: normal;
   }
@@ -50,7 +50,7 @@
   }
 
   & span {
-    color: dimmedTextColor;
+    color: $dimmedTextColor;
     font-size: 0.8em;
   }
 
@@ -62,11 +62,11 @@
 .button, .button:visited {
   font-size: 1.125rem;
   color: white;
-  background-color: secondaryButtonColor;
+  background-color: $secondaryButtonColor;
   font-weight: normal;
   border-radius: 2px;
-  padding: .75rem 2rem;
-  transition: background-color .15s ease-out;
+  padding: 0.75rem 2rem;
+  transition: background-color 0.15s ease-out;
   white-space: nowrap;
   display: inline-block;
   cursor: pointer;
@@ -75,8 +75,7 @@
     text-decoration: none;
   }
 
-
   &:hover {
-    background-color: darkSecondaryButtonColor;
+    background-color: $darkSecondaryButtonColor;
   }
-}
\ No newline at end of file
+}
diff --git a/components/shared/CallToAction/index.js b/components/shared/CallToAction/index.js
index b1d4b61ab..c9f79853b 100644
--- a/components/shared/CallToAction/index.js
+++ b/components/shared/CallToAction/index.js
@@ -2,8 +2,7 @@ import "react";
 import "next/link";
 
 import Button from "shared/Button";
-
-import { stylesheet, classNames } from "./CallToAction.css";
+import css from "./CallToAction.scss";
 
 const CallToAction = ({
   className,
@@ -14,28 +13,25 @@ const CallToAction = ({
   imageSrc,
   imageCaption
 }) =>
-  <section
-    className={`${className ? className : ""} ${classNames.callToAction}`}
-  >
-    <div className={`${classNames.callToActionWrapper} site-max-width`}>
-      <div className={classNames.callToActionText}>
+  <section className={`${className ? className : ""} ${css.callToAction}`}>
+    <div className={`${css.callToActionWrapper} site-max-width`}>
+      <div className={css.callToActionText}>
         <h2>{title}</h2>
         <p>{text}</p>
-        <div className={classNames.callToActionButton}>
-          <a className={classNames.button} href={buttonUrl}>
+        <div className={css.callToActionButton}>
+          <a className={css.button} href={buttonUrl}>
             {buttonText}
           </a>
         </div>
       </div>
       {imageSrc &&
-        <div className={classNames.callToActionImage}>
+        <div className={css.callToActionImage}>
           <img src={imageSrc} alt="" />
           <span>
             <strong>Image:</strong> {imageCaption}
           </span>
         </div>}
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </section>;
 
 export default CallToAction;
diff --git a/components/shared/CarouselNavArrows/CarouselNavArrows.css b/components/shared/CarouselNavArrows/CarouselNavArrows.scss
similarity index 62%
rename from components/shared/CarouselNavArrows/CarouselNavArrows.css
rename to components/shared/CarouselNavArrows/CarouselNavArrows.scss
index 012726d1f..0bace8989 100644
--- a/components/shared/CarouselNavArrows/CarouselNavArrows.css
+++ b/components/shared/CarouselNavArrows/CarouselNavArrows.scss
@@ -1,5 +1,5 @@
-@value outlineColor from "../../../css/colors.css";
-@value smallRem, largeRem from "../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .arrow {
   position: absolute;
@@ -7,12 +7,12 @@
   top: 50%;
   background-color: rgba(255, 255, 255, 0.95);
   box-shadow: 0px 0 15px 0px rgba(0, 0, 0, 0.25);
-  transition: box-shadow .5s ease-out, background-color .5s ease-out;
+  transition: box-shadow 0.5s ease-out, background-color 0.5s ease-out;
   width: 3rem;
   height: 3rem;
   border-radius: 100%;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     top: 45%;
     height: 5rem;
     box-shadow: none;
@@ -20,25 +20,24 @@
     border-radius: 3px;
   }
 
-  &:hover,
-  &:focus {
+  &:hover, &:focus {
     background-color: white;
     box-shadow: 0px 0 20px 0px rgba(0, 0, 0, 0.3);
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       background-color: rgba(0, 0, 0, 0.05);
       box-shadow: none;
     }
   }
 
   &:focus {
-    outline: 0.25rem solid outlineColor;
+    outline: 0.25rem solid $outlineColor;
   }
 
   & img {
-    width: .9rem;
+    width: 0.9rem;
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       width: 1.5rem;
     }
   }
@@ -47,29 +46,29 @@
 :global(.dpla-related-resources-carousel) {
   & .arrow {
     top: 25%;
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       top: 50%;
     }
   }
 }
 
 .prevArrow {
-  left: -.5rem !important;
+  left: -0.5rem !important;
 
   & img {
     transform: rotate(180deg);
     margin-left: -0.25rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     left: -3.5rem !important;
   }
 }
 
 .nextArrow {
-  right: -.5rem !important;
+  right: -0.5rem !important;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     right: -3.5rem !important;
   }
 
diff --git a/components/shared/CarouselNavArrows/index.js b/components/shared/CarouselNavArrows/index.js
index b2f585584..059d0bbbf 100644
--- a/components/shared/CarouselNavArrows/index.js
+++ b/components/shared/CarouselNavArrows/index.js
@@ -1,11 +1,12 @@
 import React from "react";
-import { classNames } from "./CarouselNavArrows.css";
+
+import css from "./CarouselNavArrows.scss";
 
 const largeChevron = "/static/images/chevron-thin.svg";
 
 const NextArrow = ({ onClick, className }) =>
   <button
-    className={`${classNames.arrow} ${classNames.nextArrow} ${className}`}
+    className={`${css.arrow} ${css.nextArrow} ${className}`}
     tabIndex={-1}
     aria-hidden={true}
     onClick={onClick}
@@ -15,7 +16,7 @@ const NextArrow = ({ onClick, className }) =>
 
 const PrevArrow = ({ onClick, className }) =>
   <button
-    className={`${classNames.arrow} ${classNames.prevArrow} ${className}`}
+    className={`${css.arrow} ${css.prevArrow} ${className}`}
     tabIndex={-1}
     aria-hidden={true}
     onClick={onClick}
diff --git a/components/shared/CiteButton/CiteButton.css b/components/shared/CiteButton/CiteButton.scss
similarity index 57%
rename from components/shared/CiteButton/CiteButton.css
rename to components/shared/CiteButton/CiteButton.scss
index 8881a982a..97934cd8c 100644
--- a/components/shared/CiteButton/CiteButton.css
+++ b/components/shared/CiteButton/CiteButton.scss
@@ -1,5 +1,5 @@
-@value colderBackgroundColor from "../../../css/colors.css";
-@value monoFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/typography";
 
 .wrapper {
   border-radius: 3px;
@@ -8,7 +8,7 @@
 }
 
 .button.activeButton {
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -23,7 +23,7 @@
     /* display: none;
     visibility: hidden; */
     overflow: hidden;
-    transition: max-height .5s ease-out;
+    transition: max-height 0.5s ease-out;
     max-height: 0rem;
   }
 }
@@ -33,9 +33,9 @@
 }
 
 .citationsWrapper {
-  background-color: colderBackgroundColor;
-  padding: .5rem .5rem;
-  border-radius: 0 0 .25rem .25rem;
+  background-color: $colderBackgroundColor;
+  padding: 0.5rem 0.5rem;
+  border-radius: 0 0 0.25rem 0.25rem;
 }
 
 .citationList {
@@ -45,25 +45,25 @@
 
   & dt {
     font-weight: bold;
-    margin: .5rem .5rem .25rem;
+    margin: 0.5rem 0.5rem 0.25rem;
   }
 
   & dd {
     background-color: white;
-    border-radius: .25rem;
-    font-family: monoFont;
-    font-size: .9rem;
+    border-radius: 0.25rem;
+    font-family: $monoFont;
+    font-size: 0.9rem;
     margin: 0 0 1rem;
-    padding: .5rem;
+    padding: 0.5rem;
 
     &:last-child {
-      margin-bottom: .5rem;
+      margin-bottom: 0.5rem;
     }
   }
 }
 
 .disclaimer {
   display: block;
-  margin: .5rem;
-  font-size: .8rem;
+  margin: 0.5rem;
+  font-size: 0.8rem;
 }
diff --git a/components/shared/CiteButton/index.js b/components/shared/CiteButton/index.js
index 2238f1a95..03bfc79ce 100644
--- a/components/shared/CiteButton/index.js
+++ b/components/shared/CiteButton/index.js
@@ -3,7 +3,7 @@ import Button from "components/shared/Button";
 
 import { joinIfArray, removeEndPunctuation, formatDate } from "utilFunctions";
 
-import { classNames, stylesheet } from "./CiteButton.css";
+import css from "./CiteButton.scss";
 
 class CiteButton extends React.Component {
   state = {
@@ -27,15 +27,14 @@ class CiteButton extends React.Component {
       title
     } = this.props;
     return (
-      <div className={classNames.wrapper}>
+      <div className={css.wrapper}>
         <Button
           onClick={this.toggleCiteButton}
           controls="citation-content"
           expanded={this.state.showCitation}
           type="ghost"
-          className={`${classNames.button} ${className} ${this.state
-            .showCitation
-            ? classNames.activeButton
+          className={`${css.button} ${className} ${this.state.showCitation
+            ? css.activeButton
             : ""}`}
         >
           <h2>Cite this {toCiteText}</h2>
@@ -44,18 +43,18 @@ class CiteButton extends React.Component {
         <div
           id="citation-content"
           aria-hidden={!this.state.showCitation}
-          className={`${classNames.citeButton} ${this.state.showCitation
+          className={`${css.citeButton} ${this.state.showCitation
             ? ""
-            : classNames.hidden}`}
+            : css.hidden}`}
         >
-          <div className={classNames.citationsWrapper}>
+          <div className={css.citationsWrapper}>
             {freeText &&
-              <dl className={classNames.citationList}>
+              <dl className={css.citationList}>
                 <dt>Citation Information</dt>
                 <dd dangerouslySetInnerHTML={{ __html: freeText }} />
               </dl>}
             {!freeText &&
-              <dl className={classNames.citationList}>
+              <dl className={css.citationList}>
                 <dt>Chicago citation style</dt>
                 <dd>
                   {creator ? joinIfArray(creator, ", ") + ". " : ""}
@@ -84,13 +83,12 @@ class CiteButton extends React.Component {
                   {sourceUrl ? " <" + sourceUrl + ">. " : ""}
                 </dd>
               </dl>}
-            <span className={classNames.disclaimer}>
+            <span className={css.disclaimer}>
               <strong>Note:</strong> These citations are programmatically
               generated and may be incomplete.
             </span>
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/shared/ContentPagesSidebar/Sidebar.css b/components/shared/ContentPagesSidebar/Sidebar.scss
similarity index 67%
rename from components/shared/ContentPagesSidebar/Sidebar.css
rename to components/shared/ContentPagesSidebar/Sidebar.scss
index 0cb726037..5a51c7fa6 100644
--- a/components/shared/ContentPagesSidebar/Sidebar.css
+++ b/components/shared/ContentPagesSidebar/Sidebar.scss
@@ -1,9 +1,9 @@
-@value linkColor, warmerBackgroundColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .sidebar {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   padding: 1rem 1.5rem;
 
   & .link {
@@ -18,7 +18,7 @@
     position: relative;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     background-color: transparent;
     padding: 0 1.25rem 0 0;
     /* inline-block to prevent the divider from spanning the full width */
@@ -29,10 +29,9 @@
 .sidebar ul ul {
   margin-left: 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-left: 1.3rem;
   }
-
 }
 
 .link {
@@ -42,7 +41,7 @@
     text-decoration: underline;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 1.2rem;
   }
 }
@@ -54,7 +53,7 @@
   width: 100%;
   margin: 1rem 0;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin: 1.25rem 0;
   }
 }
@@ -67,10 +66,10 @@
   width: 0.4rem;
   top: 0.5rem;
   left: -0.75rem;
-  background-color: linkColor;
+  background-color: $linkColor;
   border-radius: 50%;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     top: 0.6rem;
   }
 }
diff --git a/components/shared/ContentPagesSidebar/index.js b/components/shared/ContentPagesSidebar/index.js
index 63819b6f3..70dbf0bb5 100644
--- a/components/shared/ContentPagesSidebar/index.js
+++ b/components/shared/ContentPagesSidebar/index.js
@@ -11,16 +11,12 @@ import {
   endsWith
 } from "utilFunctions";
 
-import { classNames, stylesheet } from "./Sidebar.css";
+import css from "./Sidebar.scss";
 
 const SidebarLink = ({ isCurrentLink, isGuide, linkObject, title }) => {
   return (
     <Link as={linkObject.as} href={linkObject.href}>
-      <a
-        className={`${classNames.link} ${isCurrentLink
-          ? classNames.selected
-          : ""}`}
-      >
+      <a className={`${css.link} ${isCurrentLink ? css.selected : ""}`}>
         {title}
       </a>
     </Link>
@@ -168,8 +164,8 @@ const Sidebar = ({ className, activeItemId, items, route }) => {
 
   return (
     <div className={`${className} col-xs-12 col-md-4`}>
-      <div className={classNames.sidebar}>
-        <ul className={classNames.links}>
+      <div className={css.sidebar}>
+        <ul className={css.links}>
           {items
             .filter(
               item =>
@@ -190,7 +186,7 @@ const Sidebar = ({ className, activeItemId, items, route }) => {
               );
             })}
         </ul>
-        <div className={classNames.divider} />
+        <div className={css.divider} />
         <ul>
           <li>
             <NestedSidebarLinks
@@ -230,7 +226,6 @@ const Sidebar = ({ className, activeItemId, items, route }) => {
           </li>
         </ul>
       </div>
-      <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
     </div>
   );
 };
diff --git a/components/shared/FeatureHeader/FeatureHeader.css b/components/shared/FeatureHeader/FeatureHeader.scss
similarity index 55%
rename from components/shared/FeatureHeader/FeatureHeader.css
rename to components/shared/FeatureHeader/FeatureHeader.scss
index 728cbe99f..3888aeff2 100644
--- a/components/shared/FeatureHeader/FeatureHeader.css
+++ b/components/shared/FeatureHeader/FeatureHeader.scss
@@ -1,16 +1,16 @@
-@value warmerBackgroundColor, dimmedTextColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .content {
   padding-top: 1rem;
   padding-bottom: 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: flex;
     align-items: center;
     padding-top: 2rem;
@@ -21,10 +21,10 @@
 .text {
   font-weight: normal;
   font-size: 1.5rem;
-  font-family: serifFont;
+  font-family: $serifFont;
   line-height: 1.25;
-  
-  @media (min-width: mediumRem) {
+
+  @media (min-width: $mediumRem) {
     font-size: 2.5rem;
     padding-right: 1rem;
     width: 30%;
@@ -34,24 +34,24 @@
     }
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 3rem;
   }
 }
 
 .description {
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   line-height: 1.25;
   margin-top: 0.5rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding-left: 1rem;
     font-size: 1.25rem;
     border-left: 1px solid rgba(0, 0, 0, 0.15);
     width: 70%;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-left: 1.5rem;
     font-size: 1.5rem;
   }
diff --git a/components/shared/FeatureHeader/index.js b/components/shared/FeatureHeader/index.js
index a03d703d4..7f56748b4 100644
--- a/components/shared/FeatureHeader/index.js
+++ b/components/shared/FeatureHeader/index.js
@@ -1,22 +1,21 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./FeatureHeader.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+
+import css from "./FeatureHeader.scss";
 
 const FeatureHeader = ({ title, description, titleClassName }) =>
-  <div className={classNames.wrapper}>
-    <div className={`${utilClassNames.container} ${classNames.content}`}>
+  <div className={css.wrapper}>
+    <div className={`${utils.container} ${css.content}`}>
       <h1
         className={`${titleClassName ? titleClassName : ""} ${description === ""
-          ? classNames.long
-          : ""} ${classNames.text}`}
+          ? css.long
+          : ""} ${css.text}`}
       >
         {title}
       </h1>
-      {description !== "" &&
-        <p className={classNames.description}>{description}</p>}
+      {description !== "" && <p className={css.description}>{description}</p>}
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default FeatureHeader;
diff --git a/components/shared/FiltersBar/FiltersBar.css b/components/shared/FiltersBar/FiltersBar.scss
similarity index 63%
rename from components/shared/FiltersBar/FiltersBar.css
rename to components/shared/FiltersBar/FiltersBar.scss
index 9ef76a290..f43ec72e3 100644
--- a/components/shared/FiltersBar/FiltersBar.css
+++ b/components/shared/FiltersBar/FiltersBar.scss
@@ -1,10 +1,10 @@
-@value dimmedTextColor, warmerBackgroundColor, black50 from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .filtersWrapper {
   width: 100%;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, 0.03);
 }
 
@@ -12,19 +12,19 @@
   padding: 0.5rem 1rem 1rem;
   margin: 0 auto;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-left: 0;
     padding-right: 0;
   }
 }
 
 .filter {
-  font-size: .875rem;
+  font-size: 0.875rem;
   margin-top: 0.5rem;
 }
 
 .textInput::placeholder {
-  color: black50;
+  color: $black50;
 }
 
 .textInput {
@@ -45,6 +45,6 @@
 
 .sortByText {
   display: inline-block;
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   margin-right: 0.25rem;
 }
diff --git a/components/shared/GaWrapper.js b/components/shared/GaWrapper.js
index 37075066e..af841a982 100644
--- a/components/shared/GaWrapper.js
+++ b/components/shared/GaWrapper.js
@@ -4,6 +4,7 @@
 import React from "react";
 import ReactGA from "react-ga";
 import Router from "next/router";
+
 import { gaTrackingId } from "constants/env";
 import { initGa, getFullPath } from "utilFunctions";
 
diff --git a/components/shared/GridView/GridImage.js b/components/shared/GridView/GridImage.js
index 787c6bee9..61be5d7de 100644
--- a/components/shared/GridView/GridImage.js
+++ b/components/shared/GridView/GridImage.js
@@ -1,8 +1,9 @@
 import React from "react";
 
-import { classNames } from "./GridView.css";
 import { getDefaultThumbnail } from "utilFunctions";
 
+import css from "./GridView.scss";
+
 class GridImage extends React.Component {
   state = {
     updateToDefaultImage: false
@@ -24,13 +25,13 @@ class GridImage extends React.Component {
 
     return (
       <div
-        className={`${classNames.imageWrapper}
-          ${useDefaultWrapper && classNames.defaultImageWrapper}`}
+        className={`${css.imageWrapper}
+          ${useDefaultWrapper && css.defaultImageWrapper}`}
       >
         <img
           src={updateToDefaultImage ? getDefaultThumbnail(type) : url}
           alt={title}
-          className={classNames.image}
+          className={css.image}
         />
       </div>
     );
diff --git a/components/shared/GridView/GridView.css b/components/shared/GridView/GridView.scss
similarity index 88%
rename from components/shared/GridView/GridView.css
rename to components/shared/GridView/GridView.scss
index f2f1d9609..f7811d7d4 100644
--- a/components/shared/GridView/GridView.css
+++ b/components/shared/GridView/GridView.scss
@@ -1,5 +1,4 @@
-@value warmerBackgroundColor from "../../../css/colors.css";
-
+@import "stylesheets/colors";
 
 .wrapper {
   width: 100%;
@@ -48,7 +47,7 @@
 
 .defaultImageWrapper {
   align-items: center;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   display: flex;
   justify-content: center;
   margin-bottom: 0.25rem;
diff --git a/components/shared/GridView/index.js b/components/shared/GridView/index.js
index 00dced5ff..fd8e43ad0 100644
--- a/components/shared/GridView/index.js
+++ b/components/shared/GridView/index.js
@@ -4,33 +4,28 @@ import Grid from "react-masonry-component";
 
 import GridImage from "./GridImage";
 
-import { classNames, stylesheet } from "./GridView.css";
+import css from "./GridView.scss";
 
 const GridView = ({ items, style }) =>
-  <div className={classNames.wrapper} style={style}>
+  <div className={css.wrapper} style={style}>
     <Grid
       elementType="ul"
-      className={classNames.grid}
+      className={css.grid}
       options={{
         gutter: 5
       }}
     >
       {items.map(item =>
-        <li key={item.id} className={classNames.gridItem}>
+        <li key={item.id} className={css.gridItem}>
           <Link prefetch href={item.linkHref} as={item.linkAs}>
-            <a className={classNames.link}>
+            <a className={css.link}>
               <GridImage
                 title={item.title}
                 type={item.type}
                 url={item.thumbnailUrl}
                 useDefaultImage={item.useDefaultImage}
               />
-              <p
-                className={[
-                  classNames.hoverText,
-                  classNames.blockWithText
-                ].join(" ")}
-              >
+              <p className={[css.hoverText, css.blockWithText].join(" ")}>
                 {item.title}
               </p>
             </a>
@@ -38,7 +33,6 @@ const GridView = ({ items, style }) =>
         </li>
       )}
     </Grid>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default GridView;
diff --git a/components/shared/GuideLink/GuideLink.css b/components/shared/GuideLink/GuideLink.scss
similarity index 68%
rename from components/shared/GuideLink/GuideLink.css
rename to components/shared/GuideLink/GuideLink.scss
index 2a4ad512e..287fbb591 100644
--- a/components/shared/GuideLink/GuideLink.css
+++ b/components/shared/GuideLink/GuideLink.scss
@@ -1,6 +1,6 @@
-@value colderBackgroundColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .itemColumn {
   margin-bottom: 1rem;
@@ -12,7 +12,7 @@
 }
 
 .itemLink {
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
   border-radius: 0.3rem;
   padding: 3rem 2rem 2rem;
   width: 100%;
@@ -27,17 +27,17 @@
     text-decoration: underline;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 2rem 1.5rem;
   }
 }
 
 .itemHeader {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-style: italic;
   font-size: 1.5rem;
-  margin: 1rem 0 .5rem;
+  margin: 1rem 0 0.5rem;
 }
 
 .itemImg {
diff --git a/components/shared/GuideLink/index.js b/components/shared/GuideLink/index.js
index 0940a5486..e55a0479a 100644
--- a/components/shared/GuideLink/index.js
+++ b/components/shared/GuideLink/index.js
@@ -1,23 +1,24 @@
 import React from "react";
 import Link from "next/link";
-import { classNames, stylesheet } from "./GuideLink.css";
+
+import css from "./GuideLink.scss";
 
 const GuideLink = ({ guide }) =>
-  <div className={classNames.item}>
+  <div className={css.item}>
     <Link
       href={`/guides/guide?guide=${guide.slug}`}
       as={`/guides/${guide.slug}`}
     >
-      <a className={classNames.itemLink}>
+      <a className={css.itemLink}>
         <img
           alt={guide.illustration.alt || guide.title}
-          className={classNames.itemImg}
+          className={css.itemImg}
           src={guide.illustration.url}
         />
-        <div className={classNames.itemHeader}>
+        <div className={css.itemHeader}>
           {guide.displayTitle || guide.title}
         </div>
-        <p className={classNames.text}>{guide.summary}</p>
+        <p className={css.text}>{guide.summary}</p>
       </a>
     </Link>
   </div>;
diff --git a/components/shared/HeadingRule/HeadingRule.css b/components/shared/HeadingRule/HeadingRule.scss
similarity index 53%
rename from components/shared/HeadingRule/HeadingRule.css
rename to components/shared/HeadingRule/HeadingRule.scss
index 3d465f521..759a9a812 100644
--- a/components/shared/HeadingRule/HeadingRule.css
+++ b/components/shared/HeadingRule/HeadingRule.scss
@@ -1,11 +1,11 @@
-@value smallRem from "../../../css/breakpoints.css";
+@import "stylesheets/breakpoints";
 
 .rule {
   border-top: 0.25rem solid;
   width: 2.5rem;
   margin: 1rem auto;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: 3rem;
   }
 }
diff --git a/components/shared/HeadingRule/index.js b/components/shared/HeadingRule/index.js
index 7e6cd36cb..845fb8361 100644
--- a/components/shared/HeadingRule/index.js
+++ b/components/shared/HeadingRule/index.js
@@ -1,16 +1,15 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./HeadingRule.css";
+import css from "./HeadingRule.scss";
 
 const HeadingRule = ({ color }) =>
   <div>
     <div
-      className={classNames.rule}
+      className={css.rule}
       style={{
         borderColor: color ? color : "rgba(0,0,0,.15)"
       }}
     />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default HeadingRule;
diff --git a/components/shared/ListView/GaListViewWrapper.js b/components/shared/ListView/GaListViewWrapper.js
index b5e6993f4..5f0b8e7c3 100644
--- a/components/shared/ListView/GaListViewWrapper.js
+++ b/components/shared/ListView/GaListViewWrapper.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactGA from "react-ga";
 import Router from "next/router";
+
 import {
   joinIfArray,
   parseDplaItemRecord,
diff --git a/components/shared/ListView/ListImage.js b/components/shared/ListView/ListImage.js
index 797d03c71..94dc9114e 100644
--- a/components/shared/ListView/ListImage.js
+++ b/components/shared/ListView/ListImage.js
@@ -1,9 +1,10 @@
 import React from "react";
 import Link from "next/link";
 
-import { classNames } from "./ListView.css";
 import { getDefaultThumbnail } from "utilFunctions";
 
+import css from "./ListView.scss";
+
 class ListImage extends React.Component {
   state = {
     updateToDefaultImage: false,
@@ -26,18 +27,18 @@ class ListImage extends React.Component {
 
     return (
       <div
-        className={`${classNames.imageWrapper}
-          ${useDefaultWrapper && classNames.defaultImageWrapper}`}
+        className={`${css.imageWrapper}
+          ${useDefaultWrapper && css.defaultImageWrapper}`}
       >
         <Link href={this.state.item.linkHref} as={this.state.item.linkAs}>
           <a
-            className={`${classNames.listItemImageLink} internalItemLink`}
+            className={`${css.listItemImageLink} internalItemLink`}
             aria-hidden
           >
             <img
               src={updateToDefaultImage ? getDefaultThumbnail(type) : url}
               alt=""
-              className={classNames.image}
+              className={css.image}
             />
           </a>
         </Link>
diff --git a/components/shared/ListView/ListView.css b/components/shared/ListView/ListView.scss
similarity index 69%
rename from components/shared/ListView/ListView.css
rename to components/shared/ListView/ListView.scss
index 0b88ba1c0..9bde12c47 100644
--- a/components/shared/ListView/ListView.css
+++ b/components/shared/ListView/ListView.scss
@@ -1,5 +1,5 @@
-@value linkColor, elephantBlue, dimmedTextColor, outgoingLinkColor, warmerBackgroundColor from "../../../css/colors.css";
-@value smallRem, largeRem from "../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .listItem {
   padding: 15px 0;
@@ -18,9 +18,9 @@
 .itemTitle {
   font-size: 0.875rem;
   font-weight: 600;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-weight: normal;
-    color: linkColor;
+    color: $linkColor;
     font-size: 1.125rem;
     margin-right: 8px;
   }
@@ -31,17 +31,17 @@
   padding-right: 1rem;
   word-break: break-word;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-right: 0;
   }
 }
 
 .defaultImageWrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   padding-bottom: 20%;
   padding-top: 20%;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-bottom: 0;
     padding-top: 0;
   }
@@ -53,11 +53,11 @@
 .imageWrapper {
   width: 33%;
   height: 10rem;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   border: 1px solid rgba(0, 0, 0, 0.1);
   overflow: hidden;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     margin-left: 1rem;
   }
 }
@@ -79,21 +79,21 @@
 .itemDescription {
   display: block;
   font-size: 0.875rem;
-  margin-top: .25rem;
+  margin-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
 .itemSource, .itemSource:visited {
   font-size: 0.875rem;
-  color: outgoingLinkColor;
+  color: $outgoingLinkColor;
 
   &:hover {
     text-decoration: underline;
   }
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-weight: 600;
-    margin-top: .25rem;
+    margin-top: 0.25rem;
   }
 }
 
@@ -109,12 +109,12 @@
 }
 
 .itemSourceText {
-  margin-right: .3rem;
+  margin-right: 0.3rem;
 }
 
 .itemAuthorAndDate {
-  margin-top: .25rem;
+  margin-top: 0.25rem;
   display: block;
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   font-size: 0.875rem;
 }
diff --git a/components/shared/ListView/index.js b/components/shared/ListView/index.js
index 23e182ff9..8fa3fc3e4 100644
--- a/components/shared/ListView/index.js
+++ b/components/shared/ListView/index.js
@@ -7,7 +7,7 @@ import GaListViewWrapper from "./GaListViewWrapper";
 import { joinIfArray, truncateString } from "utilFunctions";
 import { UNTITLED_TEXT } from "constants/site";
 
-import { classNames, stylesheet } from "./ListView.css";
+import css from "./ListView.scss";
 
 const externalLinkIcon = "/static/images/external-link-blue.svg";
 
@@ -19,16 +19,16 @@ const ItemDescription = ({ description }) => {
   let str = joinIfArray(description);
   str = truncateString(str);
   return (
-    <div className={classNames.itemDescription}>
+    <div className={css.itemDescription}>
       <p>{str}</p>
     </div>
   );
 };
 
 const ListView = ({ items, route }) =>
-  <ul className={classNames.listView}>
+  <ul className={css.listView}>
     {items.map(item =>
-      <li key={item["@id"] || item.id} className={classNames.listItem}>
+      <li key={item["@id"] || item.id} className={css.listItem}>
         <ListImage
           item={item}
           title={item.title}
@@ -36,10 +36,10 @@ const ListView = ({ items, route }) =>
           url={item.thumbnailUrl}
           useDefaultImage={item.useDefaultImage}
         />
-        <div className={classNames.itemInfo}>
+        <div className={css.itemInfo}>
           <Link href={item.linkHref} as={item.linkAs}>
-            <a className={`classNames.listItemLink internalItemLink`}>
-              <h2 className={`hover-underline ${classNames.itemTitle}`}>
+            <a className={`${css.listItemLink} internalItemLink`}>
+              <h2 className={`hover-underline ${css.itemTitle}`}>
                 {route.pathname.indexOf("/search") === 0 && item.title
                   ? truncateString(item.title, 150)
                   : item.title ? item.title : UNTITLED_TEXT}
@@ -48,7 +48,7 @@ const ListView = ({ items, route }) =>
           </Link>
 
           {(item.date || item.creator) &&
-            <span className={classNames.itemAuthorAndDate}>
+            <span className={css.itemAuthorAndDate}>
               {route.pathname.indexOf("/search") === 0 &&
                 item.date &&
                 <span>{item.date.displayDate}</span>}
@@ -64,27 +64,26 @@ const ListView = ({ items, route }) =>
             href={item.sourceUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className={`hover-underline clickThrough ${classNames.itemSource}`}
+            className={`hover-underline clickThrough ${css.itemSource}`}
           >
-            <span className={classNames.itemSourceText}>
+            <span className={css.itemSourceText}>
               {item.type === "image"
                 ? "View Full Image"
                 : item.type === "text" ? "View Full Text" : "View Full Item"}
             </span>
             <img
-              className={classNames.externalLinkIcon}
+              className={css.externalLinkIcon}
               src={externalLinkIcon}
               alt=""
             />
           </a>
           {item.dataProvider &&
-            <span className={`${classNames.itemProvider}`}>
+            <span className={`${css.itemProvider}`}>
               &nbsp; in {item.dataProvider}
             </span>}
         </div>
       </li>
     )}
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </ul>;
 
 export default GaListViewWrapper(ListView);
diff --git a/components/shared/NewsLane/NewsLane.css b/components/shared/NewsLane/NewsLane.scss
similarity index 57%
rename from components/shared/NewsLane/NewsLane.css
rename to components/shared/NewsLane/NewsLane.scss
index 094f8e13f..a3757c2b6 100644
--- a/components/shared/NewsLane/NewsLane.css
+++ b/components/shared/NewsLane/NewsLane.scss
@@ -1,20 +1,20 @@
-@value linkColor, dimmedTextColor, warmerBackgroundColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .content {
   margin: 0 auto;
   padding: 2rem 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 3rem 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 4rem 0;
   }
 
@@ -23,7 +23,7 @@
     grid-template-columns: 1fr 1fr 1fr;
     grid-gap: 0.5rem;
 
-    @media (max-width: mediumRem) {
+    @media (max-width: $mediumRem) {
       display: block;
     }
   }
@@ -35,7 +35,7 @@
       margin-top: 0;
     }
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       margin-top: 0;
     }
   }
@@ -46,52 +46,52 @@
   padding-bottom: 1rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     border-bottom: 0;
     padding-bottom: 0;
   }
 }
 
 .headerText {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 2rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 2.25rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 3rem;
   }
 }
 
 .headerLink {
-  color: linkColor;
+  color: $linkColor;
   font-weight: 600;
   font-size: 1rem;
-  margin-top: .25rem;
+  margin-top: 0.25rem;
   display: block;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-top: 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 1.25rem;
   }
 }
 
 .chevron {
-  height: .65rem;
-  margin-left: .5rem;
+  height: 0.65rem;
+  margin-left: 0.5rem;
 }
 
 .post:first-child {
   position: relative;
 
   &:before {
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       content: "";
       display: block;
       position: absolute;
@@ -109,21 +109,21 @@
 }
 
 .date {
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   font-size: 0.9rem;
   font-weight: bold;
   margin-top: 0.25rem;
   text-transform: uppercase;
 
-  @media (min-width: mediumRem) {
-    margin-top: .5rem;
+  @media (min-width: $mediumRem) {
+    margin-top: 0.5rem;
   }
 }
 
 .bodyText {
-  margin-top: .25rem;
+  margin-top: 0.25rem;
 
-  @media (min-width: mediumRem) {
-    margin-top: .5rem;
+  @media (min-width: $mediumRem) {
+    margin-top: 0.5rem;
   }
 }
diff --git a/components/shared/NewsLane/index.js b/components/shared/NewsLane/index.js
index 848b98471..6d211ae14 100644
--- a/components/shared/NewsLane/index.js
+++ b/components/shared/NewsLane/index.js
@@ -3,24 +3,24 @@ import Link from "next/link";
 
 import { formatDate } from "utilFunctions";
 
-import { stylesheet, classNames } from "./NewsLane.css";
+import css from "./NewsLane.scss";
 
-const smallChevron = "static/images/chevron-thick-orange.svg";
+const smallChevron = "/static/images/chevron-thick-orange.svg";
 
 const NewsLane = ({ title, items }) =>
-  <div className={classNames.wrapper}>
-    <div className={`${classNames.content} site-max-width`}>
+  <div className={css.wrapper}>
+    <div className={`${css.content} site-max-width`}>
       <div className="row">
         <div className="col-xs-12 col-md-3">
-          <div className={classNames.header}>
-            <h2 className={classNames.headerText}>{title}</h2>
+          <div className={css.header}>
+            <h2 className={css.headerText}>{title}</h2>
             <Link prefetch href="/news">
-              <a className={`hover-underline ${classNames.headerLink}`}>
+              <a className={`hover-underline ${css.headerLink}`}>
                 <span>Browse the archives</span>
                 <img
                   alt="browse the blog"
                   src={smallChevron}
-                  className={classNames.chevron}
+                  className={css.chevron}
                 />
               </a>
             </Link>
@@ -38,8 +38,8 @@ const NewsLane = ({ title, items }) =>
               summary = words.join(" ") + "…";
             }
             return (
-              <li key={post.id} className={`${classNames.post}`}>
-                <div className={classNames.postLink}>
+              <li key={post.id} className={`${css.post}`}>
+                <div className={css.postLink}>
                   <Link
                     prefetch
                     as={`/news/${post.slug}`}
@@ -50,11 +50,11 @@ const NewsLane = ({ title, items }) =>
                     />
                   </Link>
                 </div>
-                <div className={classNames.date}>
+                <div className={css.date}>
                   {dateText}
                 </div>
                 {summary &&
-                  <p className={classNames.bodyText}>
+                  <p className={css.bodyText}>
                     {summary}
                   </p>}
               </li>
@@ -63,7 +63,6 @@ const NewsLane = ({ title, items }) =>
         </ul>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default NewsLane;
diff --git a/components/shared/Pagination/Pagination.css b/components/shared/Pagination/Pagination.scss
similarity index 59%
rename from components/shared/Pagination/Pagination.css
rename to components/shared/Pagination/Pagination.scss
index 56353ad3f..9d939c177 100644
--- a/components/shared/Pagination/Pagination.css
+++ b/components/shared/Pagination/Pagination.scss
@@ -1,23 +1,23 @@
-@value paginationLinkColor, colderBackgroundColor, linkColor from "../../../css/colors.css";
-@value smallRem from "../../../css/breakpoints.css";
-@value sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .pagination {
   display: flex;
   margin-top: 20px;
   text-align: right;
-  font-family: sansFont;
+  font-family: $sansFont;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: block;
   }
 }
 
 .link, .link:visited {
   display: none;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline-block;
-    color: paginationLinkColor;
+    color: $paginationLinkColor;
     font-size: 1.125rem;
     padding: 3px 10px;
     margin: 0 3px;
@@ -27,7 +27,7 @@
 
 .ellipses {
   display: none;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: inline-block;
   }
 }
@@ -43,7 +43,7 @@
 }
 
 .link:not(.activeLink):hover {
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
 }
 
 .nextButton, .previousButton {
@@ -53,8 +53,8 @@
   font-weight: 600;
   width: 100%;
   font-size: 1rem;
-  padding: .75rem 2rem;
-  @media (min-width: smallRem) {
+  padding: 0.75rem 2rem;
+  @media (min-width: $smallRem) {
     font-size: 1.125rem;
     padding: 10px 19px;
     border-radius: 2px;
@@ -65,21 +65,21 @@
 }
 
 .previousButton, .previousButton:visited {
-  background-color: #E3E0DA;
+  background-color: #e3e0da;
   color: black;
-  @media (min-width: smallRem) {
-    background-color: colderBackgroundColor;
-    color: paginationLinkColor;
+  @media (min-width: $smallRem) {
+    background-color: $colderBackgroundColor;
+    color: $paginationLinkColor;
     margin-right: 10px;
   }
 }
 
 .nextButton, .nextButton:visited {
-  background-color: linkColor;
+  background-color: $linkColor;
   color: white;
-  @media (min-width: smallRem) {
-    background-color: colderBackgroundColor;
-    color: paginationLinkColor;
+  @media (min-width: $smallRem) {
+    background-color: $colderBackgroundColor;
+    color: $paginationLinkColor;
     margin-left: 10px;
   }
 }
@@ -89,11 +89,11 @@
   width: 6px;
   & path {
     fill: white;
-    @media (min-width: smallRem) {
-      fill: paginationLinkColor;
+    @media (min-width: $smallRem) {
+      fill: $paginationLinkColor;
     }
   }
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     height: 14px;
     width: 8px;
   }
@@ -107,11 +107,11 @@
   margin-right: 0.5rem;
   & path {
     fill: black;
-    @media (min-width: smallRem) {
-      fill: paginationLinkColor;
+    @media (min-width: $smallRem) {
+      fill: $paginationLinkColor;
     }
   }
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     height: 14px;
     width: 8px;
   }
@@ -119,7 +119,7 @@
 
 .hideOnLargeScreens {
   cursor: not-allowed;
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     display: none;
   }
 }
diff --git a/components/shared/Pagination/index.js b/components/shared/Pagination/index.js
index 4a21507bc..c42919dda 100644
--- a/components/shared/Pagination/index.js
+++ b/components/shared/Pagination/index.js
@@ -5,7 +5,7 @@ import Chevron from "../../../static/images/chevron-thick.svg";
 
 import addCommasToNumber from "utilFunctions/addCommasToNumber";
 
-import { classNames, stylesheet } from "./Pagination.css";
+import css from "./Pagination.scss";
 
 /**
   * @param current, current page number
@@ -46,12 +46,12 @@ const NextOrPrevButton = ({ route, currentPage, disabled, type = "next" }) =>
     ? <button
         disabled
         className={`${type === "next"
-          ? classNames.nextButton
-          : classNames.previousButton} ${classNames.hideOnLargeScreens}`}
+          ? css.nextButton
+          : css.previousButton} ${css.hideOnLargeScreens}`}
       >
-        {type === "prev" && <Chevron className={classNames.prevChevron} />}
+        {type === "prev" && <Chevron className={css.prevChevron} />}
         {type === "next" ? "Next" : "Previous"}
-        {type === "next" && <Chevron className={classNames.nextChevron} />}
+        {type === "next" && <Chevron className={css.nextChevron} />}
       </button>
     : <Link
         prefetch
@@ -64,19 +64,15 @@ const NextOrPrevButton = ({ route, currentPage, disabled, type = "next" }) =>
           })
         }}
       >
-        <a
-          className={
-            type === "next" ? classNames.nextButton : classNames.previousButton
-          }
-        >
-          {type === "prev" && <Chevron className={classNames.prevChevron} />}
+        <a className={type === "next" ? css.nextButton : css.previousButton}>
+          {type === "prev" && <Chevron className={css.prevChevron} />}
           {type === "next" ? "Next" : "Previous"}
-          {type === "next" && <Chevron className={classNames.nextChevron} />}
+          {type === "next" && <Chevron className={css.nextChevron} />}
         </a>
       </Link>;
 
 const Pagination = ({ route, pageCount, currentPage, totalItems }) =>
-  <div className={classNames.pagination}>
+  <div className={css.pagination}>
     <NextOrPrevButton
       disabled={!(currentPage > 1 && pageCount > 1)}
       type="prev"
@@ -86,23 +82,23 @@ const Pagination = ({ route, pageCount, currentPage, totalItems }) =>
     {pageCount > 1 &&
       <PageLink
         className={[
-          classNames.link,
-          parseInt(currentPage, 10) === 1 ? classNames.activeLink : ""
+          css.link,
+          parseInt(currentPage, 10) === 1 ? css.activeLink : ""
         ].join(" ")}
         route={route}
         page={1}
       />}
     {currentPage >= 5 &&
       pageCount > 5 &&
-      <span className={classNames.ellipses}>...</span>}
+      <span className={css.ellipses}>...</span>}
     {centerWindow(currentPage, pageCount).map(
       page =>
         page > 1 && page < pageCount
           ? <PageLink
               key={page}
               className={[
-                classNames.link,
-                page === parseInt(currentPage, 10) ? classNames.activeLink : ""
+                css.link,
+                page === parseInt(currentPage, 10) ? css.activeLink : ""
               ].join(" ")}
               route={route}
               page={page}
@@ -112,12 +108,12 @@ const Pagination = ({ route, pageCount, currentPage, totalItems }) =>
 
     {currentPage <= pageCount - 4 &&
       pageCount > 5 &&
-      <span className={classNames.ellipses}>...</span>}
+      <span className={css.ellipses}>...</span>}
     {pageCount > 1 &&
       <PageLink
         className={[
-          classNames.link,
-          pageCount === parseInt(currentPage, 10) ? classNames.activeLink : ""
+          css.link,
+          pageCount === parseInt(currentPage, 10) ? css.activeLink : ""
         ].join(" ")}
         route={route}
         page={pageCount}
@@ -128,7 +124,6 @@ const Pagination = ({ route, pageCount, currentPage, totalItems }) =>
       currentPage={currentPage}
       type="next"
     />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default Pagination;
diff --git a/components/shared/SkipToContent/SkipToContent.css b/components/shared/SkipToContent/SkipToContent.scss
similarity index 75%
rename from components/shared/SkipToContent/SkipToContent.css
rename to components/shared/SkipToContent/SkipToContent.scss
index e90a0214b..694797bd4 100644
--- a/components/shared/SkipToContent/SkipToContent.css
+++ b/components/shared/SkipToContent/SkipToContent.scss
@@ -1,4 +1,4 @@
-@value linkColor from "../../../css/colors.css";
+@import "stylesheets/colors";
 
 .skipLink a {
   background-color: white;
@@ -10,18 +10,18 @@
   left: -10000px;
   line-height: 2;
   overflow: hidden;
-  padding: .25rem .5rem .25rem;
+  padding: 0.25rem 0.5rem 0.25rem;
   position: absolute;
   top: 1rem;
   width: 1px;
   z-index: 1000;
 
   &:focus {
-    border: .5rem solid linkColor;
+    border: 0.5rem solid $linkColor;
     height: auto;
     left: 1rem;
     outline: 0;
     overflow: visible;
     width: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/components/shared/SkipToContent/index.js b/components/shared/SkipToContent/index.js
index 130aad307..7b2c59d08 100644
--- a/components/shared/SkipToContent/index.js
+++ b/components/shared/SkipToContent/index.js
@@ -1,11 +1,10 @@
 import React from "react";
 
-import { stylesheet, classNames } from "./SkipToContent.css";
+import css from "./SkipToContent.scss";
 
 const SkipToContent = ({ className, id, isHidden, children }) =>
-  <div className={classNames.skipLink} tabIndex="-1">
+  <div className={css.skipLink} tabIndex="-1">
     <a href="#main">Skip to Main Content</a>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default SkipToContent;
diff --git a/components/shared/StayInformed/StayInformed.css b/components/shared/StayInformed/StayInformed.scss
similarity index 66%
rename from components/shared/StayInformed/StayInformed.css
rename to components/shared/StayInformed/StayInformed.scss
index ca140b333..9386c3fd5 100644
--- a/components/shared/StayInformed/StayInformed.css
+++ b/components/shared/StayInformed/StayInformed.scss
@@ -1,23 +1,22 @@
-@value colderBackgroundColor, linkColor, secondaryButtonColor, black from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
-  background-color: colderBackgroundColor;
+  background-color: $colderBackgroundColor;
 }
 
 .content {
   margin: 0 auto;
   padding: 2rem 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 3rem 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 4rem 0;
   }
-
 }
 
 .header {
@@ -25,22 +24,22 @@
   padding-bottom: 1rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     border-bottom: 0;
     padding-bottom: 0;
   }
 }
 
 .headerText {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 2rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 2.25rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 3rem;
   }
 }
@@ -50,7 +49,7 @@
   display: flex;
 
   &:before {
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       content: "";
       display: block;
       position: absolute;
@@ -66,13 +65,12 @@ form {
   display: flex;
   flex-direction: column;
   width: 100%;
-
 }
 
 .formCallToAction {
   margin-bottom: 1rem;
   text-transform: uppercase;
-  font-family: serifFont;
+  font-family: $serifFont;
   font-size: 1rem;
 }
 
@@ -86,7 +84,7 @@ form {
   font-size: 1rem;
   box-sizing: border-box;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     font-size: 1.25rem;
     padding: 1rem 0.75rem;
   }
@@ -101,7 +99,7 @@ form {
   width: 30%;
   border-radius: 0 0.2rem 0.2rem 0;
   color: white;
-  background-color: secondaryButtonColor;
+  background-color: $secondaryButtonColor;
   cursor: pointer;
 }
 
diff --git a/components/shared/StayInformed/index.js b/components/shared/StayInformed/index.js
index 68abd702b..408549c7a 100644
--- a/components/shared/StayInformed/index.js
+++ b/components/shared/StayInformed/index.js
@@ -2,7 +2,7 @@ import React from "react";
 
 import { MAILCHIMP_LISTS } from "constants/site";
 
-import { stylesheet, classNames } from "./StayInformed.css";
+import css from "./StayInformed.scss";
 
 class StayInformed extends React.Component {
   state = {
@@ -55,7 +55,6 @@ class StayInformed extends React.Component {
       body: body
     });
     const data = await res.text();
-    console.log(data);
 
     this.setState({
       isSending: false,
@@ -79,27 +78,27 @@ class StayInformed extends React.Component {
   render() {
     const emailProps = { required: this.state.email !== undefined };
     return (
-      <div className={classNames.wrapper}>
-        <div className={`${classNames.content} site-max-width`}>
+      <div className={css.wrapper}>
+        <div className={`${css.content} site-max-width`}>
           <div className="row">
             <div className="col-xs-12 col-md-3">
-              <div className={classNames.header}>
-                <h2 className={classNames.headerText}>Stay informed</h2>
+              <div className={css.header}>
+                <h2 className={css.headerText}>Stay informed</h2>
               </div>
             </div>
-            <div className={`${classNames.formWrapper} col-xs-12 col-md-9`}>
+            <div className={`${css.formWrapper} col-xs-12 col-md-9`}>
               {!this.state.isSent &&
                 <form onSubmit={this.handleSubmit}>
-                  <h3 className={classNames.formCallToAction}>
+                  <h3 className={css.formCallToAction}>
                     Get the latest DPLA news in your inbox
                   </h3>
-                  <div className={classNames.formInputs}>
+                  <div className={css.formInputs}>
                     <input
                       type="email"
                       name="email"
                       placeholder="Enter your email"
                       aria-label="Enter your email"
-                      className={classNames.email}
+                      className={css.email}
                       onChange={this.onEmailChange}
                       onBlur={this.onEmailChange}
                       {...emailProps}
@@ -111,31 +110,27 @@ class StayInformed extends React.Component {
                         !this.state.isSending ? "Sign Up" : "Subscribing..."
                       }
                       name="signup"
-                      className={classNames.button}
+                      className={css.button}
                       onClick={e => this.onButtonClick(e)}
                     />
                     <input
                       type="checkbox"
                       name="i_prefer_usps_mail"
                       value="1"
-                      className={classNames.miel}
+                      className={css.miel}
                       tabIndex="-1"
                       autoComplete="off"
                     />
                   </div>
                 </form>}
               {this.state.isSent &&
-                <h3
-                  aria-live="assertive"
-                  className={classNames.formCallToAction}
-                >
+                <h3 aria-live="assertive" className={css.formCallToAction}>
                   You have successfully subscribed to DPLA's general email list!
                   We'll send you announcements about our projects and events.
                 </h3>}
             </div>
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/shared/WebsiteFeature/WebsiteFeature.css b/components/shared/WebsiteFeature/WebsiteFeature.scss
similarity index 56%
rename from components/shared/WebsiteFeature/WebsiteFeature.css
rename to components/shared/WebsiteFeature/WebsiteFeature.scss
index 5b1789478..737c499b0 100644
--- a/components/shared/WebsiteFeature/WebsiteFeature.css
+++ b/components/shared/WebsiteFeature/WebsiteFeature.scss
@@ -1,15 +1,15 @@
-@value featureBackgroundColor, darkSecondaryButtonColor, secondaryButtonColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value serifFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .wrapper {
   margin: 0 auto;
-  background-color: featureBackgroundColor;
+  background-color: $featureBackgroundColor;
   display: flex;
   align-items: center;
   padding-right: 3rem;
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     display: block;
     padding-right: 0;
   }
@@ -21,7 +21,7 @@
   background-size: cover;
   background-position-y: 50%;
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     display: none;
   }
 }
@@ -34,7 +34,7 @@
     padding-left: 3rem;
   }
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     &, &.noImage {
       padding: 1rem 1rem 1.5rem;
     }
@@ -42,42 +42,42 @@
 }
 
 .title {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 2.25rem;
   line-height: 1.1;
   margin-bottom: 0.5rem;
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     font-size: 2rem;
   }
 }
 
 .text, .button {
   font-size: 1.125rem;
-  
-  @media (max-width: mediumRem) {
+
+  @media (max-width: $mediumRem) {
     font-size: 1rem;
   }
 }
 
 .button, .button:visited {
   color: white;
-  background-color: secondaryButtonColor;
+  background-color: $secondaryButtonColor;
   font-weight: normal;
   border-radius: 2px;
-  padding: .75rem 2rem;
-  transition: background-color .15s ease-out;
+  padding: 0.75rem 2rem;
+  transition: background-color 0.15s ease-out;
   white-space: nowrap;
   display: inline-block;
   cursor: pointer;
 
   &:hover {
     text-decoration: none;
-    background-color: darkSecondaryButtonColor;
+    background-color: $darkSecondaryButtonColor;
   }
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     margin: 0 1rem 1rem;
   }
-}
\ No newline at end of file
+}
diff --git a/components/shared/WebsiteFeature/index.js b/components/shared/WebsiteFeature/index.js
index d9b93ca09..5ee6d3b80 100644
--- a/components/shared/WebsiteFeature/index.js
+++ b/components/shared/WebsiteFeature/index.js
@@ -1,7 +1,7 @@
 import "react";
 import "next/link";
 
-import { stylesheet, classNames } from "./WebsiteFeature.css";
+import css from "./WebsiteFeature.scss";
 
 const WebsiteFeature = ({
   className,
@@ -12,29 +12,22 @@ const WebsiteFeature = ({
   buttonUrl
 }) =>
   <div
-    className={`${className
-      ? className
-      : ""} ${classNames.wrapper} site-max-width`}
+    className={`${className ? className : ""} ${css.wrapper} site-max-width`}
   >
     {imageSrc &&
       <div
-        className={classNames.imageWrapper}
+        className={css.imageWrapper}
         style={{ backgroundImage: `url(${imageSrc})` }}
       />}
-    <div
-      className={`${classNames.textWrapper} ${imageSrc
-        ? ""
-        : classNames.noImage}`}
-    >
-      <h2 className={classNames.title}>{title}</h2>
-      <p className={classNames.text}>
+    <div className={`${css.textWrapper} ${imageSrc ? "" : css.noImage}`}>
+      <h2 className={css.title}>{title}</h2>
+      <p className={css.text}>
         {text}
       </p>
     </div>
-    <a className={classNames.button} href={buttonUrl}>
+    <a className={css.button} href={buttonUrl}>
       {buttonText}
     </a>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default WebsiteFeature;
diff --git a/components/shared/mediaViewers/AudioPlayer.js b/components/shared/mediaViewers/AudioPlayer.js
index c19438d1e..81e5fd74c 100644
--- a/components/shared/mediaViewers/AudioPlayer.js
+++ b/components/shared/mediaViewers/AudioPlayer.js
@@ -1,11 +1,11 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./mediaViewers.css";
+import css from "./mediaViewers.scss";
 
 const AudioPlayer = ({ pathToFile, fileFormat }) =>
-  <div className={classNames.audioPlayerWrapper}>
+  <div className={css.audioPlayerWrapper}>
     <audio
-      className={classNames.audioPlayer}
+      className={css.audioPlayer}
       controls
       controlsList="nodownload"
       src={pathToFile}
@@ -14,7 +14,6 @@ const AudioPlayer = ({ pathToFile, fileFormat }) =>
       {/* TODO: actually add captions? don't know if that's a possibility */}
       <track kind="captions" />
     </audio>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default AudioPlayer;
diff --git a/components/shared/mediaViewers/VideoPlayer.js b/components/shared/mediaViewers/VideoPlayer.js
index d3905b4e2..0a1456b0f 100644
--- a/components/shared/mediaViewers/VideoPlayer.js
+++ b/components/shared/mediaViewers/VideoPlayer.js
@@ -1,11 +1,11 @@
 import React from "react";
 
-import { classNames, stylesheet } from "./mediaViewers.css";
+import css from "./mediaViewers.scss";
 
 const VideoPlayer = ({ pathToFile, fileFormat }) =>
-  <div className={classNames.videoPlayerWrapper}>
+  <div className={css.videoPlayerWrapper}>
     <video
-      className={classNames.videoPlayer}
+      className={css.videoPlayer}
       controls
       controlsList="nodownload"
       src={pathToFile}
@@ -14,7 +14,6 @@ const VideoPlayer = ({ pathToFile, fileFormat }) =>
       {/* TODO: actually add captions? don't know if that's a possibility */}
       <track kind="captions" />
     </video>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </div>;
 
 export default VideoPlayer;
diff --git a/components/shared/mediaViewers/ZoomableImageViewer.js b/components/shared/mediaViewers/ZoomableImageViewer.js
index d91ca9aca..8bdd7836c 100644
--- a/components/shared/mediaViewers/ZoomableImageViewer.js
+++ b/components/shared/mediaViewers/ZoomableImageViewer.js
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/server";
 
-import { classNames, stylesheet } from "./mediaViewers.css";
+import css from "./mediaViewers.scss";
 
 const viewerId = "openseadragon1";
 
@@ -35,17 +35,16 @@ export default class ZoomableImageViewer extends React.Component {
 
   render() {
     return (
-      <div id={viewerId} className={classNames.zoomableImageViewer}>
+      <div id={viewerId} className={css.zoomableImageViewer}>
         <Noscript>
-          <div className={classNames.noscriptContainer}>
+          <div className={css.noscriptContainer}>
             <img
-              className={classNames.noscriptImg}
+              className={css.noscriptImg}
               alt=""
               src={this.props.pathToFile}
             />
           </div>
         </Noscript>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }
diff --git a/components/shared/mediaViewers/mediaViewers.css b/components/shared/mediaViewers/mediaViewers.scss
similarity index 63%
rename from components/shared/mediaViewers/mediaViewers.css
rename to components/shared/mediaViewers/mediaViewers.scss
index e278ecad3..3f5d7e71b 100644
--- a/components/shared/mediaViewers/mediaViewers.css
+++ b/components/shared/mediaViewers/mediaViewers.scss
@@ -1,13 +1,13 @@
-@value warmerBackgroundColor, outlineColor from "../../../css/colors.css";
-@value smallRem, mediumRem from "../../../css/breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .zoomableImageViewer {
   width: 100%;
   height: 28rem;
   cursor: pointer;
 
-  @media (max-width: mediumRem) {
-    height: 75vh; /* this is tied to the ContentAndMetadata.css height */
+  @media (max-width: $mediumRem) {
+    height: 75vh; /* this is tied to the ContentAndMetadata.scss height */
   }
 
   & img {
@@ -16,10 +16,8 @@
     width: 35px;
   }
 
-  &:focus,
-  & canvas:focus,
-  & div:focus {
-    outline: 0.25rem solid outlineColor;
+  &:focus, & canvas:focus, & div:focus {
+    outline: 0.25rem solid $outlineColor;
   }
 }
 
@@ -39,7 +37,7 @@
 .audioPlayerWrapper {
   width: 100%;
   padding: 2rem;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/css/breakpoints.css b/css/breakpoints.css
deleted file mode 100644
index ee97122b8..000000000
--- a/css/breakpoints.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@value xSmallRem: 30rem;
-@value smallRem: 40rem;
-@value mediumRem: 52rem;
-@value mediumPlusRem: 59.25rem;
-@value largeRem: 72rem;
-@value xLargeRem: 82rem;
-
-@value smallPx: 640;
-@value mediumPx: 832;
-@value mediumPlusPx: 948;
-@value largePx: 1152;
diff --git a/css/colors.css b/css/colors.css
deleted file mode 100644
index ed59a474d..000000000
--- a/css/colors.css
+++ /dev/null
@@ -1,77 +0,0 @@
-@value white: #FFFFFF;
-@value black: #000000;
-@value riceCakeWhite: #ECE9DA;
-@value merinoWhite: #FBF8F4;
-@value alabasterGray: #F4F0E9;
-@value mysticGray: #DAE4E8;
-@value romanceGray: #F9F6F0;
-@value gainsboroGray: #DCDCDC;
-@value charcoalGray: #424242;
-@value white60: rgba(255, 255, 255, 0.6);
-@value white50: rgba(255, 255, 255, 0.5);
-@value black80: rgba(0, 0, 0, 0.8);
-@value black60: rgba(0, 0, 0, 0.6);
-@value black50: rgba(0, 0, 0, 0.5);
-@value black12: rgba(0, 0, 0, 0.12);
-@value gray75: rgba(255, 255, 255, 0.75);
-@value wildSandGray: #F4F4F4;
-@value casablancaOrange: #F9BA3F;
-@value bambooOrange: #DD5C00;
-@value tiberBlue: #0A2A37;
-@value elephantBlue: #163F51;
-@value ebonyClayBlue: #273443;
-@value minuitBlue: #232F3C;
-@value vikingBlue: #5AB4DC;
-@value curiousBlue: #269ED4;
-@value cascadeBlue: #0674A5;
-@value hippieBlue: #639BB4;
-@value solitudeBlue: #E2EBEE;
-@value oysterBayBlue: #D3E2E8;
-@value iceBlue: #EAF6FC;
-@value lisbonBrown: #464027;
-@value vanCleefRed: #563535;
-@value onionBrown: #493F28;
-@value pampasBrown: #F3F1EC;
-@value sisalBrown: #D1CCB6;
-@value coldTurkeyRed: #D2BFBF;
-@value silver: #CCCCCC;
-@value rockBrown: #ECE9DA;
-@value bonjourRed: #E4DADA;
-@value dimmerGray: #6D6D6D;
-@value visualBrown: #F9F8F5;
-@value softPeach: #F6ECF0;
-@value cranberry: #E04F8E;
-
-/* semantic colors */
-
-@value linkColor: #CA4316;
-@value linkHoverColor: #CD570A;
-@value visitedLinkColor: #AD5C1D;
-@value paginationLinkColor: cascadeBlue;
-@value headingColor: cascadeBlue;
-@value navColor: tiberBlue;
-@value userSiteColor: hippieBlue;
-@value proSiteColor: elephantBlue;
-@value mobileNavColor: elephantBlue;
-@value secondaryButtonColor: #0080a5;
-@value secondaryColor: secondaryButtonColor;
-@value primaryBulletColor: secondaryButtonColor;
-@value secondaryBulletColor: linkColor;
-@value darkSecondaryButtonColor: elephantBlue;
-@value warmerBackgroundColor: romanceGray;
-@value colderBackgroundColor: #F3F7F8;
-@value lightBorderColor: #E7E7E7;
-@value darkBorderColor: hippieBlue;
-@value lightLinkColor: casablancaOrange;
-@value featuredBannerColor: casablancaOrange;
-@value subLinkColor: #007294;
-@value outgoingLinkColor: subLinkColor;
-@value dimmedTextColor: dimmerGray;
-@value donateFormButtonColor: cascadeBlue;
-@value outlineColor: casablancaOrange;
-@value formLabelColor: cascadeBlue;
-@value errorColor: linkColor;
-@value proIconColor: #5d7384;
-@value radioButtonColor: gainsboroGray;
-@value memberColor: #006D84;
-@value featureBackgroundColor: #CBE3E8;
\ No newline at end of file
diff --git a/css/pages/guide.css b/css/pages/guide.css
deleted file mode 100644
index c7c4141bf..000000000
--- a/css/pages/guide.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.bannerImage {
-  display: block;
-  max-height: 10rem;
-  margin: 0 auto;
-  max-width: 100%;
-  filter: grayscale(1) sepia(1) hue-rotate(140deg) brightness(1.1);
-}
-
-.guideTitle {
-  text-align: center;
-  /* Override wysiwyg styles */
-  margin: 0 !important;
-}
diff --git a/css/typography.css b/css/typography.css
deleted file mode 100644
index f6a3c2c27..000000000
--- a/css/typography.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@value monoFont: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
-/* serif font stack from https://www.client9.com/css-system-font-stack---serif-medium---v1/ */
-@value serifFont: "Iowan Old Style", Palatino Linotype, Palatino, serif;
-/* sans font stack from https://css-tricks.com/snippets/css/system-font-stack/ */
-@value sansFont: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif;
diff --git a/jsconfig.json b/jsconfig.json
index 2a2d8e001..b3e9cc63c 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -19,6 +19,9 @@
       "constants/*": [
         "./constants/*"
       ],
+      "stylesheets/*": [
+        "./stylesheets/*"
+      ],
       "components/*": [
         "./components/*"
       ]
diff --git a/next.config.js b/next.config.js
index 6c1ccb28a..53cb1ebf2 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,69 +1,49 @@
-const fs = require("fs");
-const trash = require("trash");
 const webpack = require("webpack");
 const dotenv = require("dotenv").config();
+const withSass = require("@zeit/next-sass");
+const withSourceMaps = require("@zeit/next-source-maps");
+const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-const { ANALYZE } = process.env;
 
-module.exports = {
-  useFileSystemPublicRoutes: false,
-  webpack: (config, options) => {
-    const { dev, isServer } = options;
-    if (ANALYZE) {
-      config.plugins.push(
-        new BundleAnalyzerPlugin({
-          analyzerMode: "server",
-          analyzerPort: 8888,
-          openAnalyzer: true
-        })
-      );
-    }
-
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        "process.env": {
-          NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-        }
-      })
-    );
-
-    config.module.rules.push({
-      test: /\.(jpe?g|png|gif|svg)$/i,
-      loaders: ["file-loader?name=dist/static/images/[name].[ext]"]
-    });
-
-    config.module.rules.push({
-      test: /\.css$/,
-      use: [
-        {
-          loader: "emit-file-loader",
-          options: {
-            name: "dist/[path][name].[ext]"
-          }
+module.exports = withBundleAnalyzer(
+  withSourceMaps(
+    withSass({
+      cssModules: true,
+      cssLoaderOptions: {
+        importLoaders: 2,
+        localIdentName: "[name]__[local]___[hash:base64:5]"
+      },
+      useFileSystemPublicRoutes: false,
+      analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
+      analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
+      bundleAnalyzerConfig: {
+        server: {
+          analyzerMode: "static",
+          reportFilename: "../../bundles/server.html"
         },
-        {
-          loader: "skeleton-loader",
-          options: {
-            procedure: function(content) {
-              const fileName = `${this._module.userRequest}.json`;
-              const classNames = fs.readFileSync(fileName, "utf8");
-
-              trash(fileName);
+        browser: {
+          analyzerMode: "static",
+          reportFilename: "../bundles/client.html"
+        }
+      },
+      webpack: (config, options) => {
+        const { dev, isServer } = options;
 
-              return [
-                "module.exports = {",
-                `classNames: ${classNames},`,
-                `stylesheet: `,
-                JSON.stringify(content),
-                "}"
-              ].join("");
+        config.plugins.push(
+          new webpack.DefinePlugin({
+            "process.env": {
+              NODE_ENV: JSON.stringify(process.env.NODE_ENV)
             }
-          }
-        },
-        "postcss-loader"
-      ]
-    });
+          })
+        );
+
+        config.module.rules.push({
+          test: /\.(jpe?g|png|gif|svg)$/i,
+          loaders: ["file-loader?name=dist/static/images/[name].[ext]"]
+        });
 
-    return config;
-  }
-};
+        return config;
+      }
+    })
+  )
+);
diff --git a/package.json b/package.json
index 3901b02d0..006be7e2d 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,11 @@
 {
   "name": "dpla-end-user-site",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@zeit/next-bundle-analyzer": "^0.1.1",
+    "@zeit/next-sass": "^0.1.2",
+    "@zeit/next-source-maps": "^0.0.2",
     "aws-sdk": "^2.173.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-inline-react-svg": "^0.5.2",
@@ -17,7 +20,7 @@
     "google-auth-library": "^0.12.0",
     "googleapis": "^23.0.0",
     "html-webpack-plugin": "^2.30.1",
-    "next": "4.2.3",
+    "next": "^5.1.0",
     "node-sass": "^4.7.2",
     "openseadragon": "2.2.1",
     "react": "16",
@@ -29,12 +32,9 @@
     "react-masonry-component": "^6.0.2",
     "react-redux": "^5.0.5",
     "react-select": "1.2.0",
-    "react-slick": "0.15.0",
+    "react-slick": "^0.23.1",
     "redux": "^3.7.2",
-    "skeleton-loader": "^1.1.5",
     "sw-precache-webpack-plugin": "^0.11.4",
-    "trash": "^4.0.1",
-    "webpack-bundle-analyzer": "^2.9.1",
     "webpack-dev-server": "^2.11.1"
   },
   "devDependencies": {
@@ -59,17 +59,11 @@
     "eslint-plugin-react": "7.0.1",
     "expect.js": "0.3.x",
     "file-loader": "0.11.1",
-    "fs-extra": "3.0.1",
     "husky": "^0.14.1",
     "jest": "20.0.3",
     "lint-staged": "^4.0.0",
     "mocha": "^5.0.5",
     "object-assign": "4.1.1",
-    "postcss-cssnext": "^3.0.2",
-    "postcss-flexbugs-fixes": "3.0.0",
-    "postcss-icss-values": "^2.0.1",
-    "postcss-loader": "^2.0.10",
-    "postcss-modules": "^1.1.0",
     "prettier": "^1.4.4",
     "promise": "7.1.1",
     "react-dev-utils": "^3.0.0",
@@ -92,11 +86,11 @@
     "docker:clean": "docker container rm -f dpla-frontend; docker image rm -f dpla-frontend",
     "docker:run": "docker run -p 3000:3000 -d --name dpla-frontend dpla-frontend:latest",
     "docker:logs": "docker logs -f dpla-frontend",
-    "analyze": "cross-env ANALYZE=1 next build",
+    "analyze": "yarn && BUNDLE_ANALYZE=both yarn build",
     "test": "mocha"
   },
   "lint-staged": {
-    "*.js": [
+    "*.{js,scss}": [
       "prettier --write",
       "git add"
     ]
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 000000000..b3d4055e0
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,17 @@
+import Document, { Head, Main, NextScript } from "next/document";
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <html>
+        <Head>
+          <link rel="stylesheet" href="/_next/static/style.css" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}
diff --git a/pages/_error.js b/pages/_error.js
index 53a351a98..55919ac52 100644
--- a/pages/_error.js
+++ b/pages/_error.js
@@ -7,15 +7,9 @@ import ErrorLinksPro from "components/ErrorComponents/ErrorLinksPro";
 
 import { SITE_ENV } from "constants/env";
 
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { stylesheet, classNames } from "css/pages/donate.css";
-import {
-  classNames as utilClassNames,
-  stylesheet as utilStyles
-} from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import donateCss from "stylesheets/donate.scss";
 
 export default class Error extends React.Component {
   static getInitialProps({ res, err }) {
@@ -27,15 +21,15 @@ export default class Error extends React.Component {
     return (
       <MinimalLayout route={this.props.url}>
         <div
-          className={`${utilClassNames.container}
-      ${contentClasses.sidebarAndContentWrapper}`}
+          className={`${utils.container}
+      ${contentCss.sidebarAndContentWrapper}`}
         >
           <div className="row">
             <div className={`col-md-2 col-xs-12`} />
             <div
               id="main"
               role="main"
-              className={`${contentClasses.content} ${classNames.thankYou} col-md-8 col-xs-12`}
+              className={`${contentCss.content} ${donateCss.thankYou} col-md-8 col-xs-12`}
             >
               {this.props.statusCode !== 404 &&
                 <div>
@@ -64,9 +58,6 @@ export default class Error extends React.Component {
             </div>
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: utilStyles }} />
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-        <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
       </MinimalLayout>
     );
   }
diff --git a/pages/about/index.js b/pages/about/index.js
index fd624eb32..80e5e154e 100644
--- a/pages/about/index.js
+++ b/pages/about/index.js
@@ -21,11 +21,8 @@ import {
   getMenuItemUrl
 } from "utilFunctions";
 
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
 
 const AboutMenuPage = ({ url, content, items, breadcrumbs, pageTitle }) =>
   <MainLayout route={url} pageTitle={pageTitle} seoType={SEO_TYPE}>
@@ -34,18 +31,18 @@ const AboutMenuPage = ({ url, content, items, breadcrumbs, pageTitle }) =>
     {breadcrumbs.length === 0 &&
       <FeatureHeader title={pageTitle} description={""} />}
     <div
-      className={`${utilClassNames.container}
-      ${contentClasses.sidebarAndContentWrapper}`}
+      className={`${utils.container}
+      ${contentCss.sidebarAndContentWrapper}`}
     >
       <div className="row">
         <ContentPagesSidebar
           route={url}
           items={items}
           activeItemId={content.id}
-          className={contentClasses.sidebar}
+          className={contentCss.sidebar}
         />
         <div className="col-xs-12 col-md-7">
-          <div id="main" role="main" className={contentClasses.content}>
+          <div id="main" role="main" className={contentCss.content}>
             <WPEdit page={content} url={url} />
             {breadcrumbs.length > 0 &&
               <h1
@@ -58,7 +55,6 @@ const AboutMenuPage = ({ url, content, items, breadcrumbs, pageTitle }) =>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
   </MainLayout>;
 
 AboutMenuPage.getInitialProps = async ({ req, query, res }) => {
diff --git a/pages/browse-by-partner/index.js b/pages/browse-by-partner/index.js
index d4b8ef197..959282b72 100644
--- a/pages/browse-by-partner/index.js
+++ b/pages/browse-by-partner/index.js
@@ -4,17 +4,19 @@ import fetch from "isomorphic-fetch";
 import MainLayout from "components/MainLayout";
 import FeatureHeader from "components/shared/FeatureHeader";
 import PartnerBrowseContent from "components/PartnerBrowseComponents";
-import { API_ENDPOINT } from "constants/items";
+
 import { getCurrentUrl } from "utilFunctions";
+import { API_ENDPOINT } from "constants/items";
 import { TITLE, DESCRIPTION } from "constants/browse-by-partner";
-import { classNames } from "components/PartnerBrowseComponents/PartnerBrowseContent.css";
+
+import css from "components/PartnerBrowseComponents/PartnerBrowseContent.scss";
 
 const PartnerBrowse = ({ partners, url }) =>
   <div>
     <MainLayout route={url} pageTitle={TITLE}>
       <div id="main" role="main">
         <FeatureHeader
-          titleClassName={classNames.featureTitle}
+          titleClassName={css.featureTitle}
           title={TITLE}
           description={DESCRIPTION}
         />
diff --git a/pages/browse-by-topic/topic/subtopic/index.js b/pages/browse-by-topic/topic/subtopic/index.js
index 1b02d43ef..32be6c4af 100644
--- a/pages/browse-by-topic/topic/subtopic/index.js
+++ b/pages/browse-by-topic/topic/subtopic/index.js
@@ -1,14 +1,10 @@
 import React from "react";
 import fetch from "isomorphic-fetch";
-
-import {
-  classNames,
-  stylesheet
-} from "components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.css";
 import BreadcrumbsAndNav from "components/TopicBrowseComponents/BreadcrumbsAndNav";
 import ItemList from "components/TopicBrowseComponents/SubtopicItemsList/ItemList";
 import MainLayout from "components/MainLayout";
 import Sidebar from "components/TopicBrowseComponents/SubtopicItemsList/Sidebar";
+
 import {
   decodeHTMLEntities,
   extractItemId,
@@ -25,9 +21,9 @@ import {
   API_ENDPOINT as DPLA_ITEM_ENDPOINT,
   THUMBNAIL_ENDPOINT
 } from "constants/items";
-import { classNames as utilClassNames } from "css/utils.css";
 
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import css from "components/TopicBrowseComponents/SubtopicItemsList/SubtopicItemsList.scss";
 
 const SubtopicItemsList = ({
   url,
@@ -56,7 +52,7 @@ const SubtopicItemsList = ({
     <div
       id="main"
       role="main"
-      className={[classNames.sidebarAndItemList, container].join(" ")}
+      className={[css.sidebarAndItemList, utils.container].join(" ")}
     >
       <Sidebar
         title={subtopic.name}
@@ -80,7 +76,6 @@ const SubtopicItemsList = ({
       topic={topic}
       route={url}
     />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </MainLayout>;
 
 SubtopicItemsList.getInitialProps = async ({ query, req }) => {
diff --git a/pages/contact-us/index.js b/pages/contact-us/index.js
index 9ce5d3283..3d4a09050 100644
--- a/pages/contact-us/index.js
+++ b/pages/contact-us/index.js
@@ -15,23 +15,23 @@ import {
 } from "constants/content-pages";
 import { TITLE } from "constants/contact";
 
-import { classNames, stylesheet } from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
 
 const Contact = ({ url, sidebarItems }) =>
   <MainLayout route={url} pageTitle={TITLE} seoType={SEO_TYPE}>
     <FeatureHeader title={TITLE} description={""} />
     <div>
       <div
-        className={`${utilClassNames.container}
-        ${classNames.sidebarAndContentWrapper}`}
+        className={`${utils.container}
+        ${contentCss.sidebarAndContentWrapper}`}
       >
         <div className="row">
           <ContentPagesSidebar
             route={url}
             activeItemId="contact-us"
             items={sidebarItems}
-            className={classNames.sidebar}
+            className={contentCss.sidebar}
           />
           <div id="main" role="main" className="col-xs-12 col-md-8">
             <ContactForm />
@@ -40,7 +40,6 @@ const Contact = ({ url, sidebarItems }) =>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </MainLayout>;
 
 Contact.getInitialProps = async () => {
diff --git a/pages/donate/index.js b/pages/donate/index.js
index b512e8f9a..b1e19abe9 100644
--- a/pages/donate/index.js
+++ b/pages/donate/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-
 import Link from "next/link";
 
 import MainLayout from "components/MainLayout";
@@ -8,23 +7,17 @@ import Button from "components/shared/Button";
 
 import { SEO_TITLE } from "constants/donate";
 
-import { stylesheet, classNames } from "css/pages/content-pages-wysiwyg.css";
-import {
-  stylesheet as contentStyles,
-  classNames as contentClasses
-} from "css/pages/donate.css";
-import {
-  classNames as utilClassNames,
-  stylesheet as utilStyles
-} from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "stylesheets/donate.scss";
 
 const Donate = ({ url }) =>
   <MainLayout route={url} pageTitle={SEO_TITLE}>
-    <div className={contentClasses.donateBackground}>
-      <div id="main" role="main" className={`${utilClassNames.container}`}>
-        <div className={`${contentClasses.donateContent} row`}>
+    <div className={css.donateBackground}>
+      <div id="main" role="main" className={`${utils.container}`}>
+        <div className={`${css.donateContent} row`}>
           <div className={`col-xs-12 col-md-7`}>
-            <div className={`${contentClasses.byPaypal} ${classNames.content}`}>
+            <div className={`${css.byPaypal} ${contentCss.content}`}>
               <h1>
                 Thank you for supporting DPLA
               </h1>
@@ -37,14 +30,14 @@ const Donate = ({ url }) =>
               <hr />
               <DonateForm />
             </div>
-            <div className={`${contentClasses.byMail} ${classNames.content}`}>
+            <div className={`${css.byMail} ${contentCss.content}`}>
               <h2>Or donate by mail</h2>
               <p>
                 Please make your check payable to Digital Public Library of
                 America.
               </p>
 
-              <p className={classNames.address}>
+              <p className={contentCss.address}>
                 Digital Public Library of America<br />
                 c/o Boston Public Library<br />
                 700 Boylston Street<br />
@@ -52,11 +45,9 @@ const Donate = ({ url }) =>
               </p>
             </div>
           </div>
-          <div className={`${contentClasses.testimonial} col-xs-12 col-md-5`}>
+          <div className={`${css.testimonial} col-xs-12 col-md-5`}>
             {/* testimonial */}
-            <div
-              className={`${classNames.content} ${contentClasses.testimonialImage}`}
-            >
+            <div className={`${contentCss.content} ${css.testimonialImage}`}>
               <img
                 srcSet="/static/images/adena_lo.jpg,
                         /static/images/adena_hi.jpg 2x"
@@ -65,7 +56,7 @@ const Donate = ({ url }) =>
               />
               <span>Adena, a high school school teacher in West Virginia</span>
             </div>
-            <div className={classNames.content}>
+            <div className={contentCss.content}>
               <h2>How will DPLA use your donation?</h2>
               <p>
                 Your donation will directly support the development and
@@ -93,10 +84,6 @@ const Donate = ({ url }) =>
         </div>
       </div>
     </div>
-
-    <style dangerouslySetInnerHTML={{ __html: utilStyles }} />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
   </MainLayout>;
 
 export default Donate;
diff --git a/pages/donate/thank-you.js b/pages/donate/thank-you.js
index e319b6e29..335ce6280 100644
--- a/pages/donate/thank-you.js
+++ b/pages/donate/thank-you.js
@@ -5,29 +5,24 @@ import Router from "next/router";
 import MainLayout from "components/MainLayout";
 import ContentPagesSidebar from "components/shared/ContentPagesSidebar";
 
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { stylesheet, classNames } from "css/pages/donate.css";
-import {
-  classNames as utilClassNames,
-  stylesheet as utilStyles
-} from "css/utils.css";
 import { SEO_TITLE } from "constants/donate";
 
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "stylesheets/donate.scss";
+
 const DonateThankYou = ({ url }) =>
   <MainLayout route={url} pageTitle={SEO_TITLE}>
     <div
-      className={`${utilClassNames.container}
-      ${contentClasses.sidebarAndContentWrapper}`}
+      className={`${utils.container}
+      ${contentCss.sidebarAndContentWrapper}`}
     >
       <div className="row">
         <div className={`col-md-2 col-xs-12`} />
         <div
           id="main"
           role="main"
-          className={`${contentClasses.content} ${classNames.thankYou} col-md-8 col-xs-12`}
+          className={`${contentCss.content} ${css.thankYou} col-md-8 col-xs-12`}
         >
           <h1>
             Thank you for your donation
@@ -42,9 +37,6 @@ const DonateThankYou = ({ url }) =>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: utilStyles }} />
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
   </MainLayout>;
 
 export default DonateThankYou;
diff --git a/pages/exhibitions/exhibition/index.js b/pages/exhibitions/exhibition/index.js
index 8a9ce646a..c9f49abb3 100644
--- a/pages/exhibitions/exhibition/index.js
+++ b/pages/exhibitions/exhibition/index.js
@@ -5,21 +5,22 @@ import MainLayout from "components/MainLayout";
 import BreadcrumbsModule from "components/PrimarySourceSetsComponents/BreadcrumbsModule";
 import ImageAndCaption from "components/ExhibitionsComponents/Exhibition/ImageAndCaption";
 import Details from "components/ExhibitionsComponents/Exhibition/Details";
-import { getCurrentUrl, getCurrentFullUrl } from "utilFunctions";
+
 import {
   EXHIBITS_ENDPOINT,
   EXHIBIT_PAGES_ENDPOINT,
   FILES_ENDPOINT,
   ITEMS_ENDPOINT
 } from "constants/exhibitions";
-
 import { SEO_TYPE } from "constants/exhibition";
-
 import { API_ENDPOINT } from "constants/items";
 
-import removeQueryParams from "utilFunctions/removeQueryParams";
-
-import { getDplaItemIdFromExhibit } from "utilFunctions";
+import {
+  getCurrentUrl,
+  getCurrentFullUrl,
+  getDplaItemIdFromExhibit,
+  removeQueryParams
+} from "utilFunctions";
 
 class Exhibition extends React.Component {
   componentDidMount() {
diff --git a/pages/exhibitions/exhibition/section/subsection.js b/pages/exhibitions/exhibition/section/subsection.js
index c8f5e333f..32e274704 100644
--- a/pages/exhibitions/exhibition/section/subsection.js
+++ b/pages/exhibitions/exhibition/section/subsection.js
@@ -5,6 +5,7 @@ import Error from "pages/_error";
 import DPLAHead from "components/DPLAHead";
 import SkipToContent from "components/shared/SkipToContent";
 import Content from "components/ExhibitionsComponents/ExhibitionSection";
+
 import {
   getPreviousQueryParams,
   getNextQueryParams
@@ -14,16 +15,13 @@ import {
   getCurrentFullUrl,
   getDplaItemIdFromExhibit
 } from "utilFunctions";
-
 import {
   EXHIBITS_ENDPOINT,
   EXHIBIT_PAGES_ENDPOINT,
   FILES_ENDPOINT,
   ITEMS_ENDPOINT
 } from "constants/exhibitions";
-
 import { SEO_TYPE } from "constants/exhibition";
-
 import { API_ENDPOINT } from "constants/items";
 
 const Subsection = ({
diff --git a/pages/guides/guide/index.js b/pages/guides/guide/index.js
index d0291c7fc..6088b4304 100644
--- a/pages/guides/guide/index.js
+++ b/pages/guides/guide/index.js
@@ -11,20 +11,17 @@ import { getMenuItemUrl } from "utilFunctions";
 
 import { ABOUT_MENU_ENDPOINT, SEO_TYPE } from "constants/content-pages";
 
-import { classNames, stylesheet } from "css/pages/guide.css";
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "stylesheets/guides.scss";
 
 const Guides = ({ url, sidebarItems, breadcrumbs, guide }) =>
   <MainLayout route={url} pageTitle={guide.title} seoType={SEO_TYPE}>
     <BreadcrumbsModule breadcrumbs={breadcrumbs} route={url} />
     <div
       className={`
-        ${utilClassNames.container}
-        ${contentClasses.sidebarAndContentWrapper}
+        ${utils.container}
+        ${contentCss.sidebarAndContentWrapper}
       `}
     >
       <div className="row">
@@ -32,29 +29,23 @@ const Guides = ({ url, sidebarItems, breadcrumbs, guide }) =>
           route={url}
           items={sidebarItems}
           activeItemId={guide.slug}
-          className={contentClasses.sidebar}
+          className={contentCss.sidebar}
         />
         <div className="col-xs-12 col-md-7">
           <div
             id="main"
             role="main"
-            className={[classNames.content, contentClasses.content].join(" ")}
+            className={[css.content, contentCss.content].join(" ")}
           >
             <WPEdit page={guide} url={url} />
-            <img
-              src={guide.bannerImage}
-              alt=""
-              className={classNames.bannerImage}
-            />
-            <h1 className={classNames.guideTitle}>{guide.title}</h1>
+            <img src={guide.bannerImage} alt="" className={css.bannerImage} />
+            <h1 className={css.guideTitle}>{guide.title}</h1>
             <HeadingRule />
             <div dangerouslySetInnerHTML={{ __html: guide.content }} />
           </div>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
   </MainLayout>;
 
 Guides.getInitialProps = async ({ query }) => {
diff --git a/pages/guides/index.js b/pages/guides/index.js
index a4cce1f6a..552126ca1 100644
--- a/pages/guides/index.js
+++ b/pages/guides/index.js
@@ -11,20 +11,16 @@ import { PAGES_ENDPOINT, ABOUT_MENU_ENDPOINT } from "constants/content-pages";
 import { API_SETTINGS_ENDPOINT } from "constants/site";
 import { TITLE } from "constants/guides";
 
-import { classNames, stylesheet } from "css/pages/guides.css";
-import { classNames as utilClassNames } from "css/utils.css";
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { stylesheet as guidesStylesheet } from "components/shared/GuideLink/GuideLink.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "stylesheets/guides.scss";
 
 const Guides = ({ url, guides, sidebarItems, activeItemId }) =>
   <MainLayout route={url} pageTitle={TITLE}>
     <div
       className={`
-        ${utilClassNames.container}
-        ${contentClasses.sidebarAndContentWrapper}
+        ${utils.container}
+        ${contentCss.sidebarAndContentWrapper}
       `}
     >
       <div className="row">
@@ -32,18 +28,18 @@ const Guides = ({ url, guides, sidebarItems, activeItemId }) =>
           route={url}
           items={sidebarItems}
           activeItemId={activeItemId}
-          className={contentClasses.sidebar}
+          className={contentCss.sidebar}
         />
         <div
           id="main"
           role="main"
-          className={`${classNames.wrapper} col-xs-12 col-md-8`}
+          className={`${css.wrapper} col-xs-12 col-md-8`}
         >
           <ul className="row">
             {guides.map((guide, i) =>
               <li
                 key={i}
-                className={`col-xs-12 col-md-6 col-lg-4 ${classNames.itemColumn}`}
+                className={`col-xs-12 col-md-6 col-lg-4 ${css.itemColumn}`}
               >
                 <GuideLink guide={guide} />
               </li>
@@ -52,9 +48,6 @@ const Guides = ({ url, guides, sidebarItems, activeItemId }) =>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
-    <style dangerouslySetInnerHTML={{ __html: guidesStylesheet }} />
   </MainLayout>;
 
 Guides.getInitialProps = async () => {
diff --git a/pages/item/index.js b/pages/item/index.js
index 0c149e20d..341924b5e 100644
--- a/pages/item/index.js
+++ b/pages/item/index.js
@@ -7,24 +7,24 @@ import MainLayout from "components/MainLayout";
 import BreadcrumbsModule from "components/ItemComponents/BreadcrumbsModule";
 import Content from "components/ItemComponents/Content";
 import CiteButton from "components/shared/CiteButton";
+
 import { API_ENDPOINT, THUMBNAIL_ENDPOINT } from "constants/items";
-import { getCurrentUrl, getCurrentFullUrl } from "utilFunctions";
-import { classNames as utilClassNames } from "css/utils.css";
-import { DEFAULT_PAGE_SIZE } from "constants/search";
-import {
-  possibleFacets,
-  mapFacetsToURLPrettified,
-  splitAndURIEncodeFacet
-} from "constants/search";
-import {
-  classNames,
-  stylesheet
-} from "components/ItemComponents/itemComponent.css";
 import {
+  getCurrentUrl,
+  getCurrentFullUrl,
   removeQueryParams,
   joinIfArray,
   getDefaultThumbnail
 } from "utilFunctions";
+import {
+  DEFAULT_PAGE_SIZE,
+  possibleFacets,
+  mapFacetsToURLPrettified,
+  splitAndURIEncodeFacet
+} from "constants/search";
+
+import utils from "stylesheets/utils.scss";
+import css from "components/ItemComponents/itemComponent.scss";
 
 const ItemDetail = ({
   error,
@@ -55,23 +55,22 @@ const ItemDetail = ({
       <div
         id="main"
         role="main"
-        className={`${utilClassNames.container} ${classNames.contentWrapper}`}
+        className={`${utils.container} ${css.contentWrapper}`}
       >
         <Content item={item} url={url} />
-        <div className={classNames.faveAndCiteButtons}>
+        <div className={css.faveAndCiteButtons}>
           <CiteButton
             creator={item.creator}
             displayDate={item.date ? item.date.displayDate : item.date}
             spatialName={item.spatial ? item.spatial.name : item.spatial}
             sourceUrl={item.sourceUrl}
-            className={classNames.citeButton}
+            className={css.citeButton}
             toCiteText="item"
             title={item.title}
           />
         </div>
       </div>
 
-      <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
     </MainLayout>
   );
 };
diff --git a/pages/news/index.js b/pages/news/index.js
index 0248e540f..a7683271e 100644
--- a/pages/news/index.js
+++ b/pages/news/index.js
@@ -9,7 +9,7 @@ import Pagination from "components/shared/Pagination";
 import TagList from "components/NewsComponents/TagList";
 import Button from "shared/Button";
 
-import { SITE_ENV } from "constants/env";
+import { SITE_ENV, WORDPRESS_URL } from "constants/env";
 import { TITLE, DESCRIPTION, NEWS_TAGS } from "constants/news";
 import {
   PRO_MENU_ENDPOINT,
@@ -19,14 +19,10 @@ import {
   SEO_TYPE
 } from "constants/content-pages";
 import { DEFAULT_PAGE_SIZE } from "constants/search";
-import { WORDPRESS_URL } from "constants/env";
 
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
-import { classNames, stylesheet } from "css/pages/news.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "stylesheets/news.scss";
 
 class NewsPage extends React.Component {
   componentWillMount() {
@@ -90,31 +86,31 @@ class NewsPage extends React.Component {
       <MainLayout route={url} pageTitle={pageItem.title} seoType={SEO_TYPE}>
         <FeatureHeader title={TITLE} description={DESCRIPTION} />
         <div
-          className={`${utilClassNames.container}
-      ${contentClasses.sidebarAndContentWrapper}`}
+          className={`${utils.container}
+      ${contentCss.sidebarAndContentWrapper}`}
         >
           <div className="row">
             <ContentPagesSidebar
               route={url}
               items={menuItems}
               activeItemId={pageItem.id}
-              className={contentClasses.sidebar}
+              className={contentCss.sidebar}
               rootPath="wp"
             />
             <div className="col-xs-12 col-md-7">
-              <div id="main" role="main" className={contentClasses.content}>
+              <div id="main" role="main" className={contentCss.content}>
                 <h1>News Archive</h1>
                 <form
                   action="/news"
                   method="get"
-                  className={classNames.search}
+                  className={css.search}
                   onSubmit={e => this.handleSubmit(e)}
                 >
                   <input
                     type="text"
                     name="k"
                     aria-label="search news"
-                    className={classNames.keywordsInput}
+                    className={css.keywordsInput}
                     defaultValue={this.state.keywords}
                   />
                   {this.state.tag !== "" &&
@@ -128,7 +124,7 @@ class NewsPage extends React.Component {
                   <Button
                     type="secondary"
                     size="medium"
-                    className={classNames.searchButton}
+                    className={css.searchButton}
                     mustSubmit={true}
                   >
                     Search news
@@ -140,7 +136,7 @@ class NewsPage extends React.Component {
                   keywords={this.state.keywords}
                   author={this.state.author}
                 />
-                <div className={classNames.resultSummary}>
+                <div className={css.resultSummary}>
                   {newsCount === 0 &&
                     <p>
                       No posts found{resultSummary}.
@@ -153,7 +149,7 @@ class NewsPage extends React.Component {
                 </div>
                 {newsItems.map((item, index) => {
                   return (
-                    <div key={index} className={classNames.newsItem}>
+                    <div key={index} className={css.newsItem}>
                       <h2>
                         <Link
                           as={`/news/${item.slug}`}
@@ -185,8 +181,6 @@ class NewsPage extends React.Component {
             </div>
           </div>
         </div>
-        <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </MainLayout>
     );
   }
diff --git a/pages/news/post.js b/pages/news/post.js
index 5577df508..39971d941 100644
--- a/pages/news/post.js
+++ b/pages/news/post.js
@@ -19,14 +19,9 @@ import {
 } from "constants/content-pages";
 import { WORDPRESS_URL } from "constants/env";
 
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
-import { classNames, stylesheet } from "css/pages/news.css";
-
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "stylesheets/news.scss";
 
 const PostPage = ({ url, content, menuItems, author }) => {
   let hasTags = false;
@@ -54,26 +49,26 @@ const PostPage = ({ url, content, menuItems, author }) => {
         route={url}
       />
       <div
-        className={`${utilClassNames.container}
-      ${contentClasses.sidebarAndContentWrapper}`}
+        className={`${utils.container}
+      ${contentCss.sidebarAndContentWrapper}`}
       >
         <div className="row">
           <ContentPagesSidebar
             route={url}
             items={menuItems}
             activeItemId={content.id}
-            className={contentClasses.sidebar}
+            className={contentCss.sidebar}
             rootPath="wp"
           />
           <div className="col-xs-12 col-md-7">
-            <div id="main" role="main" className={contentClasses.content}>
+            <div id="main" role="main" className={contentCss.content}>
               <WPEdit page={content} url={url} />
               <h1
                 dangerouslySetInnerHTML={{
                   __html: content.title.rendered
                 }}
               />
-              <div className={classNames.resultSummary}>
+              <div className={css.resultSummary}>
                 <p>
                   Posted by{" "}
                   <Link
@@ -96,7 +91,7 @@ const PostPage = ({ url, content, menuItems, author }) => {
                 </p>
               </div>
               {hasTags &&
-                <div className={classNames.tags}>
+                <div className={css.tags}>
                   Published under:
                   <ul>
                     {content.tags.map(id => {
@@ -125,8 +120,6 @@ const PostPage = ({ url, content, menuItems, author }) => {
           </div>
         </div>
       </div>
-      <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
-      <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
     </MainLayout>
   );
 };
diff --git a/pages/primary-source-sets/set/additional-resources.js b/pages/primary-source-sets/set/additional-resources.js
index 9cc04f467..fb16f1055 100644
--- a/pages/primary-source-sets/set/additional-resources.js
+++ b/pages/primary-source-sets/set/additional-resources.js
@@ -7,19 +7,13 @@ import PSSFooter from "components/PrimarySourceSetsComponents/PSSFooter";
 import BreadcrumbsModule from "components/PrimarySourceSetsComponents/BreadcrumbsModule";
 import SourceSetInfo from "components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo";
 import ResourcesTabs from "components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs";
+
 import { PSS_BASE_URL } from "constants/env";
 import { getCurrentFullUrl, removeQueryParams } from "utilFunctions";
-import {
-  classNames,
-  stylesheet
-} from "components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.css";
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
 
-const { container } = utilClassNames;
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
+import css from "components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.scss";
 
 const SingleSet = ({ url, set, currentFullUrl }) =>
   <MainLayout route={url} pageTitle={set.name}>
@@ -38,21 +32,20 @@ const SingleSet = ({ url, set, currentFullUrl }) =>
     />
     <SourceSetInfo set={set} currentFullUrl={currentFullUrl} />
     <ResourcesTabs route={url} currentTab="additionalResources" set={set}>
-      <div className={classNames.content}>
+      <div className={css.content}>
         <div
-          className={container}
+          className={utils.container}
           role="tabpanel"
           aria-labelledby="tab-teachingguide"
         >
           <ReactMarkdown
-            className={`${contentClasses.content} ${container}`}
+            className={`${contentCss.content} ${utils.container}`}
             source={set.hasPart.find(item => item.name === "Resources").text}
           />
         </div>
       </div>
     </ResourcesTabs>
     <PSSFooter />
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
   </MainLayout>;
 
 SingleSet.getInitialProps = async ({ query, req }) => {
diff --git a/pages/primary-source-sets/set/index.js b/pages/primary-source-sets/set/index.js
index 26190fdd2..5cac2b9e4 100644
--- a/pages/primary-source-sets/set/index.js
+++ b/pages/primary-source-sets/set/index.js
@@ -8,6 +8,7 @@ import SourceSetInfo from "components/PrimarySourceSetsComponents/SingleSet/Sour
 import RelatedSets from "components/PrimarySourceSetsComponents/SingleSet/RelatedSets";
 import ResourcesTabs from "components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs";
 import SourceSetSources from "components/PrimarySourceSetsComponents/SingleSet/SourceSetSources";
+
 import { removeQueryParams, getCurrentFullUrl } from "utilFunctions";
 import { PSS_BASE_URL } from "constants/env";
 
diff --git a/pages/pro/wp/hubs.js b/pages/pro/wp/hubs.js
index 091d983c3..e089b363b 100644
--- a/pages/pro/wp/hubs.js
+++ b/pages/pro/wp/hubs.js
@@ -16,17 +16,15 @@ import {
   SEO_TYPE
 } from "constants/content-pages";
 
-import { stylesheet, classNames } from "css/pages/hubs.css";
+import css from "stylesheets/hubs.scss";
 
 const HubsPage = ({ url, page, pageTitle, news }) =>
   <MainLayout route={url} pageTitle={pageTitle} seoType={SEO_TYPE}>
-    <div id="main" role="main" className={classNames.pageWrapper}>
+    <div id="main" role="main" className={css.pageWrapper}>
       <div
-        className={`${classNames.pageHero} ${page.acf.feature
-          ? classNames.withFeature
-          : ""}`}
+        className={`${css.pageHero} ${page.acf.feature ? css.withFeature : ""}`}
       >
-        <IconComponent className={classNames.icon} name="network" />
+        <IconComponent className={css.icon} name="network" />
         <WPEdit page={page} url={url} />
         <h1>{page.title.rendered}</h1>
       </div>
@@ -39,24 +37,24 @@ const HubsPage = ({ url, page, pageTitle, news }) =>
           buttonUrl={page.acf.feature.button_url}
           imageSrc={page.acf.feature.image}
         />}
-      <div className={`${classNames.pageWrapper}`}>
-        <section className={`${classNames.sectionWrapper} site-max-width`}>
-          <ul className={classNames.sectionList}>
+      <div className={`${css.pageWrapper}`}>
+        <section className={`${css.sectionWrapper} site-max-width`}>
+          <ul className={css.sectionList}>
             {page.acf.sections.map((section, index) => {
               return (
-                <li key={index} className={classNames.section}>
-                  <h2 className={classNames.sectionTitle}>
+                <li key={index} className={css.section}>
+                  <h2 className={css.sectionTitle}>
                     <a href={`${section.url}`}>{section.title}</a>
                   </h2>
-                  <p className={classNames.sectionText}>
+                  <p className={css.sectionText}>
                     {section.text}
                   </p>
                   {section.quicklinks &&
-                    <ul className={classNames.sectionQuicklinks}>
+                    <ul className={css.sectionQuicklinks}>
                       {section.quicklinks.map((link, idx) => {
                         return (
                           <li
-                            className={classNames.sectionQuicklink}
+                            className={css.sectionQuicklink}
                             key={`link-${idx}`}
                           >
                             <a href={`${link.url}`}>
@@ -73,7 +71,7 @@ const HubsPage = ({ url, page, pageTitle, news }) =>
         </section>
       </div>
       <CallToAction
-        classNames={classNames.sectionWrapper}
+        className={css.sectionWrapper}
         title={page.acf.call_to_action.title}
         text={page.acf.call_to_action.text}
         buttonText={page.acf.call_to_action.button_text}
@@ -83,7 +81,6 @@ const HubsPage = ({ url, page, pageTitle, news }) =>
       />
       <NewsLane title="Member News" items={news} />
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </MainLayout>;
 
 HubsPage.getInitialProps = async ({ req, query, res }) => {
diff --git a/pages/pro/wp/index.js b/pages/pro/wp/index.js
index 2b3d96675..1036d35ac 100644
--- a/pages/pro/wp/index.js
+++ b/pages/pro/wp/index.js
@@ -9,6 +9,7 @@ import BreadcrumbsModule from "shared/BreadcrumbsModule";
 import WPEdit from "shared/WPEdit";
 
 import { PRO_MENU_ENDPOINT, SEO_TYPE } from "constants/content-pages";
+
 import {
   endsWith,
   getBreadcrumbs,
@@ -17,11 +18,8 @@ import {
   getMenuItemUrl
 } from "utilFunctions";
 
-import {
-  classNames as contentClasses,
-  stylesheet as contentStyles
-} from "css/pages/content-pages-wysiwyg.css";
-import { classNames as utilClassNames } from "css/utils.css";
+import utils from "stylesheets/utils.scss";
+import contentCss from "stylesheets/content-pages.scss";
 
 const ProMenuPage = ({
   url,
@@ -38,19 +36,19 @@ const ProMenuPage = ({
       !illustration &&
       <FeatureHeader title={pageTitle} description={""} />}
     <div
-      className={`${utilClassNames.container}
-      ${contentClasses.sidebarAndContentWrapper}`}
+      className={`${utils.container}
+      ${contentCss.sidebarAndContentWrapper}`}
     >
       <div className="row">
         <ContentPagesSidebar
-          className={contentClasses.sidebar}
+          className={contentCss.sidebar}
           route={url}
           items={items}
           activeItemId={page.id}
           rootPath="wp"
         />
         <div className="col-xs-12 col-md-7">
-          <div id="main" role="main" className={contentClasses.content}>
+          <div id="main" role="main" className={contentCss.content}>
             <WPEdit page={page} url={url} />
             {/* fancy pages (with illustrations) get special heading */}
             {illustration &&
@@ -58,11 +56,11 @@ const ProMenuPage = ({
                 <img
                   src={illustration.url}
                   alt=""
-                  className={contentClasses.bannerImage}
+                  className={contentCss.bannerImage}
                 />
                 <HeadingRule />
                 <h1
-                  className={contentClasses.title}
+                  className={contentCss.title}
                   dangerouslySetInnerHTML={{ __html: page.title.rendered }}
                 />
               </div>}
@@ -75,7 +73,6 @@ const ProMenuPage = ({
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: contentStyles }} />
   </MainLayout>;
 
 ProMenuPage.getInitialProps = async ({ req, query, res }) => {
diff --git a/pages/search/index.js b/pages/search/index.js
index 22b7cb911..f82ab91a0 100644
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -20,11 +20,6 @@ import {
   getSearchPageTitle
 } from "utilFunctions";
 
-import {
-  classNames,
-  stylesheet
-} from "components/SearchComponents/SearchComponents.css";
-
 class Search extends React.Component {
   state = {
     showSidebar: false
@@ -42,34 +37,31 @@ class Search extends React.Component {
         route={url}
         pageTitle={getSearchPageTitle(url.query.q)}
       >
-        <div className={classNames.wrapper}>
-          <OptionsBar
-            showFilters={this.state.showSidebar}
-            currentPage={url.query.page || 1}
-            route={url}
-            itemCount={results.count}
-            onClickToggleFilters={this.toggleFilters}
-            numberOfActiveFacets={numberOfActiveFacets}
-          />
-          <FiltersList
-            showFilters={this.state.showSidebar}
-            onClickToggleFilters={this.toggleFilters}
-            route={url}
-            facets={results.facets}
-          />
-          <MainContent
-            hideSidebar={!this.state.showSidebar}
-            paginationInfo={{
-              pageCount: results.count,
-              pageSize: url.query.page_size || DEFAULT_PAGE_SIZE,
-              currentPage: url.query.page || 1
-            }}
-            route={url}
-            facets={results.facets}
-            results={results.docs}
-          />
-        </div>
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+        <OptionsBar
+          showFilters={this.state.showSidebar}
+          currentPage={url.query.page || 1}
+          route={url}
+          itemCount={results.count}
+          onClickToggleFilters={this.toggleFilters}
+          numberOfActiveFacets={numberOfActiveFacets}
+        />
+        <FiltersList
+          showFilters={this.state.showSidebar}
+          onClickToggleFilters={this.toggleFilters}
+          route={url}
+          facets={results.facets}
+        />
+        <MainContent
+          hideSidebar={!this.state.showSidebar}
+          paginationInfo={{
+            pageCount: results.count,
+            pageSize: url.query.page_size || DEFAULT_PAGE_SIZE,
+            currentPage: url.query.page || 1
+          }}
+          route={url}
+          facets={results.facets}
+          results={results.docs}
+        />
       </MainLayout>
     );
   }
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 6cd6e5a88..000000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-  plugins: [
-    require("postcss-icss-values"),
-    require("postcss-cssnext")(),
-    require("postcss-modules")({
-      generateScopedName: "[name]__[local]___[hash:base64:5]"
-    }),
-    require("cssnano")(),
-    require("postcss-flexbugs-fixes")
-  ]
-};
diff --git a/server.js b/server.js
index 111aa5ac4..d98f1cd36 100644
--- a/server.js
+++ b/server.js
@@ -1,4 +1,3 @@
-const fs = require("fs");
 const express = require("express");
 const next = require("next");
 const bodyParser = require("body-parser");
diff --git a/stylesheets/_breakpoints.scss b/stylesheets/_breakpoints.scss
new file mode 100644
index 000000000..796eb9b78
--- /dev/null
+++ b/stylesheets/_breakpoints.scss
@@ -0,0 +1,15 @@
+$xSmallRem: 30em;
+$smallRem: 40em;
+$mediumRem: 52em;
+$mediumPlusRem: 59.25em;
+$largeRem: 72em;
+$xLargeRem: 82em;
+
+$smallPx: 640;
+$mediumPx: 832;
+$mediumPlusPx: 948;
+$largePx: 1152;
+
+$sm-viewport: "min-width: " + $smallRem;
+$md-viewport: "min-width: " + $mediumRem;
+$lg-viewport: "min-width: " + $largeRem;
diff --git a/stylesheets/_colors.scss b/stylesheets/_colors.scss
new file mode 100644
index 000000000..be2567d1b
--- /dev/null
+++ b/stylesheets/_colors.scss
@@ -0,0 +1,79 @@
+$white: #fff;
+$black: #000;
+$riceCakeWhite: #ece9da;
+$merinoWhite: #fbf8f4;
+$alabasterGray: #f4f0e9;
+$mysticGray: #dae4e8;
+$romanceGray: #f9f6f0;
+$gainsboroGray: #dcdcdc;
+$charcoalGray: #424242;
+$white60: rgba(255, 255, 255, 0.6);
+$white50: rgba(255, 255, 255, 0.5);
+$black80: rgba(0, 0, 0, 0.8);
+$black60: rgba(0, 0, 0, 0.6);
+$black50: rgba(0, 0, 0, 0.5);
+$black12: rgba(0, 0, 0, 0.12);
+$gray75: rgba(255, 255, 255, 0.75);
+$wildSandGray: #f4f4f4;
+$casablancaOrange: #f9ba3f;
+$bambooOrange: #dd5c00;
+$tiberBlue: #0a2a37;
+$elephantBlue: #163f51;
+$ebonyClayBlue: #273443;
+$minuitBlue: #232f3c;
+$vikingBlue: #5ab4dc;
+$curiousBlue: #269ed4;
+$cascadeBlue: #0674a5;
+$hippieBlue: #639bb4;
+$solitudeBlue: #e2ebee;
+$oysterBayBlue: #d3e2e8;
+$iceBlue: #eaf6fc;
+$lisbonBrown: #464027;
+$vanCleefRed: #563535;
+$onionBrown: #493f28;
+$pampasBrown: #f3f1ec;
+$sisalBrown: #d1ccb6;
+$coldTurkeyRed: #d2bfbf;
+$silver: #ccc;
+$rockBrown: #ece9da;
+$bonjourRed: #e4dada;
+$dimmerGray: #6d6d6d;
+$visualBrown: #f9f8f5;
+$softPeach: #f6ecf0;
+$cranberry: #e04f8e;
+
+/* semantic colors */
+
+$linkColor: #ca4316;
+$linkHoverColor: #cd570a;
+$visitedLinkColor: #ad5c1d;
+$paginationLinkColor: $cascadeBlue;
+$headingColor: $cascadeBlue;
+$navColor: $tiberBlue;
+$userSiteColor: $hippieBlue;
+$proSiteColor: $elephantBlue;
+$mobileNavColor: $elephantBlue;
+$secondaryButtonColor: #0080a5;
+$secondaryColor: $secondaryButtonColor;
+$primaryBulletColor: $secondaryButtonColor;
+$secondaryBulletColor: $linkColor;
+$darkSecondaryButtonColor: $elephantBlue;
+$warmerBackgroundColor: $romanceGray;
+$colderBackgroundColor: #f3f7f8;
+$lightBorderColor: #e7e7e7;
+$darkBorderColor: $hippieBlue;
+$lightLinkColor: $casablancaOrange;
+$featuredBannerColor: $casablancaOrange;
+$subLinkColor: #007294;
+$outgoingLinkColor: $subLinkColor;
+$dimmedTextColor: $dimmerGray;
+$donateFormButtonColor: $cascadeBlue;
+$outlineColor: $casablancaOrange;
+$formLabelColor: $cascadeBlue;
+$errorColor: $linkColor;
+$proIconColor: #5d7384;
+$radioButtonColor: $gainsboroGray;
+$memberColor: #006d84;
+$featureBackgroundColor: #cbe3e8;
+$footerLightColor: $ebonyClayBlue;
+$footerDarkColor: $minuitBlue;
diff --git a/stylesheets/_typography.scss b/stylesheets/_typography.scss
new file mode 100644
index 000000000..11c2fa361
--- /dev/null
+++ b/stylesheets/_typography.scss
@@ -0,0 +1,15 @@
+$monoFont: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+/* serif font stack from https://www.client9.com/css-system-font-stack---serif-medium---v1/ */
+$serifFont: "Iowan Old Style", Palatino Linotype, Palatino, serif;
+/* sans font stack from https://css-tricks.com/snippets/css/system-font-stack/ */
+$sansFont: -apple-system,
+  system-ui,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  Oxygen-Sans,
+  Ubuntu,
+  Cantarell,
+  "Helvetica Neue",
+  Helvetica,
+  sans-serif;
diff --git a/css/accessibility.css b/stylesheets/accessibility.scss
similarity index 100%
rename from css/accessibility.css
rename to stylesheets/accessibility.scss
diff --git a/css/pages/content-pages-wysiwyg.css b/stylesheets/content-pages.scss
similarity index 77%
rename from css/pages/content-pages-wysiwyg.css
rename to stylesheets/content-pages.scss
index 8e132635d..420a99451 100644
--- a/css/pages/content-pages-wysiwyg.css
+++ b/stylesheets/content-pages.scss
@@ -1,17 +1,17 @@
-@value colderBackgroundColor, warmerBackgroundColor, secondaryColor, linkColor, linkHoverColor, primaryBulletColor, secondaryBulletColor from "../colors.css";
-@value smallRem, mediumRem, largeRem from "../breakpoints.css";
-@value sansFont, monoFont, serifFont from "../typography.css";
+@import "colors";
+@import "breakpoints";
+@import "typography";
 
 :root {
-  --border-color: rgba(0, 0, 0, .75);
+  --border-color: rgba(0, 0, 0, 0.75);
 }
 
 .backgroundTint {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .sidebar {
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     /* so the sidebar doesnt show up first in mobile views */
     margin-top: 1rem;
     order: 2;
@@ -23,9 +23,9 @@
   height: 12rem;
   margin: 0 auto 1rem;
   max-width: 100%;
-  filter: grayscale(1) sepia(1) hue-rotate(160deg) brightness(1.0);
+  filter: grayscale(1) sepia(1) hue-rotate(160deg) brightness(1);
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     margin-bottom: 0;
   }
 }
@@ -38,15 +38,15 @@
   padding-top: 1rem;
   padding-bottom: 4rem;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding-top: 2rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding-bottom: 8rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding-top: 3rem;
   }
 }
@@ -54,9 +54,9 @@
 .content {
   margin-top: 2rem;
   line-height: 1.5;
-  font-family: serifFont;
+  font-family: $serifFont;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     margin-top: 0;
   }
 
@@ -67,7 +67,7 @@
   }
 
   & h1 {
-    font-family: serifFont;
+    font-family: $serifFont;
     font-weight: normal;
     font-size: 2rem;
     margin-bottom: 1rem;
@@ -77,7 +77,7 @@
       font-weight: normal;
     }
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       font-size: 3rem;
       margin-bottom: 1rem;
     }
@@ -112,14 +112,14 @@
   }
 
   & code, & pre {
-    background-color: colderBackgroundColor;
-    font-family: monoFont;
+    background-color: $colderBackgroundColor;
+    font-family: $monoFont;
     font-size: 0.85rem;
     padding: 0.125rem 0.25rem;
   }
 
   & pre {
-    border-left: 0.1rem solid secondaryColor;
+    border-left: 0.1rem solid $secondaryColor;
     padding: 0.5rem;
     white-space: pre-wrap;
     word-break: break-all;
@@ -134,10 +134,10 @@
     font-weight: normal;
     max-width: 60ch;
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
     }
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
     }
   }
 
@@ -148,7 +148,7 @@
     position: relative;
     counter-reset: start-from 0;
 
-    @media (max-width: mediumRem) {
+    @media (max-width: $mediumRem) {
       padding-left: 1rem;
     }
   }
@@ -156,7 +156,7 @@
   & li ul {
     margin-left: 1rem;
   }
-  
+
   & ol li, & ul li {
     list-style-type: none;
     position: relative;
@@ -170,12 +170,12 @@
     width: 3rem;
     padding-right: 0.25rem;
     text-align: right;
-    color: primaryBulletColor;
+    color: $primaryBulletColor;
     box-sizing: border-box;
   }
 
   & li ul li::before {
-    color: secondaryBulletColor;
+    color: $secondaryBulletColor;
   }
 
   & ul li::before {
@@ -233,7 +233,7 @@
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
 
-    @media (min-width: mediumRem) {
+    @media (min-width: $mediumRem) {
       margin-top: 2rem;
       margin-bottom: 2rem;
     }
@@ -265,9 +265,9 @@
   }
 
   & :global .wp-caption-text {
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-weight: 600;
-    margin-top: .5rem;
+    margin-top: 0.5rem;
     margin-bottom: 0;
   }
 
@@ -296,11 +296,11 @@
 
   & th {
     font-weight: bold;
-    font-family: sansFont;
+    font-family: $sansFont;
   }
 
   & .location {
-    color: secondaryColor;
+    color: $secondaryColor;
     font-style: italic;
   }
 }
@@ -324,7 +324,7 @@
     content: "";
   }
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     &, & ul {
       padding-left: 0;
     }
@@ -349,13 +349,13 @@
     content: "";
   }
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     &, & ul {
       padding-left: 0;
     }
   }
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     column-count: 1;
   }
 }
@@ -374,7 +374,7 @@
     margin-right: 1rem;
   }
 
-  @media (max-width: mediumRem) {
+  @media (max-width: $mediumRem) {
     padding-left: 0;
   }
 }
@@ -388,17 +388,17 @@
 :global .btn, :global .btn:visited {
   display: block;
   max-width: 18rem;
-  background-color: linkColor;
+  background-color: $linkColor;
   color: white;
-  font-family: sansFont;
+  font-family: $sansFont;
   padding: 0.75rem 1.5rem;
   margin: 1rem auto;
   text-align: center;
   border-radius: 0.25rem;
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
 
   &:hover {
-    background-color: linkHoverColor;
+    background-color: $linkHoverColor;
     text-decoration: none;
   }
 }
diff --git a/css/pages/donate.css b/stylesheets/donate.scss
similarity index 64%
rename from css/pages/donate.css
rename to stylesheets/donate.scss
index d0515423b..bd348e72a 100644
--- a/css/pages/donate.css
+++ b/stylesheets/donate.scss
@@ -1,27 +1,27 @@
-@value warmerBackgroundColor, colderBackgroundColor, proSiteColor, linkColor from "../colors.css";
-@value smallRem, mediumRem, largeRem from "../breakpoints.css";
-@value monoFont, serifFont from "../typography.css";
+@import "colors";
+@import "breakpoints";
+@import "typography";
 
 .donateBackground {
-  background-color: warmerBackgroundColor;
-  background-image: url("static/images/collage_light.jpg");
+  background-color: $warmerBackgroundColor;
+  background-image: url("/static/images/collage_light.jpg");
   background-size: cover;
   background-blend-mode: multiply;
   padding-top: 1rem;
   padding-bottom: 4rem;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 .donateContent {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   margin: 1rem 0 4rem;
   box-shadow: 0 1rem 2rem gray;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     box-shadow: none;
     margin: 0 -1rem;
   }
@@ -48,13 +48,13 @@
 .byPaypal, .byMail {
   padding: 2.5rem 2rem;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     padding: 2.1rem 1rem;
   }
 
   & h1 {
     font-size: 1.8rem;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
 
   & h2 {
@@ -70,18 +70,18 @@
 
 .byPaypal {
   background-color: white;
-  margin: 0 -.5rem;
+  margin: 0 -0.5rem;
 }
 
 .otherAmount {
   & input {
-    border: 2px solid colderBackgroundColor;
-    padding: .6rem 1.6rem;
+    border: 2px solid $colderBackgroundColor;
+    padding: 0.6rem 1.6rem;
     width: 100%;
     font-size: 1rem;
 
-    @media (max-width: mediumRem) {
-      padding: .6rem 1rem;
+    @media (max-width: $mediumRem) {
+      padding: 0.6rem 1rem;
     }
   }
 }
@@ -92,16 +92,16 @@
 }
 
 .link {
-  color: linkColor;
+  color: $linkColor;
 }
 
 .testimonial {
-  background-color: proSiteColor;
+  background-color: $proSiteColor;
   color: white;
   padding: 1.6rem 1.5rem;
 
   & h2 {
-    font-family: serifFont;
+    font-family: $serifFont;
     color: white;
     text-transform: uppercase;
     font-size: 1rem;
@@ -124,9 +124,9 @@
   margin-bottom: 2rem;
 
   & span {
-    font-size: .9rem;
+    font-size: 0.9rem;
     display: block;
-    margin-top: .9rem;
+    margin-top: 0.9rem;
   }
 
   & img {
@@ -134,7 +134,7 @@
     transform: rotateZ(-1.3deg);
   }
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     margin-right: 0;
 
     & img {
diff --git a/css/pages/guides.css b/stylesheets/guides.scss
similarity index 50%
rename from css/pages/guides.css
rename to stylesheets/guides.scss
index 5b29f9084..16eb9cfbd 100644
--- a/css/pages/guides.css
+++ b/stylesheets/guides.scss
@@ -1,9 +1,9 @@
-@value smallRem, mediumRem, largeRem from "../breakpoints.css";
+@import "breakpoints";
 
 .wrapper {
   margin-top: 2rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 0;
   }
 }
diff --git a/css/pages/hubs.css b/stylesheets/hubs.scss
similarity index 70%
rename from css/pages/hubs.css
rename to stylesheets/hubs.scss
index 6b4211092..bf196239d 100644
--- a/css/pages/hubs.css
+++ b/stylesheets/hubs.scss
@@ -1,19 +1,19 @@
-@value primaryBulletColor, dimmedTextColor, warmerBackgroundColor, memberColor from "../colors.css";
-@value smallRem, mediumRem, largeRem from "../breakpoints.css";
-@value serifFont from "../typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .pageWrapper {
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
 }
 
 .pageHero {
-  background-color: memberColor;
+  background-color: $memberColor;
   color: white;
   text-align: center;
   padding: 1rem 0 2rem;
 
   & h1 {
-    font-family: serifFont;
+    font-family: $serifFont;
     font-size: 3rem;
     font-weight: normal;
   }
@@ -38,19 +38,19 @@
   grid-gap: 1rem;
   padding: 2rem 0;
 
-  @media (max-width: largeRem) {
+  @media (max-width: $largeRem) {
     padding: 1rem 1rem 2rem;
   }
 }
 
 .section {
   background-color: white;
-  border-top: 0.4rem solid memberColor;
+  border-top: 0.4rem solid $memberColor;
   padding: 1.5rem 1rem 2rem;
 }
 
 .sectionTitle {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 1.5rem;
 
@@ -61,7 +61,7 @@
 
 .sectionText {
   margin: 0.5rem 0;
-  color: dimmedTextColor;
+  color: $dimmedTextColor;
   font-size: 1.125rem;
 }
 
@@ -84,7 +84,7 @@
   width: 3rem;
   padding-right: 0.25rem;
   text-align: right;
-  color: primaryBulletColor;
+  color: $primaryBulletColor;
   box-sizing: border-box;
 }
 
diff --git a/css/pages/news.css b/stylesheets/news.scss
similarity index 74%
rename from css/pages/news.css
rename to stylesheets/news.scss
index 9528a3450..2110f53ad 100644
--- a/css/pages/news.css
+++ b/stylesheets/news.scss
@@ -1,24 +1,25 @@
-@value userSiteColor, linkColor from "../colors.css";
-@value smallRem, mediumRem, largeRem from "../breakpoints.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
 
 .search {
   display: flex;
+  flex-direction: row;
   height: 2.2rem;
 }
 
 .keywordsInput {
   box-sizing: border-box;
   font-size: 1rem;
-  border: 0.1rem solid userSiteColor;
+  border: 0.1rem solid $userSiteColor;
   border-right: none;
   border-radius: 0.25rem 0 0 0.25rem;
   padding-left: 0.5rem;
   padding-right: 1rem;
-  margin-right: -.1rem;
+  margin-right: -0.1rem;
   height: 100%;
   width: 60%;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: auto;
   }
 }
@@ -28,7 +29,7 @@
   width: 40%;
   height: 100%;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     width: auto;
   }
 }
@@ -68,9 +69,9 @@
 }
 
 .newsItem::before {
-  content: '';
+  content: "";
   display: block;
   width: 2.5rem;
   height: 0.25rem;
-  background-color: userSiteColor;
-}
\ No newline at end of file
+  background-color: $userSiteColor;
+}
diff --git a/css/reset.css b/stylesheets/reset.scss
similarity index 88%
rename from css/reset.css
rename to stylesheets/reset.scss
index c7bcb5767..759a8a642 100644
--- a/css/reset.css
+++ b/stylesheets/reset.scss
@@ -1,11 +1,11 @@
-@value outlineColor from "./colors.css";
-@value smallRem, mediumRem, largeRem from "./breakpoints.css";
-@value sansFont, serifFont from "./typography.css";
+@import "colors";
+@import "breakpoints";
+@import "typography";
 
 html {
   font-size: 16px;
 
-  @media (max-width: smallRem) {
+  @media (max-width: $smallRem) {
     font-size: 18px;
   }
 }
@@ -18,11 +18,11 @@ body {
 }
 
 body {
-  font-family: sansFont;
+  font-family: $sansFont;
 }
 
 button, input, select, label, textarea {
-  font-family: sansFont;
+  font-family: $sansFont;
 }
 
 input {
@@ -52,7 +52,7 @@ button, input, optgroup, select, textarea {
 
 a, button, input, optgroup, select, textarea {
   &:focus {
-    outline: 0.25rem solid outlineColor;
+    outline: 0.25rem solid $outlineColor;
   }
 }
 
@@ -127,7 +127,7 @@ Vendor Overrides
   border-color: black transparent transparent;
   border-width: 7px 7px 1.5px;
   position: relative;
-  right: .25rem;
+  right: 0.25rem;
 }
 
 :global .Select.is-open :global .Select-arrow {
@@ -137,7 +137,7 @@ Vendor Overrides
 
 :global .Select-menu-outer {
   box-sizing: content-box;
-  box-shadow: 0 3px 10px 0px rgba(0, 0, 0, .25);
+  box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.25);
   border: none;
 }
 
@@ -192,4 +192,3 @@ Vendor Overrides
   left: -8px;
   top: 7px;
 }
-
diff --git a/css/utils.css b/stylesheets/utils.scss
similarity index 94%
rename from css/utils.css
rename to stylesheets/utils.scss
index d48c63d7e..0270890d6 100644
--- a/css/utils.css
+++ b/stylesheets/utils.scss
@@ -1,9 +1,9 @@
-@value linkColor, visitedLinkColor, warmerBackgroundColor from "./colors.css";
-@value smallRem, mediumRem from "./breakpoints.css";
-@value sansFont from "./typography.css";
+@import "colors";
+@import "breakpoints";
+@import "typography";
 
 /* Flexbox grid, adapted from https://github.com/kristoferjoseph/flexboxgrid */
-/* TODO replace breakpoints in breakpoints.css with these */
+/* TODO replace breakpoints in _breakpoints.scss with these */
 
 :root {
   --gutter-width: 1rem;
@@ -11,13 +11,9 @@
   --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
   --half-gutter-width: calc((var(--gutter-width) * 0.5));
   --site-max-width: 64rem;
-  --border-color: rgba(0, 0, 0, .75);
+  --border-color: rgba(0, 0, 0, 0.75);
 }
 
-@custom-media --sm-viewport only screen and (min-width: 40em);
-@custom-media --md-viewport only screen and (min-width: 52em);
-@custom-media --lg-viewport only screen and (min-width: 72em);
-
 :global .site-max-width {
   max-width: var(--site-max-width);
 }
@@ -27,7 +23,7 @@
 }
 
 :global .link {
-  color: linkColor;
+  color: $linkColor;
   text-decoration: none;
 
   &:hover {
@@ -47,7 +43,7 @@
 :global .small-screen-overlay {
   overflow: hidden;
 
-  @media (--md-viewport) {
+  @media ($md-viewport) {
     overflow: visible;
   }
 }
@@ -65,7 +61,7 @@
   margin-right: auto;
   max-width: var(--site-max-width);
 
-  @media (--lg-viewport) {
+  @media ($lg-viewport) {
     padding-left: 0;
     padding-right: 0;
   }
@@ -73,11 +69,11 @@
 
 .breadcrumbsWrapper {
   width: 100%;
-  background-color: warmerBackgroundColor;
+  background-color: $warmerBackgroundColor;
   padding: 0.5rem 0;
-  box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, 0.03);
+  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     padding: 0.75rem 0;
   }
 }
@@ -92,18 +88,18 @@
   flex-direction: column;
   align-items: baseline;
 
-  @media (min-width: smallRem) {
+  @media (min-width: $smallRem) {
     align-items: center;
     flex-direction: row;
   }
 }
 
 a {
-  color: linkColor;
+  color: $linkColor;
   text-decoration: none;
 
   &:visited {
-    color: visitedLinkColor;
+    color: $visitedLinkColor;
   }
 
   &:hover {
@@ -317,7 +313,7 @@ a {
   order: 1;
 }
 
-@media (--sm-viewport) {
+@media ($sm-viewport) {
   :global .col-sm,
   :global .col-sm-1,
   :global .col-sm-2,
@@ -508,7 +504,7 @@ a {
   }
 }
 
-@media (--md-viewport) {
+@media ($md-viewport) {
   :global .col-md,
   :global .col-md-1,
   :global .col-md-2,
@@ -699,7 +695,7 @@ a {
   }
 }
 
-@media (--lg-viewport) {
+@media ($lg-viewport) {
   :global .col-lg,
   :global .col-lg-1,
   :global .col-lg-2,
diff --git a/utilFunctions/getSearchPageTitle.js b/utilFunctions/getSearchPageTitle.js
index 1fb2b62c1..aad10a272 100644
--- a/utilFunctions/getSearchPageTitle.js
+++ b/utilFunctions/getSearchPageTitle.js
@@ -1,10 +1,11 @@
 // Text for meta title elements for the search page.
 
-const getSearchPageTitle = (queryTerms) => {
-  const pageTitle = queryTerms === undefined ? 
-    "Search Results" : `${queryTerms} | Search Results`
+const getSearchPageTitle = queryTerms => {
+  const pageTitle = queryTerms === undefined
+    ? "Search Results"
+    : `${queryTerms} | Search Results`;
 
-  return pageTitle
+  return pageTitle;
 };
 
 export default getSearchPageTitle;
diff --git a/utilFunctions/serverFunctions.js b/utilFunctions/serverFunctions.js
index f7034fe7d..c3b2e86d6 100644
--- a/utilFunctions/serverFunctions.js
+++ b/utilFunctions/serverFunctions.js
@@ -42,7 +42,6 @@ exports.renderAndCache = (
 
 exports.sendEmail = (from, to, subject, message) => {
   const aws = require("aws-sdk");
-  console.log("sending email to: ", to);
   aws.config.update({ region: "us-east-1" });
   const ses = new aws.SES();
   var params = {
diff --git a/yarn.lock b/yarn.lock
index 87034041f..6f13e17c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,72 +2,55 @@
 # yarn lockfile v1
 
 
-"@semantic-release/commit-analyzer@^3.0.1":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@semantic-release/commit-analyzer/-/commit-analyzer-3.0.7.tgz#dc955444a6d3d2ae9b8e21f90c2c80c4e9142b2f"
-  dependencies:
-    "@semantic-release/error" "^2.0.0"
-    conventional-changelog-angular "^1.4.0"
-    conventional-commits-parser "^2.0.0"
-    import-from "^2.1.0"
-    lodash "^4.17.4"
-    pify "^3.0.0"
-
-"@semantic-release/condition-travis@^6.0.0":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@semantic-release/condition-travis/-/condition-travis-6.2.1.tgz#e3421e5bce47f27057d66abad79e432382427982"
+"@timer/detect-port@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@timer/detect-port/-/detect-port-1.1.3.tgz#1383abd67f9a5d683df5276f8a92d60bdf9abb90"
   dependencies:
-    "@semantic-release/error" "^2.0.0"
-    github "^12.0.0"
-    parse-github-repo-url "^1.4.1"
-    semver "^5.0.3"
-    travis-deploy-once "^3.0.0"
-
-"@semantic-release/error@^2.0.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@semantic-release/error/-/error-2.2.0.tgz#ee9d5a09c9969eade1ec864776aeda5c5cddbbf0"
+    address "^1.0.1"
+    debug "^2.6.0"
 
-"@semantic-release/last-release-npm@^2.0.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@semantic-release/last-release-npm/-/last-release-npm-2.0.2.tgz#c91b1ccb48b0d7095b107be6ebc2c0c08bd88c27"
+"@zeit/check-updates@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@zeit/check-updates/-/check-updates-1.1.1.tgz#1bee858fd3f9b8633b0fc23dff53cb17343331c0"
   dependencies:
-    "@semantic-release/error" "^2.0.0"
-    npm-registry-client "^8.4.0"
-    npmlog "^4.0.0"
+    chalk "2.3.2"
+    ms "2.1.1"
+    update-notifier "2.3.0"
 
-"@semantic-release/release-notes-generator@^4.0.0":
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/@semantic-release/release-notes-generator/-/release-notes-generator-4.0.5.tgz#46cc2f16bdb60fe9674bbcd616bfe0f8bb35347c"
+"@zeit/next-bundle-analyzer@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@zeit/next-bundle-analyzer/-/next-bundle-analyzer-0.1.1.tgz#b84a9703cab6a97a249c1b7b98f8f66bf9d6fb4e"
   dependencies:
-    "@semantic-release/error" "^2.0.0"
-    conventional-changelog-angular "^1.4.0"
-    conventional-changelog-core "^1.9.0"
-    get-stream "^3.0.0"
-    import-from "^2.1.0"
-    lodash "^4.17.4"
-    pify "^3.0.0"
-
-"@sindresorhus/df@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/df/-/df-1.0.1.tgz#c69b66f52f6fcdd287c807df210305dbaf78500d"
+    webpack-bundle-analyzer "2.11.1"
 
-"@sindresorhus/is@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
+"@zeit/next-css@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@zeit/next-css/-/next-css-0.1.5.tgz#e306a0ea7b0f49935632c3b154232d6a8b96f982"
+  dependencies:
+    css-loader "0.28.9"
+    extract-text-webpack-plugin "3.0.2"
+    extracted-loader "1.0.4"
+    find-up "2.1.0"
+    ignore-loader "0.1.2"
+    postcss-loader "2.0.10"
 
-"@timer/detect-port@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@timer/detect-port/-/detect-port-1.1.3.tgz#1383abd67f9a5d683df5276f8a92d60bdf9abb90"
+"@zeit/next-sass@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@zeit/next-sass/-/next-sass-0.1.2.tgz#cc46cc1d76b64d599edf662356e38520346968bc"
   dependencies:
-    address "^1.0.1"
-    debug "^2.6.0"
+    "@zeit/next-css" "0.1.5"
+    extract-text-webpack-plugin "3.0.2"
+    sass-loader "6.0.6"
 
-JSONStream@^1.0.4:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
+"@zeit/next-source-maps@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@zeit/next-source-maps/-/next-source-maps-0.0.2.tgz#3c220de9b6b7eb993eb030876916b1c05bf0ffb0"
+
+"@zeit/source-map-support@0.6.2":
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/@zeit/source-map-support/-/source-map-support-0.6.2.tgz#0efd478f24a606726948165e53a8efe89e24036f"
   dependencies:
-    jsonparse "^1.2.0"
-    through ">=2.2.7 <3"
+    source-map "^0.6.0"
 
 abab@^1.0.3:
   version "1.0.3"
@@ -110,7 +93,7 @@ acorn@^4.0.3, acorn@^4.0.4:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.1.1:
+acorn@^5.0.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
 
@@ -118,20 +101,22 @@ acorn@^5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
 
+acorn@^5.3.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+
 address@1.0.1, address@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.1.tgz#363f5d3f2be26d0655d8afd5a9562e4fc2194537"
 
-agent-base@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.0.tgz#9838b5c3392b962bad031e6a4c5e1024abec45ce"
-  dependencies:
-    es6-promisify "^5.0.0"
-
-ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
+ajv-keywords@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
+
 ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -148,6 +133,15 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+ajv@^6.1.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.4.0.tgz#d3aff78e9277549771daf0164cff48482b754fc6"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+    uri-js "^3.0.2"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -204,12 +198,18 @@ ansi-styles@^3.0.0:
   dependencies:
     color-convert "^1.0.0"
 
-ansi-styles@^3.1.0, ansi-styles@^3.2.0:
+ansi-styles@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
 any-promise@^1.0.0, any-promise@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -238,7 +238,7 @@ append-transform@^0.4.0:
   dependencies:
     default-require-extensions "^1.0.0"
 
-aproba@^1.0.3:
+aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
 
@@ -303,10 +303,6 @@ array-flatten@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
 
-array-ify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
-
 array-includes@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
@@ -398,13 +394,13 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
-async@2.6.0, async@^2.1.2, async@^2.4.1:
+async@2.6.0, async@^2.1.2, async@^2.1.5, async@^2.4.1:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
     lodash "^4.14.0"
 
-async@^1.4.0, async@^1.5.2, async@~1.5.2:
+async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -433,17 +429,6 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^7.1.1:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
-  dependencies:
-    browserslist "^2.1.5"
-    caniuse-lite "^1.0.30000697"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^6.0.6"
-    postcss-value-parser "^3.2.3"
-
 aws-sdk@^2.173.0:
   version "2.173.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.173.0.tgz#2b29486f16e1d04159d0513aa47f5dd70370116d"
@@ -574,19 +559,6 @@ babel-eslint@7.2.3:
     babel-types "^6.23.0"
     babylon "^6.17.0"
 
-babel-generator@6.26.0, babel-generator@^6.25.0, babel-generator@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
-  dependencies:
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.17.4"
-    source-map "^0.5.6"
-    trim-right "^1.0.1"
-
 babel-generator@^6.18.0, babel-generator@^6.24.1:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
@@ -600,6 +572,19 @@ babel-generator@^6.18.0, babel-generator@^6.24.1:
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+babel-generator@^6.25.0, babel-generator@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.1"
+
 babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
@@ -768,7 +753,7 @@ babel-plugin-jest-hoist@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
 
-babel-plugin-module-resolver@2.7.1, babel-plugin-module-resolver@^2.7.1:
+babel-plugin-module-resolver@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-2.7.1.tgz#18be3c42ddf59f7a456c9e0512cd91394f6e4be1"
   dependencies:
@@ -913,7 +898,7 @@ babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-modules-commonjs@6.26.0, babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a"
   dependencies:
@@ -1212,7 +1197,7 @@ babel-register@^6.24.1, babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.23.0, babel-runtime@^6.23.0:
+babel-runtime@6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -1304,10 +1289,6 @@ bail@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.2.tgz#f7d6c1731630a9f9f0d4d35ed1f962e2074a1764"
 
-balanced-match@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
-
 balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -1350,6 +1331,14 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bfj-node4@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/bfj-node4/-/bfj-node4-5.3.1.tgz#e23d8b27057f1d0214fc561142ad9db998f26830"
+  dependencies:
+    bluebird "^3.5.1"
+    check-types "^7.3.0"
+    tryer "^1.0.0"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -1364,7 +1353,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.4.7:
+bluebird@^3.4.7, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -1536,13 +1525,6 @@ browserslist@^1.3.6, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.0.0, browserslist@^2.1.5:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.3.0.tgz#b2aa76415c71643fe2368f6243b43bbbb4211752"
-  dependencies:
-    caniuse-lite "^1.0.30000710"
-    electron-to-chromium "^1.3.17"
-
 browserslist@^2.1.2:
   version "2.11.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
@@ -1562,24 +1544,13 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-alloc-unsafe@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-0.1.1.tgz#ffe1f67551dd055737de253337bfe853dfab1a6a"
-
-buffer-alloc@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.1.0.tgz#05514d33bf1656d3540c684f65b1202e90eca303"
-  dependencies:
-    buffer-alloc-unsafe "^0.1.0"
-    buffer-fill "^0.1.0"
-
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
 
-buffer-fill@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-0.1.0.tgz#ca9470e8d4d1b977fd7543f4e2ab6a7dc95101a8"
+buffer-from@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
 
 buffer-indexof@^1.0.0:
   version "1.1.1"
@@ -1605,14 +1576,28 @@ builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
 
-builtins@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
-
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
+cacache@^10.0.1:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
+  dependencies:
+    bluebird "^3.5.1"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^2.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^5.2.4"
+    unique-filename "^1.1.0"
+    y18n "^4.0.0"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -1627,18 +1612,6 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
-cacheable-request@^2.1.1:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d"
-  dependencies:
-    clone-response "1.0.2"
-    get-stream "3.0.0"
-    http-cache-semantics "3.8.1"
-    keyv "3.0.0"
-    lowercase-keys "1.0.0"
-    normalize-url "2.0.1"
-    responselike "1.0.2"
-
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -1667,14 +1640,6 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
-camelcase-keys@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
-  dependencies:
-    camelcase "^4.1.0"
-    map-obj "^2.0.0"
-    quick-lru "^1.0.0"
-
 camelcase@^1.0.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
@@ -1691,10 +1656,6 @@ camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
-can-use-dom@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
-
 caniuse-api@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@@ -1704,24 +1665,11 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-api@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-2.0.0.tgz#b1ddb5a5966b16f48dc4998444d4bbc6c7d9d834"
-  dependencies:
-    browserslist "^2.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000694"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000694.tgz#02009f4f82d2f0126e4c691b7cd5adb351935c01"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000697:
-  version "1.0.30000712"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000712.tgz#b4732def2459224f3f78c6a9ba103abfcc705670"
-
-caniuse-lite@^1.0.30000710, caniuse-lite@^1.0.30000792:
+caniuse-lite@^1.0.30000792:
   version "1.0.30000792"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz#d0cea981f8118f3961471afbb43c9a1e5bbf0332"
 
@@ -1770,25 +1718,17 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
-  dependencies:
-    ansi-styles "^3.1.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
-
-chalk@^2.1.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
+chalk@2.3.2, chalk@^2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
   dependencies:
-    ansi-styles "^3.2.0"
+    ansi-styles "^3.2.1"
     escape-string-regexp "^1.0.5"
-    supports-color "^5.2.0"
+    supports-color "^5.3.0"
 
-chalk@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+chalk@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
   dependencies:
     ansi-styles "^3.1.0"
     escape-string-regexp "^1.0.5"
@@ -1806,6 +1746,10 @@ character-reference-invalid@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz#942835f750e4ec61a308e60c2ef8cc1011202efc"
 
+check-types@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.3.0.tgz#468f571a4435c24248f5fd0cb0e8d87c3c341e7d"
+
 chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1838,6 +1782,10 @@ chokidar@^2.0.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
 ci-info@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534"
@@ -1925,11 +1873,14 @@ cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
-clone-response@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
+clone-deep@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.3.0.tgz#348c61ae9cdbe0edfe053d91ff4cc521d790ede8"
   dependencies:
-    mimic-response "^1.0.0"
+    for-own "^1.0.0"
+    is-plain-object "^2.0.1"
+    kind-of "^3.2.2"
+    shallow-clone "^0.1.2"
 
 clone@^1.0.2:
   version "1.0.2"
@@ -1949,15 +1900,6 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codeclimate-test-reporter@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/codeclimate-test-reporter/-/codeclimate-test-reporter-0.5.0.tgz#93fa06b1c18e4117349128dc4e38aad08043828e"
-  dependencies:
-    async "~1.5.2"
-    commander "2.9.0"
-    lcov-parse "0.0.10"
-    request "~2.79.0"
-
 collapse-white-space@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
@@ -1975,7 +1917,7 @@ color-convert@^1.0.0, color-convert@^1.9.0:
   dependencies:
     color-name "^1.1.1"
 
-color-convert@^1.3.0, color-convert@^1.8.2:
+color-convert@^1.3.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
   dependencies:
@@ -1995,13 +1937,6 @@ color-string@^0.3.0:
   dependencies:
     color-name "^1.0.0"
 
-color-string@^1.4.0:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
 color@^0.11.0:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
@@ -2010,13 +1945,6 @@ color@^0.11.0:
     color-convert "^1.3.0"
     color-string "^0.3.0"
 
-color@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-1.0.3.tgz#e48e832d85f14ef694fb468811c2d5cfe729b55d"
-  dependencies:
-    color-convert "^1.8.2"
-    color-string "^1.4.0"
-
 colormin@^1.0.5:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
@@ -2043,7 +1971,11 @@ commander@2.12.x:
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
 
-commander@2.9.0, commander@^2.9.0:
+commander@^2.13.0:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+
+commander@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
@@ -2057,13 +1989,6 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
-compare-func@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
-  dependencies:
-    array-ify "^1.0.0"
-    dot-prop "^3.0.0"
-
 component-emitter@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
@@ -2090,6 +2015,15 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
+concat-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 concat-stream@^1.5.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
@@ -2098,13 +2032,6 @@ concat-stream@^1.5.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-config-chain@~1.1.8:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.11.tgz#aba09747dfbe4c3e70e766a6e41586e1859fc6f2"
-  dependencies:
-    ini "^1.3.4"
-    proto-list "~1.2.1"
-
 configstore@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
@@ -2150,65 +2077,6 @@ content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-conventional-changelog-angular@^1.4.0:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz#b27f2b315c16d0a1f23eb181309d0e6a4698ea0f"
-  dependencies:
-    compare-func "^1.3.1"
-    q "^1.5.1"
-
-conventional-changelog-core@^1.9.0:
-  version "1.9.5"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-1.9.5.tgz#5db7566dad7c0cb75daf47fbb2976f7bf9928c1d"
-  dependencies:
-    conventional-changelog-writer "^2.0.3"
-    conventional-commits-parser "^2.1.0"
-    dateformat "^1.0.12"
-    get-pkg-repo "^1.0.0"
-    git-raw-commits "^1.3.0"
-    git-remote-origin-url "^2.0.0"
-    git-semver-tags "^1.2.3"
-    lodash "^4.0.0"
-    normalize-package-data "^2.3.5"
-    q "^1.4.1"
-    read-pkg "^1.1.0"
-    read-pkg-up "^1.0.1"
-    through2 "^2.0.0"
-
-conventional-changelog-writer@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-2.0.3.tgz#073b0c39f1cc8fc0fd9b1566e93833f51489c81c"
-  dependencies:
-    compare-func "^1.3.1"
-    conventional-commits-filter "^1.1.1"
-    dateformat "^1.0.11"
-    handlebars "^4.0.2"
-    json-stringify-safe "^5.0.1"
-    lodash "^4.0.0"
-    meow "^3.3.0"
-    semver "^5.0.1"
-    split "^1.0.0"
-    through2 "^2.0.0"
-
-conventional-commits-filter@^1.1.1:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.5.tgz#77aac065e3de9c1a74b801e8e25c9affb3184f65"
-  dependencies:
-    is-subset "^0.1.1"
-    modify-values "^1.0.0"
-
-conventional-commits-parser@^2.0.0, conventional-commits-parser@^2.1.0:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.5.tgz#9ac3a4ab221c0c3c9e9dd2c09ae01e6d1e1dabe0"
-  dependencies:
-    JSONStream "^1.0.4"
-    is-text-path "^1.0.0"
-    lodash "^4.2.1"
-    meow "^4.0.0"
-    split2 "^2.0.0"
-    through2 "^2.0.0"
-    trim-off-newlines "^1.0.0"
-
 convert-source-map@1.5.1, convert-source-map@^1.1.0, convert-source-map@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
@@ -2225,6 +2093,17 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
@@ -2241,7 +2120,7 @@ core-js@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.3.0.tgz#fab83fbb0b2d8dc85fa636c4b9d34c75420c6d65"
 
-core-util-is@1.0.2, core-util-is@^1.0.1, core-util-is@~1.0.0:
+core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
@@ -2303,17 +2182,17 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.2, create-react-class@^15.6.2:
-  version "15.6.3"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
+create-react-class@^15.5.3:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-create-react-class@^15.5.3:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+create-react-class@^15.6.2:
+  version "15.6.3"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
@@ -2326,13 +2205,6 @@ cross-env@^5.1.3:
     cross-spawn "^5.1.0"
     is-windows "^1.0.0"
 
-cross-spawn-async@^2.1.1:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
-  dependencies:
-    lru-cache "^4.0.0"
-    which "^1.2.8"
-
 cross-spawn@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -2391,15 +2263,6 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
-css-color-function@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.0.tgz#72c767baf978f01b8a8a94f42f17ba5d22a776fc"
-  dependencies:
-    balanced-match "0.1.0"
-    color "^0.11.0"
-    debug "~0.7.4"
-    rgb "~0.1.0"
-
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -2422,16 +2285,24 @@ css-loader@0.28.1:
     postcss-value-parser "^3.3.0"
     source-list-map "^0.1.7"
 
-css-modules-loader-core@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
+css-loader@0.28.9:
+  version "0.28.9"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.9.tgz#68064b85f4e271d7ce4c48a58300928e535d1c95"
   dependencies:
-    icss-replace-symbols "1.1.0"
-    postcss "6.0.1"
-    postcss-modules-extract-imports "1.1.0"
-    postcss-modules-local-by-default "1.2.0"
-    postcss-modules-scope "1.1.0"
-    postcss-modules-values "1.3.0"
+    babel-code-frame "^6.26.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano "^3.10.0"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.1.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.2.0"
+    postcss-modules-local-by-default "^1.2.0"
+    postcss-modules-scope "^1.1.0"
+    postcss-modules-values "^1.3.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
 
 css-select@^1.1.0:
   version "1.2.0"
@@ -2450,10 +2321,6 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
-css-unit-converter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
-
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -2522,6 +2389,10 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+
 d@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -2532,12 +2403,6 @@ damerau-levenshtein@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
 
-dargs@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
-  dependencies:
-    number-is-nan "^1.0.0"
-
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2552,13 +2417,6 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-dateformat@^1.0.11, dateformat@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
-  dependencies:
-    get-stdin "^4.0.1"
-    meow "^3.3.0"
-
 debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.3.3, debug@^2.6.4, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2577,18 +2435,7 @@ debug@^2.6.0, debug@^2.6.3, debug@^2.6.6:
   dependencies:
     ms "2.0.0"
 
-debug@~0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39"
-
-decamelize-keys@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
-  dependencies:
-    decamelize "^1.1.0"
-    map-obj "^1.0.0"
-
-decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2:
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
@@ -2596,12 +2443,6 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
-decompress-response@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
-  dependencies:
-    mimic-response "^1.0.0"
-
 deep-eql@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-0.1.3.tgz#ef558acab8de25206cd713906d74e56930eb69f2"
@@ -2818,12 +2659,6 @@ domutils@1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
-dot-prop@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
-  dependencies:
-    is-obj "^1.0.0"
-
 dot-prop@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -2842,6 +2677,15 @@ duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
+duplexify@^3.4.2, duplexify@^3.5.3:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.4.tgz#4bb46c1796eabebeec4ca9a2e66b808cb7a3d8b4"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -2859,15 +2703,15 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-ejs@^2.5.6:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
+ejs@^2.5.7:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.8.tgz#2ab6954619f225e6193b7ac5f7c39c48fefe4380"
 
 electron-to-chromium@^1.2.7:
   version "1.3.14"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.14.tgz#64af0f9efd3c3c6acd57d71f83b49ca7ee9c4b43"
 
-electron-to-chromium@^1.3.17, electron-to-chromium@^1.3.30:
+electron-to-chromium@^1.3.30:
   version "1.3.31"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz#00d832cba9fe2358652b0c48a8816c8e3a037e9f"
 
@@ -2915,6 +2759,12 @@ encoding@^0.1.11:
   dependencies:
     iconv-lite "~0.4.13"
 
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  dependencies:
+    once "^1.4.0"
+
 enhanced-resolve@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
@@ -2944,18 +2794,18 @@ errno@^0.1.2, errno@^0.1.3:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.2.0, error-ex@^1.3.1:
+errno@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
   dependencies:
     is-arrayish "^0.2.1"
 
-error-stack-parser@^1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
-  dependencies:
-    stackframe "^0.3.1"
-
 error-stack-parser@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.1.tgz#a3202b8fb03114aa9b40a0e3669e48b2b65a010a"
@@ -3009,7 +2859,7 @@ es6-promise@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
 
-es6-promise@^4.0.3, es6-promise@^4.0.5:
+es6-promise@^4.0.5:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
 
@@ -3017,12 +2867,6 @@ es6-promise@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.0.2.tgz#010d5858423a5f118979665f46486a95c6ee2bb6"
 
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  dependencies:
-    es6-promise "^4.0.3"
-
 es6-set@~0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
@@ -3053,10 +2897,6 @@ escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
-escape-string-applescript@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-applescript/-/escape-string-applescript-1.0.0.tgz#6f1c2294245d82c63bc03338dc19a94aa8428892"
-
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -3264,6 +3104,10 @@ event-emitter@~0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
+event-source-polyfill@0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/event-source-polyfill/-/event-source-polyfill-0.0.12.tgz#e539cd67fdef2760a16aa5262fa98134df52e3af"
+
 eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
@@ -3291,17 +3135,6 @@ exec-sh@^0.2.0:
   dependencies:
     merge "^1.1.3"
 
-execa@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.4.0.tgz#4eb6467a36a095fabb2970ff9d5e3fb7bce6ebc3"
-  dependencies:
-    cross-spawn-async "^2.1.1"
-    is-stream "^1.1.0"
-    npm-run-path "^1.0.0"
-    object-assign "^4.0.1"
-    path-key "^1.0.0"
-    strip-eof "^1.0.0"
-
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -3314,18 +3147,6 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 exenv@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
@@ -3370,7 +3191,7 @@ express-http-proxy@^1.0.6:
     es6-promise "^3.3.1"
     raw-body "^2.2.0"
 
-express@^4.15.2, express@^4.16.2:
+express@^4.16.2:
   version "4.16.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
   dependencies:
@@ -3449,7 +3270,7 @@ extglob@^2.0.2:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-text-webpack-plugin@^3.0.2:
+extract-text-webpack-plugin@3.0.2, extract-text-webpack-plugin@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
   dependencies:
@@ -3458,6 +3279,10 @@ extract-text-webpack-plugin@^3.0.2:
     schema-utils "^0.3.0"
     webpack-sources "^1.0.1"
 
+extracted-loader@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/extracted-loader/-/extracted-loader-1.0.4.tgz#e1a3f1791813c14091a1959e261e23e95dd90115"
+
 extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -3478,7 +3303,7 @@ fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
 
-fast-levenshtein@~2.0.4:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
@@ -3563,10 +3388,14 @@ filesize@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.3.0.tgz#53149ea3460e3b2e024962a51648aa572cf98122"
 
-filesize@^3.2.1, filesize@^3.5.9:
+filesize@^3.2.1:
   version "3.5.11"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
 
+filesize@^3.5.11:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+
 fill-range@^2.1.0:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
@@ -3621,6 +3450,12 @@ find-cache-dir@^1.0.0:
     make-dir "^1.0.0"
     pkg-dir "^2.0.0"
 
+find-up@2.1.0, find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -3628,12 +3463,6 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.0.0, find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  dependencies:
-    locate-path "^2.0.0"
-
 fizzy-ui-utils@^2.0.0:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505"
@@ -3653,6 +3482,13 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+flush-write-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
 focus-trap-react@^3.0.4:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-3.1.1.tgz#d8cad66e01de2ae05686eae8942f4008fdd19e53"
@@ -3665,11 +3501,9 @@ focus-trap@^2.0.1:
   dependencies:
     tabbable "^1.0.3"
 
-follow-redirects@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.6.tgz#4dcdc7e4ab3dd6765a97ff89c3b4c258117c79bf"
-  dependencies:
-    debug "^3.1.0"
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
 
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
@@ -3681,6 +3515,12 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    for-in "^1.0.1"
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -3737,21 +3577,13 @@ friendly-errors-webpack-plugin@1.6.1:
     error-stack-parser "^2.0.0"
     string-length "^1.0.1"
 
-from2@^2.1.1:
+from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
   dependencies:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^3.0.0"
-    universalify "^0.1.0"
-
 fs-extra@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
@@ -3762,13 +3594,14 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
   dependencies:
     graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
 
 fs.realpath@^1.0.0:
   version "1.0.0"
@@ -3831,26 +3664,10 @@ generate-object-property@^1.1.0:
   dependencies:
     is-property "^1.0.0"
 
-generic-names@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.3.tgz#2d786a121aee508876796939e8e3bff836c20917"
-  dependencies:
-    loader-utils "^0.2.16"
-
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
-get-pkg-repo@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz#c73b489c06d80cc5536c2c853f9e05232056972d"
-  dependencies:
-    hosted-git-info "^2.1.4"
-    meow "^3.3.0"
-    normalize-package-data "^2.3.0"
-    parse-github-repo-url "^1.3.0"
-    through2 "^2.0.0"
-
 get-size@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.2.tgz#555ea98ab8732e0c021e9e23e2219adcbe398e98"
@@ -3863,7 +3680,7 @@ get-stdin@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
 
-get-stream@3.0.0, get-stream@^3.0.0:
+get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
 
@@ -3877,61 +3694,6 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-git-head@^1.2.1:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/git-head/-/git-head-1.20.1.tgz#036d16a4b374949e4e3daf15827903686d3ccd52"
-  dependencies:
-    git-refs "^1.1.3"
-
-git-raw-commits@^1.3.0:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.4.tgz#442c3df5985b4f5689e9e43597f5194736aac001"
-  dependencies:
-    dargs "^4.0.1"
-    lodash.template "^4.0.2"
-    meow "^4.0.0"
-    split2 "^2.0.0"
-    through2 "^2.0.0"
-
-git-refs@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/git-refs/-/git-refs-1.1.3.tgz#83097cb3a92585c4a4926ec54e2182df9e20e89d"
-  dependencies:
-    path-object "^2.3.0"
-    slash "^1.0.0"
-    walk "^2.3.9"
-
-git-remote-origin-url@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
-  dependencies:
-    gitconfiglocal "^1.0.0"
-    pify "^2.3.0"
-
-git-semver-tags@^1.2.3:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.4.tgz#2ceb2a355c6d7514c123c35e297067d08caf3a92"
-  dependencies:
-    meow "^4.0.0"
-    semver "^5.5.0"
-
-gitconfiglocal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
-  dependencies:
-    ini "^1.3.2"
-
-github@^12.0.0:
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/github/-/github-12.1.0.tgz#f2a2dcbd441178155942257491a4bc08bf661dd7"
-  dependencies:
-    dotenv "^4.0.0"
-    follow-redirects "1.2.6"
-    https-proxy-agent "^2.1.0"
-    lodash "^4.17.4"
-    mime "^2.0.3"
-    netrc "^0.1.4"
-
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -3952,14 +3714,11 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-promise@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.2.0.tgz#fa53179ef42b7c5a6450e77374ab54c9708b7fe9"
-  dependencies:
-    codeclimate-test-reporter "^0.5.0"
-    semantic-release "^8.0.3"
+glob-promise@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.3.0.tgz#d1eb3625c4e6dcbb9b96eeae4425d5a3b135fed2"
 
-glob@7.1.2, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@~7.1.1:
+glob@7.1.2, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
@@ -3970,7 +3729,7 @@ glob@7.1.2, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@~7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^6.0.1, glob@^6.0.4:
+glob@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
   dependencies:
@@ -4019,7 +3778,7 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globby@^6.0.0, globby@^6.1.0:
+globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
   dependencies:
@@ -4077,28 +3836,6 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-got@^8.0.1:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/got/-/got-8.2.0.tgz#0d11a071d05046348a2f5c0a5fa047fb687fdfc6"
-  dependencies:
-    "@sindresorhus/is" "^0.7.0"
-    cacheable-request "^2.1.1"
-    decompress-response "^3.3.0"
-    duplexer3 "^0.1.4"
-    get-stream "^3.0.0"
-    into-stream "^3.1.0"
-    is-retry-allowed "^1.1.0"
-    isurl "^1.0.0-alpha5"
-    lowercase-keys "^1.0.0"
-    mimic-response "^1.0.0"
-    p-cancelable "^0.3.0"
-    p-timeout "^2.0.1"
-    pify "^3.0.0"
-    safe-buffer "^5.1.1"
-    timed-out "^4.0.1"
-    url-parse-lax "^3.0.0"
-    url-to-options "^1.0.1"
-
 graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -4124,26 +3861,23 @@ gtoken@^1.2.3:
     mime "^1.4.1"
     request "^2.72.0"
 
-gzip-size@3.0.0, gzip-size@^3.0.0:
+gzip-size@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
   dependencies:
     duplexer "^0.1.1"
 
+gzip-size@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-4.1.0.tgz#8ae096257eabe7d69c45be2b67c448124ffb517c"
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^3.0.0"
+
 handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
-handlebars@^4.0.2:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
-  dependencies:
-    async "^1.4.0"
-    optimist "^0.6.1"
-    source-map "^0.4.4"
-  optionalDependencies:
-    uglify-js "^2.6"
-
 handlebars@^4.0.3:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.10.tgz#3d30c718b09a3d96f23ea4cc1f403c4d3ba9ff4f"
@@ -4203,20 +3937,10 @@ has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
 
-has-symbol-support-x@^1.4.1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
-
 has-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
 
-has-to-string-tag-x@^1.2.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
-  dependencies:
-    has-symbol-support-x "^1.4.1"
-
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -4320,6 +4044,10 @@ hoist-non-react-statics@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
 
+hoist-non-react-statics@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -4327,7 +4055,7 @@ home-or-tmp@^2.0.0:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.1"
 
-hosted-git-info@^2.1.4, hosted-git-info@^2.4.2:
+hosted-git-info@^2.1.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
 
@@ -4391,10 +4119,6 @@ htmlparser2@~3.3.0:
     domutils "1.1"
     readable-stream "1.0"
 
-http-cache-semantics@3.8.1:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
-
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -4408,13 +4132,6 @@ http-errors@1.6.2, http-errors@~1.6.2:
     setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
-http-errors@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.4.0.tgz#6c0242dea6b3df7afda153c71089b31c6e82aabf"
-  dependencies:
-    inherits "2.0.1"
-    statuses ">= 1.2.1 < 2"
-
 http-proxy-middleware@~0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
@@ -4455,13 +4172,6 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
-https-proxy-agent@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.1.1.tgz#a7ce4382a1ba8266ee848578778122d491260fd9"
-  dependencies:
-    agent-base "^4.1.0"
-    debug "^3.1.0"
-
 husky@^0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/husky/-/husky-0.14.1.tgz#8edba33e728ceed75343e88bb8002e4cbd8d1b40"
@@ -4482,20 +4192,28 @@ iconv-lite@^0.4.17:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
 
-icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
+icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
 
-icss-utils@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-3.0.1.tgz#ee70d3ae8cac38c6be5ed91e851b27eed343ad0f"
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
   dependencies:
-    postcss "^6.0.2"
+    postcss "^6.0.1"
 
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+
+ignore-loader@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ignore-loader/-/ignore-loader-0.1.2.tgz#d81f240376d0ba4f0d778972c3ad25874117a463"
+
 ignore@^3.2.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
@@ -4510,12 +4228,6 @@ immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
 
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  dependencies:
-    resolve-from "^3.0.0"
-
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -4568,7 +4280,7 @@ inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
-ini@^1.2.0, ini@^1.3.2, ini@^1.3.4, ini@~1.3.0:
+ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
@@ -4618,13 +4330,6 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
-into-stream@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
-  dependencies:
-    from2 "^2.1.1"
-    p-is-promise "^1.1.0"
-
 invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
@@ -4674,17 +4379,13 @@ is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
-is-arrayish@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"
-
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.1.4, is-buffer@^1.1.5:
+is-buffer@^1.0.2, is-buffer@^1.1.4, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 
@@ -4855,10 +4556,6 @@ is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
-is-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
-
 is-odd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-1.0.0.tgz#3b8a932eb028b3775c39bb09e91767accdb69088"
@@ -4923,7 +4620,7 @@ is-resolvable@^1.0.0:
   dependencies:
     tryit "^1.0.1"
 
-is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
+is-retry-allowed@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
 
@@ -4931,10 +4628,6 @@ is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
-is-subset@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
-
 is-svg@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
@@ -4945,12 +4638,6 @@ is-symbol@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
 
-is-text-path@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
-  dependencies:
-    text-extensions "^1.0.0"
-
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4987,10 +4674,6 @@ isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
 
-isnumeric@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/isnumeric/-/isnumeric-0.2.0.tgz#a2347ba360de19e33d0ffd590fddf7755cbf2e64"
-
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -5075,13 +4758,6 @@ istanbul-reports@^1.1.1:
   dependencies:
     handlebars "^4.0.3"
 
-isurl@^1.0.0-alpha5:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
-  dependencies:
-    has-to-string-tag-x "^1.2.0"
-    is-object "^1.0.1"
-
 jest-changed-files@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-20.0.3.tgz#9394d5cc65c438406149bef1bf4d52b68e03e3f8"
@@ -5370,18 +5046,10 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
-json-buffer@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
-
-json-loader@0.5.7, json-loader@^0.5.4:
+json-loader@^0.5.4:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
 
-json-parse-better-errors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.1.tgz#50183cd1b2d25275de069e9e71b467ac9eab973a"
-
 json-schema-traverse@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
@@ -5396,7 +5064,7 @@ json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   dependencies:
     jsonify "~0.0.0"
 
-json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
+json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
 
@@ -5420,26 +5088,10 @@ jsonfile@^2.1.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonfile@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.0.tgz#92e7c7444e5ffd5fa32e6a9ae8b85034df8347d0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
-jsonparse@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
-
 jsonpointer@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
@@ -5488,17 +5140,17 @@ jws@^3.0.0, jws@^3.1.4:
     jwa "^1.1.4"
     safe-buffer "^5.0.1"
 
-keyv@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
-  dependencies:
-    json-buffer "3.0.0"
-
 killable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
+  dependencies:
+    is-buffer "^1.0.2"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0, kind-of@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   dependencies:
@@ -5530,6 +5182,10 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -5546,10 +5202,6 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lcov-parse@0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
-
 leven@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
@@ -5647,15 +5299,6 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
 loader-fs-cache@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
@@ -5667,7 +5310,7 @@ loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@1.1.0, loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@1.1.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -5695,49 +5338,10 @@ lodash-es@^4.2.0, lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
-lodash._baseassign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
-  dependencies:
-    lodash._basecopy "^3.0.0"
-    lodash.keys "^3.0.0"
-
-lodash._basecopy@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
-
-lodash._bindcallback@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-
-lodash._createassigner@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
-  dependencies:
-    lodash._bindcallback "^3.0.0"
-    lodash._isiterateecall "^3.0.0"
-    lodash.restparam "^3.0.0"
-
-lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-
-lodash._isiterateecall@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
-
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
 
-lodash.assign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
-  dependencies:
-    lodash._baseassign "^3.0.0"
-    lodash._createassigner "^3.0.0"
-    lodash.keys "^3.0.0"
-
 lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -5758,18 +5362,14 @@ lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
 
-lodash.isarguments@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
-
-lodash.isarray@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
-
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -5778,14 +5378,6 @@ lodash.isstring@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
 
-lodash.keys@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
-  dependencies:
-    lodash._getnative "^3.0.0"
-    lodash.isarguments "^3.0.0"
-    lodash.isarray "^3.0.0"
-
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -5798,11 +5390,11 @@ lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
 
-lodash.restparam@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
 
-lodash.template@^4.0.2, lodash.template@^4.2.4, lodash.template@^4.4.0:
+lodash.template@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
   dependencies:
@@ -5823,7 +5415,7 @@ lodash.uniq@^4.5.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@^4.17.2, lodash@^4.17.3, lodash@^4.6.1:
+lodash@^4.17.2, lodash@^4.17.3:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -5869,17 +5461,24 @@ lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
 
-lowercase-keys@1.0.0, lowercase-keys@^1.0.0:
+lowercase-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
 
-lru-cache@^4.0.0, lru-cache@^4.0.1:
+lru-cache@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
   dependencies:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.2.tgz#45234b2e6e2f2b33da125624c4664929a0224c3f"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -5904,10 +5503,6 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
-map-obj@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
-
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -5938,12 +5533,6 @@ maximatch@^0.1.0:
     arrify "^1.0.0"
     minimatch "^3.0.0"
 
-md5-file@3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-3.2.3.tgz#f9bceb941eca2214a4c0727f5e700314e770f06f"
-  dependencies:
-    buffer-alloc "^1.1.0"
-
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -5983,20 +5572,6 @@ meow@^3.3.0, meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
-meow@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-4.0.0.tgz#fd5855dd008db5b92c552082db1c307cba20b29d"
-  dependencies:
-    camelcase-keys "^4.0.0"
-    decamelize-keys "^1.0.0"
-    loud-rejection "^1.0.0"
-    minimist "^1.1.3"
-    minimist-options "^3.0.1"
-    normalize-package-data "^2.3.4"
-    read-pkg-up "^3.0.0"
-    redent "^2.0.0"
-    trim-newlines "^2.0.0"
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -6088,18 +5663,10 @@ mime@^1.3.4, mime@^1.4.1, mime@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
 
-mime@^2.0.3:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.2.0.tgz#161e541965551d3b549fa1114391e3a3d55b923b"
-
 mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
 
-mimic-response@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e"
-
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -6126,13 +5693,6 @@ minimatch@3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimist-options@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
-  dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-
 minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -6141,6 +5701,21 @@ minimist@1.2.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+mississippi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^2.0.1"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
 mixin-deep@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
@@ -6148,6 +5723,13 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  dependencies:
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
+
 mkdirp-then@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mkdirp-then/-/mkdirp-then-1.2.0.tgz#a492c879ca4d873f5ee45008f8f55fd0150de3c5"
@@ -6176,24 +5758,29 @@ mocha@^5.0.5:
     mkdirp "0.5.1"
     supports-color "4.4.0"
 
-modify-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.0.tgz#e2b6cdeb9ce19f99317a53722f3dbf5df5eaaab2"
-
 moment@^2.11.2:
   version "2.20.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
 
-mount-point@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mount-point/-/mount-point-1.2.0.tgz#f7712295e1ecd8df2e42ecbe23e07a3660807851"
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
   dependencies:
-    "@sindresorhus/df" "^1.0.1"
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
 
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 
+ms@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
@@ -6213,14 +5800,6 @@ mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
-mv@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
-  dependencies:
-    mkdirp "~0.5.1"
-    ncp "~2.0.0"
-    rimraf "~2.4.0"
-
 mz@2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -6259,35 +5838,22 @@ ncname@1.0.x:
   dependencies:
     xml-char-classes "^1.0.0"
 
-ncp@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
-
 negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
-nerf-dart@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nerf-dart/-/nerf-dart-1.0.0.tgz#e6dab7febf5ad816ea81cf5c629c5a0ebde72c1a"
-
-netrc@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/netrc/-/netrc-0.1.4.tgz#6be94fcaca8d77ade0a9670dc460914c94472444"
-
-next@4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/next/-/next-4.2.3.tgz#6f85f9bd6df2c420b4f6425f9f158e82515b7bc8"
+next@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/next/-/next-5.1.0.tgz#9f79f095b28e1be568ba6fc61ec807409ec77e0a"
   dependencies:
+    "@zeit/check-updates" "1.1.1"
+    "@zeit/source-map-support" "0.6.2"
     ansi-html "0.0.7"
     babel-core "6.26.0"
-    babel-generator "6.26.0"
     babel-loader "7.1.2"
-    babel-plugin-module-resolver "2.7.1"
     babel-plugin-react-require "3.0.0"
     babel-plugin-syntax-dynamic-import "6.18.0"
     babel-plugin-transform-class-properties "6.24.1"
-    babel-plugin-transform-es2015-modules-commonjs "6.26.0"
     babel-plugin-transform-object-rest-spread "6.26.0"
     babel-plugin-transform-react-jsx-source "6.22.0"
     babel-plugin-transform-react-remove-prop-types "0.4.8"
@@ -6300,40 +5866,40 @@ next@4.2.3:
     cross-spawn "5.1.0"
     del "3.0.0"
     etag "1.8.1"
+    event-source-polyfill "0.0.12"
+    find-up "2.1.0"
     fresh "0.5.2"
     friendly-errors-webpack-plugin "1.6.1"
     glob "7.1.2"
-    glob-promise "3.2.0"
+    glob-promise "3.3.0"
     hoist-non-react-statics "2.3.1"
     htmlescape "1.1.1"
+    http-errors "1.6.2"
     http-status "1.0.1"
-    json-loader "0.5.7"
     loader-utils "1.1.0"
-    md5-file "3.2.3"
     minimist "1.2.0"
     mkdirp-then "1.2.0"
-    mv "2.1.1"
     mz "2.7.0"
-    path-match "1.2.4"
-    pkg-up "2.0.0"
+    path-to-regexp "2.1.0"
     prop-types "15.6.0"
     prop-types-exact "1.1.1"
-    react-hot-loader "3.1.1"
+    react-hot-loader "4.0.0"
     recursive-copy "2.0.6"
+    resolve "1.5.0"
     send "0.16.1"
-    source-map-support "0.4.18"
     strip-ansi "3.0.1"
-    styled-jsx "2.2.1"
+    styled-jsx "2.2.6"
     touch "3.1.0"
+    uglifyjs-webpack-plugin "1.1.6"
     unfetch "3.0.0"
     url "0.11.0"
     uuid "3.1.0"
     walk "2.3.9"
-    webpack "3.6.0"
+    webpack "3.10.0"
     webpack-dev-middleware "1.12.0"
     webpack-hot-middleware "2.19.1"
+    webpack-sources "1.1.0"
     write-file-webpack-plugin "4.2.0"
-    xss-filters "1.2.7"
 
 no-case@^2.2.0:
   version "2.3.2"
@@ -6455,13 +6021,13 @@ node-sass@^4.7.2:
     stdout-stream "^1.4.0"
     "true-case-path" "^1.0.2"
 
-"nopt@2 || 3", nopt@~3.0.1:
+"nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   dependencies:
     abbrev "1"
 
-nopt@^4.0.0, nopt@^4.0.1:
+nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
   dependencies:
@@ -6474,7 +6040,7 @@ nopt@~1.0.10:
   dependencies:
     abbrev "1"
 
-normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.5, "normalize-package-data@~1.0.1 || ^2.0.0":
+normalize-package-data@^2.3.2:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
   dependencies:
@@ -6506,14 +6072,6 @@ normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
-normalize-url@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6"
-  dependencies:
-    prepend-http "^2.0.0"
-    query-string "^5.0.1"
-    sort-keys "^2.0.0"
-
 normalize-url@^1.4.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
@@ -6523,44 +6081,12 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-"npm-package-arg@^3.0.0 || ^4.0.0 || ^5.0.0":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-5.1.2.tgz#fb18d17bb61e60900d6312619919bd753755ab37"
-  dependencies:
-    hosted-git-info "^2.4.2"
-    osenv "^0.1.4"
-    semver "^5.1.0"
-    validate-npm-package-name "^3.0.0"
-
 npm-path@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.3.tgz#15cff4e1c89a38da77f56f6055b24f975dfb2bbe"
   dependencies:
     which "^1.2.10"
 
-npm-registry-client@^8.4.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/npm-registry-client/-/npm-registry-client-8.5.0.tgz#4878fb6fa1f18a5dc08ae83acf94d0d0112d7ed0"
-  dependencies:
-    concat-stream "^1.5.2"
-    graceful-fs "^4.1.6"
-    normalize-package-data "~1.0.1 || ^2.0.0"
-    npm-package-arg "^3.0.0 || ^4.0.0 || ^5.0.0"
-    once "^1.3.3"
-    request "^2.74.0"
-    retry "^0.10.0"
-    semver "2 >=2.2.1 || 3.x || 4 || 5"
-    slide "^1.1.3"
-    ssri "^4.1.2"
-  optionalDependencies:
-    npmlog "2 || ^3.1.0 || ^4.0.0"
-
-npm-run-path@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-1.0.0.tgz#f5c32bf595fe81ae927daec52e82f8b000ac3c8f"
-  dependencies:
-    path-key "^1.0.0"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6575,21 +6101,7 @@ npm-which@^3.0.1:
     npm-path "^2.0.2"
     which "^1.2.10"
 
-npmconf@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/npmconf/-/npmconf-2.1.2.tgz#66606a4a736f1e77a059aa071a79c94ab781853a"
-  dependencies:
-    config-chain "~1.1.8"
-    inherits "~2.0.0"
-    ini "^1.2.0"
-    mkdirp "^0.5.0"
-    nopt "~3.0.1"
-    once "~1.3.0"
-    osenv "^0.1.0"
-    semver "2 || 3 || 4"
-    uid-number "0.0.5"
-
-"npmlog@0 || 1 || 2 || 3 || 4", "npmlog@2 || ^3.1.0 || ^4.0.0", npmlog@^4.0.0, npmlog@^4.0.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   dependencies:
@@ -6682,22 +6194,12 @@ on-headers@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
 
-once@^1.3.0, once@^1.3.3, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   dependencies:
     wrappy "1"
 
-once@~1.3.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
-  dependencies:
-    wrappy "1"
-
-onecolor@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/onecolor/-/onecolor-3.0.4.tgz#75a46f80da6c7aaa5b4daae17a47198bd9652494"
-
 onetime@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
@@ -6794,13 +6296,6 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-osenv@^0.1.0:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 outlayer@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2"
@@ -6809,18 +6304,10 @@ outlayer@^2.1.0:
     fizzy-ui-utils "^2.0.0"
     get-size "^2.0.2"
 
-p-cancelable@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
 
-p-is-promise@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
-
 p-limit@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
@@ -6837,28 +6324,6 @@ p-map@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
 
-p-reduce@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
-
-p-retry@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-1.0.0.tgz#3927332a4b7d70269b535515117fc547da1a6968"
-  dependencies:
-    retry "^0.10.0"
-
-p-series@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-series/-/p-series-1.0.0.tgz#7ec9e7b4406cc32066298a6f9860e55e91b36e07"
-  dependencies:
-    p-reduce "^1.0.0"
-
-p-timeout@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-2.0.1.tgz#d8dd1979595d2dc0139e1fe46b8b646cb3cdf038"
-  dependencies:
-    p-finally "^1.0.0"
-
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -6876,6 +6341,14 @@ pako@~1.0.2, pako@~1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
 
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
 param-case@2.1.x:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
@@ -6903,10 +6376,6 @@ parse-entities@^1.1.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-parse-github-repo-url@^1.3.0, parse-github-repo-url@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
-
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -6922,13 +6391,6 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse5@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
@@ -6967,28 +6429,10 @@ path-is-inside@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
-path-key@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-1.0.0.tgz#5d53d578019646c0d68800db4e146e6bdc2ac7af"
-
 path-key@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
 
-path-match@1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/path-match/-/path-match-1.2.4.tgz#a62747f3c7e0c2514762697f24443585b09100ea"
-  dependencies:
-    http-errors "~1.4.0"
-    path-to-regexp "^1.0.0"
-
-path-object@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/path-object/-/path-object-2.3.0.tgz#03e46653e5c375c60af1cabdd94bc6448a5d9110"
-  dependencies:
-    core-util-is "^1.0.1"
-    lodash.assign "^3.0.0"
-
 path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
@@ -6997,7 +6441,11 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
-path-to-regexp@^1.0.0, path-to-regexp@^1.0.1:
+path-to-regexp@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.1.0.tgz#7e30f9f5b134bd6a28ffc2e3ef1e47075ac5259b"
+
+path-to-regexp@^1.0.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
   dependencies:
@@ -7017,12 +6465,6 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  dependencies:
-    pify "^3.0.0"
-
 pbkdf2@^3.0.3:
   version "3.0.14"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
@@ -7041,7 +6483,7 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
-pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -7049,34 +6491,16 @@ pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
 
-pinkie-promise@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-1.0.0.tgz#d1da67f5482563bb7cf57f286ae2822ecfbf3670"
-  dependencies:
-    pinkie "^1.0.0"
-
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
   dependencies:
     pinkie "^2.0.0"
 
-pinkie@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-1.0.0.tgz#5a47f28ba1015d0201bda7bf0f358e47bec8c7e4"
-
 pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
-pixrem@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pixrem/-/pixrem-4.0.1.tgz#2da4a1de6ec4423c5fc3794e930b81d4490ec686"
-  dependencies:
-    browserslist "^2.0.0"
-    postcss "^6.0.0"
-    reduce-css-calc "^1.2.7"
-
 pkg-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
@@ -7089,25 +6513,12 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-pkg-up@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  dependencies:
-    find-up "^2.1.0"
-
 pkg-up@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-1.0.0.tgz#3e08fb461525c4421624a33b9f7e6d0af5b05a26"
   dependencies:
     find-up "^1.0.0"
 
-pleeease-filters@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pleeease-filters/-/pleeease-filters-4.0.0.tgz#6632b2fb05648d2758d865384fbced79e1ccaec7"
-  dependencies:
-    onecolor "^3.0.4"
-    postcss "^6.0.1"
-
 pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
@@ -7124,21 +6535,6 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
-postcss-apply@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/postcss-apply/-/postcss-apply-0.8.0.tgz#14e544bbb5cb6f1c1e048857965d79ae066b1343"
-  dependencies:
-    babel-runtime "^6.23.0"
-    balanced-match "^0.4.2"
-    postcss "^6.0.0"
-
-postcss-attribute-case-insensitive@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz#94dc422c8f90997f16bd33a3654bbbec084963b4"
-  dependencies:
-    postcss "^6.0.0"
-    postcss-selector-parser "^2.2.3"
-
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -7147,80 +6543,6 @@ postcss-calc@^5.2.0:
     postcss-message-helpers "^2.0.0"
     reduce-css-calc "^1.2.6"
 
-postcss-calc@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-6.0.0.tgz#b681b279c6d24fbe0e33ed9045803705445d613b"
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss "^6.0.0"
-    postcss-selector-parser "^2.2.2"
-    reduce-css-calc "^2.0.0"
-
-postcss-color-function@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-function/-/postcss-color-function-4.0.0.tgz#7e0106f4f6a1ecb1ad5b3a8553ace5e828aae187"
-  dependencies:
-    css-color-function "^1.3.0"
-    postcss "^6.0.1"
-    postcss-message-helpers "^2.0.0"
-    postcss-value-parser "^3.3.0"
-
-postcss-color-gray@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-4.0.0.tgz#681bf305097dd66bfef0e1e6282d5d99b5acc95d"
-  dependencies:
-    color "^1.0.3"
-    postcss "^6.0.1"
-    postcss-message-helpers "^2.0.0"
-    reduce-function-call "^1.0.2"
-
-postcss-color-hex-alpha@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz#1e53e6c8acb237955e8fd08b7ecdb1b8b8309f95"
-  dependencies:
-    color "^1.0.3"
-    postcss "^6.0.1"
-    postcss-message-helpers "^2.0.0"
-
-postcss-color-hsl@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-hsl/-/postcss-color-hsl-2.0.0.tgz#12703666fa310430e3f30a454dac1386317d5844"
-  dependencies:
-    postcss "^6.0.1"
-    postcss-value-parser "^3.3.0"
-    units-css "^0.4.0"
-
-postcss-color-hwb@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-hwb/-/postcss-color-hwb-3.0.0.tgz#3402b19ef4d8497540c1fb5072be9863ca95571e"
-  dependencies:
-    color "^1.0.3"
-    postcss "^6.0.1"
-    postcss-message-helpers "^2.0.0"
-    reduce-function-call "^1.0.2"
-
-postcss-color-rebeccapurple@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-3.0.0.tgz#eebaf03d363b4300b96792bd3081c19ed66513d3"
-  dependencies:
-    postcss "^6.0.1"
-    postcss-value-parser "^3.3.0"
-
-postcss-color-rgb@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-rgb/-/postcss-color-rgb-2.0.0.tgz#14539c8a7131494b482e0dd1cc265ff6514b5263"
-  dependencies:
-    postcss "^6.0.1"
-    postcss-value-parser "^3.3.0"
-
-postcss-color-rgba-fallback@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-rgba-fallback/-/postcss-color-rgba-fallback-3.0.0.tgz#37d5c9353a07a09270912a82606bb42a0d702c04"
-  dependencies:
-    postcss "^6.0.6"
-    postcss-value-parser "^3.3.0"
-    rgb-hex "^2.1.0"
-
 postcss-colormin@^2.1.8:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
@@ -7236,62 +6558,6 @@ postcss-convert-values@^2.3.4:
     postcss "^5.0.11"
     postcss-value-parser "^3.1.2"
 
-postcss-cssnext@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-cssnext/-/postcss-cssnext-3.1.0.tgz#927dc29341a938254cde38ea60a923b9dfedead9"
-  dependencies:
-    autoprefixer "^7.1.1"
-    caniuse-api "^2.0.0"
-    chalk "^2.0.1"
-    pixrem "^4.0.0"
-    pleeease-filters "^4.0.0"
-    postcss "^6.0.5"
-    postcss-apply "^0.8.0"
-    postcss-attribute-case-insensitive "^2.0.0"
-    postcss-calc "^6.0.0"
-    postcss-color-function "^4.0.0"
-    postcss-color-gray "^4.0.0"
-    postcss-color-hex-alpha "^3.0.0"
-    postcss-color-hsl "^2.0.0"
-    postcss-color-hwb "^3.0.0"
-    postcss-color-rebeccapurple "^3.0.0"
-    postcss-color-rgb "^2.0.0"
-    postcss-color-rgba-fallback "^3.0.0"
-    postcss-custom-media "^6.0.0"
-    postcss-custom-properties "^6.1.0"
-    postcss-custom-selectors "^4.0.1"
-    postcss-font-family-system-ui "^3.0.0"
-    postcss-font-variant "^3.0.0"
-    postcss-image-set-polyfill "^0.3.5"
-    postcss-initial "^2.0.0"
-    postcss-media-minmax "^3.0.0"
-    postcss-nesting "^4.0.1"
-    postcss-pseudo-class-any-link "^4.0.0"
-    postcss-pseudoelements "^5.0.0"
-    postcss-replace-overflow-wrap "^2.0.0"
-    postcss-selector-matches "^3.0.1"
-    postcss-selector-not "^3.0.1"
-
-postcss-custom-media@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz#be532784110ecb295044fb5395a18006eb21a737"
-  dependencies:
-    postcss "^6.0.1"
-
-postcss-custom-properties@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-6.1.0.tgz#9caf1151ac41b1e9e64d3a2ff9ece996ca18977d"
-  dependencies:
-    balanced-match "^1.0.0"
-    postcss "^6.0.3"
-
-postcss-custom-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-4.0.1.tgz#781382f94c52e727ef5ca4776ea2adf49a611382"
-  dependencies:
-    postcss "^6.0.1"
-    postcss-selector-matches "^3.0.0"
-
 postcss-discard-comments@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
@@ -7330,47 +6596,6 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
-postcss-flexbugs-fixes@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.0.0.tgz#7b31cb6c27d0417a35a67914c295f83c403c7ed4"
-  dependencies:
-    postcss "^6.0.1"
-
-postcss-font-family-system-ui@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz#675fe7a9e029669f05f8dba2e44c2225ede80623"
-  dependencies:
-    postcss "^6.0"
-
-postcss-font-variant@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-3.0.0.tgz#08ccc88f6050ba82ed8ef2cc76c0c6a6b41f183e"
-  dependencies:
-    postcss "^6.0.1"
-
-postcss-icss-values@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-icss-values/-/postcss-icss-values-2.0.1.tgz#5a3388b759986ed25aa1c1c06836584b2b32780f"
-  dependencies:
-    icss-utils "^3.0.1"
-    lodash "^4.17.4"
-    postcss "^6.0.2"
-    postcss-value-parser "^3.3.0"
-
-postcss-image-set-polyfill@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/postcss-image-set-polyfill/-/postcss-image-set-polyfill-0.3.5.tgz#0f193413700cf1f82bd39066ef016d65a4a18181"
-  dependencies:
-    postcss "^6.0.1"
-    postcss-media-query-parser "^0.2.3"
-
-postcss-initial@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-2.0.0.tgz#72715f7336e0bb79351d99ee65c4a253a8441ba4"
-  dependencies:
-    lodash.template "^4.2.4"
-    postcss "^6.0.1"
-
 postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
@@ -7394,24 +6619,14 @@ postcss-load-plugins@^2.3.0:
     cosmiconfig "^2.1.1"
     object-assign "^4.1.0"
 
-postcss-loader@^2.0.10:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.0.tgz#038c2d6d59753fef4667827fd3ae03f5dc5e6a7a"
+postcss-loader@2.0.10:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.10.tgz#090db0540140bd56a7a7f717c41bc29aeef4c674"
   dependencies:
     loader-utils "^1.1.0"
     postcss "^6.0.0"
     postcss-load-config "^1.2.0"
-    schema-utils "^0.4.0"
-
-postcss-media-minmax@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-3.0.0.tgz#675256037a43ef40bc4f0760bfd06d4dc69d48d2"
-  dependencies:
-    postcss "^6.0.1"
-
-postcss-media-query-parser@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+    schema-utils "^0.3.0"
 
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
@@ -7474,48 +6689,39 @@ postcss-minify-selectors@^2.0.4:
     postcss "^5.0.14"
     postcss-selector-parser "^2.0.0"
 
-postcss-modules-extract-imports@1.1.0, postcss-modules-extract-imports@^1.0.0:
+postcss-modules-extract-imports@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
   dependencies:
     postcss "^6.0.1"
 
-postcss-modules-local-by-default@1.2.0, postcss-modules-local-by-default@^1.0.1:
+postcss-modules-extract-imports@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@^1.0.1, postcss-modules-local-by-default@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-scope@1.1.0, postcss-modules-scope@^1.0.0:
+postcss-modules-scope@^1.0.0, postcss-modules-scope@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-values@1.3.0, postcss-modules-values@^1.1.0:
+postcss-modules-values@^1.1.0, postcss-modules-values@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
   dependencies:
     icss-replace-symbols "^1.1.0"
     postcss "^6.0.1"
 
-postcss-modules@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-1.1.0.tgz#c9f94f76ff6addf7c35b842e69ed442118156bb0"
-  dependencies:
-    css-modules-loader-core "^1.1.0"
-    generic-names "^1.0.2"
-    postcss "^6.0.1"
-    string-hash "^1.1.1"
-
-postcss-nesting@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-4.0.1.tgz#8fc2ce40cbfcfab7ee24e7b68fb6ebe84b641469"
-  dependencies:
-    postcss "^6.0.1"
-
 postcss-normalize-charset@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -7538,19 +6744,6 @@ postcss-ordered-values@^2.1.0:
     postcss "^5.0.4"
     postcss-value-parser "^3.0.1"
 
-postcss-pseudo-class-any-link@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz#9152a0613d3450720513e8892854bae42d0ee68e"
-  dependencies:
-    postcss "^6.0.1"
-    postcss-selector-parser "^2.2.3"
-
-postcss-pseudoelements@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudoelements/-/postcss-pseudoelements-5.0.0.tgz#eef194e8d524645ca520a949e95e518e812402cb"
-  dependencies:
-    postcss "^6.0.0"
-
 postcss-reduce-idents@^2.2.2:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
@@ -7572,27 +6765,7 @@ postcss-reduce-transforms@^1.0.3:
     postcss "^5.0.8"
     postcss-value-parser "^3.0.1"
 
-postcss-replace-overflow-wrap@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-2.0.0.tgz#794db6faa54f8db100854392a93af45768b4e25b"
-  dependencies:
-    postcss "^6.0.1"
-
-postcss-selector-matches@^3.0.0, postcss-selector-matches@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-3.0.1.tgz#e5634011e13950881861bbdd58c2d0111ffc96ab"
-  dependencies:
-    balanced-match "^0.4.2"
-    postcss "^6.0.1"
-
-postcss-selector-not@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-3.0.1.tgz#2e4db2f0965336c01e7cec7db6c60dff767335d9"
-  dependencies:
-    balanced-match "^0.4.2"
-    postcss "^6.0.1"
-
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   dependencies:
@@ -7629,14 +6802,6 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
-  dependencies:
-    chalk "^1.1.3"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
-
 postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.16:
   version "5.2.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
@@ -7655,15 +6820,7 @@ postcss@^5.0.6:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0:
-  version "6.0.17"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.17.tgz#e259a051ca513f81e9afd0c21f7f82eda50c65c5"
-  dependencies:
-    chalk "^2.3.0"
-    source-map "^0.6.1"
-    supports-color "^5.1.0"
-
-postcss@^6.0.0, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.5, postcss@^6.0.6:
+postcss@^6.0.0:
   version "6.0.8"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3"
   dependencies:
@@ -7687,10 +6844,6 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
 
-prepend-http@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
-
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
@@ -7741,6 +6894,10 @@ progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
 
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+
 promise@7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
@@ -7783,10 +6940,6 @@ prop-types@^15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-proto-list@~1.2.1:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
-
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -7816,6 +6969,21 @@ public-encrypt@^4.0.0:
     parse-asn1 "^5.0.0"
     randombytes "^2.0.1"
 
+pump@^2.0.0, pump@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.4.0.tgz#80b7c5df7e24153d03f0e7ac8a05a5d068bd07fb"
+  dependencies:
+    duplexify "^3.5.3"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
@@ -7824,14 +6992,14 @@ punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
+punycode@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+
 q@^1.1.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
 
-q@^1.4.1, q@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-
 qs@6.5.1, qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
@@ -7851,14 +7019,6 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^5.0.1:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.0.tgz#9583b15fd1307f899e973ed418886426a9976469"
-  dependencies:
-    decode-uri-component "^0.2.0"
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -7875,10 +7035,6 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
-quick-lru@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
-
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -7938,10 +7094,6 @@ react-aria-modal@2.12.0:
     no-scroll "^2.0.0"
     react-displace "^2.3.0"
 
-react-deep-force-update@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
-
 react-dev-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.0.0.tgz#3677f37718ba0cae892ba9c01fe54d1622e6ef7c"
@@ -8004,15 +7156,15 @@ react-helmet@^5.2.0:
     prop-types "^15.5.4"
     react-side-effect "^1.1.0"
 
-react-hot-loader@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.1.1.tgz#e06db8cd0841c41e3ab0b395b2b774126fc8914e"
+react-hot-loader@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.0.0.tgz#3452fa9bc0d0ba9dfc5b0ccfa25101ca8dbd2de2"
   dependencies:
+    fast-levenshtein "^2.0.6"
     global "^4.3.0"
-    react-deep-force-update "^2.1.1"
-    react-proxy "^3.0.0-alpha.0"
-    redbox-react "^1.3.6"
-    source-map "^0.6.1"
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.0"
+    shallowequal "^1.0.2"
 
 react-input-autosize@^2.1.2:
   version "2.2.1"
@@ -8041,12 +7193,6 @@ react-masonry-component@^6.0.2:
     masonry-layout "^4.2.0"
     prop-types "^15.5.8"
 
-react-proxy@^3.0.0-alpha.0:
-  version "3.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
-  dependencies:
-    lodash "^4.6.1"
-
 react-redux@^5.0.5:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.5.tgz#f8e8c7b239422576e52d6b7db06439469be9846a"
@@ -8074,17 +7220,15 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react-slick@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.15.0.tgz#f9f42f464e986a0618e964b20c20c2e38c49ae08"
+react-slick@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.23.1.tgz#15791c4107f0ba3a5688d5bd97b7b7ceaa0dd181"
   dependencies:
-    can-use-dom "^0.1.0"
     classnames "^2.2.5"
-    create-react-class "^15.5.2"
     enquire.js "^2.1.6"
     json2mq "^0.2.0"
-    object-assign "^4.1.0"
-    slick-carousel "^1.6.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
 
 react@16, "react@^15.6.2 || ^16.0":
   version "16.2.0"
@@ -8109,14 +7253,7 @@ read-pkg-up@^2.0.0:
     find-up "^2.0.0"
     read-pkg "^2.0.0"
 
-read-pkg-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^3.0.0"
-
-read-pkg@^1.0.0, read-pkg@^1.1.0:
+read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
   dependencies:
@@ -8132,13 +7269,17 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+"readable-stream@1 || 2", readable-stream@^2.0.4:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
 
 readable-stream@1.0:
   version "1.0.34"
@@ -8240,15 +7381,6 @@ recursive-readdir@2.2.1:
   dependencies:
     minimatch "3.0.3"
 
-redbox-react@^1.3.6:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.5.0.tgz#04dab11557d26651bf3562a67c22ace56c5d3967"
-  dependencies:
-    error-stack-parser "^1.3.6"
-    object-assign "^4.0.1"
-    prop-types "^15.5.4"
-    sourcemapped-stacktrace "^1.1.6"
-
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -8256,14 +7388,7 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
-redent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
-  dependencies:
-    indent-string "^3.0.0"
-    strip-indent "^2.0.0"
-
-reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7:
+reduce-css-calc@^1.2.6:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
   dependencies:
@@ -8271,14 +7396,7 @@ reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7:
     math-expression-evaluator "^1.2.14"
     reduce-function-call "^1.0.1"
 
-reduce-css-calc@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.0.5.tgz#33c97838c5d4c711a5c14ef85ce4fde41483f7bd"
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
-reduce-function-call@^1.0.1, reduce-function-call@^1.0.2:
+reduce-function-call@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
   dependencies:
@@ -8428,7 +7546,7 @@ replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
 
-request@2, request@^2.72.0, request@^2.74.0, request@^2.81.0:
+request@2, request@^2.72.0, request@^2.81.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   dependencies:
@@ -8519,10 +7637,6 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
-require-relative@^0.8.7:
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
-
 require-uncached@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
@@ -8534,6 +7648,10 @@ requires-port@1.0.x, requires-port@1.x.x:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -8560,23 +7678,17 @@ resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.6, resolve@^1.2.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
-  dependencies:
-    path-parse "^1.0.5"
-
-resolve@^1.3.2:
+resolve@1.5.0, resolve@^1.3.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
   dependencies:
     path-parse "^1.0.5"
 
-responselike@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
+resolve@^1.1.6, resolve@^1.2.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
   dependencies:
-    lowercase-keys "^1.0.0"
+    path-parse "^1.0.5"
 
 restore-cursor@^1.0.1:
   version "1.0.1"
@@ -8592,36 +7704,18 @@ restore-cursor@^2.0.0:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
 
-retry@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
-
-rgb-hex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-2.1.0.tgz#c773c5fe2268a25578d92539a82a7a5ce53beda6"
-
-rgb@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"
-
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
     glob "^7.0.5"
 
-rimraf@~2.4.0:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
-  dependencies:
-    glob "^6.0.1"
-
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
@@ -8629,12 +7723,6 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
-run-applescript@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-3.0.0.tgz#08252093def5b42d1b58654b16c2df9888e27bd7"
-  dependencies:
-    execa "^0.4.0"
-
 run-async@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
@@ -8647,6 +7735,12 @@ run-async@^2.2.0:
   dependencies:
     is-promise "^2.1.0"
 
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  dependencies:
+    aproba "^1.1.1"
+
 rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
@@ -8694,6 +7788,16 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
+sass-loader@6.0.6:
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
+  dependencies:
+    async "^2.1.5"
+    clone-deep "^0.3.0"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    pify "^3.0.0"
+
 sax@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
@@ -8708,12 +7812,12 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.0:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
+schema-utils@^0.4.2:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
   dependencies:
-    ajv "^5.0.0"
-    ajv-keywords "^2.1.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
 
 scss-tokenizer@^0.2.3:
   version "0.2.3"
@@ -8741,44 +7845,16 @@ selfsigned@^1.9.1:
   dependencies:
     node-forge "0.7.1"
 
-semantic-release@^8.0.3:
-  version "8.2.3"
-  resolved "https://registry.yarnpkg.com/semantic-release/-/semantic-release-8.2.3.tgz#a746a0a588be1c24aa8c212ee8dc3bda9ec85d46"
-  dependencies:
-    "@semantic-release/commit-analyzer" "^3.0.1"
-    "@semantic-release/condition-travis" "^6.0.0"
-    "@semantic-release/error" "^2.0.0"
-    "@semantic-release/last-release-npm" "^2.0.0"
-    "@semantic-release/release-notes-generator" "^4.0.0"
-    execa "^0.8.0"
-    fs-extra "^4.0.2"
-    git-head "^1.2.1"
-    github "^12.0.0"
-    lodash "^4.0.0"
-    nerf-dart "^1.0.0"
-    nopt "^4.0.0"
-    normalize-package-data "^2.3.4"
-    npmconf "^2.1.2"
-    npmlog "^4.0.0"
-    p-series "^1.0.0"
-    parse-github-repo-url "^1.3.0"
-    require-relative "^0.8.7"
-    semver "^5.4.1"
-
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
   dependencies:
     semver "^5.0.3"
 
-"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
-"semver@2 || 3 || 4":
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
-
 semver@^5.0.3, semver@^5.1.0, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -8801,6 +7877,10 @@ send@0.16.1:
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
+serialize-javascript@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
+
 serve-index@^1.7.2:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -8881,7 +7961,16 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallowequal@^1.0.1:
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
+shallowequal@^1.0.1, shallowequal@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
 
@@ -8920,12 +8009,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  dependencies:
-    is-arrayish "^0.3.1"
-
 sinon@1.x:
   version "1.17.7"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-1.17.7.tgz#4542a4f49ba0c45c05eb2e9dd9d203e2b8efe0bf"
@@ -8935,12 +8018,6 @@ sinon@1.x:
     samsam "1.1.2"
     util ">=0.10.3 <1"
 
-skeleton-loader@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/skeleton-loader/-/skeleton-loader-1.1.5.tgz#9470b85436c1729f10c1ea9f7e921a713f4f06a9"
-  dependencies:
-    loader-utils "^1.1.0"
-
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -8949,14 +8026,6 @@ slice-ansi@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
 
-slick-carousel@^1.6.0:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
-
-slide@^1.1.3:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
-
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -9020,12 +8089,6 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sort-keys@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
-  dependencies:
-    is-plain-obj "^1.0.0"
-
 source-list-map@^0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
@@ -9044,7 +8107,7 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@0.4.18, source-map-support@^0.4.15:
+source-map-support@^0.4.15:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
   dependencies:
@@ -9062,7 +8125,7 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@0.6.1, source-map@^0.6.1, source-map@~0.6.1:
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -9078,12 +8141,6 @@ source-map@~0.2.0:
   dependencies:
     amdefine ">=0.0.4"
 
-sourcemapped-stacktrace@^1.1.6:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688"
-  dependencies:
-    source-map "0.5.6"
-
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -9127,18 +8184,6 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-split2@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
-  dependencies:
-    through2 "^2.0.2"
-
-split@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
-  dependencies:
-    through "2"
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -9157,15 +8202,11 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
-ssri@^4.1.2:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-4.1.6.tgz#0cb49b6ac84457e7bdd466cb730c3cb623e9a25b"
+ssri@^5.2.4:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
   dependencies:
-    safe-buffer "^5.1.0"
-
-stackframe@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+    safe-buffer "^5.1.1"
 
 stackframe@^1.0.3:
   version "1.0.4"
@@ -9186,7 +8227,7 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.2.1 < 2", "statuses@>= 1.3.1 < 2":
+"statuses@>= 1.3.1 < 2":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
 
@@ -9207,6 +8248,13 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
+stream-each@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
 stream-http@^2.7.2:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.0.tgz#fd86546dac9b1c91aff8fc5d287b98fafb41bc10"
@@ -9217,6 +8265,10 @@ stream-http@^2.7.2:
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+
 stream-to-observable@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
@@ -9229,7 +8281,7 @@ string-convert@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
 
-string-hash@1.1.3, string-hash@^1.1.1:
+string-hash@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
 
@@ -9275,6 +8327,12 @@ string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.0"
+
 stringstream@~0.0.4, stringstream@~0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
@@ -9325,25 +8383,25 @@ style-loader@0.17.0:
   dependencies:
     loader-utils "^1.0.2"
 
-styled-jsx@2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
+styled-jsx@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.6.tgz#7e826279e1ef718213ef9cc42ac7370b5008449d"
   dependencies:
     babel-plugin-syntax-jsx "6.18.0"
     babel-types "6.26.0"
     convert-source-map "1.5.1"
     source-map "0.6.1"
     string-hash "1.1.3"
-    stylis "3.4.5"
-    stylis-rule-sheet "0.0.7"
+    stylis "3.4.10"
+    stylis-rule-sheet "0.0.8"
 
-stylis-rule-sheet@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
+stylis-rule-sheet@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.8.tgz#b0d0a126c945b1f3047447a3aae0647013e8d166"
 
-stylis@3.4.5:
-  version "3.4.5"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
+stylis@3.4.10:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.10.tgz#a135cab4b9ff208e327fbb5a6fde3fa991c638ee"
 
 supports-color@4.4.0:
   version "4.4.0"
@@ -9379,9 +8437,9 @@ supports-color@^5.1.0:
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.2.0.tgz#b0d5333b1184dd3666cbe5aa0b45c5ac7ac17a4a"
+supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
   dependencies:
     has-flag "^3.0.0"
 
@@ -9490,10 +8548,6 @@ test-exclude@^4.1.1:
     read-pkg-up "^1.0.1"
     require-main-filename "^1.0.1"
 
-text-extensions@^1.0.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.7.0.tgz#faaaba2625ed746d568a23e4d0aacd9bf08a8b39"
-
 text-table@0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -9514,14 +8568,14 @@ throat@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-3.2.0.tgz#50cb0670edbc40237b9e347d7e1f88e4620af836"
 
-through2@^2.0.0, through2@^2.0.2:
+through2@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
   dependencies:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@2, "through@>=2.2.7 <3", through@^2.3.6:
+through@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
@@ -9533,7 +8587,7 @@ time-stamp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
 
-timed-out@^4.0.0, timed-out@^4.0.1:
+timed-out@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
 
@@ -9614,41 +8668,10 @@ tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
 
-trash@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/trash/-/trash-4.0.1.tgz#b3ce5a4d862b1c655bef818ae7e084efce6e4c2d"
-  dependencies:
-    escape-string-applescript "^1.0.0"
-    fs-extra "^0.30.0"
-    globby "^6.0.0"
-    path-exists "^3.0.0"
-    pify "^2.3.0"
-    run-applescript "^3.0.0"
-    uuid "^2.0.1"
-    xdg-trashdir "^2.0.0"
-
-travis-deploy-once@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/travis-deploy-once/-/travis-deploy-once-3.3.0.tgz#066800f8f76db401479b1c5edf0c5c03d3621981"
-  dependencies:
-    chalk "^2.1.0"
-    got "^8.0.1"
-    p-retry "^1.0.0"
-    semver "^5.4.1"
-    url-join "^2.0.2"
-
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
 
-trim-newlines@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
-
-trim-off-newlines@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
-
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
@@ -9671,6 +8694,10 @@ trough@^1.0.0:
   dependencies:
     glob "^6.0.4"
 
+tryer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.0.tgz#027b69fa823225e551cace3ef03b11f6ab37c1d7"
+
 tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
@@ -9726,6 +8753,13 @@ ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
+uglify-es@^3.3.4:
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
+  dependencies:
+    commander "~2.13.0"
+    source-map "~0.6.1"
+
 uglify-js@3.3.x, uglify-js@^3.0.13:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.9.tgz#33869666c8ab7f7658ce3d22f0f1ced40097d33a"
@@ -9746,6 +8780,19 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+uglifyjs-webpack-plugin@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.6.tgz#f4ba8449edcf17835c18ba6ae99b9d610857fb19"
+  dependencies:
+    cacache "^10.0.1"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.2"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
 uglifyjs-webpack-plugin@^0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
@@ -9754,18 +8801,10 @@ uglifyjs-webpack-plugin@^0.4.6:
     uglify-js "^2.8.29"
     webpack-sources "^1.0.1"
 
-uid-number@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.5.tgz#5a3db23ef5dbd55b81fce0ec9a2ac6fccdebb81e"
-
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
 
-ultron@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
-
 unfetch@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-3.0.0.tgz#8d1e0513a4ecd0e5ff2d41a6ba77771aae8b6482"
@@ -9812,6 +8851,18 @@ uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
 
+unique-filename@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.0.tgz#d05f2fe4032560871f30e93cbe735eea201514f3"
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.0.tgz#db6676e7c7cc0629878ff196097c78855ae9f4ab"
+  dependencies:
+    imurmurhash "^0.1.4"
+
 unique-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
@@ -9838,17 +8889,6 @@ unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
   dependencies:
     unist-util-is "^2.1.1"
 
-units-css@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07"
-  dependencies:
-    isnumeric "^0.2.0"
-    viewport-dimensions "^0.2.0"
-
-universalify@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -9864,7 +8904,7 @@ unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
-update-notifier@^2.3.0:
+update-notifier@2.3.0, update-notifier@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
   dependencies:
@@ -9882,6 +8922,12 @@ upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
 
+uri-js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-3.0.2.tgz#f90b858507f81dea4dcfbb3c4c3dbfa2b557faaa"
+  dependencies:
+    punycode "^2.1.0"
+
 urijs@^1.16.1:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.0.tgz#d8aa284d0e7469703a6988ad045c4cbfdf08ada0"
@@ -9890,10 +8936,6 @@ urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
 
-url-join@^2.0.2:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
-
 url-loader@0.5.8:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.8.tgz#b9183b1801e0f847718673673040bc9dc1c715c5"
@@ -9907,12 +8949,6 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-url-parse-lax@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
-  dependencies:
-    prepend-http "^2.0.0"
-
 url-parse@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
@@ -9927,10 +8963,6 @@ url-parse@^1.1.8:
     querystringify "~1.0.0"
     requires-port "1.0.x"
 
-url-to-options@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
-
 url@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
@@ -9953,10 +8985,6 @@ use@^2.0.0:
     isobject "^3.0.0"
     lazy-cache "^2.0.2"
 
-user-home@^1.0.0, user-home@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
-
 user-home@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
@@ -9989,10 +9017,6 @@ uuid@3.1.0, uuid@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
 
-uuid@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
-
 uuid@^3.0.0, uuid@^3.0.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
@@ -10004,12 +9028,6 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
-validate-npm-package-name@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
-  dependencies:
-    builtins "^1.0.3"
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -10045,17 +9063,13 @@ vfile@^2.0.0:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
-viewport-dimensions@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/viewport-dimensions/-/viewport-dimensions-0.2.0.tgz#de740747db5387fd1725f5175e91bac76afdf36c"
-
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
   dependencies:
     indexof "0.0.1"
 
-walk@2.3.9, walk@^2.3.9:
+walk@2.3.9:
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/walk/-/walk-2.3.9.tgz#31b4db6678f2ae01c39ea9fb8725a9031e558a7b"
   dependencies:
@@ -10093,21 +9107,22 @@ webidl-conversions@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
 
-webpack-bundle-analyzer@^2.9.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.1.tgz#c2c8e03e8e5768ed288b39ae9e27a8b8d7b9d476"
+webpack-bundle-analyzer@2.11.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.11.1.tgz#b9fbfb6a32c0a8c1c3237223e90890796b950ab9"
   dependencies:
-    acorn "^5.1.1"
-    chalk "^1.1.3"
-    commander "^2.9.0"
-    ejs "^2.5.6"
-    express "^4.15.2"
-    filesize "^3.5.9"
-    gzip-size "^3.0.0"
+    acorn "^5.3.0"
+    bfj-node4 "^5.2.0"
+    chalk "^2.3.0"
+    commander "^2.13.0"
+    ejs "^2.5.7"
+    express "^4.16.2"
+    filesize "^3.5.11"
+    gzip-size "^4.1.0"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     opener "^1.4.3"
-    ws "^3.3.1"
+    ws "^4.0.0"
 
 webpack-dev-middleware@1.12.0:
   version "1.12.0"
@@ -10177,41 +9192,14 @@ webpack-manifest-plugin@1.1.0:
     fs-extra "^0.30.0"
     lodash ">=3.5 <5"
 
-webpack-sources@^1.0.1:
+webpack-sources@1.1.0, webpack-sources@^1.0.1, webpack-sources@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
   dependencies:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc"
-  dependencies:
-    acorn "^5.0.0"
-    acorn-dynamic-import "^2.0.0"
-    ajv "^5.1.5"
-    ajv-keywords "^2.0.0"
-    async "^2.1.2"
-    enhanced-resolve "^3.4.0"
-    escope "^3.6.0"
-    interpret "^1.0.0"
-    json-loader "^0.5.4"
-    json5 "^0.5.1"
-    loader-runner "^2.3.0"
-    loader-utils "^1.1.0"
-    memory-fs "~0.4.1"
-    mkdirp "~0.5.0"
-    node-libs-browser "^2.0.0"
-    source-map "^0.5.3"
-    supports-color "^4.2.1"
-    tapable "^0.2.7"
-    uglifyjs-webpack-plugin "^0.4.6"
-    watchpack "^1.4.0"
-    webpack-sources "^1.0.1"
-    yargs "^8.0.2"
-
-webpack@^3.6.0:
+webpack@3.10.0, webpack@^3.6.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.10.0.tgz#5291b875078cf2abf42bdd23afe3f8f96c17d725"
   dependencies:
@@ -10283,7 +9271,7 @@ which@1, which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
-which@^1.2.10, which@^1.2.12, which@^1.2.8:
+which@^1.2.10, which@^1.2.12:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
   dependencies:
@@ -10320,6 +9308,12 @@ worker-farm@^1.3.1:
     errno ">=0.1.1 <0.2.0-0"
     xtend ">=4.0.0 <4.1.0-0"
 
+worker-farm@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
+  dependencies:
+    errno "~0.1.7"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@@ -10356,13 +9350,12 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^3.3.1:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+ws@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-4.1.0.tgz#a979b5d7d4da68bf54efe0408967c324869a7289"
   dependencies:
     async-limiter "~1.0.0"
     safe-buffer "~5.1.0"
-    ultron "~1.1.0"
 
 x-is-function@^1.0.4:
   version "1.0.4"
@@ -10372,27 +9365,10 @@ x-is-string@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
 
-xdg-basedir@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-1.0.1.tgz#14ff8f63a4fdbcb05d5b6eea22b36f3033b9f04e"
-  dependencies:
-    user-home "^1.0.0"
-
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
 
-xdg-trashdir@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/xdg-trashdir/-/xdg-trashdir-2.1.0.tgz#57e33efed7e68d68fd46b5d7344abab37107030c"
-  dependencies:
-    "@sindresorhus/df" "^1.0.1"
-    mount-point "^1.0.0"
-    pify "^2.2.0"
-    pinkie-promise "^1.0.0"
-    user-home "^1.1.0"
-    xdg-basedir "^1.0.0"
-
 xml-char-classes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
@@ -10425,10 +9401,6 @@ xmlbuilder@~9.0.1:
   version "9.0.4"
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
 
-xss-filters@1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/xss-filters/-/xss-filters-1.2.7.tgz#59fa1de201f36f2f3470dcac5f58ccc2830b0a9a"
-
 "xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
@@ -10437,6 +9409,10 @@ y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
 
+y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"