From 1ff088f84b728782c0d781866e9fa08444d87c05 Mon Sep 17 00:00:00 2001
From: David Miller <hello@davidmiller.io>
Date: Fri, 19 Aug 2016 15:48:30 -0400
Subject: [PATCH] sass version cleanup, added gulp task for sass build,

---
 gulpfile.js          |   45 +-
 js/agency.min.js     |    2 +-
 package.json         |    1 +
 scss/_mixins.scss    |   68 ++-
 scss/_variables.scss |   17 +-
 scss/agency.scss     | 1216 +++++++++++++++++++-----------------------
 6 files changed, 641 insertions(+), 708 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 1e3f40c..d8cdac2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,6 +1,6 @@
-// Assigning modules to local variables
 var gulp = require('gulp');
 var less = require('gulp-less');
+var sass = require('gulp-sass');
 var browserSync = require('browser-sync').create();
 var header = require('gulp-header');
 var cleanCSS = require('gulp-clean-css');
@@ -17,10 +17,7 @@ var banner = ['/*!\n',
     ''
 ].join('');
 
-// Default task
-gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
-
-// Less task to compile the less files and add the banner
+// Compile LESS files from /less into /css
 gulp.task('less', function() {
     return gulp.src('less/agency.less')
         .pipe(less())
@@ -31,7 +28,7 @@ gulp.task('less', function() {
         }))
 });
 
-// Minify CSS
+// Minify compiled CSS
 gulp.task('minify-css', ['less'], function() {
     return gulp.src('css/agency.css')
         .pipe(cleanCSS({ compatibility: 'ie8' }))
@@ -54,21 +51,15 @@ gulp.task('minify-js', function() {
         }))
 });
 
-// Copy Bootstrap core files from node_modules to vendor directory
-gulp.task('bootstrap', function() {
-    return gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
+// Copy vendor libraries from /node_modules into /vendor
+gulp.task('copy', function() {
+    gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
         .pipe(gulp.dest('vendor/bootstrap'))
-})
 
-// Copy jQuery core files from node_modules to vendor directory
-gulp.task('jquery', function() {
-    return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
+    gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
         .pipe(gulp.dest('vendor/jquery'))
-})
 
-// Copy Font Awesome core files from node_modules to vendor directory
-gulp.task('fontawesome', function() {
-    return gulp.src([
+    gulp.src([
             'node_modules/font-awesome/**',
             '!node_modules/font-awesome/**/*.map',
             '!node_modules/font-awesome/.npmignore',
@@ -79,8 +70,8 @@ gulp.task('fontawesome', function() {
         .pipe(gulp.dest('vendor/font-awesome'))
 })
 
-// Copy all third party dependencies from node_modules to vendor directory
-gulp.task('copy', ['bootstrap', 'jquery', 'fontawesome']);
+// Run everything
+gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
 
 // Configure the browserSync task
 gulp.task('browserSync', function() {
@@ -92,11 +83,23 @@ gulp.task('browserSync', function() {
 })
 
 // Watch Task that compiles LESS and watches for HTML or JS changes and reloads with browserSync
-gulp.task('dev', ['browserSync', 'less', 'minify-css', 'minify-js'], function() {
+gulp.task('watch', ['browserSync', 'less', 'minify-css', 'minify-js'], function() {
     gulp.watch('less/*.less', ['less']);
     gulp.watch('css/*.css', ['minify-css']);
     gulp.watch('js/*.js', ['minify-js']);
     // Reloads the browser whenever HTML or JS files change
     gulp.watch('*.html', browserSync.reload);
     gulp.watch('js/**/*.js', browserSync.reload);
-});
\ No newline at end of file
+});
+
+// Compiles SCSS files from /scss into /css
+// NOTE: This theme uses LESS by default. To swtich to SCSS you will need to update this gulpfile by changing the 'less' tasks to run 'sass'!
+gulp.task('sass', function() {
+    return gulp.src('scss/agency.scss')
+        .pipe(sass())
+        .pipe(header(banner, { pkg: pkg }))
+        .pipe(gulp.dest('css'))
+        .pipe(browserSync.reload({
+            stream: true
+        }))
+});
diff --git a/js/agency.min.js b/js/agency.min.js
index b3a6694..6315892 100644
--- a/js/agency.min.js
+++ b/js/agency.min.js
@@ -3,4 +3,4 @@
  * Copyright 2013-2016 Start Bootstrap
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
  */
-!function(t){"use strict";t("a.page-scroll").bind("click",function(a){var o=t(this);t("html, body").stop().animate({scrollTop:t(o.attr("href")).offset().top-50},1250,"easeInOutExpo"),a.preventDefault()}),t("body").scrollspy({target:".navbar-fixed-top",offset:51}),t(".navbar-collapse ul li a").click(function(){t(".navbar-toggle:visible").click()}),t("#mainNav").affix({offset:{top:100}})}(jQuery);
+!function(t){"use strict";t("a.page-scroll").bind("click",function(a){var o=t(this);t("html, body").stop().animate({scrollTop:t(o.attr("href")).offset().top-50},1250,"easeInOutExpo"),a.preventDefault()}),t("body").scrollspy({target:".navbar-fixed-top",offset:51}),t(".navbar-collapse ul li a").click(function(){t(".navbar-toggle:visible").click()}),t("#mainNav").affix({offset:{top:100}})}(jQuery);
\ No newline at end of file
diff --git a/package.json b/package.json
index 1621790..be3369e 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "gulp-header": "^1.8.7",
     "gulp-less": "^3.1.0",
     "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.3.2",
     "gulp-uglify": "^1.5.4",
     "jquery": "^1.11.3"
   },
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 17e4122..0741c0a 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -1,37 +1,51 @@
+// Mixins
+
 // Bootstrap Button Variant
 
 @mixin button-variant($color, $background, $border) {
   color: $color;
   background-color: $background;
   border-color: $border;
-  @at-root {
-    &.active,
-    &:active,
-    &:focus,
+
+  &:focus,
+  &.focus {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 25%);
+  }
+  &:hover {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+
     &:hover,
-    .open .dropdown-toggle#{&} {
+    &:focus,
+    &.focus {
       color: $color;
-      background-color: darken($background, 10%);
-      border-color: darken($border, 12%);
+      background-color: darken($background, 17%);
+          border-color: darken($border, 25%);
     }
-
-    &.active,
-    &:active,
-    .open .dropdown-toggle#{&} {
-      background-image: none;
-    }
-
-    &.disabled,
-    &[disabled],
-    fieldset[disabled] #{&} {
-      &,
-      &.active,
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $background;
-        border-color: $border;
-      }
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-image: none;
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: $background;
+          border-color: $border;
     }
   }
 
@@ -41,7 +55,7 @@
   }
 }
 
-// Background Features
+// Background Cover Mixin
 
 @mixin background-cover {
   -webkit-background-size: cover;
@@ -50,7 +64,7 @@
   -o-background-size: cover;
 }
 
-// Font Selections
+// Font Mixins
 
 @mixin serif-font {
   font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 44d7da4..b1e5c14 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,8 +1,13 @@
 // Variables
 
-$brand-primary: #fed136;
-$brand-danger: #e74c3c;
-$gray-darkest: #222;
-$gray: #777;
-$gray-lighter: #f7f7f7;
-$placeholder-text: #bbbbbb;
+// Gray and Brand Colors for use across theme
+
+$theme-primary:    #fed136;
+$theme-danger:     #e74c3c;
+
+$gray-base:			#000 !default;
+$gray-darker:		lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:			lighten($gray-base, 20%) !default;   // #333
+$gray:				lighten($gray-base, 33.5%) !default; // #555
+$gray-light:		lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter:		lighten($gray-base, 93.5%) !default; // #eee
\ No newline at end of file
diff --git a/scss/agency.scss b/scss/agency.scss
index c99a514..df91f56 100644
--- a/scss/agency.scss
+++ b/scss/agency.scss
@@ -1,828 +1,738 @@
-@import 'variables';
-@import 'mixins';
+@import "variables.scss";
+@import "mixins.scss";
 
 // Global Components
 
 body {
-  overflow-x: hidden;
-  @include body-font;
+    overflow-x: hidden;
+    @include body-font;
 }
 
 .text-muted {
-  color: $gray;
+    color: $gray-light;
 }
 
 .text-primary {
-  color: $brand-primary;
+    color: $theme-primary;
 }
 
 p {
-  font-size: 14px;
-  line-height: 1.75;
+    font-size: 14px;
+    line-height: 1.75;
 }
 
 p.large {
-  font-size: 16px;
+    font-size: 16px;
 }
 
 a,
-a.active,
-a:active,
+a:hover,
 a:focus,
-a:hover {
-  outline: none;
+a:active,
+a.active {
+    outline: none;
 }
 
 a {
-  color: $brand-primary;
+    color: $theme-primary;
 }
 
-a.active,
-a:active,
+a:hover,
 a:focus,
-a:hover {
-  color: darken($brand-primary, 10%);
+a:active,
+a.active {
+    color: darken($theme-primary, 10%);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @include heading-font;
-  font-weight: 700;
+h1, h2, h3, h4, h5, h6 {
+    @include heading-font;
+    font-weight: 700;
 }
 
 .img-centered {
-  margin: 0 auto;
+    margin: 0 auto;
 }
 
 .bg-light-gray {
-  background-color: $gray-lighter;
+    background-color: $gray-lighter;
 }
 
 .bg-darkest-gray {
-  background-color: $gray-darkest;
+    background-color: $gray-darker;
 }
 
 // Restyled Primary Buttons
 
 .btn-primary {
-  @include button-variant(white, $brand-primary, $brand-primary);
-  @include heading-font;
-  font-weight: 700;
+    @include button-variant(white, $theme-primary, $theme-primary);
+    @include heading-font;
+    font-weight: 700;
 }
 
 .btn-xl {
-  @include button-variant(white, $brand-primary, $brand-primary);
-  @include heading-font;
-  font-weight: 700;
-  border-radius: 3px;
-  font-size: 18px;
-  padding: 20px 40px;
+    @include button-variant(white, $theme-primary, $theme-primary);
+    @include heading-font;
+    font-weight: 700;
+    border-radius: 3px;
+    font-size: 18px;
+    padding: 20px 40px;
 }
 
 // Custom Navigation Bar
 
-.navbar-default {
-  background-color: $gray-darkest;
-  border-color: transparent;
-
-  .navbar-brand {
-    color: $brand-primary;
-    @include script-font;
-
-    &.active,
-    &:active,
-    &:focus,
-    &:hover {
-      color: darken($brand-primary, 10%);
-    }
-  }
-
-  .navbar-collapse {
-    border-color: fade(white, 2%);
-  }
-
-  .navbar-toggle {
-    background-color: $brand-primary;
-    border-color: $brand-primary;
-
-    .icon-bar {
-      background-color: white;
-    }
-
-    &:focus,
-    &:hover {
-      background-color: $brand-primary;
-    }
-  }
-
-  .nav {
-    li {
-      a {
-        @include heading-font;
-        font-weight: 400;
-        letter-spacing: 1px;
-        color: white;
-
+.navbar-custom {
+    background-color: $gray-darker;
+    border-color: transparent;
+    .navbar-brand {
+        color: $theme-primary;
+        @include script-font;
+        &:hover,
         &:focus,
-        &:hover {
-          color: $brand-primary;
-          outline: none;
+        &:active,
+        &.active {
+            color: darken($theme-primary, 10%);
         }
-      }
     }
-  }
-
-  .navbar-nav > .active > a {
-    border-radius: 0;
-    color: white;
-    background-color: $brand-primary;
-  }
-
-  .navbar-nav > .active > a:focus,
-  .navbar-nav > .active > a:hover {
-    color: white;
-    background-color: darken($brand-primary, 10%);
-  }
+    .navbar-collapse {
+        border-color: fade-out(white, .02);
+    }
+    .navbar-toggle {
+        background-color: $theme-primary;
+        border-color: $theme-primary;
+        @include heading-font;
+        color: white;
+        font-size: 12px;
+        &:hover,
+        &:focus {
+            background-color: $theme-primary;
+        }
+    }
+    .nav {
+        li {
+            a {
+                @include heading-font;
+                font-weight: 400;
+                letter-spacing: 1px;
+                color: white;
+                &:hover,
+                &:focus {
+                    color: $theme-primary;
+                    outline: none;
+                }
+            }
+        }
+    }
+    .navbar-nav>.active>a {
+        border-radius: 0;
+        color: white;
+        background-color: $theme-primary;
+    }
+    .navbar-nav>.active>a:hover,
+    .navbar-nav>.active>a:focus {
+        color: white;
+        background-color: darken($theme-primary, 10%);
+    }
 }
 
 @media(min-width:768px) {
-  .navbar-default {
-    background-color: transparent;
-    padding: 25px 0;
-    -webkit-transition: padding 0.3s;
-    -moz-transition: padding 0.3s;
-    transition: padding 0.3s;
-    border: none;
-
-    .navbar-brand {
-      font-size: 2em;
-      -webkit-transition: all 0.3s;
-      -moz-transition: all 0.3s;
-      transition: all 0.3s;
+    .navbar-custom {
+        background-color: transparent;
+        padding: 25px 0;
+        -webkit-transition: padding 0.3s;
+        -moz-transition: padding 0.3s;
+        transition: padding 0.3s;
+        border: none;
+        .navbar-brand {
+            font-size: 2em;
+            -webkit-transition: all 0.3s;
+            -moz-transition: all 0.3s;
+            transition: all 0.3s;
+        }
+        .navbar-nav>.active>a {
+            border-radius: 3px;
+        }
     }
+}
 
-    .navbar-nav > .active > a {
-      border-radius: 3px;
+// Navbar Change on Scroll
+
+@media(min-width:768px) {
+    .navbar-custom.affix {
+        background-color: $gray-darker;
+        padding: 10px 0;
+        .navbar-brand {
+            font-size: 1.5em;
+        }
     }
-  }
-
-  .navbar-default.navbar-shrink {
-    background-color: $gray-darkest;
-    padding: 10px 0;
-
-    .navbar-brand {
-      font-size: 1.5em;
-    }
-  }
 }
 
 header {
-  background-image: url('../img/header-bg.jpg');
-  background-repeat: none;
-  background-attachment: scroll;
-  background-position: center center;
-  @include background-cover;
-  text-align: center;
-  color: white;
-
-  .intro-text {
-    padding-top: 100px;
-    padding-bottom: 50px;
-
-    .intro-lead-in {
-      @include serif-font;
-      font-style: italic;
-      font-size: 22px;
-      line-height: 22px;
-      margin-bottom: 25px;
+    background-image: url('../img/header-bg.jpg');
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: center center;
+    @include background-cover;
+    text-align: center;
+    color: white;
+    .intro-text {
+        padding-top: 100px;
+        padding-bottom: 50px;
+        .intro-lead-in {
+            @include serif-font;
+            font-style: italic;
+            font-size: 22px;
+            line-height: 22px;
+            margin-bottom: 25px;
+        }
+        .intro-heading {
+            @include heading-font;
+            font-weight: 700;
+            font-size: 50px;
+            line-height: 50px;
+            margin-bottom: 25px;
+        }
     }
-
-    .intro-heading {
-      @include heading-font;
-      font-weight: 700;
-      font-size: 50px;
-      line-height: 50px;
-      margin-bottom: 25px;
-    }
-  }
 }
 
 @media(min-width:768px) {
-  header {
-    .intro-text {
-      padding-top: 300px;
-      padding-bottom: 200px;
-
-      .intro-lead-in {
-        @include serif-font;
-        font-style: italic;
-        font-size: 40px;
-        line-height: 40px;
-        margin-bottom: 25px;
-      }
-
-      .intro-heading {
-        @include heading-font;
-        font-weight: 700;
-        font-size: 75px;
-        line-height: 75px;
-        margin-bottom: 50px;
-      }
+    header {
+        .intro-text {
+            padding-top: 300px;
+            padding-bottom: 200px;
+            .intro-lead-in {
+                @include serif-font;
+                font-style: italic;
+                font-size: 40px;
+                line-height: 40px;
+                margin-bottom: 25px;
+            }
+            .intro-heading {
+                @include heading-font;
+                font-weight: 700;
+                font-size: 75px;
+                line-height: 75px;
+                margin-bottom: 50px;
+            }
+        }
     }
-  }
 }
 
 // Global Section Styles
 
 section {
-  padding: 100px 0;
-
-  h2.section-heading {
-    font-size: 40px;
-    margin-top: 0;
-    margin-bottom: 15px;
-  }
-
-  h3.section-subheading {
-    font-size: 16px;
-    @include serif-font;
-    text-transform: none;
-    font-style: italic;
-    font-weight: 400;
-    margin-bottom: 75px;
-  }
+    padding: 100px 0;
+    h2.section-heading {
+        font-size: 40px;
+        margin-top: 0;
+        margin-bottom: 15px;
+    }
+    h3.section-subheading {
+        font-size: 16px;
+        @include serif-font;
+        text-transform: none;
+        font-style: italic;
+        font-weight: 400;
+        margin-bottom: 75px;
+    }
 }
 
 @media(min-width:768px) {
-  section {
-    padding: 150px 0;
-  }
+    section {
+        padding: 150px 0;
+    }
 }
 
 // Services Section
 
 .service-heading {
-  margin: 15px 0;
-  text-transform: none;
+    margin: 15px 0;
+    text-transform: none;
 }
 
 // Portfolio Section
 
 #portfolio {
-  .portfolio-item {
-    margin: 0 0 15px;
-    right: 0;
-
-    .portfolio-link {
-      display: block;
-      position: relative;
-      max-width: 400px;
-      margin: 0 auto;
-
-      .portfolio-hover {
-        background: fade($brand-primary, 90%);
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        transition: all ease 0.5s;
-        -webkit-transition: all ease 0.5s;
-        -moz-transition: all ease 0.5s;
-
-        &:hover {
-          opacity: 1;
+    .portfolio-item {
+        margin: 0 0 15px;
+        right: 0;
+        .portfolio-link {
+            display: block;
+            position: relative;
+            max-width: 400px;
+            margin: 0 auto;
+            .portfolio-hover {
+                background: fade-out($theme-primary, .9);
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                opacity: 0;
+                transition: all ease 0.5s;
+                -webkit-transition: all ease 0.5s;
+                -moz-transition: all ease 0.5s;
+                &:hover {
+                    opacity: 1;
+                }
+                .portfolio-hover-content {
+                    position: absolute;
+                    width: 100%;
+                    height: 20px;
+                    font-size: 20px;
+                    text-align: center;
+                    top: 50%;
+                    margin-top: -12px;
+                    color: white;
+                    i {
+                        margin-top: -12px;
+                    }
+                    h3,
+                    h4 {
+                        margin: 0;
+                    }
+                }                
+            }            
         }
-
-        .portfolio-hover-content {
-          position: absolute;
-          width: 100%;
-          height: 20px;
-          font-size: 20px;
-          text-align: center;
-          top: 50%;
-          margin-top: -12px;
-          color: white;
-
-          i {
-            margin-top: -12px;
-          }
-
-          h3,
-          h4 {
-            margin: 0;
-          }
+        .portfolio-caption {
+            max-width: 400px;
+            margin: 0 auto;
+            background-color: white;
+            text-align: center;
+            padding: 25px;
+            h4 {
+                text-transform: none;
+                margin: 0;
+            }
+            p {
+                @include serif-font;
+                font-style: italic;
+                font-size: 16px;
+                margin: 0;
+            }
         }
-      }
     }
-
-    .portfolio-caption {
-      max-width: 400px;
-      margin: 0 auto;
-      background-color: white;
-      text-align: center;
-      padding: 25px;
-
-      h4 {
-        text-transform: none;
-        margin: 0;
-      }
-
-      p {
-        @include serif-font;
-        font-style: italic;
-        font-size: 16px;
-        margin: 0;
-      }
+    * {
+        z-index: 2;
     }
-  }
-
-  * {
-    z-index: 2;
-  }
 }
 
 @media(min-width:767px) {
-  #portfolio {
-    .portfolio-item {
-      margin: 0 0 30px;
+    #portfolio {
+        .portfolio-item {
+            margin: 0 0 30px;
+        }
     }
-  }
 }
 
 // Timeline
 
 .timeline {
-  list-style: none;
-  padding: 0;
-  position: relative;
-
-  &:before {
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    content: "";
-    width: 2px;
-    background-color: #f1f1f1;
-    left: 40px;
-    margin-left: -1.5px;
-  }
-
-  > li {
-    margin-bottom: 50px;
+    list-style: none;
+    padding: 0;
     position: relative;
-    min-height: 50px;
-
-    &:after,
     &:before {
-      content: " ";
-      display: table;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+        content: "";
+        width: 2px;
+        background-color: #f1f1f1;
+        left: 40px;
+        margin-left: -1.5px;
     }
-
-    &:after {
-      clear: both;
+    > li {
+        margin-bottom: 50px;
+        position: relative;
+        min-height: 50px;
+        &:before,
+        &:after {
+            content: " ";
+            display: table;
+        }
+        &:after {
+            clear: both;
+        }
+        .timeline-panel {
+            width: 100%;
+            float: right;
+            padding: 0 20px 0 100px;
+            position: relative;
+            text-align: left;
+            &:before {
+                border-left-width: 0;
+                border-right-width: 15px;
+                left: -15px;
+                right: auto;
+            }
+            &:after {
+                border-left-width: 0;
+                border-right-width: 14px;
+                left: -14px;
+                right: auto;
+            }
+        }
+        .timeline-image {
+            left: 0;
+            margin-left: 0;
+            width: 80px;
+            height: 80px;
+            position: absolute;
+            z-index: 100;
+            background-color: $theme-primary;
+            color: white;
+            border-radius: 100%;
+            border: 7px solid #f1f1f1;
+            text-align: center;
+            h4 {
+                font-size: 10px;
+                margin-top: 12px;
+                line-height: 14px;
+            }
+        }
+        &.timeline-inverted > .timeline-panel {
+            float: right;
+            text-align: left;
+            padding: 0 20px 0 100px;
+            &:before {
+                border-left-width: 0;
+                border-right-width: 15px;
+                left: -15px;
+                right: auto;
+            }
+            &:after {
+                border-left-width: 0;
+                border-right-width: 14px;
+                left: -14px;
+                right: auto;
+            }
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
-
-    .timeline-panel {
-      width: 100%;
-      float: right;
-      padding: 0 20px 0 100px;
-      position: relative;
-      text-align: left;
-
-      &:before {
-        border-left-width: 0;
-        border-right-width: 15px;
-        left: -15px;
-        right: auto;
-      }
-
-      &:after {
-        border-left-width: 0;
-        border-right-width: 14px;
-        left: -14px;
-        right: auto;
-      }
+    .timeline-heading {
+        h4 {
+            margin-top: 0;
+            color: inherit;
+            &.subheading {
+                text-transform: none;
+            }
+        }
     }
-
-    .timeline-image {
-      left: 0;
-      margin-left: 0;
-      width: 80px;
-      height: 80px;
-      position: absolute;
-      z-index: 100;
-      background-color: $brand-primary;
-      color: white;
-      border-radius: 100%;
-      border: 7px solid #f1f1f1;
-      text-align: center;
-
-      h4 {
-        font-size: 10px;
-        margin-top: 12px;
-        line-height: 14px;
-      }
+    .timeline-body {
+        > p,
+        > ul {
+            margin-bottom: 0;
+        }
     }
-
-    &.timeline-inverted > .timeline-panel {
-      float: right;
-      text-align: left;
-      padding: 0 20px 0 100px;
-
-      &:before {
-        border-left-width: 0;
-        border-right-width: 15px;
-        left: -15px;
-        right: auto;
-      }
-
-      &:after {
-        border-left-width: 0;
-        border-right-width: 14px;
-        left: -14px;
-        right: auto;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .timeline-heading {
-    h4 {
-      margin-top: 0;
-      color: inherit;
-
-      &.subheading {
-        text-transform: none;
-      }
-    }
-  }
-
-  .timeline-body {
-     > p,
-    > ul {
-      margin-bottom: 0;
-    }
-  }
 }
 
 @media(min-width:768px) {
-  .timeline {
-    &:before {
-      left: 50%;
-    }
-
-    > li {
-      margin-bottom: 100px;
-      min-height: 100px;
-
-      .timeline-panel {
-        width: 41%;
-        float: left;
-        padding: 0 20px 20px 30px;
-        text-align: right;
-      }
-
-      .timeline-image {
-        width: 100px;
-        height: 100px;
-        left: 50%;
-        margin-left: -50px;
-
-        h4 {
-          font-size: 13px;
-          margin-top: 16px;
-          line-height: 18px;
+    .timeline {
+        &:before {
+            left: 50%;
+        }
+        > li {
+            margin-bottom: 100px;
+            min-height: 100px;
+            .timeline-panel {
+                width: 41%;
+                float: left;
+                padding: 0 20px 20px 30px;
+                text-align: right;
+            }
+            .timeline-image {
+                width: 100px;
+                height: 100px;
+                left: 50%;
+                margin-left: -50px;
+                h4 {
+                    font-size: 13px;
+                    margin-top: 16px;
+                    line-height: 18px;
+                }
+            }
+            &.timeline-inverted > .timeline-panel {
+                float: right;
+                text-align: left;
+                padding: 0 30px 20px 20px;
+            }
         }
-      }
-
-      &.timeline-inverted > .timeline-panel {
-        float: right;
-        text-align: left;
-        padding: 0 30px 20px 20px;
-      }
     }
-  }
 }
 
 @media(min-width:992px) {
-  .timeline {
-    > li {
-      min-height: 150px;
-
-      .timeline-panel {
-        padding: 0 20px 20px;
-      }
-
-      .timeline-image {
-        width: 150px;
-        height: 150px;
-        margin-left: -75px;
-
-        h4 {
-          font-size: 18px;
-          margin-top: 30px;
-          line-height: 26px;
+    .timeline {
+        > li {
+            min-height: 150px;
+            .timeline-panel {
+                padding: 0 20px 20px;
+            }
+            .timeline-image {
+                width: 150px;
+                height: 150px;
+                margin-left: -75px;
+                h4 {
+                    font-size: 18px;
+                    margin-top: 30px;
+                    line-height: 26px;
+                }
+            }
+            &.timeline-inverted > .timeline-panel {
+                padding: 0 20px 20px;
+            }
         }
-      }
-
-      &.timeline-inverted > .timeline-panel {
-        padding: 0 20px 20px;
-      }
     }
-  }
 }
 
 @media(min-width:1200px) {
-  .timeline {
-    > li {
-      min-height: 170px;
-
-      .timeline-panel {
-        padding: 0 20px 20px 100px;
-      }
-
-      .timeline-image {
-        width: 170px;
-        height: 170px;
-        margin-left: -85px;
-
-        h4 {
-          margin-top: 40px;
+    .timeline {
+        > li {
+            min-height: 170px;
+            .timeline-panel {
+                padding: 0 20px 20px 100px;
+            }
+            .timeline-image {
+                width: 170px;
+                height: 170px;
+                margin-left: -85px;
+                h4 {
+                    margin-top: 40px;
+                }
+            }
+            &.timeline-inverted > .timeline-panel {
+                padding: 0 100px 20px 20px;
+            }
         }
-      }
-
-      &.timeline-inverted > .timeline-panel {
-        padding: 0 100px 20px 20px;
-      }
     }
-  }
 }
 
 // Team Section
 
 .team-member {
-  text-align: center;
-  margin-bottom: 50px;
-
-  img {
-    margin: 0 auto;
-    border: 7px solid white;
-  }
-
-  h4 {
-    margin-top: 25px;
-    margin-bottom: 0;
-    text-transform: none;
-  }
-
-  p {
-    margin-top: 0;
-  }
+    text-align: center;
+    margin-bottom: 50px;
+    img {
+        margin: 0 auto;
+        border: 7px solid white;
+    }
+    h4 {
+        margin-top: 25px;
+        margin-bottom: 0;
+        text-transform: none;
+    }
+    p {
+        margin-top: 0;
+    }
 }
 
 // Clients Aside
 
 aside.clients {
-  img {
-    margin: 50px auto;
-  }
+    img {
+        margin: 50px auto;
+    }
 }
 
 // Contact Section
 
 section#contact {
-  background-color: $gray-darkest;
-  background-image: url('../img/map-image.png');
-  background-position: center;
-  background-repeat: no-repeat;
-
-  .section-heading {
-    color: white;
-  }
-
-  .form-group {
-    margin-bottom: 25px;
-
-    input,
-    textarea {
-      padding: 20px;
+    background-color: $gray-darker;
+    background-image: url('../img/map-image.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    .section-heading {
+        color: white;
     }
-
-    input.form-control {
-      height: auto;
+    .form-group {
+        margin-bottom: 25px;
+        input,
+        textarea {
+            padding: 20px;
+        }
+        input.form-control {
+            height: auto;
+        }
+        textarea.form-control {
+            height: 236px;
+        }
     }
-
-    textarea.form-control {
-      height: 236px;
+    .form-control:focus {
+        border-color: $theme-primary;
+        box-shadow: none;
+    }
+    ::-webkit-input-placeholder {
+       @include heading-font;
+       font-weight: 700;
+       color: $gray-lighter;
+    }
+    :-moz-placeholder { /* Firefox 18- */
+       @include heading-font;
+       font-weight: 700;
+       color: $gray-lighter;
+    }
+    ::-moz-placeholder {  /* Firefox 19+ */
+       @include heading-font;
+       font-weight: 700;
+       color: $gray-lighter;
+    }
+    :-ms-input-placeholder {  
+       @include heading-font;
+       font-weight: 700;
+       color: $gray-lighter;
+    }
+    .text-danger {
+        color: $theme-danger;
     }
-  }
-
-  .form-control:focus {
-    border-color: $brand-primary;
-    box-shadow: none;
-  }
-
-  ::-webkit-input-placeholder {
-    @include heading-font;
-    font-weight: 700;
-    color: $placeholder-text;
-  }
-
-  :-moz-placeholder {
-    /* Firefox 18- */
-    @include heading-font;
-    font-weight: 700;
-    color: $placeholder-text;
-  }
-
-  ::-moz-placeholder {
-    /* Firefox 19+ */
-    @include heading-font;
-    font-weight: 700;
-    color: $placeholder-text;
-  }
-
-  :-ms-input-placeholder {
-    @include heading-font;
-    font-weight: 700;
-    color: $placeholder-text;
-  }
-
-  .text-danger {
-    color: $brand-danger;
-  }
 }
 
 // Footer
 
 footer {
-  padding: 25px 0;
-  text-align: center;
-
-  span.copyright {
-    line-height: 40px;
-    @include heading-font;
-    text-transform: none;
-  }
-
-  ul.quicklinks {
-    margin-bottom: 0;
-    line-height: 40px;
-    @include heading-font;
-    text-transform: none;
-  }
+    padding: 25px 0;
+    text-align: center;
+    span.copyright {
+        line-height: 40px;
+        @include heading-font;
+        text-transform: none;
+    }
+    ul.quicklinks {
+        margin-bottom: 0;
+        line-height: 40px;
+        @include heading-font;
+        text-transform: none;
+    }
 }
 
 // Social Buttons
 
 ul.social-buttons {
-  margin-bottom: 0;
-
-  li {
-    a {
-      display: block;
-      background-color: $gray-darkest;
-      height: 40px;
-      width: 40px;
-      border-radius: 100%;
-      font-size: 20px;
-      line-height: 40px;
-      color: white;
-      outline: none;
-      -webkit-transition: all 0.3s;
-      -moz-transition: all 0.3s;
-      transition: all 0.3s;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $brand-primary;
-      }
+    margin-bottom: 0;
+    li {
+        a {
+            display: block;
+            background-color: $gray-darker;
+            height: 40px;
+            width: 40px;
+            border-radius: 100%;
+            font-size: 20px;
+            line-height: 40px;
+            color: white;
+            outline: none;
+            -webkit-transition: all 0.3s;
+            -moz-transition: all 0.3s;
+            transition: all 0.3s;
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: $theme-primary;
+            }
+        }
     }
-  }
 }
 
-.btn.active,
+.btn:focus,
 .btn:active,
-.btn:active:focus,
-.btn:focus {
-  outline: none;
+.btn.active,
+.btn:active:focus {
+    outline: none;
 }
 
 .portfolio-modal {
-  .modal-dialog{
-    margin: 0;
-    height: 100%;
-    width: auto;
-  }
-  .modal-content {
-    border-radius: 0;
-    background-clip: border-box;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    border: none;
-    min-height: 100%;
-    padding: 100px 0;
-    text-align: center;
-
-    h2 {
-      margin-bottom: 15px;
-      font-size: 3em;
+    .modal-dialog{
+        margin: 0;
+        height: 100%;
+        width: auto;
     }
-
-    p {
-      margin-bottom: 30px;
+    .modal-content {
+        border-radius: 0;
+        background-clip: border-box;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        border: none;
+        min-height: 100%;
+        padding: 100px 0;
+        text-align: center;
+        h2 {
+            margin-bottom: 15px;
+            font-size: 3em;
+        }
+        p {
+            margin-bottom: 30px;
+        }
+        p.item-intro {
+            margin: 20px 0 30px;
+            @include serif-font;
+            font-style: italic;
+            font-size: 16px;
+        }
+        ul.list-inline {
+            margin-bottom: 30px;
+            margin-top: 0;
+        }
+        img {
+            margin-bottom: 30px;
+        }
     }
-
-    p.item-intro {
-      margin: 20px 0 30px;
-      @include serif-font;
-      font-style: italic;
-      font-size: 16px;
+    .close-modal {
+        position: absolute;
+        width:75px;
+        height:75px;
+        background-color:transparent;
+        top: 25px;
+        right: 25px;
+        cursor: pointer;
+        &:hover {
+            opacity: 0.3;
+        }
+        .lr {
+            height:75px;
+            width:1px;
+            margin-left:35px;
+            background-color:$gray-darker;
+            transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            /* IE 9 */
+            -webkit-transform: rotate(45deg);
+            /* Safari and Chrome */
+            z-index:1051;
+            .rl {
+                height:75px;
+                width:1px;
+                background-color:$gray-darker;
+                transform: rotate(90deg);
+                -ms-transform: rotate(90deg);
+                /* IE 9 */
+                -webkit-transform: rotate(90deg);
+                /* Safari and Chrome */
+                z-index:1052;
+            }            
+        }        
     }
-
-    ul.list-inline {
-      margin-bottom: 30px;
-      margin-top: 0;
+    .modal-backdrop {
+        opacity: 0;
+        display: none;
     }
-
-    img {
-      margin-bottom: 30px;
-    }
-  }
-
-  .close-modal {
-    position: absolute;
-    width: 75px;
-    height: 75px;
-    background-color: transparent;
-    top: 25px;
-    right: 25px;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 0.3;
-    }
-
-    .lr {
-      height: 75px;
-      width: 1px;
-      margin-left: 35px;
-      background-color: $gray-darkest;
-      transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      /* IE 9 */
-      -webkit-transform: rotate(45deg);
-      /* Safari and Chrome */
-      z-index: 1051;
-
-      .rl {
-        height: 75px;
-        width: 1px;
-        background-color: $gray-darkest;
-        transform: rotate(90deg);
-        -ms-transform: rotate(90deg);
-        /* IE 9 */
-        -webkit-transform: rotate(90deg);
-        /* Safari and Chrome */
-        z-index: 1052;
-      }
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 0;
-    display: none;
-  }
 }
 
 // Highlight Color Customization
 
 ::-moz-selection {
-  text-shadow: none;
-  background: $brand-primary;
+    text-shadow: none;
+    background: $theme-primary;
 }
 
 ::selection {
-  text-shadow: none;
-  background: $brand-primary;
+    text-shadow: none;
+    background: $theme-primary;
 }
 
 img::selection {
-  background: transparent;
+    background: transparent;
 }
 
 img::-moz-selection {
-  background: transparent;
+    background: transparent;
 }
 
 body {
-  -webkit-tap-highlight-color: $brand-primary;
+    webkit-tap-highlight-color: $theme-primary;
 }