diff --git a/scss/_breakpoints.scss b/scss/_breakpoints.scss
index a5b35f4..9d8d423 100644
--- a/scss/_breakpoints.scss
+++ b/scss/_breakpoints.scss
@@ -9,13 +9,13 @@
 //
 // Styleguide 1.2.1
 $spacers: (
-        xxs: 0.25rem,
-        xs: 0.5rem,
-        sm: 1rem,
-        md: 1.5rem,
-        lg: 2rem,
-        xl: 3rem,
-        xxl: 4rem
+  xxs: 0.25rem,
+  xs: 0.5rem,
+  sm: 1rem,
+  md: 1.5rem,
+  lg: 2rem,
+  xl: 3rem,
+  xxl: 4rem
 ) !default;
 
 // $grid-breakpoints
@@ -24,14 +24,14 @@ $spacers: (
 //
 // Styleguide 1.2.2
 $grid-breakpoints: (
-        sm: 0rem,
-        md: 48rem,
-        lg: 64rem,
-        xl: 90rem
+  sm: 0,
+  md: 48rem,
+  lg: 64rem,
+  xl: 90rem
 ) !default;
 
-$grid-breakpoints-max:(
-        sm: 47.9375rem,
-        md: 63.9375rem,
-        lg: 89.9375rem
+$grid-breakpoints-max: (
+  sm: 47.9375rem,
+  md: 63.9375rem,
+  lg: 89.9375rem
 ) !default;
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index ca5d309..ddc4705 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -21,50 +21,52 @@
 // Styleguide 6.0.0
 
 .btn {
+  background-color: $primary-color;
+  border: 2px solid transparent;
+  border-radius: 2px;
+  color: $ui-btn-white-color;
   display: inline-block;
-  &.btn-block{
-    display: block;
-  }
   font-family: $secondary-font-family;
-  font-weight: $font-weight-bold;
   font-size: calculateRem(16px);
+  font-weight: $font-weight-bold;
   line-height: $headings-line-height;
-  color: $ui-btn-white-color;
-  background-color: $primary-color;
+
+  padding: map-get($spacers, 'sm') map-get($spacers, 'md');
   text-align: center;
-  vertical-align: middle;
+  transition: all 0.3s ease 0s;
   // box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
   user-select: none;
-  border: 2px solid transparent;
-  border-radius: 2px;
-  transition: all 0.3s ease 0s;
+  vertical-align: middle;
+
+  &.btn-block {
+    display: block;
+  }
 
-  padding: map-get($spacers, "sm") map-get($spacers, "md");
   &.btn-lg {
-    padding: map-get($spacers, "md") map-get($spacers, "md");
+    padding: map-get($spacers, 'md') map-get($spacers, 'md');
   }
 
   &.btn-sm {
-    padding: map-get($spacers, "xs") map-get($spacers, "md");
+    padding: map-get($spacers, 'xs') map-get($spacers, 'md');
   }
 
   &.disabled,
   &:disabled {
+    background-color: #b8c1cb;
     color: $ui-btn-white-color;
-    background-color: #B8C1CB;
   }
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled):hover {
     &:hover {
-      background-color: lighten( $primary-color, 20% );
+      background-color: lighten($primary-color, 20%);
       text-decoration: none;
     }
 
 
     &:active {
-      background-color: lighten( $primary-color, 20% );
-      border: 2px solid rgba(0,0,0,0.25);
+      background-color: lighten($primary-color, 20%);
+      border: 2px solid rgba(0, 0, 0, 0.25);
     }
   }
 
@@ -72,23 +74,23 @@
 }
 
 .btn-outline {
-  color: $primary-color;
   background-color: transparent;
   border: 1px solid $primary-color;
+  color: $primary-color;
 
   &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled):hover{
+  &:not(:disabled):not(.disabled):hover {
     &:hover {
+      background-color: lighten($primary-color, 20%);
       color: $ui-btn-white-color;
-      background-color: lighten( $primary-color, 20% );
       text-decoration: none;
     }
 
 
     &:active {
+      background-color: lighten($primary-color, 20%);
+      border: 2px solid rgba(0, 0, 0, 0.25);
       color: $ui-btn-white-color;
-      background-color: lighten( $primary-color, 20% );
-      border: 2px solid rgba(0,0,0,0.25);
     }
   }
 
@@ -97,20 +99,20 @@
 
 @each $color, $value in $button-state-colors {
   .btn-#{$color} {
-    color: $ui-btn-white-color;
     background-color: $value;
+    color: $ui-btn-white-color;
 
     &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled):hover{
+    &:not(:disabled):not(.disabled):hover {
       &:hover {
-        background-color: lighten( $value, 20% );
+        background-color: lighten($value, 20%);
         text-decoration: none;
       }
 
 
       &:active {
-        background-color: lighten( $value, 20% );
-        border: 2px solid rgba(0,0,0,0.25);
+        background-color: lighten($value, 20%);
+        border: 2px solid rgba(0, 0, 0, 0.25);
       }
     }
 
@@ -119,24 +121,24 @@
 
 @each $color, $value in $button-state-colors {
   .btn-outline-#{$color} {
-    color: $value;
-    border: 1px solid $value;
     background-color: transparent;
+    border: 1px solid $value;
+    color: $value;
 
     &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled):hover{
+    &:not(:disabled):not(.disabled):hover {
       &:hover {
-        color: $ui-btn-white-color;
+        background-color: lighten($value, 20%);
         border: 1px solid transparent;
-        background-color: lighten( $value, 20% );
+        color: $ui-btn-white-color;
         text-decoration: none;
       }
 
 
       &:active {
+        background-color: lighten($value, 20%);
+        border: 2px solid rgba(0, 0, 0, 0.25);
         color: $ui-btn-white-color;
-        background-color: lighten( $value, 20% );
-        border: 2px solid rgba(0,0,0,0.25);
       }
     }
 
diff --git a/scss/_colors.scss b/scss/_colors.scss
index ab64d5e..e4e6fd3 100644
--- a/scss/_colors.scss
+++ b/scss/_colors.scss
@@ -23,27 +23,27 @@
 //
 //
 // Styleguide 3.1.0
-$primary-color: #1B6FA6 !default;
+$primary-color: #1b6fa6 !default;
 $secondary-color: $primary-color !default;
-$success-color: #00A321 !default;
-$warning-color: #E07000 !default;
-$danger-color: #DB0A07 !default;
-$ui-light-gray: #DADADA !default;
+$success-color: #00a321 !default;
+$warning-color: #e07000 !default;
+$danger-color: #db0a07 !default;
+$ui-light-gray: #dadada !default;
 $ui-medium-gray: #575757 !default;
 $ui-dark-gray: #191919 !default;
 $border-rule-color: $ui-light-gray !default;
-$image-caption-rule-color: #9A9A9A !default;
+$image-caption-rule-color: #9a9a9a !default;
 $ui-primary-font-color: #191919 !default;
 $ui-primary-header-color: $ui-dark-gray !default;
 $link-color: $primary-color !default;
 $ui-dark-secondary-color: $ui-dark-gray;
 
-$ui-btn-white-color: #FFFFFF;
+$ui-btn-white-color: #fff;
 $button-state-colors: (
-        success: $success-color,
-        warning: $warning-color,
-        danger: $danger-color,
-)
+  success: $success-color,
+  warning: $warning-color,
+  danger: $danger-color,
+);
 
 
 
diff --git a/scss/_css_reset.scss b/scss/_css_reset.scss
index 135227d..6e5ed4d 100644
--- a/scss/_css_reset.scss
+++ b/scss/_css_reset.scss
@@ -8,27 +8,39 @@ html {
 * {
   box-sizing: inherit;
 
-  &:before, &:after {
+  &::before,
+  &::after {
     box-sizing: inherit;
   }
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  font-weight: normal;
   margin: 0;
   padding: 0;
-  font-weight: normal;
 }
 
-html, body {
-  width: 100%;
+html,
+body {
   height: 100%;
+  width: 100%;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
 
 img {
-  max-width: 100%;
   height: auto;
+  max-width: 100%;
 }
diff --git a/scss/_functions.scss b/scss/_functions.scss
index c620b26..3607c44 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 // Scss Functions
 //
 // Styleguide 1.3.0
@@ -27,8 +27,7 @@
     $character: str-slice($value, $i, $i);
 
     @if not (index(map-keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
-    }
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i)); }
 
     @if $character == '.' {
       $digits: 1;
@@ -96,7 +95,7 @@
 // $size:   Can be either a number or string with the 'px' added
 //
 // Styleguide 1.3.5
-@function calculateRem($size){
+@function calculateRem($size) {
   $size: strip-unit($size);
   $remSize: $size / $default-font-size;
   @return #{$remSize}rem;
diff --git a/scss/_index.scss b/scss/_index.scss
index b43069f..1fcdfe2 100644
--- a/scss/_index.scss
+++ b/scss/_index.scss
@@ -3,41 +3,54 @@ html {
   font-size: 16px;
 }
 
-*, *:before, *:after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  font-weight: normal;
   margin: 0;
   padding: 0;
-  font-weight: normal;
 }
 
-html, body {
-  width: 100%;
+html,
+body {
   height: 100%;
+  width: 100%;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
 
 img {
-  max-width: 100%;
   height: auto;
+  max-width: 100%;
 }
 
-@import "./variables";
-@import "./functions";
-@import "./breakpoints";
-@import "./margins";
-@import "./mixins";
-@import "./padding";
-@import "./colors";
-@import "./typography/index";
-@import "grid/index";
-@import "utils/utils";
-@import "./buttons";
-@import "./links";
-@import "components/figure_caption";
-@import "components/chain_spacing";
+@import './variables';
+@import './functions';
+@import './breakpoints';
+@import './margins';
+@import './mixins';
+@import './padding';
+@import './colors';
+@import './typography/index';
+@import 'grid/index';
+@import 'utils/utils';
+@import './buttons';
+@import './links';
+@import 'components/figure_caption';
+@import 'components/chain_spacing';
diff --git a/scss/_links.scss b/scss/_links.scss
index cf4ac32..23415f9 100644
--- a/scss/_links.scss
+++ b/scss/_links.scss
@@ -6,14 +6,21 @@
 
 a {
   transition: color 0.3s ease;
-  &:active, &:hover{
+
+  &:active,
+  &:hover {
     color: lighten($ui-primary-font-color, 40%);
   }
 }
 
-a img, a video, a figure, a picture{
+a img,
+a video,
+a figure,
+a picture {
   transition: opacity 0.3s ease;
-  &:active, &:hover{
+
+  &:active,
+  &:hover {
     opacity: 0.7;
   }
 }
diff --git a/scss/_margins.scss b/scss/_margins.scss
index af9479d..3d3f406 100644
--- a/scss/_margins.scss
+++ b/scss/_margins.scss
@@ -29,19 +29,19 @@
 // Styleguide 7.1.0
 
 @each $name, $size in $spacers {
-  .margin-#{$name}-left{
+  .margin-#{$name}-left {
     margin-left: $size;
   }
-  .margin-#{$name}-right{
+  .margin-#{$name}-right {
     margin-right: $size;
   }
-  .margin-#{$name}-top{
+  .margin-#{$name}-top {
     margin-top: $size;
   }
-  .margin-#{$name}-bottom{
+  .margin-#{$name}-bottom {
     margin-bottom: $size;
   }
-  .margin-#{$name}-all{
+  .margin-#{$name}-all {
     margin: $size;
   }
 }
@@ -57,7 +57,7 @@
 .block-margin-bottom {
   margin-bottom: map-get($spacers, 'sm');
 
-  @media screen and (min-width: map-get($grid-breakpoints, 'md')){
+  @media screen and (min-width: map-get($grid-breakpoints, 'md')) {
     margin-bottom: map-get($spacers, 'md');
   }
 }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 4f272a5..4abcebf 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -9,7 +9,7 @@
 @mixin block-margin-bottom {
   margin-bottom: map-get($spacers, 'sm');
 
-  @media screen and (min-width: map-get($grid-breakpoints, 'md')){
+  @media screen and (min-width: map-get($grid-breakpoints, 'md')) {
     margin-bottom: map-get($spacers, 'md');
   }
 }
@@ -26,7 +26,9 @@
 
 @mixin link-color-active-hover($color-prop:$ui-primary-font-color) {
   transition: color 0.3s ease;
-  &:active, &:hover{
+
+  &:active,
+  &:hover {
     color: lighten($color-prop, 40%);
   }
 }
@@ -42,7 +44,9 @@
 
 @mixin svg-color-active-hover($color-prop:$ui-primary-font-color) {
   transition: fill 0.3s ease;
-  &:active svg, &:hover svg{
+
+  &:active svg,
+  &:hover svg {
     fill: lighten($color-prop, 20%);
   }
 }
diff --git a/scss/_padding.scss b/scss/_padding.scss
index 903c139..4ad7f5b 100644
--- a/scss/_padding.scss
+++ b/scss/_padding.scss
@@ -25,19 +25,19 @@
 
 
 @each $name, $size in $spacers {
-  .padding-#{$name}-left{
+  .padding-#{$name}-left {
     padding-left: $size;
   }
-  .padding-#{$name}-right{
+  .padding-#{$name}-right {
     padding-right: $size;
   }
-  .padding-#{$name}-top{
+  .padding-#{$name}-top {
     padding-top: $size;
   }
-  .padding-#{$name}-bottom{
+  .padding-#{$name}-bottom {
     padding-bottom: $size;
   }
-  .padding-#{$name}-all{
+  .padding-#{$name}-all {
     padding: $size;
   }
 
diff --git a/scss/_sassOnly.scss b/scss/_sassOnly.scss
index 9ff38ca..33e11a8 100644
--- a/scss/_sassOnly.scss
+++ b/scss/_sassOnly.scss
@@ -1,5 +1,5 @@
-@import "variables";
-@import "breakpoints";
-@import "functions";
-@import "colors";
-@import "mixins";
+@import 'variables';
+@import 'breakpoints';
+@import 'functions';
+@import 'colors';
+@import 'mixins';
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b65f2c6..51d7eae 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -36,7 +36,7 @@ $base-col-percent: 100% / $grid-columns;
 // Sass variable that sets the primary font family.
 //
 // Styleguide 1.1.3
-$primary-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !default;
+$primary-font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !default;
 
 // $secondary-font-family
 //
diff --git a/scss/components/_figure_caption.scss b/scss/components/_figure_caption.scss
index cc0f067..48f2e3a 100644
--- a/scss/components/_figure_caption.scss
+++ b/scss/components/_figure_caption.scss
@@ -1,22 +1,23 @@
-figcaption, figcaption p {
-  color:  $image-caption-rule-color;
-  font-size:  calculateRem(14px);
-  line-height:  calculateRem(20px);
-  font-style:  normal;
-  font-weight:  normal;
+figcaption,
+figcaption p {
+  color: $image-caption-rule-color;
+  font-size: calculateRem(14px);
+  font-style: normal;
+  font-weight: normal;
+  line-height: calculateRem(20px);
 
-  p{
+  p {
     display: inline;
-    margin:0;
+    margin: 0;
   }
-  @media screen and (max-width: map-get($grid-breakpoints, 'sm')){
-    font-size:  calculateRem(14px);
-    line-height:  calculateRem(20px);
+  @media screen and (max-width: map-get($grid-breakpoints, 'sm')) {
+    font-size: calculateRem(14px);
+    line-height: calculateRem(20px);
 
   }
 
   @media screen and (max-width: map-get($grid-breakpoints, 'md')) {
-    font-size:  calculateRem(14px);
-    line-height:  calculateRem(20px);
+    font-size: calculateRem(14px);
+    line-height: calculateRem(20px);
   }
 }
diff --git a/scss/grid/_grid_column.scss b/scss/grid/_grid_column.scss
index cdd501d..eb33b62 100644
--- a/scss/grid/_grid_column.scss
+++ b/scss/grid/_grid_column.scss
@@ -42,7 +42,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -55,7 +55,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -68,7 +68,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -81,7 +81,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -96,7 +96,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -109,7 +109,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -122,7 +122,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -137,7 +137,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -150,7 +150,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -165,7 +165,7 @@
       }@else {
         flex: 0 0 auto;
       }
-      @supports (display: grid){
+      @supports (display: grid) {
         grid-column-start: span #{$i};
       }
     }
@@ -184,9 +184,9 @@
 }
 
 //IE flex fix
-.ie-flex-100-percent-sm{
+.ie-flex-100-percent-sm {
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    @media (min-width: map-get($grid-breakpoints, 'sm')) and (max-width: map-get($grid-breakpoints-max, 'sm')){
+    @media (min-width: map-get($grid-breakpoints, 'sm')) and (max-width: map-get($grid-breakpoints-max, 'sm')) {
       flex: 1 0 100% !important;
     }
   }
diff --git a/scss/grid/_grid_column_offset.scss b/scss/grid/_grid_column_offset.scss
index b99a9f7..3d21add 100644
--- a/scss/grid/_grid_column_offset.scss
+++ b/scss/grid/_grid_column_offset.scss
@@ -26,8 +26,8 @@
   @media (min-width: #{$breakpoint}) {
     @for $i from 1 through $grid-columns {
       @for $y from 1 through $grid-columns {
-           //Differs from bootstrap from the point that it specifies the index of a column to start (vs offset)
-           //example: col-start-6 col-4 (start at col 6 columns and occupy 4 columns
+        //Differs from bootstrap from the point that it specifies the index of a column to start (vs offset)
+        //example: col-start-6 col-4 (start at col 6 columns and occupy 4 columns
         .col-start-#{$label}-#{$y}.col-#{$label}-#{$i} {
           grid-column: #{$y} / span #{$i};
         }
diff --git a/scss/grid/_grid_containers.scss b/scss/grid/_grid_containers.scss
index 934afc6..680e624 100644
--- a/scss/grid/_grid_containers.scss
+++ b/scss/grid/_grid_containers.scss
@@ -10,9 +10,9 @@
 //
 // Styleguide 2.1.0
 .container-fluid {
-  width: 100%;
   margin-left: auto;
   margin-right: auto;
+  width: 100%;
 }
 
 // .container
@@ -32,17 +32,17 @@
 .container {
   margin-left: 5%;
   margin-right: 5%;
-  max-width: map-get($grid-breakpoints, "xl");
+  max-width: map-get($grid-breakpoints, 'xl');
 
 
 
   //Margins stay at 5% for `sm` and `md` grid breakpoints
   @each $name, $size in $grid-breakpoints {
     @media (min-width: $size) {
-      @if $name == "lg" {
+      @if $name == 'lg' {
         margin-left: 8%;
         margin-right: 8%;
-      } @else if $name == "xl" {
+      } @else if $name == 'xl' {
         margin-left: auto;
         margin-right: auto;
       }
diff --git a/scss/grid/_grid_mixins.scss b/scss/grid/_grid_mixins.scss
index 6c7e1fe..b45ac6e 100644
--- a/scss/grid/_grid_mixins.scss
+++ b/scss/grid/_grid_mixins.scss
@@ -4,7 +4,7 @@ $ms-row-gap: null;
 $ms-col-count: null;
 $ms-row-count: null;
 
-@function repeat($iterationCount, $val: 1fr){
+@function repeat($iterationCount, $val: 1fr) {
   $res: ();
   @for $i from 1 through $iterationCount {
     $res: append($res, $val, space);
@@ -12,61 +12,61 @@ $ms-row-count: null;
   @return $res;
 }
 
-@mixin grid-column-start($spanNum){
+@mixin grid-column-start($spanNum) {
   -ms-grid-column: span #{$spanNum};
   grid-column-start: span #{$spanNum};
   @content;
 }
 
-@mixin grid-column($start: auto, $span: 1){
+@mixin grid-column($start: auto, $span: 1) {
   //  apply fake grid gap via margin for browsers that don't support grid-column-gap
   @if $ms-col-gap and not $ms-col-count and $start != 1 {
     margin-left: $ms-col-gap;
-    @supports (grid-column-gap: 1px){ margin-left: 0; }
+    @supports (grid-column-gap: 1px) { margin-left: 0; }
   }
   -ms-grid-column: if($ms-col-count, $start + $start - 1, $start);
-  -ms-grid-column-span: if($ms-col-count, $span + $span - 1, $span);
   grid-column: span #{$span};
+  -ms-grid-column-span: if($ms-col-count, $span + $span - 1, $span);
   @content;
 }
 
-@mixin grid-row($start: auto, $span: 1){
+@mixin grid-row($start: auto, $span: 1) {
   //  grid-row-gap using top margin
   @if $ms-row-gap and not $ms-row-count and $start != 1 {
     margin-top: $ms-row-gap;
-    @supports (grid-row-gap: 1px){ margin-top: 0; }
+    @supports (grid-row-gap: 1px) { margin-top: 0; }
   }
   -ms-grid-row: if($ms-row-count, $start + $start - 1, $start);
-  -ms-grid-row-span: if($ms-row-count, $span + $span - 1, $span);
   grid-row: #{$start}/#{$start + $span};
+  -ms-grid-row-span: if($ms-row-count, $span + $span - 1, $span);
   @content;
 }
 
-@mixin grid-cell($col-start: auto, $col-span: 1, $row-start: auto, $row-span: 1){
+@mixin grid-cell($col-start: auto, $col-span: 1, $row-start: auto, $row-span: 1) {
   @include grid-column($col-start, $col-span);
   @include grid-row($row-start, $row-span);
   @content;
 }
 
-@mixin grid-area($area){
+@mixin grid-area($area) {
   $area: map-get($grid-areas, $area);
   @include grid-column(nth($area, 1), nth($area, 2));
   @include grid-row(nth($area, 3), nth($area, 4));
   @content;
 }
 
-@mixin grid($grid-map){
+@mixin grid($grid-map) {
   //'gap' is the global gap - if col-gap and row-gap are in the map
   //then it uses those, if it doesn't then it looks for 'gap';
 
   $cols: map-get($grid-map, cols);
   $rows: map-get($grid-map, rows);
-  $gap:  map-get($grid-map, gap);
+  $gap: map-get($grid-map, gap);
 
-  $col-gap:  map-get($grid-map, col-gap);
+  $col-gap: map-get($grid-map, col-gap);
   $col-gap: if($col-gap, $col-gap, $gap);
 
-  $row-gap:  map-get($grid-map, row-gap);
+  $row-gap: map-get($grid-map, row-gap);
   $row-gap: if($row-gap, $row-gap, $gap);
 
   //  if cols or rows have one paramter and unitless, convert them to FR units
@@ -89,10 +89,10 @@ $ms-row-count: null;
   @if $col-gap and $cols {
     $ms-cols: ();
     @each $col in $cols {
-      $ms-cols: if( type-of($col) == list, join($ms-cols, $col), append($ms-cols, $col));
+      $ms-cols: if(type-of($col) == list, join($ms-cols, $col), append($ms-cols, $col));
     }
-    @for $i from 1 through length($ms-cols) - 1{
-      $ms-cols: set-nth($ms-cols, $i, nth($ms-cols,$i) $col-gap);
+    @for $i from 1 through length($ms-cols) - 1 {
+      $ms-cols: set-nth($ms-cols, $i, nth($ms-cols, $i) $col-gap);
     }
     //  globalize ms col count (used by grid-column)
     $ms-col-count: length($ms-cols) !global;
@@ -101,10 +101,10 @@ $ms-row-count: null;
   @if $row-gap and $rows {
     $ms-rows: ();
     @each $row in $rows {
-      $ms-rows: if( type-of($row) == list, join($ms-rows, $row), append($ms-rows, $row));
+      $ms-rows: if(type-of($row) == list, join($ms-rows, $row), append($ms-rows, $row));
     }
     @for $i from 1 through length($ms-rows) - 1 {
-      $ms-rows: set-nth($ms-rows, $i, nth($ms-rows,$i) $row-gap);
+      $ms-rows: set-nth($ms-rows, $i, nth($ms-rows, $i) $row-gap);
     }
     //  globalize ms-row-count (used by grid-row)
     $ms-row-count: length($ms-rows) !global;
@@ -116,13 +116,13 @@ $ms-row-count: null;
   display: -ms-grid;
   display: grid;
 
+  grid-column-gap: $col-gap;
+
   -ms-grid-columns: $ms-cols or $cols;
+  grid-row-gap: $row-gap;
   -ms-grid-rows: $ms-rows or $rows;
 
   grid-template-columns: $cols;
   grid-template-rows: $rows;
-
-  grid-column-gap: $col-gap;
-  grid-row-gap: $row-gap;
   @content;
 }
diff --git a/scss/grid/_grid_row.scss b/scss/grid/_grid_row.scss
index 495b51d..7a9bf1c 100644
--- a/scss/grid/_grid_row.scss
+++ b/scss/grid/_grid_row.scss
@@ -10,41 +10,41 @@
 //
 // Styleguide 2.3.0
 .row {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 
-  @supports (display: grid){
+  width: 100%;
+
+  @supports (display: grid) {
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-column-gap: 0;
     grid-auto-flow: dense;
+    grid-column-gap: 0;
+    grid-template-columns: repeat(12, 1fr);
   }
 
-  width: 100%;
-
   @each $name, $size in $grid-breakpoints {
     @media (min-width: $size) {
-      @if $name == "md" {
-        @supports (display: grid){
-          grid-column-gap: map-get($spacers, "sm");
+      @if $name == 'md' {
+        @supports (display: grid) {
+          grid-column-gap: map-get($spacers, 'sm');
         }
-      } @else if $name == "lg" {
+      } @else if $name == 'lg' {
 
-        @supports (display: grid){
-          grid-column-gap: map-get($spacers, "lg");
+        @supports (display: grid) {
+          grid-column-gap: map-get($spacers, 'lg');
         }
 
-      } @else if $name == "xl" {
+      } @else if $name == 'xl' {
 
-        @supports (display: grid){
-          grid-column-gap: map-get($spacers, "lg");
+        @supports (display: grid) {
+          grid-column-gap: map-get($spacers, 'lg');
         }
       }
     }
diff --git a/scss/grid/_index.scss b/scss/grid/_index.scss
index 735a70c..37e4776 100644
--- a/scss/grid/_index.scss
+++ b/scss/grid/_index.scss
@@ -1,10 +1,10 @@
-@import "../variables";
-@import "../functions";
-@import "../breakpoints";
-@import "grid_mixins";
-@import "grid_containers";
-@import "grid_row";
-@import "grid_column";
+@import '../variables';
+@import '../functions';
+@import '../breakpoints';
+@import 'grid_mixins';
+@import 'grid_containers';
+@import 'grid_row';
+@import 'grid_column';
 //@import "grid_column_offset";
 
 // Grid
diff --git a/scss/index.scss b/scss/index.scss
index b43069f..1fcdfe2 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -3,41 +3,54 @@ html {
   font-size: 16px;
 }
 
-*, *:before, *:after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  font-weight: normal;
   margin: 0;
   padding: 0;
-  font-weight: normal;
 }
 
-html, body {
-  width: 100%;
+html,
+body {
   height: 100%;
+  width: 100%;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
 
 img {
-  max-width: 100%;
   height: auto;
+  max-width: 100%;
 }
 
-@import "./variables";
-@import "./functions";
-@import "./breakpoints";
-@import "./margins";
-@import "./mixins";
-@import "./padding";
-@import "./colors";
-@import "./typography/index";
-@import "grid/index";
-@import "utils/utils";
-@import "./buttons";
-@import "./links";
-@import "components/figure_caption";
-@import "components/chain_spacing";
+@import './variables';
+@import './functions';
+@import './breakpoints';
+@import './margins';
+@import './mixins';
+@import './padding';
+@import './colors';
+@import './typography/index';
+@import 'grid/index';
+@import 'utils/utils';
+@import './buttons';
+@import './links';
+@import 'components/figure_caption';
+@import 'components/chain_spacing';
diff --git a/scss/typography/_index.scss b/scss/typography/_index.scss
index 9cab221..2ddc238 100644
--- a/scss/typography/_index.scss
+++ b/scss/typography/_index.scss
@@ -13,14 +13,14 @@
 //
 // Styleguide 5.1.0
 
-body{
-  font-family: $primary-font-family;
+body {
   color: $ui-primary-font-color;
-  line-height: $line-height-base;
-  font-weight: $font-weight-normal;
+  font-family: $primary-font-family;
   font-size: calculateRem(16px);
+  font-weight: $font-weight-normal;
+  line-height: $line-height-base;
 
-  @media (min-width: map-get($grid-breakpoints, "md")) {
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
     font-size: calculateRem(18px);
   }
 }
@@ -54,68 +54,68 @@ body{
 //
 // Styleguide 5.2.0
 
-.defcon{
+.defcon {
   font-size: calculateRem(36px);
   line-height: $headings-line-height;
 
-  @media (min-width: map-get($grid-breakpoints, "md")) {
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
     font-size: calculateRem(52px);
   }
 }
 
 @for $index from 1 through 6 {
-  h#{$index}, .h#{$index}-primary, .h#{$index}-secondary{
+  h#{$index}, .h#{$index}-primary, .h#{$index}-secondary {
     font-weight: $font-weight-bold;
 
-    @if $index == 1{
+    @if $index == 1 {
       font-size: calculateRem(28px);
       line-height: calculateRem(32px);
 
-      @media (min-width: map-get($grid-breakpoints, "md")) {
+      @media (min-width: map-get($grid-breakpoints, 'md')) {
         font-size: calculateRem(41px);
         line-height: calculateRem(48px);
       }
     }
-    @else if $index == 2{
+    @else if $index == 2 {
       font-size: calculateRem(24px);
       line-height: calculateRem(32px);
 
-      @media (min-width: map-get($grid-breakpoints, "md")) {
+      @media (min-width: map-get($grid-breakpoints, 'md')) {
         font-size: calculateRem(36px);
         line-height: calculateRem(40px);
       }
     }
-    @else if $index == 3{
+    @else if $index == 3 {
       font-size: calculateRem(22px);
       line-height: calculateRem(24px);
 
-      @media (min-width: map-get($grid-breakpoints, "md")) {
+      @media (min-width: map-get($grid-breakpoints, 'md')) {
         font-size: calculateRem(30px);
         line-height: calculateRem(30px);
       }
     }
-    @else if $index == 4{
+    @else if $index == 4 {
       font-size: calculateRem(19px);
       line-height: $headings-line-height;
 
-      @media (min-width: map-get($grid-breakpoints, "md")) {
+      @media (min-width: map-get($grid-breakpoints, 'md')) {
         font-size: calculateRem(26px);
         line-height: calculateRem(32px);
       }
     }
-    @else if $index == 5{
+    @else if $index == 5 {
       font-size: calculateRem(16px);
       line-height: $headings-line-height;
 
-      @media (min-width: map-get($grid-breakpoints, "md")) {
+      @media (min-width: map-get($grid-breakpoints, 'md')) {
         font-size: calculateRem(20px);
       }
     }
-    @else if $index == 6{
+    @else if $index == 6 {
       font-size: calculateRem(13px);
       line-height: calculateRem(24px);
 
-      @media (min-width: map-get($grid-breakpoints, "md")) {
+      @media (min-width: map-get($grid-breakpoints, 'md')) {
         font-size: calculateRem(17px);
         line-height: calculateRem(24px);
       }
@@ -124,13 +124,13 @@ body{
 }
 
 @for $index from 1 through 6 {
-  h#{$index}, .h#{$index}-primary{
+  h#{$index}, .h#{$index}-primary {
     font-family: $primary-font-family;
   }
 }
 
 @for $index from 1 through 6 {
-  .h#{$index}-secondary{
+  .h#{$index}-secondary {
     font-family: $secondary-font-family;
   }
 }
diff --git a/scss/utils/_utils.scss b/scss/utils/_utils.scss
index 3f90a3b..cae9e03 100644
--- a/scss/utils/_utils.scss
+++ b/scss/utils/_utils.scss
@@ -29,7 +29,7 @@
 //
 // Styleguide 4.1.0
 .vertical-centered {
-  display:flex;
+  display: flex;
   flex-direction: column;
   justify-content: center;
 }
@@ -79,16 +79,16 @@
 //
 // Styleguide 4.3.0
 .embed-responsive {
-  position: relative;
   display: block;
-  width: 100%;
-  padding: 0;
   overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
 }
 
 .embed-responsive::before {
+  content: '';
   display: block;
-  content: "";
 }
 
 .embed-responsive .embed-responsive-item,
@@ -96,13 +96,13 @@
 .embed-responsive embed,
 .embed-responsive object,
 .embed-responsive video {
-  position: absolute;
-  top: 0;
+  border: 0;
   bottom: 0;
+  height: 100%;
   left: 0;
+  position: absolute;
+  top: 0;
   width: 100%;
-  height: 100%;
-  border: 0;
 }
 
 .embed-responsive-21by9::before {