Commits

Nate Arnold committed c54d555

Add dashboard header and mobile menu for Chamberlain and Liftmaster

  • Participants
  • Parent commits 293f3bd

Comments (0)

Files changed (55)

 $(function() {
-
-    // Toggles Mobile Navigation
-    var toggleNavBtn = $('.js-togglePushNav');
-    var toggleNavNav = $('.pushNav-nav');
-    var pushBody = $('.pushNav');
-
-    toggleNavBtn.click(function(e) {
-        $(toggleNavNav).toggleClass('pushNav-nav_isExpanded');
-        $(pushBody).toggleClass('pushNav_isExpanded');
-    });
+    // Initialize Dashboard Mobile Nav
+    toggleDashboardNav();
 
     // Initialize Fancy Select Plugin on Language Dropdown
     $('.languageSelect-select').fancySelect();
     parallaxingHero();
 });
 
+
 function parallaxingHero() {
     var $win = $(window);
     var $phone = $('.hero-wrap-hand');
         });
     });
 }
+
+
+function toggleDashboardNav() {
+    // Toggles Mobile Navigation on the dashboard
+    var toggle = $('.js-openMobileNav');
+    var icon = toggle.children("i");
+    var nav = $('.menuContainer');
+    var body = $('.pageContainer');
+    var window = $(window);
+    var open = function() {
+        nav.toggleClass('isOpen');
+        body.toggleClass('isOpen');
+        icon.toggleClass('fa-reorder');
+        icon.toggleClass('fa-times');
+    };
+
+    if (window.width() < 767) {
+        toggle.click(function(e) {
+            open();
+        });
+    }
+}

less/_dist/base.css

   color: #003763;
   text-decoration: none;
 }
-a:hover {
-  color: #f38a00;
-}
 img {
   max-width: 100%;
   height: auto;
  ----------------------------------------------------------------------- */
 .header {
   padding: 0 0 15px;
-  margin-bottom: 60px;
-  text-align: center;
 }
 .header-crown {
   padding: 0 0 8px;
   margin-bottom: 15px;
   background-color: #f0f0f0;
 }
+.mix-header_center {
+  text-align: center;
+  margin-bottom: 60px;
+}
 /* ---------------------------------------------------------------------
  appIcon
  ----------------------------------------------------------------------- */
 }
 .appLogo_right {
   float: right;
-  width: 260px;
+  width: 220px;
+  margin: 3px 0 0;
 }
 /* ---------------------------------------------------------------------
  Box
   display: block;
 }
 /* ---------------------------------------------------------------------
+ cardContainer
+ ----------------------------------------------------------------------- */
+.cardContainer {
+  margin: 0 0 40px;
+  padding: 40px 0;
+  background: #f0f0f0;
+  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
+}
+/* ---------------------------------------------------------------------
  Checkbox
  ----------------------------------------------------------------------- */
 .checkbox:before,
   clear: both;
 }
 /* ---------------------------------------------------------------------
- contentWrap
- ----------------------------------------------------------------------- */
-.contentWrap {
-  margin: 0 0 40px;
-  padding: 40px 0;
-  background: #f0f0f0;
-  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
-}
-/* ---------------------------------------------------------------------
  fancySelect
  https://github.com/octopuscreative/FancySelect
  ----------------------------------------------------------------------- */
   display: block;
   width: 140px;
   padding: 8px 0 0;
-  margin: 0 auto;
+  margin: 0;
+  float: right;
 }
 .languageSelect:before,
 .languageSelect:after {
   margin-right: 5px;
   font-size: 12px;
 }
+.mix-languageSelect_center {
+  float: none;
+  margin: 0 auto;
+}
 /* ---------------------------------------------------------------------
  Links
  ----------------------------------------------------------------------- */
   padding-left: 30px;
 }
 /* ---------------------------------------------------------------------
+ menuContainer
+ ----------------------------------------------------------------------- */
+.menuContainer {
+  position: fixed;
+  left: -80%;
+  width: 80%;
+  min-height: 100%;
+  box-shadow: inset -20px 0px 40px rgba(0, 0, 0, 0.5);
+}
+.menuContainer.isOpen {
+  left: 0;
+}
+/* ---------------------------------------------------------------------
  12 Column mobileGrid
  ----------------------------------------------------------------------- */
 .mobileGrid:before,
   width: 100%;
 }
 /* ---------------------------------------------------------------------
- Pull Nav
+ mobileMenu
  ----------------------------------------------------------------------- */
-.pullNav_mobile {
-  float: right;
+.mobileMenu {
+  width: 100%;
+  padding: 35px 0 0;
 }
 /* ---------------------------------------------------------------------
- Pull Nav
+ mobileLink
  ----------------------------------------------------------------------- */
-.pushNav {
-  overflow-x: hidden;
+.mobileLink {
+  display: block;
   position: relative;
-  left: 0;
-  -webkit-transition: all 0.3s ease;
-  -moz-transition: all 0.3s ease;
-  transition: all 0.3s ease;
+  width: 66%;
+  padding: 13px 10% 13px 24%;
+  font-size: 24px;
+  color: white;
+  background: transparent;
 }
-.pushNav_isExpanded {
-  left: 240px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+.mobileLink:active {
+  color: white;
+  box-shadow: inset -20px 0px 40px rgba(0, 0, 0, 0.5);
+}
+.mobileLink-icon {
+  position: absolute;
+  top: 20px;
+  left: 10%;
+  width: 24px;
+  height: auto;
 }
-.pushNav-nav {
+/* ---------------------------------------------------------------------
+ pageContainer
+ ----------------------------------------------------------------------- */
+.pageContainer.isOpen {
   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;
+  width: 100%;
+  left: 80%;
 }
-.pushNav-nav_isExpanded {
-  left: 0;
+/* ---------------------------------------------------------------------
+ Pull Nav
+ ----------------------------------------------------------------------- */
+.pullNav_mobile {
+  float: right;
 }
 /* ---------------------------------------------------------------------------
  stackList -- Lays out horizontally on desktop but stacks vertically on mobile
   /* ---------------------------------------------------------------------
    languageSelect
    ----------------------------------------------------------------------- */
-  .languageSelect {
+  .mix-languageSelect_center {
     float: right;
-    margin: 0;
   }
   /* ---------------------------------------------------------------------
    Pull Nav Small
     float: right;
   }
   /* ---------------------------------------------------------------------
+   pageContainer
+   ----------------------------------------------------------------------- */
+  .pageContainer.isOpen {
+    position: static;
+  }
+  /* ---------------------------------------------------------------------
    stackList Desktop Styles
    ----------------------------------------------------------------------- */
   .stackList > * {

less/_dist/base_prefixed.css

   text-decoration: none;
 }
 
-a:hover {
-  color: #f38a00;
-}
-
 img {
   max-width: 100%;
   height: auto;
 
 .header {
   padding: 0 0 15px;
-  margin-bottom: 60px;
-  text-align: center;
 }
 
 .header-crown {
   background-color: #f0f0f0;
 }
 
+.mix-header_center {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
 /* ---------------------------------------------------------------------
  appIcon
  ----------------------------------------------------------------------- */
 
 .appLogo_right {
   float: right;
-  width: 260px;
+  width: 220px;
+  margin: 3px 0 0;
 }
 
 /* ---------------------------------------------------------------------
 }
 
 /* ---------------------------------------------------------------------
+ cardContainer
+ ----------------------------------------------------------------------- */
+
+.cardContainer {
+  margin: 0 0 40px;
+  padding: 40px 0;
+  background: #f0f0f0;
+  -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* ---------------------------------------------------------------------
  Checkbox
  ----------------------------------------------------------------------- */
 
 }
 
 /* ---------------------------------------------------------------------
- contentWrap
- ----------------------------------------------------------------------- */
-
-.contentWrap {
-  margin: 0 0 40px;
-  padding: 40px 0;
-  background: #f0f0f0;
-  -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
-}
-
-/* ---------------------------------------------------------------------
  fancySelect
  https://github.com/octopuscreative/FancySelect
  ----------------------------------------------------------------------- */
   display: block;
   width: 140px;
   padding: 8px 0 0;
-  margin: 0 auto;
+  margin: 0;
+  float: right;
 }
 
 .languageSelect:before,
   font-size: 12px;
 }
 
+.mix-languageSelect_center {
+  float: none;
+  margin: 0 auto;
+}
+
 /* ---------------------------------------------------------------------
  Links
  ----------------------------------------------------------------------- */
 }
 
 /* ---------------------------------------------------------------------
+ menuContainer
+ ----------------------------------------------------------------------- */
+
+.menuContainer {
+  position: fixed;
+  left: -80%;
+  width: 80%;
+  min-height: 100%;
+  -webkit-box-shadow: inset -20px 0px 40px rgba(0, 0, 0, 0.5);
+  box-shadow: inset -20px 0px 40px rgba(0, 0, 0, 0.5);
+}
+
+.menuContainer.isOpen {
+  left: 0;
+}
+
+/* ---------------------------------------------------------------------
  12 Column mobileGrid
  ----------------------------------------------------------------------- */
 
 }
 
 /* ---------------------------------------------------------------------
- Pull Nav
+ mobileMenu
  ----------------------------------------------------------------------- */
 
-.pullNav_mobile {
-  float: right;
+.mobileMenu {
+  width: 100%;
+  padding: 35px 0 0;
 }
 
 /* ---------------------------------------------------------------------
- Pull Nav
+ mobileLink
  ----------------------------------------------------------------------- */
 
-.pushNav {
-  overflow-x: hidden;
+.mobileLink {
+  display: block;
   position: relative;
-  left: 0;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
+  width: 66%;
+  padding: 13px 10% 13px 24%;
+  font-size: 24px;
+  color: white;
+  background: transparent;
 }
 
-.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);
+.mobileLink:active {
+  color: white;
+  -webkit-box-shadow: inset -20px 0px 40px rgba(0, 0, 0, 0.5);
+  box-shadow: inset -20px 0px 40px rgba(0, 0, 0, 0.5);
+}
+
+.mobileLink-icon {
+  position: absolute;
+  top: 20px;
+  left: 10%;
+  width: 24px;
+  height: auto;
 }
 
-.pushNav-nav {
+/* ---------------------------------------------------------------------
+ pageContainer
+ ----------------------------------------------------------------------- */
+
+.pageContainer.isOpen {
   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;
+  width: 100%;
+  left: 80%;
 }
 
-.pushNav-nav_isExpanded {
-  left: 0;
+/* ---------------------------------------------------------------------
+ Pull Nav
+ ----------------------------------------------------------------------- */
+
+.pullNav_mobile {
+  float: right;
 }
 
 /* ---------------------------------------------------------------------------
    languageSelect
    ----------------------------------------------------------------------- */
 
-  .languageSelect {
+  .mix-languageSelect_center {
     float: right;
-    margin: 0;
   }
 
   /* ---------------------------------------------------------------------
   }
 
   /* ---------------------------------------------------------------------
+   pageContainer
+   ----------------------------------------------------------------------- */
+
+  .pageContainer.isOpen {
+    position: static;
+  }
+
+  /* ---------------------------------------------------------------------
    stackList Desktop Styles
    ----------------------------------------------------------------------- */
 

less/_dist/theme_chamberlain.css

   clear: both;
 }
 /* ---------------------------------------------------------------------
+ Global Styles
+ ----------------------------------------------------------------------- */
+a:hover {
+  color: #f38a00;
+}
+/* ---------------------------------------------------------------------
  Footer
  ----------------------------------------------------------------------- */
 .footer {
   color: #f38a00;
 }
 /* ---------------------------------------------------------------------
+ menuContainer Chamberlain
+ ----------------------------------------------------------------------- */
+.menuContainer {
+  background: #314454;
+}
+/* ---------------------------------------------------------------------
+ mobileLink Chamberlain
+ ----------------------------------------------------------------------- */
+.mobileLink:active {
+  background-color: #2A3742;
+}
+/* ---------------------------------------------------------------------
  Triangle Section Chamberlain
  ----------------------------------------------------------------------- */
 .triangleSection {

less/_dist/theme_liftmaster.css

   clear: both;
 }
 /* ---------------------------------------------------------------------
+ Global Styles Liftmaster
+ ----------------------------------------------------------------------- */
+a:hover {
+  color: #8b2331;
+}
+/* ---------------------------------------------------------------------
  Footer
  ----------------------------------------------------------------------- */
 .footer {
   color: #8b2331;
 }
 /* ---------------------------------------------------------------------
+ menuContainer
+ ----------------------------------------------------------------------- */
+.menuContainer {
+  background: #343434;
+}
+/* ---------------------------------------------------------------------
+ mobileLink Liftmaster
+ ----------------------------------------------------------------------- */
+.mobileLink:active {
+  background-color: #222222;
+}
+/* ---------------------------------------------------------------------
  Triangle Section Liftmaster
  ----------------------------------------------------------------------- */
 .triangleSection {

less/base/_global.less

     text-decoration: none;
 }
 
-a:hover {
-    color: @COLOR_ORANGE;
-}
-
 img {
     max-width: 100%;
     height: auto;

less/base/_global_chamberlain.less

+
+/* ---------------------------------------------------------------------
+ Global Styles
+ ----------------------------------------------------------------------- */
+
+a:hover {
+    color: @COLOR_ORANGE;
+}

less/base/_global_liftmaster.less

+
+/* ---------------------------------------------------------------------
+ Global Styles Liftmaster
+ ----------------------------------------------------------------------- */
+
+a:hover {
+    color: @COLOR_RED;
+}

less/helpers/_variables_liftmaster.less

-
-// ------------------------------------------------------------------
-// Variables
-// ------------------------------------------------------------------
-
-// Colors
-@COLOR_GRAY: #666666;
-@COLOR_LTGRAY: #f0f0f0;
-@COLOR_TAN: #ccc2b6;
-@COLOR_ORANGE: #8b2331;
-@COLOR_ORANGE_TRANSPARENT: rgba(139, 34, 49, 0.8);
-@COLOR_BLUE: #333333;
-@COLOR_LTBLUE: #00aeef;
-
-// Fonts
-@FONT_FAMILY_OPENSANS: 'Open Sans', Arial, Helvetica, sans-serif;
-@FONT_WEIGHT_NORMAL: 300;
-@FONT_WEIGHT_BOLD: 600;
-
-// Radius
-@BORDER_RADIUS: 6px;

less/landmarks/header/_header_screen.less

 
 .header {
     padding: 0 0 15px;
-    margin-bottom: 60px;
-    text-align: center;
     // border-bottom: 1px solid @COLOR_TAN;
     // background-image: url(../images/header-bg-left.png), url(../images/header-bg-right.png);
     // background-repeat: no-repeat;
     margin-bottom: 15px;
     background-color: @COLOR_LTGRAY;
 }
+
+.mix-header_center {
+    text-align: center;
+    margin-bottom: 60px;
+}

less/modules/appLogo/_appLogo_screen.less

 
 .appLogo_right {
     float: right;
-    width: 260px;
+    width: 220px;
+    margin:  3px 0 0;
 }

less/modules/cardContainer/_cardContainer_screen.less

+
+/* ---------------------------------------------------------------------
+ cardContainer
+ ----------------------------------------------------------------------- */
+
+.cardContainer {
+    margin: 0 0 40px;
+    padding: 40px 0;
+    background: @COLOR_LTGRAY;
+    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.3);
+}

less/modules/contentWrap/_contentWrap_screen.less

-
-/* ---------------------------------------------------------------------
- contentWrap
- ----------------------------------------------------------------------- */
-
-.contentWrap {
-    margin: 0 0 40px;
-    padding: 40px 0;
-    background: @COLOR_LTGRAY;
-    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.3);
-}

less/modules/languageSelect/_languageSelect_screen.less

     display: block;
     width: 140px;
     padding: 8px 0 0;
-    margin: 0 auto;
+    margin: 0;
+    float: right;
 }
 
 .languageSelect-label {
     margin-right: 5px;
     font-size: 12px;
 }
+
+.mix-languageSelect_center {
+    float: none;
+    margin: 0 auto;
+}

less/modules/languageSelect/_languageSelect_small.less

  languageSelect
  ----------------------------------------------------------------------- */
 
-.languageSelect {
+.mix-languageSelect_center {
     float: right;
-    margin: 0;
 }

less/modules/menuContainer/_menuContainer_chamberlain.less

+
+/* ---------------------------------------------------------------------
+ menuContainer Chamberlain
+ ----------------------------------------------------------------------- */
+
+.menuContainer {
+    background: #314454;
+}

less/modules/menuContainer/_menuContainer_liftmaster.less

+
+/* ---------------------------------------------------------------------
+ menuContainer
+ ----------------------------------------------------------------------- */
+
+.menuContainer {
+    background: #343434;
+}

less/modules/menuContainer/_menuContainer_screen.less

+
+/* ---------------------------------------------------------------------
+ menuContainer
+ ----------------------------------------------------------------------- */
+
+.menuContainer {
+    position: fixed;
+    left: -80%;
+    width: 80%;
+    min-height: 100%;
+    box-shadow: inset -20px 0px 40px rgba(0,0,0,0.5);
+}
+
+.menuContainer.isOpen {
+    left: 0;
+}

less/modules/mobileMenu/_mobileMenu_screen.less

+
+/* ---------------------------------------------------------------------
+ mobileMenu
+ ----------------------------------------------------------------------- */
+
+.mobileMenu {
+    width: 100%;
+    padding: 35px 0 0;
+}

less/modules/pageContainer/_pageContainer_screen.less

+
+/* ---------------------------------------------------------------------
+ pageContainer
+ ----------------------------------------------------------------------- */
+
+.pageContainer {}
+
+.pageContainer.isOpen {
+    position: fixed;
+    width: 100%;
+    left: 80%;
+}

less/modules/pageContainer/_pageContainer_small.less

+
+/* ---------------------------------------------------------------------
+ pageContainer
+ ----------------------------------------------------------------------- */
+
+.pageContainer {}
+
+.pageContainer.isOpen {
+    position: static;
+}

less/modules/pushNav/_pushNav_screen.less

-
-/* ---------------------------------------------------------------------
- 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;
-}
 @import "modules/appLogo/_appLogo_screen";
 @import "modules/box/_box_screen";
 @import "modules/btn/_btn_screen";
+@import "modules/cardContainer/_cardContainer_screen";
 @import "modules/checkbox/_checkbox_screen";
 @import "modules/circles/_circles_screen";
 @import "modules/container/_container_screen";
-@import "modules/contentWrap/_contentWrap_screen";
 @import "modules/fancySelect/_fancySelect_screen";
 @import "modules/grid/_grid_screen";
 @import "modules/hero/_hero_screen";
 @import "modules/label/_label_screen";
 @import "modules/languageSelect/_languageSelect_screen";
 @import "modules/link/_link_screen";
+@import "modules/menuContainer/_menuContainer_screen";
 @import "modules/mobileGrid/_mobileGrid_screen";
+@import "modules/mobileMenu/_mobileMenu_screen";
+@import "modules/mobileLink/_mobileLink_screen";
+@import "modules/pageContainer/_pageContainer_screen";
 @import "modules/pullNav/_pullNav_screen";
-@import "modules/pushNav/_pushNav_screen";
 @import "modules/stackList/_stackList_screen";
 @import "modules/triangleSection/_triangleSection_screen";
 

less/screen_small.less

 @import "modules/input/_input_small";
 @import "modules/languageSelect/_languageSelect_small";
 @import "modules/pullNav/_pullNav_small";
+@import "modules/pageContainer/_pageContainer_small";
 @import "modules/stackList/_stackList_small";
 @import "modules/triangleSection/_triangleSection_small";

less/theme_chamberlain.less

 
 
 // -----------------------------------------------------------
+// Base
+// -----------------------------------------------------------
+
+@import "base/_global_chamberlain";
+
+
+// -----------------------------------------------------------
 // Landmarks
 // -----------------------------------------------------------
 
 @import "modules/iconImage/_iconImage_chamberlain";
 @import "modules/input/_input_chamberlain";
 @import "modules/link/_link_chamberlain";
+@import "modules/menuContainer/_menuContainer_chamberlain";
+@import "modules/mobileLink/_mobileLink_chamberlain";
 @import "modules/triangleSection/_triangleSection_chamberlain";

less/theme_liftmaster.less

 
 
 // -----------------------------------------------------------
+// Base
+// -----------------------------------------------------------
+
+@import "base/_global_liftmaster";
+
+
+// -----------------------------------------------------------
 // Landmarks
 // -----------------------------------------------------------
 
 @import "modules/iconImage/_iconImage_liftmaster";
 @import "modules/input/_input_liftmaster";
 @import "modules/link/_link_liftmaster";
+@import "modules/menuContainer/_menuContainer_liftmaster";
+@import "modules/mobileLink/_mobileLink_liftmaster";
 @import "modules/triangleSection/_triangleSection_liftmaster";

public/Assets/scripts/scripts.js

 }).call(this);
 
 $(function() {
-
-    // Toggles Mobile Navigation
-    var toggleNavBtn = $('.js-togglePushNav');
-    var toggleNavNav = $('.pushNav-nav');
-    var pushBody = $('.pushNav');
-
-    toggleNavBtn.click(function(e) {
-        $(toggleNavNav).toggleClass('pushNav-nav_isExpanded');
-        $(pushBody).toggleClass('pushNav_isExpanded');
-    });
+    // Initialize Dashboard Mobile Nav
+    toggleDashboardNav();
 
     // Initialize Fancy Select Plugin on Language Dropdown
     $('.languageSelect-select').fancySelect();
     parallaxingHero();
 });
 
+
 function parallaxingHero() {
     var $win = $(window);
     var $phone = $('.hero-wrap-hand');
         });
     });
 }
+
+
+function toggleDashboardNav() {
+    // Toggles Mobile Navigation on the dashboard
+    var toggle = $('.js-openMobileNav');
+    var icon = toggle.children("i");
+    var nav = $('.menuContainer');
+    var body = $('.pageContainer');
+    var window = $(window);
+    var open = function() {
+        nav.toggleClass('isOpen');
+        body.toggleClass('isOpen');
+        icon.toggleClass('fa-reorder');
+        icon.toggleClass('fa-times');
+    };
+
+    if (window.width() < 767) {
+        toggle.click(function(e) {
+            open();
+        });
+    }
+}

public/Assets/scripts/scripts.min.js

-function parallaxingHero(){var a=$(window),b=$(".hero-wrap-hand"),c=$(".hero-wrap-hd"),d=2.5,e=1e3;a.scroll(function(){var f=a.scrollTop();b.css({transform:"translateY("+f/d+"px)","-webkit-transform":"translateY("+f/d+"px)",opacity:1-f/e}),c.css({transform:"translateY("+f/d+"px)","-webkit-transform":"translateY("+f/d+"px)",opacity:1-f/e})})}(function(){var a;a=window.jQuery||window.Zepto||window.$,a.fn.fancySelect=function(b){var c,d;return null==b&&(b={}),d=a.extend({forceiOS:!1,includeBlank:!1,optionTemplate:function(a){return a.text()},triggerTemplate:function(a){return a.text()}},b),c=!!navigator.userAgent.match(/iP(hone|od|ad)/i),this.each(function(){var b,e,f,g,h,i,j;return g=a(this),g.hasClass("fancified")||"SELECT"!==g[0].tagName?void 0:(g.addClass("fancified"),g.css({width:1,height:1,display:"block",position:"absolute",top:0,left:0,opacity:0}),g.wrap('<div class="fancy-select">'),j=g.parent(),g.data("class")&&j.addClass(g.data("class")),j.append('<div class="trigger">'),(!c||d.forceiOS)&&j.append('<ul class="options">'),h=j.find(".trigger"),f=j.find(".options"),e=g.prop("disabled"),e&&j.addClass("disabled"),i=function(){var a;return a=d.triggerTemplate(g.find(":selected")),h.html(a)},g.on("blur.fs",function(){return h.hasClass("open")?setTimeout(function(){return h.trigger("close.fs")},120):void 0}),h.on("close.fs",function(){return h.removeClass("open"),f.removeClass("open")}),h.on("click.fs",function(){var b,i;if(!e)if(h.toggleClass("open"),c&&!d.forceiOS){if(h.hasClass("open"))return g.focus()}else if(h.hasClass("open")&&(i=h.parent(),b=i.offsetParent(),i.offset().top+i.outerHeight()+f.outerHeight()+20>a(window).height()+a(window).scrollTop()?f.addClass("overflowing"):f.removeClass("overflowing")),f.toggleClass("open"),!c)return g.focus()}),g.on("enable",function(){return g.prop("disabled",!1),j.removeClass("disabled"),e=!1,b()}),g.on("disable",function(){return g.prop("disabled",!0),j.addClass("disabled"),e=!0}),g.on("change.fs",function(a){return a.originalEvent&&a.originalEvent.isTrusted?a.stopPropagation():i()}),g.on("keydown",function(a){var b,c,d;if(d=a.which,b=f.find(".hover"),b.removeClass("hover"),f.hasClass("open")){if(38===d?(a.preventDefault(),b.length&&b.index()>0?b.prev().addClass("hover"):f.find("li:last-child").addClass("hover")):40===d?(a.preventDefault(),b.length&&b.index()<f.find("li").length-1?b.next().addClass("hover"):f.find("li:first-child").addClass("hover")):27===d?(a.preventDefault(),h.trigger("click.fs")):13===d||32===d?(a.preventDefault(),b.trigger("click.fs")):9===d&&h.hasClass("open")&&h.trigger("close.fs"),c=f.find(".hover"),c.length)return f.scrollTop(0),f.scrollTop(c.position().top-12)}else if(13===d||32===d||38===d||40===d)return a.preventDefault(),h.trigger("click.fs")}),f.on("click.fs","li",function(){var b;return b=a(this),g.val(b.data("raw-value")),c||g.trigger("blur.fs").trigger("focus.fs"),f.find(".selected").removeClass("selected"),b.addClass("selected"),g.val(b.data("raw-value")).trigger("change.fs").trigger("blur.fs").trigger("focus.fs")}),f.on("mouseenter.fs","li",function(){var b,c;return c=a(this),b=f.find(".hover"),b.removeClass("hover"),c.addClass("hover")}),f.on("mouseleave.fs","li",function(){return f.find(".hover").removeClass("hover")}),b=function(){var b;return i(),!c||d.forceiOS?(b=g.find("option"),g.find("option").each(function(b,c){var e;return c=a(c),c.prop("disabled")||!c.val()&&!d.includeBlank?void 0:(e=d.optionTemplate(c),f.append(c.prop("selected")?'<li data-raw-value="'+c.val()+'" class="selected">'+e+"</li>":'<li data-raw-value="'+c.val()+'">'+e+"</li>"))})):void 0},g.on("update.fs",function(){return j.find(".options").empty(),b()}),b())})}}).call(this),$(function(){var a=$(".js-togglePushNav"),b=$(".pushNav-nav"),c=$(".pushNav");a.click(function(){$(b).toggleClass("pushNav-nav_isExpanded"),$(c).toggleClass("pushNav_isExpanded")}),$(".languageSelect-select").fancySelect(),parallaxingHero()});
+function parallaxingHero(){var a=$(window),b=$(".hero-wrap-hand"),c=$(".hero-wrap-hd"),d=2.5,e=1e3;a.scroll(function(){var f=a.scrollTop();b.css({transform:"translateY("+f/d+"px)","-webkit-transform":"translateY("+f/d+"px)",opacity:1-f/e}),c.css({transform:"translateY("+f/d+"px)","-webkit-transform":"translateY("+f/d+"px)",opacity:1-f/e})})}function toggleDashboardNav(){var a=$(".js-openMobileNav"),b=a.children("i"),c=$(".menuContainer"),d=$(".pageContainer"),e=$(e),f=function(){c.toggleClass("isOpen"),d.toggleClass("isOpen"),b.toggleClass("fa-reorder"),b.toggleClass("fa-times")};e.width()<767&&a.click(function(){f()})}(function(){var a;a=window.jQuery||window.Zepto||window.$,a.fn.fancySelect=function(b){var c,d;return null==b&&(b={}),d=a.extend({forceiOS:!1,includeBlank:!1,optionTemplate:function(a){return a.text()},triggerTemplate:function(a){return a.text()}},b),c=!!navigator.userAgent.match(/iP(hone|od|ad)/i),this.each(function(){var b,e,f,g,h,i,j;return g=a(this),g.hasClass("fancified")||"SELECT"!==g[0].tagName?void 0:(g.addClass("fancified"),g.css({width:1,height:1,display:"block",position:"absolute",top:0,left:0,opacity:0}),g.wrap('<div class="fancy-select">'),j=g.parent(),g.data("class")&&j.addClass(g.data("class")),j.append('<div class="trigger">'),(!c||d.forceiOS)&&j.append('<ul class="options">'),h=j.find(".trigger"),f=j.find(".options"),e=g.prop("disabled"),e&&j.addClass("disabled"),i=function(){var a;return a=d.triggerTemplate(g.find(":selected")),h.html(a)},g.on("blur.fs",function(){return h.hasClass("open")?setTimeout(function(){return h.trigger("close.fs")},120):void 0}),h.on("close.fs",function(){return h.removeClass("open"),f.removeClass("open")}),h.on("click.fs",function(){var b,i;if(!e)if(h.toggleClass("open"),c&&!d.forceiOS){if(h.hasClass("open"))return g.focus()}else if(h.hasClass("open")&&(i=h.parent(),b=i.offsetParent(),i.offset().top+i.outerHeight()+f.outerHeight()+20>a(window).height()+a(window).scrollTop()?f.addClass("overflowing"):f.removeClass("overflowing")),f.toggleClass("open"),!c)return g.focus()}),g.on("enable",function(){return g.prop("disabled",!1),j.removeClass("disabled"),e=!1,b()}),g.on("disable",function(){return g.prop("disabled",!0),j.addClass("disabled"),e=!0}),g.on("change.fs",function(a){return a.originalEvent&&a.originalEvent.isTrusted?a.stopPropagation():i()}),g.on("keydown",function(a){var b,c,d;if(d=a.which,b=f.find(".hover"),b.removeClass("hover"),f.hasClass("open")){if(38===d?(a.preventDefault(),b.length&&b.index()>0?b.prev().addClass("hover"):f.find("li:last-child").addClass("hover")):40===d?(a.preventDefault(),b.length&&b.index()<f.find("li").length-1?b.next().addClass("hover"):f.find("li:first-child").addClass("hover")):27===d?(a.preventDefault(),h.trigger("click.fs")):13===d||32===d?(a.preventDefault(),b.trigger("click.fs")):9===d&&h.hasClass("open")&&h.trigger("close.fs"),c=f.find(".hover"),c.length)return f.scrollTop(0),f.scrollTop(c.position().top-12)}else if(13===d||32===d||38===d||40===d)return a.preventDefault(),h.trigger("click.fs")}),f.on("click.fs","li",function(){var b;return b=a(this),g.val(b.data("raw-value")),c||g.trigger("blur.fs").trigger("focus.fs"),f.find(".selected").removeClass("selected"),b.addClass("selected"),g.val(b.data("raw-value")).trigger("change.fs").trigger("blur.fs").trigger("focus.fs")}),f.on("mouseenter.fs","li",function(){var b,c;return c=a(this),b=f.find(".hover"),b.removeClass("hover"),c.addClass("hover")}),f.on("mouseleave.fs","li",function(){return f.find(".hover").removeClass("hover")}),b=function(){var b;return i(),!c||d.forceiOS?(b=g.find("option"),g.find("option").each(function(b,c){var e;return c=a(c),c.prop("disabled")||!c.val()&&!d.includeBlank?void 0:(e=d.optionTemplate(c),f.append(c.prop("selected")?'<li data-raw-value="'+c.val()+'" class="selected">'+e+"</li>":'<li data-raw-value="'+c.val()+'">'+e+"</li>"))})):void 0},g.on("update.fs",function(){return j.find(".options").empty(),b()}),b())})}}).call(this),$(function(){toggleDashboardNav(),$(".languageSelect-select").fancySelect(),parallaxingHero()});

public/Assets/styles/base.css

     color: #003763;
 }
 
-a:hover
-{
-    color: #f38a00;
-}
-
 img
 {
     max-width: 100%;
 
 .header
 {
-    margin-bottom: 60px;
     padding: 0 0 15px;
-
-    text-align: center;
 }
 
 .header-crown
     background-color: #f0f0f0;
 }
 
+.mix-header_center
+{
+    margin-bottom: 60px;
+
+    text-align: center;
+}
+
 /* ---------------------------------------------------------------------
  appIcon
  ----------------------------------------------------------------------- */
 {
     float: right;
 
-    width: 260px;
+    width: 220px;
+    margin: 3px 0 0;
 }
 
 /* ---------------------------------------------------------------------
 }
 
 /* ---------------------------------------------------------------------
+ cardContainer
+ ----------------------------------------------------------------------- */
+
+.cardContainer
+{
+    margin: 0 0 40px;
+    padding: 40px 0;
+
+    background: #f0f0f0;
+    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
+            box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
+}
+
+/* ---------------------------------------------------------------------
  Checkbox
  ----------------------------------------------------------------------- */
 
 }
 
 /* ---------------------------------------------------------------------
- contentWrap
- ----------------------------------------------------------------------- */
-
-.contentWrap
-{
-    margin: 0 0 40px;
-    padding: 40px 0;
-
-    background: #f0f0f0;
-    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
-            box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
-}
-
-/* ---------------------------------------------------------------------
  fancySelect
  https://github.com/octopuscreative/FancySelect
  ----------------------------------------------------------------------- */
 .languageSelect
 {
     display: block;
+    float: right;
 
     width: 140px;
-    margin: 0 auto;
+    margin: 0;
     padding: 8px 0 0;
 }
 
     margin-right: 5px;
 }
 
+.mix-languageSelect_center
+{
+    float: none;
+
+    margin: 0 auto;
+}
+
 /* ---------------------------------------------------------------------
  Links
  ----------------------------------------------------------------------- */
 }
 
 /* ---------------------------------------------------------------------
+ menuContainer
+ ----------------------------------------------------------------------- */
+
+.menuContainer
+{
+    position: fixed;
+    left: -80%;
+
+    width: 80%;
+    min-height: 100%;
+
+    -webkit-box-shadow: inset -20px 0 40px rgba(0, 0, 0, .5);
+            box-shadow: inset -20px 0 40px rgba(0, 0, 0, .5);
+}
+
+.menuContainer.isOpen
+{
+    left: 0;
+}
+
+/* ---------------------------------------------------------------------
  12 Column mobileGrid
  ----------------------------------------------------------------------- */
 
 }
 
 /* ---------------------------------------------------------------------
- Pull Nav
+ mobileMenu
  ----------------------------------------------------------------------- */
 
-.pullNav_mobile
+.mobileMenu
 {
-    float: right;
+    width: 100%;
+    padding: 35px 0 0;
 }
 
 /* ---------------------------------------------------------------------
- Pull Nav
+ mobileLink
  ----------------------------------------------------------------------- */
 
-.pushNav
+.mobileLink
 {
+    font-size: 24px;
+
     position: relative;
-    left: 0;
 
-    overflow-x: hidden;
+    display: block;
+
+    width: 66%;
+    padding: 13px 10% 13px 24%;
 
-    -webkit-transition: all .3s ease;
-            transition: all .3s ease;
+    color: white;
+    background: transparent;
 }
 
-.pushNav_isExpanded
+.mobileLink:active
 {
-    left: 240px;
-
-    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
-            box-shadow: 0 0 3px rgba(0, 0, 0, .3);
+    color: white;
+    -webkit-box-shadow: inset -20px 0 40px rgba(0, 0, 0, .5);
+            box-shadow: inset -20px 0 40px rgba(0, 0, 0, .5);
 }
 
-.pushNav-nav
+.mobileLink-icon
 {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    left: -240px;
+    position: absolute;
+    top: 20px;
+    left: 10%;
 
-    width: 240px;
-    height: 100%;
+    width: 24px;
+    height: auto;
+}
 
-    -webkit-transition: all .3s ease;
-            transition: all .3s ease;
+/* ---------------------------------------------------------------------
+ pageContainer
+ ----------------------------------------------------------------------- */
 
-    background-color: #f0f0f0;
+.pageContainer.isOpen
+{
+    position: fixed;
+    left: 80%;
+
+    width: 100%;
 }
 
-.pushNav-nav_isExpanded
+/* ---------------------------------------------------------------------
+ Pull Nav
+ ----------------------------------------------------------------------- */
+
+.pullNav_mobile
 {
-    left: 0;
+    float: right;
 }
 
 /* ---------------------------------------------------------------------------
    languageSelect
    ----------------------------------------------------------------------- */
 
-    .languageSelect
+    .mix-languageSelect_center
     {
         float: right;
-
-        margin: 0;
     }
 
   /* ---------------------------------------------------------------------
     }
 
   /* ---------------------------------------------------------------------
+   pageContainer
+   ----------------------------------------------------------------------- */
+
+    .pageContainer.isOpen
+    {
+        position: static;
+    }
+
+  /* ---------------------------------------------------------------------
    stackList Desktop Styles
    ----------------------------------------------------------------------- */
 

public/Assets/styles/base.min.css

-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{font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;border:0}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-spacing:0;border-collapse:collapse}body{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:14px;font-weight:300;line-height:1.6;color:#666}a{text-decoration:none;color:#003763}a:hover{color:#f38a00}img{max-width:100%;height:auto}strong{font-weight:600}select:focus,input:focus{font-size:16px}.mixin-gradient{background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(40%,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 40%,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f0f0f0));background:linear-gradient(to bottom,#fff 40%,#f0f0f0 100%)}.mixin-clearfix:before,.mixin-clearfix:after{display:table;content:' '}.mixin-clearfix:after{clear:both}.footer{margin:40px 0 0;padding:30px 0;color:#fff}.header{margin-bottom:60px;padding:0 0 15px;text-align:center}.header-crown{margin-bottom:15px;padding:0 0 8px;background-color:#f0f0f0}.appIcon{display:inline-block;width:44%;margin:15px 1% 0 0;padding:0}.appIcon-img{width:100%;height:auto}.appLogo{display:block;width:100%;height:auto;margin:0 auto 15px}.box{margin:0 0 20px;padding:20px;background:#f0f0f0}.btn{font-size:12px;font-weight:600;line-height:1;display:inline-block;margin:0;padding:10px 18px;text-decoration:none;letter-spacing:1.8px;text-transform:uppercase;color:#fff;border-radius:6px}.btn:hover,.btn:active{color:#fff}.btn-hiddenText{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0}.btn_alt:hover,.btn_alt:active{color:#fff}.btn_link{margin:0;padding:0;text-transform:none;border:0;background-color:transparent}.btn_link:hover,.btn_link:active{color:#666;border:0;background-color:transparent}.btn_narrow{padding:6px}.btn_block{display:block}.checkbox:before,.checkbox:after{display:table;content:' '}.checkbox:after{clear:both}.checkbox-checkbox{font-size:16px;float:left;margin:4px 4px 0 0;padding:0}.circles{margin:0 auto;text-align:center}.circles>*{font-size:120%;position:relative;display:block;overflow:hidden;width:200px;height:0;margin:0 auto 20px;padding:30px 40px 250px;border:2px solid #f38a00;border-radius:50%;background-color:#f8f8f8}.container{position:relative;max-width:1100px;margin:0 auto;padding:0 20px}.container:before,.container:after{display:table;content:' '}.container:after{clear:both}div.fancy-select{font-size:12px;position:relative}div.fancy-select.disabled{opacity:.5}div.fancy-select div.trigger{position:relative;overflow:hidden;width:60px;padding:0 10px 0 0;cursor:pointer;-webkit-transition:all 240ms ease-out;transition:all 240ms ease-out;white-space:nowrap;text-overflow:ellipsis}div.fancy-select div.trigger:after{position:absolute;top:8px;right:0;display:block;width:0;height:0;content:'';border:5px solid transparent;border-top-color:#666}div.fancy-select div.trigger.open:after{border-top-color:#f0f0f0}div.fancy-select ul.options{position:absolute;z-index:50;top:50px;left:0;visibility:hidden;overflow:auto;min-width:140px;max-height:200px;margin:0;list-style:none;-webkit-transition:opacity 300ms ease-out,top 300ms ease-out,visibility 300ms ease-out;transition:opacity 300ms ease-out,top 300ms ease-out,visibility 300ms ease-out;opacity:0;border-radius:6px;background:#f0f0f0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}div.fancy-select ul.options.open{top:32px;visibility:visible;-webkit-transition:opacity 300ms ease-out,top 300ms ease-out;transition:opacity 300ms ease-out,top 300ms ease-out;opacity:1}div.fancy-select ul.options li{padding:8px 12px;cursor:pointer;-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;white-space:nowrap}div.fancy-select ul.options li.selected{color:#fff}div.fancy-select ul.options li.hover{color:#fff}.grid:before,.grid:after{display:table;content:' '}.grid:after{clear:both}.hero{position:relative;display:none;overflow:hidden;width:100%;-webkit-transition:all .3s ease-in;transition:all .3s ease-in;background:url(../images/hero.jpg) no-repeat center center;background-attachment:fixed;-webkit-background-size:cover;background-size:cover;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.4);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}.hero-wrap{position:relative;max-width:1100px;height:100%;margin:0 auto;padding:0 20px}.hero-wrap:before,.hero-wrap:after{display:table;content:' '}.hero-wrap:after{clear:both}.hero-wrap-hand{position:absolute;bottom:0;left:-50px;width:400px;height:auto;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.hero-wrap-hd{font-size:48px;position:absolute;top:200px;right:20px;width:70%;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);text-align:right;color:#fff}.hero-wrap-hd>*{font-weight:600;display:inline-block;margin:0 0 10px;padding:0 20px;background:rgba(243,139,36,.8)}.hero-wrap-hd>:last-child{color:#f38a00;background:rgba(255,255,255,.8)}.hdg{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:24px;font-weight:600}.hdg_center{text-align:center}.hList:before,.hList:after{display:table;content:' '}.hList:after{clear:both}.hList>*{float:left;width:50%;text-align:center}.hList>*+*{margin-top:5px}.iconImage{display:block;width:80px;height:67px;margin:0 auto;background-repeat:no-repeat;background-position:center center;-webkit-background-size:80px 67px;background-size:80px 67px}.input{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:12px;line-height:1.6;width:96%;padding:6px 2%;letter-spacing:1.8px;border:1px solid #ccc2b6;border-radius:6px;background:transparent;-webkit-appearance:none}.input:focus{outline:0}.label{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:12px;display:block;width:100%;margin:2px 0 0;padding:0;text-align:left;-webkit-appearance:none}.label_hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0}.languageSelect{display:block;width:140px;margin:0 auto;padding:8px 0 0}.languageSelect:before,.languageSelect:after{display:table;content:' '}.languageSelect:after{clear:both}.languageSelect-label{font-size:12px;float:left;margin-right:5px}.link_alt{text-decoration:none;color:#fff}.link_hasIcon{position:relative;display:inline-block;padding-left:30px}.mobileGrid:before,.mobileGrid:after{display:table;content:' '}.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%}.pullNav_mobile{float:right}.pushNav{position:relative;left:0;overflow-x:hidden;-webkit-transition:all .3s ease;transition:all .3s ease}.pushNav_isExpanded{left:240px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.3);box-shadow:0 0 3px rgba(0,0,0,.3)}.pushNav-nav{position:fixed;z-index:1000;top:0;left:-240px;width:240px;height:100%;-webkit-transition:all .3s ease;transition:all .3s ease;background-color:#f0f0f0}.pushNav-nav_isExpanded{left:0}.stackList>*{margin-top:15px;text-align:center;vertical-align:top}.triangleSection{position:relative;margin-bottom:60px;padding:80px 0 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{position:absolute;top:0;left:50%;width:0;height:0;margin-left:-30px;border-top:30px solid #f38a00;border-right:30px solid transparent;border-left:30px solid transparent}@media (min-width:767px){.header{margin-bottom:0}.appLogo{margin:15px 0 0}.appLogo_alt{margin:0 auto}.appIcon{width:30%;margin:15px 1% 0 0}.circles>*{display:inline-block;margin:0 20px}.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{display:block;height:500px}.hero-wrap-hand{left:-100px;width:420px}.hero-wrap-hd{font-size:40px;top:180px;width:80%}.hList>*{width:auto;text-align:left}.hList>*+*{margin-top:0;margin-left:4px}.hList_spaced>*+*{margin-left:20px}.input{width:140px;padding:6px 8px}.input:focus{font-size:12px}.languageSelect{float:right;margin:0}.pullNav{float:right}.stackList>*{display:inline-block;width:auto;margin-top:0;text-align:right}.stackList>*+*{margin-left:10px}.triangleSection{margin-bottom:60px;padding:80px 0 60px;background:#fff}}@media (min-width:979px){.hero-wrap-hand{left:-50px;width:440px}.hero-wrap-hd{font-size:44px;top:200px;width:70%}}@media (min-width:1170px){.hero{height:600px}.hero-wrap-hand{left:-50px;width:520px}.hero-wrap-hd{font-size:48px;top:200px;width:60%}}.isHiddenSmall{display:none}@media (min-width:767px){.isHiddenSmall{display:block}.isVisibleSmall{display:none}}@media (min-width:979px){}@media (min-width:1170px){}
+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{font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;border:0}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-spacing:0;border-collapse:collapse}body{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:14px;font-weight:300;line-height:1.6;color:#666}a{text-decoration:none;color:#003763}img{max-width:100%;height:auto}strong{font-weight:600}select:focus,input:focus{font-size:16px}.mixin-gradient{background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(40%,#fff),color-stop(100%,#f0f0f0));background:-webkit-linear-gradient(top,#fff 40%,#f0f0f0 100%);background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f0f0f0));background:linear-gradient(to bottom,#fff 40%,#f0f0f0 100%)}.mixin-clearfix:before,.mixin-clearfix:after{display:table;content:' '}.mixin-clearfix:after{clear:both}.footer{margin:40px 0 0;padding:30px 0;color:#fff}.header{padding:0 0 15px}.header-crown{margin-bottom:15px;padding:0 0 8px;background-color:#f0f0f0}.mix-header_center{margin-bottom:60px;text-align:center}.appIcon{display:inline-block;width:44%;margin:15px 1% 0 0;padding:0}.appIcon-img{width:100%;height:auto}.appLogo{display:block;width:100%;height:auto;margin:0 auto 15px}.appLogo_right{float:right;width:220px;margin:3px 0 0}.box{margin:0;padding:20px;background:#f0f0f0}.box+.box{margin:20px 0 0}.btn{font-size:12px;font-weight:600;line-height:1;display:inline-block;margin:0;padding:10px 18px;text-decoration:none;letter-spacing:1.8px;text-transform:uppercase;color:#fff;border-radius:6px}.btn:hover,.btn:active{color:#fff}.btn_alt:hover,.btn_alt:active{color:#fff}.btn_icon{padding:4px 0;text-transform:none}.btn_narrow{padding:6px}.btn_block{display:block}.cardContainer{margin:0 0 40px;padding:40px 0;background:#f0f0f0;-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,.3);box-shadow:inset 0 0 2px rgba(0,0,0,.3)}.checkbox:before,.checkbox:after{display:table;content:' '}.checkbox:after{clear:both}.checkbox-checkbox{font-size:16px;float:left;margin:4px 4px 0 0;padding:0}.circles{margin:0 auto;text-align:center}.circles>*{font-size:120%;position:relative;display:block;overflow:hidden;width:200px;height:0;margin:0 auto 20px;padding:30px 40px 250px;border:2px solid #f38a00;border-radius:50%;background-color:#f8f8f8}.container{position:relative;max-width:1100px;margin:0 auto;padding:0 20px}.container:before,.container:after{display:table;content:' '}.container:after{clear:both}div.fancy-select{font-size:12px;position:relative}div.fancy-select.disabled{opacity:.5}div.fancy-select div.trigger{position:relative;overflow:hidden;width:60px;padding:0 10px 0 0;cursor:pointer;-webkit-transition:all 240ms ease-out;transition:all 240ms ease-out;white-space:nowrap;text-overflow:ellipsis}div.fancy-select div.trigger:after{position:absolute;top:8px;right:0;display:block;width:0;height:0;content:'';border:5px solid transparent;border-top-color:#666}div.fancy-select div.trigger.open:after{border-top-color:#f0f0f0}div.fancy-select ul.options{position:absolute;z-index:50;top:50px;left:0;visibility:hidden;overflow:auto;min-width:140px;max-height:200px;margin:0;list-style:none;-webkit-transition:opacity 300ms ease-out,top 300ms ease-out,visibility 300ms ease-out;transition:opacity 300ms ease-out,top 300ms ease-out,visibility 300ms ease-out;opacity:0;border-radius:6px;background:#f0f0f0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}div.fancy-select ul.options.open{top:32px;visibility:visible;-webkit-transition:opacity 300ms ease-out,top 300ms ease-out;transition:opacity 300ms ease-out,top 300ms ease-out;opacity:1}div.fancy-select ul.options li{padding:8px 12px;cursor:pointer;-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;white-space:nowrap}div.fancy-select ul.options li.selected{color:#fff}div.fancy-select ul.options li.hover{color:#fff}.grid:before,.grid:after{display:table;content:' '}.grid:after{clear:both}.hero{position:relative;display:none;overflow:hidden;width:100%;-webkit-transition:all .3s ease-in;transition:all .3s ease-in;background:url(../images/hero.jpg) no-repeat center center;background-attachment:fixed;-webkit-background-size:cover;background-size:cover;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.4);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}.hero-wrap{position:relative;max-width:1100px;height:100%;margin:0 auto;padding:0 20px}.hero-wrap:before,.hero-wrap:after{display:table;content:' '}.hero-wrap:after{clear:both}.hero-wrap-hand{position:absolute;bottom:0;left:-50px;width:400px;height:auto;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.hero-wrap-hd{font-size:48px;position:absolute;top:200px;right:20px;width:70%;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);text-align:right;color:#fff}.hero-wrap-hd>*{font-weight:600;display:inline-block;margin:0 0 10px;padding:0 20px;background:rgba(243,139,36,.8)}.hero-wrap-hd>:last-child{color:#f38a00;background:rgba(255,255,255,.8)}.hdg{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:24px;font-weight:600}.hdg_center{text-align:center}.hList:before,.hList:after{display:table;content:' '}.hList:after{clear:both}.hList>*{float:left;width:50%;text-align:center}.hList>*+*{margin-top:5px}.iconImage{display:block;width:80px;height:67px;margin:0 auto;background-repeat:no-repeat;background-position:center center;-webkit-background-size:80px 67px;background-size:80px 67px}.input{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:12px;line-height:1.6;width:96%;padding:6px 2%;letter-spacing:1.8px;border:1px solid #ccc2b6;border-radius:6px;background:transparent;-webkit-appearance:none}.input:focus{outline:0}.label{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:12px;display:block;width:100%;margin:2px 0 0;padding:0;text-align:left;-webkit-appearance:none}.label_hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0}.languageSelect{display:block;float:right;width:140px;margin:0;padding:8px 0 0}.languageSelect:before,.languageSelect:after{display:table;content:' '}.languageSelect:after{clear:both}.languageSelect-label{font-size:12px;float:left;margin-right:5px}.mix-languageSelect_center{float:none;margin:0 auto}.link_alt{text-decoration:none;color:#fff}.link_hasIcon{position:relative;display:inline-block;padding-left:30px}.menuContainer{position:fixed;left:-80%;width:80%;min-height:100%;-webkit-box-shadow:inset -20px 0 40px rgba(0,0,0,.5);box-shadow:inset -20px 0 40px rgba(0,0,0,.5)}.menuContainer.isOpen{left:0}.mobileGrid:before,.mobileGrid:after{display:table;content:' '}.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%}.mobileMenu{width:100%;padding:35px 0 0}.mobileLink{font-size:24px;position:relative;display:block;width:66%;padding:13px 10% 13px 24%;color:#fff;background:transparent}.mobileLink:active{color:#fff;-webkit-box-shadow:inset -20px 0 40px rgba(0,0,0,.5);box-shadow:inset -20px 0 40px rgba(0,0,0,.5)}.mobileLink-icon{position:absolute;top:20px;left:10%;width:24px;height:auto}.pageContainer.isOpen{position:fixed;left:80%;width:100%}.pullNav_mobile{float:right}.stackList>*{margin-top:15px;text-align:center;vertical-align:top}.triangleSection{position:relative;margin-bottom:60px;padding:80px 0 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{position:absolute;top:0;left:50%;width:0;height:0;margin-left:-30px;border-top:30px solid #f38a00;border-right:30px solid transparent;border-left:30px solid transparent}@media (min-width:767px){.header{margin-bottom:0}.appLogo{margin:15px 0 0}.appLogo_alt{margin:0 auto}.appLogo_high{margin:5px 0 0}.appIcon{width:30%;margin:15px 1% 0 0}.circles>*{display:inline-block;margin:0 20px}.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{display:block;height:500px}.hero-wrap-hand{left:-100px;width:420px}.hero-wrap-hd{font-size:40px;top:180px;width:80%}.hList>*{width:auto;text-align:left}.hList>*+*{margin-top:0;margin-left:4px}.hList_spaced>*+*{margin-left:20px}.input{width:140px;padding:6px 8px}.input:focus{font-size:12px}.mix-languageSelect_center{float:right}.pullNav{float:right}.pageContainer.isOpen{position:static}.stackList>*{display:inline-block;width:auto;margin-top:0;text-align:right}.stackList>*+*{margin-left:10px}.triangleSection{margin-bottom:60px;padding:80px 0 60px;background:#fff}}@media (min-width:979px){.hero-wrap-hand{left:-50px;width:440px}.hero-wrap-hd{font-size:44px;top:200px;width:70%}}@media (min-width:1170px){.hero{height:600px}.hero-wrap-hand{left:-50px;width:520px}.hero-wrap-hd{font-size:48px;top:200px;width:60%}}.isHiddenSmall{display:none}@media (min-width:767px){.isHiddenSmall{display:block}.isVisibleSmall{display:none}}@media (min-width:979px){}@media (min-width:1170px){}

public/Assets/styles/theme_chamberlain.css

     clear: both;
 }
 /* ---------------------------------------------------------------------
+ Global Styles
+ ----------------------------------------------------------------------- */
+a:hover
+{
+    color: #f38a00;
+}
+/* ---------------------------------------------------------------------
  Footer
  ----------------------------------------------------------------------- */
 .footer
     color: #f38a00;
 }
 /* ---------------------------------------------------------------------
+ menuContainer Chamberlain
+ ----------------------------------------------------------------------- */
+.menuContainer
+{
+    background: #314454;
+}
+/* ---------------------------------------------------------------------
+ mobileLink Chamberlain
+ ----------------------------------------------------------------------- */
+.mobileLink:active
+{
+    background-color: #2a3742;
+}
+/* ---------------------------------------------------------------------
  Triangle Section Chamberlain
  ----------------------------------------------------------------------- */
 .triangleSection