Commits

Nate Arnold  committed 3103bd3

Refactored for theming and removing icons from html

  • Participants
  • Parent commits fc98ecd

Comments (0)

Files changed (84)

File Gruntfile.js

 module.exports = function(grunt) {
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
-    clean: ["public/Assets/styles/", "public/Assets/scripts/scripts.js",  "public/Assets/scripts/scripts.min.js", "public/Assets/images/"],
+    clean: ["less/_dist/", "public/Assets/styles/", "public/Assets/scripts/scripts.*", "public/Assets/images/"],
     imagemin: {
       dynamic: {
         options: {
           yuicompress: false
         },
         files: {
-          'less/screen.css':'less/screen.less',
-          'less/screen_liftmaster.css':'less/screen_liftmaster.less'
+          'less/_dist/base.css':'less/screen.less',
+          'less/_dist/theme_chamberlain.css':'less/theme_chamberlain.less',
+          'less/_dist/theme_liftmaster.css':'less/theme_liftmaster.less'
         }
       }
     },
     autoprefixer: {
       dist: {
         files: {
-            'less/prefixed.css': 'less/screen.css',
-            'less/prefixed_liftmaster.css': 'less/screen_liftmaster.css'
+            'less/_dist/base_prefixed.css': 'less/_dist/base.css'
         }
       }
     },
     csscomb: {
         css: {
             files: {
-                'public/Assets/styles/screen.css': 'less/prefixed.css',
-                'public/Assets/styles/screen_liftmaster.css': 'less/prefixed_liftmaster.css'
+                'public/Assets/styles/base.css': 'less/_dist/base_prefixed.css',
+                'public/Assets/styles/theme_chamberlain.css': 'less/_dist/theme_chamberlain.css',
+                'public/Assets/styles/theme_liftmaster.css': 'less/_dist/theme_liftmaster.css'
             }
         }
     },

File img/circle-icon-login@2x.png

Removed
Old image

File img/circle-icon-login_liftmaster@2x.png

Removed
Old image

File img/circle-icon-user@2x.png

Removed
Old image

File img/circle-icon-user_liftmaster@2x.png

Removed
Old image

File img/circle-icon-wifi@2x.png

Removed
Old image

File img/circle-icon-wifi_liftmaster@2x.png

Removed
Old image

File img/iconImage-login_chamberlain.png

Added
New image

File img/iconImage-login_liftmaster.png

Added
New image

File img/iconImage-user_chamberlain.png

Added
New image

File img/iconImage-user_liftmaster.png

Added
New image

File img/iconImage-wifi_chamberlain.png

Added
New image

File img/iconImage-wifi_liftmaster.png

Added
New image

File less/_dist/base.css

+/* -----------------------------------------------------------
+
+    Project: CHAMBERLAIN.MyQresponsive
+    Author: Nate Arnold (narnold@nerdery.com)
+
+ ---------------------------------------------------------- */
+/* ---------------------------------------------------------------------
+ Reset
+ ----------------------------------------------------------------------- */
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/* ---------------------------------------------------------------------
+ Global Styles
+ ----------------------------------------------------------------------- */
+body {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.6;
+  color: #666666;
+}
+a {
+  color: #003763;
+  text-decoration: none;
+}
+a:hover {
+  color: #f38a00;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+strong {
+  font-weight: 600;
+}
+select:focus,
+input:focus {
+  font-size: 16px;
+  /* Prevents iOS zooming effect */
+
+}
+.mixin-gradient {
+  background: #ffffff;
+  background: -moz-linear-gradient(top, #ffffff 40%, #f0f0f0 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #ffffff), color-stop(100%, #f0f0f0));
+  background: -webkit-linear-gradient(top, #ffffff 40%, #f0f0f0 100%);
+  background: -o-linear-gradient(top, #ffffff 40%, #f0f0f0 100%);
+  background: -ms-linear-gradient(top, #ffffff 40%, #f0f0f0 100%);
+  background: linear-gradient(to bottom, #ffffff 40%, #f0f0f0 100%);
+}
+.mixin-clearfix:before,
+.mixin-clearfix:after {
+  content: " ";
+  display: table;
+}
+.mixin-clearfix:after {
+  clear: both;
+}
+/* ---------------------------------------------------------------------
+ Footer
+ ----------------------------------------------------------------------- */
+.footer {
+  margin: 40px 0 0;
+  padding: 30px 0;
+  color: white;
+}
+/* ---------------------------------------------------------------------
+ Header
+ ----------------------------------------------------------------------- */
+.header {
+  padding: 0 0 15px;
+  margin-bottom: 60px;
+  text-align: center;
+}
+.header-crown {
+  padding: 0 0 8px;
+  margin-bottom: 15px;
+  background-color: #f0f0f0;
+}
+/* ---------------------------------------------------------------------
+ appIcon
+ ----------------------------------------------------------------------- */
+.appIcon {
+  display: inline-block;
+  margin: 15px 1% 0 0;
+  padding: 0;
+  width: 44%;
+}
+.appIcon-img {
+  width: 100%;
+  height: auto;
+}
+/* ---------------------------------------------------------------------
+ Logo
+ ----------------------------------------------------------------------- */
+.appLogo {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0 auto 15px;
+}
+/* ---------------------------------------------------------------------
+ Box
+ ----------------------------------------------------------------------- */
+.box {
+  margin: 0 0 20px;
+  padding: 20px;
+  background: #f0f0f0;
+}
+/* ---------------------------------------------------------------------
+ Buttons
+ ----------------------------------------------------------------------- */
+.btn {
+  display: inline-block;
+  margin: 0;
+  padding: 10px 18px;
+  border-radius: 6px;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  text-decoration: none;
+  letter-spacing: 1.8px;
+}
+.btn:hover,
+.btn:active {
+  color: white;
+}
+.btn-hiddenText {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.btn_alt:hover,
+.btn_alt:active {
+  color: #ffffff;
+}
+.btn_link {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  text-transform: none;
+}
+.btn_link:hover,
+.btn_link:active {
+  color: #666666;
+  background-color: transparent;
+  border: 0;
+}
+.btn_narrow {
+  padding: 6px;
+}
+.btn_block {
+  display: block;
+}
+/* ---------------------------------------------------------------------
+ Checkbox
+ ----------------------------------------------------------------------- */
+.checkbox:before,
+.checkbox:after {
+  content: " ";
+  display: table;
+}
+.checkbox:after {
+  clear: both;
+}
+.checkbox-checkbox {
+  float: left;
+  margin: 4px 4px 0 0;
+  padding: 0;
+  font-size: 16px;
+}
+/* ---------------------------------------------------------------------
+ Circles
+ ----------------------------------------------------------------------- */
+.circles {
+  margin: 0 auto;
+  text-align: center;
+}
+.circles > * {
+  overflow: hidden;
+  display: block;
+  width: 200px;
+  height: 0;
+  margin: 0 auto 20px;
+  padding: 30px 40px 250px;
+  position: relative;
+  background-color: #f8f8f8;
+  border: 2px solid #f38a00;
+  border-radius: 50%;
+  font-size: 120%;
+}
+/* ---------------------------------------------------------------------
+ Container
+ ----------------------------------------------------------------------- */
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 20px;
+  position: relative;
+}
+.container:before,
+.container:after {
+  content: " ";
+  display: table;
+}
+.container:after {
+  clear: both;
+}
+/* ---------------------------------------------------------------------
+ fancySelect
+ https://github.com/octopuscreative/FancySelect
+ ----------------------------------------------------------------------- */
+div.fancy-select {
+  position: relative;
+  font-size: 12px;
+}
+div.fancy-select.disabled {
+  opacity: 0.5;
+}
+div.fancy-select div.trigger {
+  cursor: pointer;
+  padding: 0 10px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  width: 60px;
+  transition: all 240ms ease-out;
+  -webkit-transition: all 240ms ease-out;
+  -moz-transition: all 240ms ease-out;
+  -ms-transition: all 240ms ease-out;
+  -o-transition: all 240ms ease-out;
+}
+div.fancy-select div.trigger:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: #666666;
+  top: 8px;
+  right: 0;
+}
+div.fancy-select div.trigger.open:after {
+  border-top-color: #f0f0f0;
+}
+div.fancy-select ul.options {
+  list-style: none;
+  margin: 0;
+  position: absolute;
+  top: 50px;
+  left: 0;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 50;
+  max-height: 200px;
+  overflow: auto;
+  background: #f0f0f0;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  min-width: 140px;
+  transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+  -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+  -moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+  -ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+  -o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+}
+div.fancy-select ul.options.open {
+  visibility: visible;
+  top: 32px;
+  opacity: 1;
+  /* have to use a non-visibility transition to prevent this iOS issue (bug?): */
+
+  /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
+
+  transition: opacity 300ms ease-out, top 300ms ease-out;
+  -webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
+  -moz-transition: opacity 300ms ease-out, top 300ms ease-out;
+  -ms-transition: opacity 300ms ease-out, top 300ms ease-out;
+  -o-transition: opacity 300ms ease-out, top 300ms ease-out;
+}
+div.fancy-select ul.options li {
+  padding: 8px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 150ms ease-out;
+  -webkit-transition: all 150ms ease-out;
+  -moz-transition: all 150ms ease-out;
+  -ms-transition: all 150ms ease-out;
+  -o-transition: all 150ms ease-out;
+}
+div.fancy-select ul.options li.selected {
+  color: #ffffff;
+}
+div.fancy-select ul.options li.hover {
+  color: #ffffff;
+}
+/* ---------------------------------------------------------------------
+ 12 Column Grid
+ ----------------------------------------------------------------------- */
+.grid:before,
+.grid:after {
+  content: " ";
+  display: table;
+}
+.grid:after {
+  clear: both;
+}
+/* ---------------------------------------------------------------------
+ Hero
+ ----------------------------------------------------------------------- */
+.hero {
+  display: none;
+  overflow: hidden;
+  /* Hides pseudo class on highlighted headings */
+
+  width: 100%;
+  position: relative;
+  background: url('../images/hero.jpg') no-repeat center center;
+  background-size: cover;
+  background-attachment: fixed;
+  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
+  transition: all 0.3s ease-in;
+}
+.hero-wrap {
+  max-width: 1100px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 20px;
+  position: relative;
+}
+.hero-wrap:before,
+.hero-wrap:after {
+  content: " ";
+  display: table;
+}
+.hero-wrap:after {
+  clear: both;
+}
+.hero-wrap-hand {
+  position: absolute;
+  width: 400px;
+  height: auto;
+  bottom: 0;
+  left: -50px;
+  transform: translateX(0);
+}
+.hero-wrap-hd {
+  position: absolute;
+  top: 200px;
+  right: 20px;
+  width: 70%;
+  font-size: 48px;
+  text-align: right;
+  color: #ffffff;
+  transform: translateX(0);
+}
+.hero-wrap-hd > * {
+  display: inline-block;
+  margin: 0 0 10px;
+  padding: 0 20px;
+  font-weight: 600;
+  background: rgba(243, 139, 36, 0.8);
+}
+.hero-wrap-hd > *:last-child {
+  background: rgba(255, 255, 255, 0.8);
+  color: #f38a00;
+}
+/* ---------------------------------------------------------------------
+ Headings
+ ----------------------------------------------------------------------- */
+.hdg {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 24px;
+  font-weight: 600;
+}
+.hdg_center {
+  text-align: center;
+}
+/* ---------------------------------------------------------------------
+ hList
+ ----------------------------------------------------------------------- */
+.hList:before,
+.hList:after {
+  content: " ";
+  display: table;
+}
+.hList:after {
+  clear: both;
+}
+.hList > * {
+  float: left;
+  width: 50%;
+  text-align: center;
+}
+.hList > * + * {
+  margin-top: 5px;
+}
+/* ---------------------------------------------------------------------
+ iconImage
+ ----------------------------------------------------------------------- */
+.iconImage {
+  display: block;
+  width: 80px;
+  height: 67px;
+  margin: 0 auto;
+  background-size: 80px 67px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+/* ---------------------------------------------------------------------
+ Inputs
+ ----------------------------------------------------------------------- */
+.input {
+  padding: 6px 2%;
+  width: 96%;
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  background: transparent;
+  border: 1px solid #ccc2b6;
+  border-radius: 6px;
+  line-height: 1.6;
+  letter-spacing: 1.8px;
+  -webkit-appearance: none;
+}
+.input:focus {
+  outline: 0;
+}
+/* ---------------------------------------------------------------------
+ Label
+ ----------------------------------------------------------------------- */
+.label {
+  display: block;
+  margin: 2px 0 0;
+  padding: 0;
+  width: 100%;
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  text-align: left;
+  -webkit-appearance: none;
+}
+.label_hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+/* ---------------------------------------------------------------------
+ languageSelect
+ ----------------------------------------------------------------------- */
+.languageSelect {
+  display: block;
+  width: 140px;
+  padding: 8px 0 0;
+  margin: 0 auto;
+}
+.languageSelect:before,
+.languageSelect:after {
+  content: " ";
+  display: table;
+}
+.languageSelect:after {
+  clear: both;
+}
+.languageSelect-label {
+  float: left;
+  margin-right: 5px;
+  font-size: 12px;
+}
+/* ---------------------------------------------------------------------
+ Links
+ ----------------------------------------------------------------------- */
+.link_alt {
+  color: white;
+  text-decoration: none;
+}
+.link_hasIcon {
+  display: inline-block;
+  position: relative;
+  padding-left: 30px;
+}
+/* ---------------------------------------------------------------------
+ 12 Column mobileGrid
+ ----------------------------------------------------------------------- */
+.mobileGrid:before,
+.mobileGrid:after {
+  content: " ";
+  display: table;
+}
+.mobileGrid:after {
+  clear: both;
+}
+.mobileGrid-col {
+  float: left;
+}
+.mobileGrid-col + .mobileGrid-col {
+  margin-left: 2.127663%;
+}
+.mobileGrid-col_1of12 {
+  width: 6.382989%;
+}
+.mobileGrid-col_2of12 {
+  width: 14.893641%;
+}
+.mobileGrid-col_3of12 {
+  width: 23.404293%;
+}
+.mobileGrid-col_4of12 {
+  width: 31.914945%;
+}
+.mobileGrid-col_5of12 {
+  width: 40.425597%;
+}
+.mobileGrid-col_6of12 {
+  width: 48.936249%;
+}
+.mobileGrid-col_7of12 {
+  width: 57.446901%;
+}
+.mobileGrid-col_8of12 {
+  width: 65.957553%;
+}
+.mobileGrid-col_9of12 {
+  width: 74.468205%;
+}
+.mobileGrid-col_10of12 {
+  width: 82.978857%;
+}
+.mobileGrid-col_11of12 {
+  width: 91.489509%;
+}
+.mobileGrid-col_12of12 {
+  width: 100%;
+}
+/* ---------------------------------------------------------------------
+ Pull Nav
+ ----------------------------------------------------------------------- */
+.pullNav_mobile {
+  float: right;
+}
+/* ---------------------------------------------------------------------
+ Pull Nav
+ ----------------------------------------------------------------------- */
+.pushNav {
+  overflow-x: hidden;
+  position: relative;
+  left: 0;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+.pushNav_isExpanded {
+  left: 240px;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+}
+.pushNav-nav {
+  position: fixed;
+  top: 0;
+  left: -240px;
+  width: 240px;
+  height: 100%;
+  background-color: #f0f0f0;
+  z-index: 1000;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+.pushNav-nav_isExpanded {
+  left: 0;
+}
+/* ---------------------------------------------------------------------------
+ stackList -- Lays out horizontally on desktop but stacks vertically on mobile
+ ----------------------------------------------------------------------------- */
+.stackList > * {
+  margin-top: 15px;
+  text-align: center;
+  vertical-align: top;
+}
+/* ---------------------------------------------------------------------
+ Triangle Section
+ ----------------------------------------------------------------------- */
+.triangleSection {
+  position: relative;
+  padding: 80px 0 60px;
+  margin-bottom: 60px;
+  border-top: 2px solid #f38a00;
+  border-bottom: 1px solid #ccc2b6;
+  background: url(../images/hero-super-blur.jpg) no-repeat center center;
+  background-size: cover;
+}
+.triangleSection-triangle {
+  width: 0;
+  height: 0;
+  margin-left: -30px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-top: 30px solid #f38a00;
+}
+/* -----------------------------------------------------------
+ Media Queries
+ ---------------------------------------------------------- */
+@media (min-width: 767px) {
+  /* ---------------------------------------------------------------------
+   Header
+   ----------------------------------------------------------------------- */
+  .header {
+    margin-bottom: 0;
+  }
+  /* ---------------------------------------------------------------------
+   Logo
+   ----------------------------------------------------------------------- */
+  .appLogo {
+    margin: 15px 0 0;
+  }
+  .appLogo_alt {
+    margin: 0 auto;
+  }
+  /* ---------------------------------------------------------------------
+   appIcon Small
+   ----------------------------------------------------------------------- */
+  .appIcon {
+    margin: 15px 1% 0 0;
+    width: 30%;
+  }
+  /* ---------------------------------------------------------------------
+   Circles Small
+   ----------------------------------------------------------------------- */
+  .circles > * {
+    display: inline-block;
+    margin: 0 20px;
+  }
+  /* ---------------------------------------------------------------------
+   Container Small
+   ----------------------------------------------------------------------- */
+  /* ---------------------------------------------------------------------
+   12 Column Grid Small
+   ----------------------------------------------------------------------- */
+  .grid-col {
+    float: left;
+  }
+  .grid-col + .grid-col {
+    margin-left: 2.127663%;
+  }
+  .grid-col_1of12 {
+    width: 6.382989%;
+  }
+  .grid-col_2of12 {
+    width: 14.893641%;
+  }
+  .grid-col_3of12 {
+    width: 23.404293%;
+  }
+  .grid-col_4of12 {
+    width: 31.914945%;
+  }
+  .grid-col_5of12 {
+    width: 40.425597%;
+  }
+  .grid-col_6of12 {
+    width: 48.936249%;
+  }
+  .grid-col_7of12 {
+    width: 57.446901%;
+  }
+  .grid-col_8of12 {
+    width: 65.957553%;
+  }
+  .grid-col_9of12 {
+    width: 74.468205%;
+  }
+  .grid-col_10of12 {
+    width: 82.978857%;
+  }
+  .grid-col_11of12 {
+    width: 91.489509%;
+  }
+  .grid-col_12of12 {
+    width: 100%;
+  }
+  /* ---------------------------------------------------------------------
+   Hero Small Screens
+   ----------------------------------------------------------------------- */
+  .hero {
+    height: 500px;
+    display: block;
+  }
+  .hero-wrap-hand {
+    width: 420px;
+    left: -100px;
+  }
+  .hero-wrap-hd {
+    top: 180px;
+    width: 80%;
+    font-size: 40px;
+  }
+  /* ---------------------------------------------------------------------
+   hList
+   ----------------------------------------------------------------------- */
+  .hList > * {
+    width: auto;
+    text-align: left;
+  }
+  .hList > * + * {
+    margin-left: 4px;
+    margin-top: 0;
+  }
+  .hList_spaced > * + * {
+    margin-left: 20px;
+  }
+  /* ---------------------------------------------------------------------
+   Inputs Small
+   ----------------------------------------------------------------------- */
+  .input {
+    padding: 6px 8px;
+    width: 140px;
+  }
+  .input:focus {
+    font-size: 12px;
+    /* Overrides the 16px zooming fix for iOS on mobile */
+  
+  }
+  /* ---------------------------------------------------------------------
+   languageSelect
+   ----------------------------------------------------------------------- */
+  .languageSelect {
+    float: right;
+    margin: 0;
+  }
+  /* ---------------------------------------------------------------------
+   Pull Nav Small
+   ----------------------------------------------------------------------- */
+  .pullNav {
+    float: right;
+  }
+  /* ---------------------------------------------------------------------
+   stackList Desktop Styles
+   ----------------------------------------------------------------------- */
+  .stackList > * {
+    display: inline-block;
+    width: auto;
+    margin-top: 0;
+    text-align: right;
+  }
+  .stackList > * + * {
+    margin-left: 10px;
+  }
+  /* ---------------------------------------------------------------------
+   Triangle Section
+   ----------------------------------------------------------------------- */
+  .triangleSection {
+    padding: 80px 0 60px;
+    margin-bottom: 60px;
+    background: #ffffff;
+  }
+}
+@media (min-width: 979px) {
+  /* ---------------------------------------------------------------------
+   Container Medium
+   ----------------------------------------------------------------------- */
+  /* ---------------------------------------------------------------------
+   Hero Medium Screens
+   ----------------------------------------------------------------------- */
+  .hero-wrap-hand {
+    width: 440px;
+    left: -50px;
+  }
+  .hero-wrap-hd {
+    top: 200px;
+    width: 70%;
+    font-size: 44px;
+  }
+}
+@media (min-width: 1170px) {
+  /* ---------------------------------------------------------------------
+   Container Large
+   ----------------------------------------------------------------------- */
+  /* ---------------------------------------------------------------------
+   Hero Large Screens
+   ----------------------------------------------------------------------- */
+  .hero {
+    height: 600px;
+  }
+  .hero-wrap-hand {
+    width: 520px;
+    left: -50px;
+  }
+  .hero-wrap-hd {
+    top: 200px;
+    width: 60%;
+    font-size: 48px;
+  }
+}
+/* -----------------------------------------------------------
+ Media Utils
+ ---------------------------------------------------------- */
+.isHiddenSmall {
+  display: none;
+}
+@media (min-width: 767px) {
+  .isHiddenSmall {
+    display: block;
+  }
+  .isVisibleSmall {
+    display: none;
+  }
+}
+@media (min-width: 979px) {
+  
+}
+@media (min-width: 1170px) {
+  
+}

File less/_dist/base_prefixed.css

+/* -----------------------------------------------------------
+
+    Project: CHAMBERLAIN.MyQresponsive
+    Author: Nate Arnold (narnold@nerdery.com)
+
+ ---------------------------------------------------------- */
+
+/* ---------------------------------------------------------------------
+ Reset
+ ----------------------------------------------------------------------- */
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* ---------------------------------------------------------------------
+ Global Styles
+ ----------------------------------------------------------------------- */
+
+body {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.6;
+  color: #666666;
+}
+
+a {
+  color: #003763;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #f38a00;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+strong {
+  font-weight: 600;
+}
+
+select:focus,
+input:focus {
+  font-size: 16px;
+  /* Prevents iOS zooming effect */
+}
+
+.mixin-gradient {
+  background: #ffffff;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #ffffff), color-stop(100%, #f0f0f0));
+  background: -webkit-linear-gradient(top, #ffffff 40%, #f0f0f0 100%);
+  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
+  background: linear-gradient(to bottom, #ffffff 40%, #f0f0f0 100%);
+}
+
+.mixin-clearfix:before,
+.mixin-clearfix:after {
+  content: " ";
+  display: table;
+}
+
+.mixin-clearfix:after {
+  clear: both;
+}
+
+/* ---------------------------------------------------------------------
+ Footer
+ ----------------------------------------------------------------------- */
+
+.footer {
+  margin: 40px 0 0;
+  padding: 30px 0;
+  color: white;
+}
+
+/* ---------------------------------------------------------------------
+ Header
+ ----------------------------------------------------------------------- */
+
+.header {
+  padding: 0 0 15px;
+  margin-bottom: 60px;
+  text-align: center;
+}
+
+.header-crown {
+  padding: 0 0 8px;
+  margin-bottom: 15px;
+  background-color: #f0f0f0;
+}
+
+/* ---------------------------------------------------------------------
+ appIcon
+ ----------------------------------------------------------------------- */
+
+.appIcon {
+  display: inline-block;
+  margin: 15px 1% 0 0;
+  padding: 0;
+  width: 44%;
+}
+
+.appIcon-img {
+  width: 100%;
+  height: auto;
+}
+
+/* ---------------------------------------------------------------------
+ Logo
+ ----------------------------------------------------------------------- */
+
+.appLogo {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0 auto 15px;
+}
+
+/* ---------------------------------------------------------------------
+ Box
+ ----------------------------------------------------------------------- */
+
+.box {
+  margin: 0 0 20px;
+  padding: 20px;
+  background: #f0f0f0;
+}
+
+/* ---------------------------------------------------------------------
+ Buttons
+ ----------------------------------------------------------------------- */
+
+.btn {
+  display: inline-block;
+  margin: 0;
+  padding: 10px 18px;
+  border-radius: 6px;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  text-decoration: none;
+  letter-spacing: 1.8px;
+}
+
+.btn:hover,
+.btn:active {
+  color: white;
+}
+
+.btn-hiddenText {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.btn_alt:hover,
+.btn_alt:active {
+  color: #ffffff;
+}
+
+.btn_link {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  text-transform: none;
+}
+
+.btn_link:hover,
+.btn_link:active {
+  color: #666666;
+  background-color: transparent;
+  border: 0;
+}
+
+.btn_narrow {
+  padding: 6px;
+}
+
+.btn_block {
+  display: block;
+}
+
+/* ---------------------------------------------------------------------
+ Checkbox
+ ----------------------------------------------------------------------- */
+
+.checkbox:before,
+.checkbox:after {
+  content: " ";
+  display: table;
+}
+
+.checkbox:after {
+  clear: both;
+}
+
+.checkbox-checkbox {
+  float: left;
+  margin: 4px 4px 0 0;
+  padding: 0;
+  font-size: 16px;
+}
+
+/* ---------------------------------------------------------------------
+ Circles
+ ----------------------------------------------------------------------- */
+
+.circles {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.circles > * {
+  overflow: hidden;
+  display: block;
+  width: 200px;
+  height: 0;
+  margin: 0 auto 20px;
+  padding: 30px 40px 250px;
+  position: relative;
+  background-color: #f8f8f8;
+  border: 2px solid #f38a00;
+  border-radius: 50%;
+  font-size: 120%;
+}
+
+/* ---------------------------------------------------------------------
+ Container
+ ----------------------------------------------------------------------- */
+
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 20px;
+  position: relative;
+}
+
+.container:before,
+.container:after {
+  content: " ";
+  display: table;
+}
+
+.container:after {
+  clear: both;
+}
+
+/* ---------------------------------------------------------------------
+ fancySelect
+ https://github.com/octopuscreative/FancySelect
+ ----------------------------------------------------------------------- */
+
+div.fancy-select {
+  position: relative;
+  font-size: 12px;
+}
+
+div.fancy-select.disabled {
+  opacity: 0.5;
+}
+
+div.fancy-select div.trigger {
+  cursor: pointer;
+  padding: 0 10px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  width: 60px;
+  transition: all 240ms ease-out;
+  -webkit-transition: all 240ms ease-out;
+}
+
+div.fancy-select div.trigger:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: #666666;
+  top: 8px;
+  right: 0;
+}
+
+div.fancy-select div.trigger.open:after {
+  border-top-color: #f0f0f0;
+}
+
+div.fancy-select ul.options {
+  list-style: none;
+  margin: 0;
+  position: absolute;
+  top: 50px;
+  left: 0;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 50;
+  max-height: 200px;
+  overflow: auto;
+  background: #f0f0f0;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  min-width: 140px;
+  transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+  -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+}
+
+div.fancy-select ul.options.open {
+  visibility: visible;
+  top: 32px;
+  opacity: 1;
+  /* have to use a non-visibility transition to prevent this iOS issue (bug?): */
+  /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
+  transition: opacity 300ms ease-out, top 300ms ease-out;
+  -webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
+}
+
+div.fancy-select ul.options li {
+  padding: 8px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 150ms ease-out;
+  -webkit-transition: all 150ms ease-out;
+}
+
+div.fancy-select ul.options li.selected {
+  color: #ffffff;
+}
+
+div.fancy-select ul.options li.hover {
+  color: #ffffff;
+}
+
+/* ---------------------------------------------------------------------
+ 12 Column Grid
+ ----------------------------------------------------------------------- */
+
+.grid:before,
+.grid:after {
+  content: " ";
+  display: table;
+}
+
+.grid:after {
+  clear: both;
+}
+
+/* ---------------------------------------------------------------------
+ Hero
+ ----------------------------------------------------------------------- */
+
+.hero {
+  display: none;
+  overflow: hidden;
+  /* Hides pseudo class on highlighted headings */
+  width: 100%;
+  position: relative;
+  background: url('../images/hero.jpg') no-repeat center center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  background-attachment: fixed;
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.hero-wrap {
+  max-width: 1100px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 20px;
+  position: relative;
+}
+
+.hero-wrap:before,
+.hero-wrap:after {
+  content: " ";
+  display: table;
+}
+
+.hero-wrap:after {
+  clear: both;
+}
+
+.hero-wrap-hand {
+  position: absolute;
+  width: 400px;
+  height: auto;
+  bottom: 0;
+  left: -50px;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.hero-wrap-hd {
+  position: absolute;
+  top: 200px;
+  right: 20px;
+  width: 70%;
+  font-size: 48px;
+  text-align: right;
+  color: #ffffff;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.hero-wrap-hd > * {
+  display: inline-block;
+  margin: 0 0 10px;
+  padding: 0 20px;
+  font-weight: 600;
+  background: rgba(243, 139, 36, 0.8);
+}
+
+.hero-wrap-hd > *:last-child {
+  background: rgba(255, 255, 255, 0.8);
+  color: #f38a00;
+}
+
+/* ---------------------------------------------------------------------
+ Headings
+ ----------------------------------------------------------------------- */
+
+.hdg {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.hdg_center {
+  text-align: center;
+}
+
+/* ---------------------------------------------------------------------
+ hList
+ ----------------------------------------------------------------------- */
+
+.hList:before,
+.hList:after {
+  content: " ";
+  display: table;
+}
+
+.hList:after {
+  clear: both;
+}
+
+.hList > * {
+  float: left;
+  width: 50%;
+  text-align: center;
+}
+
+.hList > * + * {
+  margin-top: 5px;
+}
+
+/* ---------------------------------------------------------------------
+ iconImage
+ ----------------------------------------------------------------------- */
+
+.iconImage {
+  display: block;
+  width: 80px;
+  height: 67px;
+  margin: 0 auto;
+  -webkit-background-size: 80px 67px;
+  background-size: 80px 67px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+/* ---------------------------------------------------------------------
+ Inputs
+ ----------------------------------------------------------------------- */
+
+.input {
+  padding: 6px 2%;
+  width: 96%;
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  background: transparent;
+  border: 1px solid #ccc2b6;
+  border-radius: 6px;
+  line-height: 1.6;
+  letter-spacing: 1.8px;
+  -webkit-appearance: none;
+}
+
+.input:focus {
+  outline: 0;
+}
+
+/* ---------------------------------------------------------------------
+ Label
+ ----------------------------------------------------------------------- */
+
+.label {
+  display: block;
+  margin: 2px 0 0;
+  padding: 0;
+  width: 100%;
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  text-align: left;
+  -webkit-appearance: none;
+}
+
+.label_hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+/* ---------------------------------------------------------------------
+ languageSelect
+ ----------------------------------------------------------------------- */
+
+.languageSelect {
+  display: block;
+  width: 140px;
+  padding: 8px 0 0;
+  margin: 0 auto;
+}
+
+.languageSelect:before,
+.languageSelect:after {
+  content: " ";
+  display: table;
+}
+
+.languageSelect:after {
+  clear: both;
+}
+
+.languageSelect-label {
+  float: left;
+  margin-right: 5px;
+  font-size: 12px;
+}
+
+/* ---------------------------------------------------------------------
+ Links
+ ----------------------------------------------------------------------- */
+
+.link_alt {
+  color: white;
+  text-decoration: none;
+}
+
+.link_hasIcon {
+  display: inline-block;
+  position: relative;
+  padding-left: 30px;
+}
+
+/* ---------------------------------------------------------------------
+ 12 Column mobileGrid
+ ----------------------------------------------------------------------- */
+
+.mobileGrid:before,
+.mobileGrid:after {
+  content: " ";
+  display: table;
+}
+
+.mobileGrid:after {
+  clear: both;
+}
+
+.mobileGrid-col {
+  float: left;
+}
+
+.mobileGrid-col + .mobileGrid-col {
+  margin-left: 2.127663%;
+}
+
+.mobileGrid-col_1of12 {
+  width: 6.382989%;
+}
+
+.mobileGrid-col_2of12 {
+  width: 14.893641%;
+}
+
+.mobileGrid-col_3of12 {
+  width: 23.404293%;
+}
+
+.mobileGrid-col_4of12 {
+  width: 31.914945%;
+}
+
+.mobileGrid-col_5of12 {
+  width: 40.425597%;
+}
+
+.mobileGrid-col_6of12 {
+  width: 48.936249%;
+}
+
+.mobileGrid-col_7of12 {
+  width: 57.446901%;
+}
+
+.mobileGrid-col_8of12 {
+  width: 65.957553%;
+}
+
+.mobileGrid-col_9of12 {
+  width: 74.468205%;
+}
+
+.mobileGrid-col_10of12 {
+  width: 82.978857%;
+}
+
+.mobileGrid-col_11of12 {
+  width: 91.489509%;
+}
+
+.mobileGrid-col_12of12 {
+  width: 100%;
+}
+
+/* ---------------------------------------------------------------------
+ Pull Nav
+ ----------------------------------------------------------------------- */
+
+.pullNav_mobile {
+  float: right;
+}
+
+/* ---------------------------------------------------------------------
+ Pull Nav
+ ----------------------------------------------------------------------- */
+
+.pushNav {
+  overflow-x: hidden;
+  position: relative;
+  left: 0;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.pushNav_isExpanded {
+  left: 240px;
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+}
+
+.pushNav-nav {
+  position: fixed;
+  top: 0;
+  left: -240px;
+  width: 240px;
+  height: 100%;
+  background-color: #f0f0f0;
+  z-index: 1000;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.pushNav-nav_isExpanded {
+  left: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ stackList -- Lays out horizontally on desktop but stacks vertically on mobile
+ ----------------------------------------------------------------------------- */
+
+.stackList > * {
+  margin-top: 15px;
+  text-align: center;
+  vertical-align: top;
+}
+
+/* ---------------------------------------------------------------------
+ Triangle Section
+ ----------------------------------------------------------------------- */
+
+.triangleSection {
+  position: relative;
+  padding: 80px 0 60px;
+  margin-bottom: 60px;
+  border-top: 2px solid #f38a00;
+  border-bottom: 1px solid #ccc2b6;
+  background: url(../images/hero-super-blur.jpg) no-repeat center center;
+  -webkit-background-size: cover;
+  background-size: cover;
+}
+
+.triangleSection-triangle {
+  width: 0;
+  height: 0;
+  margin-left: -30px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-top: 30px solid #f38a00;
+}
+
+/* -----------------------------------------------------------
+ Media Queries
+ ---------------------------------------------------------- */
+
+@media (min-width: 767px) {
+  /* ---------------------------------------------------------------------
+   Header
+   ----------------------------------------------------------------------- */
+
+  .header {
+    margin-bottom: 0;
+  }
+
+  /* ---------------------------------------------------------------------
+   Logo
+   ----------------------------------------------------------------------- */
+
+  .appLogo {
+    margin: 15px 0 0;
+  }
+
+  .appLogo_alt {
+    margin: 0 auto;
+  }
+
+  /* ---------------------------------------------------------------------
+   appIcon Small
+   ----------------------------------------------------------------------- */
+
+  .appIcon {
+    margin: 15px 1% 0 0;
+    width: 30%;
+  }
+
+  /* ---------------------------------------------------------------------
+   Circles Small
+   ----------------------------------------------------------------------- */
+
+  .circles > * {
+    display: inline-block;
+    margin: 0 20px;
+  }
+
+  /* ---------------------------------------------------------------------
+   Container Small
+   ----------------------------------------------------------------------- */
+
+  /* ---------------------------------------------------------------------
+   12 Column Grid Small
+   ----------------------------------------------------------------------- */
+
+  .grid-col {
+    float: left;
+  }
+
+  .grid-col + .grid-col {
+    margin-left: 2.127663%;
+  }
+
+  .grid-col_1of12 {
+    width: 6.382989%;
+  }
+
+  .grid-col_2of12 {
+    width: 14.893641%;
+  }
+
+  .grid-col_3of12 {
+    width: 23.404293%;
+  }
+
+  .grid-col_4of12 {
+    width: 31.914945%;
+  }
+
+  .grid-col_5of12 {
+    width: 40.425597%;
+  }
+
+  .grid-col_6of12 {
+    width: 48.936249%;
+  }
+
+  .grid-col_7of12 {
+    width: 57.446901%;
+  }
+
+  .grid-col_8of12 {
+    width: 65.957553%;
+  }
+
+  .grid-col_9of12 {
+    width: 74.468205%;
+  }
+
+  .grid-col_10of12 {
+    width: 82.978857%;
+  }
+
+  .grid-col_11of12 {
+    width: 91.489509%;
+  }
+
+  .grid-col_12of12 {
+    width: 100%;
+  }
+
+  /* ---------------------------------------------------------------------
+   Hero Small Screens
+   ----------------------------------------------------------------------- */
+
+  .hero {
+    height: 500px;
+    display: block;
+  }
+
+  .hero-wrap-hand {
+    width: 420px;
+    left: -100px;
+  }
+
+  .hero-wrap-hd {
+    top: 180px;
+    width: 80%;
+    font-size: 40px;
+  }
+
+  /* ---------------------------------------------------------------------
+   hList
+   ----------------------------------------------------------------------- */
+
+  .hList > * {
+    width: auto;
+    text-align: left;
+  }
+
+  .hList > * + * {
+    margin-left: 4px;
+    margin-top: 0;
+  }
+
+  .hList_spaced > * + * {
+    margin-left: 20px;
+  }
+
+  /* ---------------------------------------------------------------------
+   Inputs Small
+   ----------------------------------------------------------------------- */
+
+  .input {
+    padding: 6px 8px;
+    width: 140px;
+  }
+
+  .input:focus {
+    font-size: 12px;
+    /* Overrides the 16px zooming fix for iOS on mobile */
+  }
+
+  /* ---------------------------------------------------------------------
+   languageSelect
+   ----------------------------------------------------------------------- */
+
+  .languageSelect {
+    float: right;
+    margin: 0;
+  }
+