From ac06cf8817e21099d841e81a6646bd6c29aad722 Mon Sep 17 00:00:00 2001 From: Marcel Moreau Date: Fri, 10 Feb 2017 18:19:53 -0500 Subject: [PATCH] fixes to sticky element and footer fixes --- components/index.html | 6 +++--- components/progress.html | 6 +++--- components/sticky-element.html | 38 +++++++++++++++++----------------- css/styles.css | 8 +++++-- css/styles.css.map | 2 +- css/styles.scss | 5 ++++- 6 files changed, 36 insertions(+), 29 deletions(-) diff --git a/components/index.html b/components/index.html index 16df98d..c29951e 100644 --- a/components/index.html +++ b/components/index.html @@ -65,7 +65,7 @@

Imarc Components list

Features
  • - Mobile Navigation + Mobile navigation
  • Modal windows @@ -80,10 +80,10 @@

    Imarc Components list

    Pagination
  • - Progress + Progress breadcrumbs
  • - Scroll to Section + Scroll to section
  • Sticky element diff --git a/components/progress.html b/components/progress.html index e0af1e1..b24ac57 100644 --- a/components/progress.html +++ b/components/progress.html @@ -2,7 +2,7 @@ - Progress Component - Imarc + Progress Breadcrumbs Component - Imarc @@ -14,9 +14,9 @@
    -

    Progress Breadcrumb

    +

    Progress Breadcrumbs

    - Below is an example of a progress breadcrumb. + Below is an example of progress breadcrumbs.

    diff --git a/components/sticky-element.html b/components/sticky-element.html index 5282bc8..74ee38b 100755 --- a/components/sticky-element.html +++ b/components/sticky-element.html @@ -12,26 +12,18 @@
    -
    - +
    +

    Sticky Element

    +

    + The Sticky Element component can be used to make elements switch between being in the flow of the page and being fixed. It can be used for sidebars, sticking images along scroll text, etc. It also supports having the element while 'stuck' move slowly if you'd like, for a parallax effect. +

    + +

    + This page includes both an example of an element stuck to the side as well as one stuck temporarily within the flow of the page. +

    +
    +
    -
    -

    Sticky Element

    -

    - The Sticky Element component can be used to make elements switch between being in the flow of the page and being fixed. It can be used for sidebars, sticking images along scroll text, etc. It also supports having the element while 'stuck' move slowly if you'd like, for a parallax effect. -

    - -

    - This page includes both an example of an element stuck to the side as well as one stuck temporarily within the flow of the page. -

    -

    Usage

    @@ -226,6 +218,14 @@

    +
    diff --git a/css/styles.css b/css/styles.css index e141e79..2a64dfa 100755 --- a/css/styles.css +++ b/css/styles.css @@ -1508,6 +1508,8 @@ footer.primary a:hover { } footer.primary nav ul { + -webkit-justify-content: center; + justify-content: center; margin-bottom: 2rem; text-align: center; } @@ -2144,8 +2146,6 @@ table tr:nth-child(even) td { footer.primary .wrapper { display: -webkit-flex; display: flex; - -webkit-justify-content: space-between; - justify-content: space-between; } footer.primary .wrapper > * { -webkit-flex: 1 0 0; @@ -2156,6 +2156,10 @@ table tr:nth-child(even) td { flex-grow: 2; margin-bottom: 0; } + footer.primary .wrapper > nav > ul { + -webkit-justify-content: center; + justify-content: center; + } footer.primary .branding { margin-right: 0; max-width: none; diff --git a/css/styles.css.map b/css/styles.css.map index f11509e..fdce92c 100644 --- a/css/styles.css.map +++ b/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["styles.css","styles.scss","_components.scss"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":["@charset \"UTF-8\";\n/**\n * Built using Imarc Boilerplate v2.1\n *\n * Copyright 2016 Imarc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * = Table of Contents =\n * Variables\n * Mixins\n * Components\n * Base\n * Layout\n * Typography\n * Forms\n * Iconography\n * Messaging\n * Tables\n * Section Specific\n * Page Specific\n * Media Queries\n * Print Styles\n */\n/**\n * _components.scss contains solely the mixin definitions for components.\n *\n * + This file should not depend on styles.scss; we should be able to use\n * include this file without including styles.scss.\n * + This file should not generate any CSS on it's own; it should only contain\n * mixin and/or function definitions.\n */\n/**\n * Media query breakpoints\n */\n/**\n* ACCORDION\n*\n* ACCORDION requires the accordion.plugin.js file. Within the .accordion\n* class each accordion item requires a div wrapper. Within the div wrapper\n* there is a .header class and a .content class. The .header class is the\n* clickable element that will reveal what is hidden in the .content class.\n* By default .content is hidden by javascript just in case javascript is not available.\n*\n* Emmet: .accordion>div>(.header{header}+.content>{lorem ipsum})\n*\n*/\n/**\n * BACKGROUND VIDEO\n *\n * BACKGROUND VIDEO plays a video (without sound) in the background of an element.\n * Emmet: .backgroundvideo>(.panel>div>h1+p)+video>source[src]\n */\n/**\n/**\n * BREADCRUMBS\n *\n * The breadcrumb mixin provides basic breadcrumb styling, complete with\n * fontawesome icons being used as separators between crumbs.\n *\n * Emmet: nav.breadcrumbs>ul>li*3>a\n */\n/**\n * CAROUSEL\n *\n * CAROUSEL uses Slick to create a carousel. It defaults to a rather\n * basic, one-slide-at-a-time implementation with dots, but slick supports a\n * good deal of configuration including showing multiple slides, breakpoints,\n * syncing between slides, and plenty of javascript events and methods for\n * integration.\n *\n * The implementation on Boilerplate is using a CDN to provide\n *\n * + slick.css\n * + slick-theme.css\n * + slick.min.js\n *\n * See http://kenwheeler.github.io/slick/ for more information.\n *\n * The carousel() mixin should be included on a parent element that contains\n * one div per slide. No additional classes are necessary – the slick classes\n * referenced are added dynamically by slick.\n *\n *
    \n *
    \n *

    A slide!

    \n *

    Some text.

    \n *
    \n *
    \n *\n * Emmet: .carousel>div*3>h2+p\n *\n * While there's more information in slick's documentation, .slick-slide wraps\n * slides while .slick-next and .slick-prev are used for the next/previous\n * arrows.\n */\n/**\n * COLUMNS\n *\n * The COLUMNS mixin makes it so that immmediate child elements appear as\n * columns. It is responsive, allowing you to specify the media query at which\n * to switch the layout from stacking to columns.\n *\n * Additionally, it assumes the use of
    elements to create visual gutters\n * that are only visible while displayed as columns.\n *\n *
    \n *
    \n *

    A column

    \n *
    \n *
    \n *
    \n *

    Another column

    \n *
    \n *
    \n *\n * Emmet: .columns>div+(hr+div)*2\n */\n/**\n * DOSSIER\n *\n * The DOSSIER mixin displays an individual’s biography and photograph.\n *\n * Emmet: .dossiers>div>(.photo>img^.bio>h2{Lorem Ipsum}+p.title{Vice President}+p{Lorem20})\n */\n/**\n * DROPDOWN\n *\n * The DROPDOWN mixin allows for dropdown menus. By default, a single\n * column dropdown is used. It is positioned to its parent.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu>ul>li>(a{link name})*3\n */\n/**\n * DROPDOWN (mega)\n * The DROPDOWN (mega) mixin allows for full-width mega dropdown\n * menus. Call this mixin on a list item. Note that the simple\n * dropdown component is a dependency of this mega dropdown.\n * The mega dropdown is positioned to header.primary instead\n * of its parent list item.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu(div*3)\n */\n/**\n * FEATURES house three features in one row. Powered by flexbox,\n * this allows for a bottom alignment of each feature’s anchor. Use the\n * $gutter variable to pass you preferred gutter width.\n *\n * Emmet: .features>(div>(.icon>img)+h4+p+a)*3\n */\n/**\n * LISTING shows a listing of entries. It includes an optional search form with filters. \n * Remove the search form elements for a simple list.\n *\n * Emmet: .listing>(form>.search>(.text>label+input^.submit>label+input[type=\"submit\"]))+p.guide{Showing 10 of 20}+ul>li>a>h2{Listing headline}\n */\n/**\n * The LOGIN mixin is a basic implementation of a login module that includes a\n * username input, password input, submit button, forgot password link, and\n * remember me checkbox\n *\n * Emmet: .login>form>(div.text>label{Username}+input)+(div.password>label{Password}+input[type=\"password\"])+div.actions>(.submit>button{Login})+(label>input[type=\"hidden\"]+input[type=\"checkbox\"])+a{Forgot Your Password?}\n */\n/**\n * MOBILE NAVIGATION\n *\n * Emmet\n */\n/**\n * PAGINATION\n *\n * Emmet: nav.pagination>ul>(li.previous>a{Previous})+(li*2>a)+(li.active>a)+(li*2>a)+li.next>a{Next}\n */\n/**\n * PROGRESS BREADCRUMBS\n *\n * the progress mixin provides a basic, pill-style progress nav bar like you\n * might find as part of an e-commerce or registration process.\n *\n * Emmet: nav.progress>ul>(li.complete*2>a)+(li.active>a)+(li*2>a)\n */\n/**\n * STICKY HEADER\n *\n * The STICKY-HEADER mixin works with js (sticky-header.plugin.js) to hide the\n * header as you scroll down, and show it as you scroll back up. This is\n * responsive as the \"top\" value is dynamically set in the\n * js based on the height of the header. Top padding is also added\n * to the body dynamically via js so that the header doesn't overlap any\n * content.\n *\n * Emmet: header.primary\n *\n **/\n/**\n * TABS\n *\n * Emmet: nav.tabs>ul>li*3>a\n */\n/**\n* TESTIMONIAL\n*\n* The TESTIMONIAL mixin is a basic implementation of a testimonial design.\n* Emmet: div.testimonial>div.container>blockquote+p\n* To use the TESTIMONIAL WITH ASSET component, you simply need to add additional html markup, see emmet below.\n* Emmet: div.testimonial.asset>div.container>(div>img)+blockquote+p\n*/\n/**\n * TILES\n *\n * Tiles helps you create an equal-width column grid layout without the use of row wrappers.\n * Tiles is similar to the Features component, expect that Tiles’s items can wrap.\n * Powered by flexbox, you can pass in a $gutter width and $column amount. Note that the\n * specified $column amount only is respected at the large breakpoint. Tiles will automatically\n * two-up your items at the medium breakpoint, and stack them at the small breakpoint.\n *\n *\n * Emmet: .tiles>.tiles\n *\n **/\n/* = Variables = */\n/* Grays */\n/* The brand colors (name them the color) */\n/* Messaging colors */\n/* Applied colors */\n/* Social Network Colors */\n/* Breakpoint values */\n/* = Mixins = */\n/* = Components = */\n.accordion > div .header {\n background: #DDD;\n color: #191919;\n cursor: pointer;\n font-size: 1em;\n margin-top: .5em;\n padding: .5em 1em;\n position: relative;\n text-align: left;\n width: 100%;\n}\n\n.accordion > div .header:hover {\n background: #d0d0d0;\n}\n\n.accordion > div .header::after {\n bottom: 0;\n height: 1em;\n margin: auto 0;\n position: absolute;\n right: 1em;\n top: 0;\n width: 1em;\n}\n\n.accordion > div .header.open {\n background: #d0d0d0;\n}\n\n.accordion > div .header.open::after {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\n.accordion > div .header.close::after {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\n.accordion > div .content {\n padding: 1em 0;\n}\n\n.accordion > div .content.hidden {\n display: none;\n}\n\n.backgroundvideo {\n align-items: center;\n display: flex;\n height: auto;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n\n.backgroundvideo .mold {\n background-color: rgba(255, 255, 255, 0.6);\n padding: 2em;\n text-align: center;\n z-index: 2;\n}\n\n.backgroundvideo video {\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n}\n\n.backgroundvideo::before {\n content: \"\";\n display: block;\n padding-top: 30%;\n}\n\n.carousel .slick-slide {\n color: #FFF;\n height: auto;\n padding: 3rem;\n}\n\n.carousel .slick-prev,\n.carousel .slick-next {\n z-index: 1;\n}\n\n.carousel .slick-prev {\n left: 2rem;\n}\n\n.carousel .slick-next {\n right: 2rem;\n}\n\n.dossier > * {\n text-align: center;\n}\n\n.dossier > * .photo {\n margin-bottom: 2rem;\n}\n\n@media only screen and (min-width: 669px) {\n .dossier > * {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n margin-bottom: 4rem;\n text-align: left;\n }\n .dossier > * .photo {\n flex: 0 0 25%;\n margin-bottom: 0;\n margin-right: 2rem;\n }\n .dossier > * .bio .title {\n color: #727272;\n text-transform: uppercase;\n }\n}\n\n.header-content > .dropdown,\n.mobile {\n background-color: #191919;\n bottom: 0;\n display: none;\n height: 100%;\n opacity: 0;\n overflow-y: auto;\n padding: 1rem;\n position: fixed;\n top: 0;\n transition: transform .25s;\n width: 80%;\n z-index: 1000;\n}\n\n.header-content > .dropdown.left,\n.mobile.left {\n display: block;\n left: 0;\n right: auto;\n transform: translateX(-100%);\n}\n\n.header-content > .dropdown.right,\n.mobile.right {\n display: block;\n left: auto;\n right: 0;\n transform: translateX(100%);\n}\n\n.header-content > .dropdown.left.open, .header-content > .dropdown.right.open,\n.mobile.left.open,\n.mobile.right.open {\n transform: translateX(0);\n transition: transform .25s;\n}\n\n.header-content > .dropdown.init,\n.mobile.init {\n display: block;\n opacity: 1;\n}\n\n.header-content > .dropdown nav.utility ul li a,\n.mobile nav.utility ul li a {\n padding: 0.75rem 0;\n}\n\n.header-content > .dropdown ul,\n.mobile ul {\n display: block;\n padding-left: 0;\n}\n\n.header-content > .dropdown ul li,\n.mobile ul li {\n align-items: center;\n border-bottom: 1px solid #333333;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n margin-bottom: 0;\n text-align: left;\n}\n\n.header-content > .dropdown ul li a,\n.mobile ul li a {\n color: #fff;\n display: block;\n padding: 1rem 0;\n}\n\n.header-content > .dropdown ul li i.fa,\n.mobile ul li i.fa {\n display: inline-block;\n}\n\n@media only screen and (min-width: 1024px) {\n .header-content > .dropdown.open.left,\n .mobile.open.left {\n transform: translateX(-100%);\n }\n .header-content > .dropdown.open.right,\n .mobile.open.right {\n transform: translateX(100%);\n }\n}\n\n.features > * {\n background-color: #EEE;\n margin-bottom: 2rem;\n margin-left: auto;\n margin-right: auto;\n padding: 2rem;\n text-align: center;\n}\n\n.features > * img,\n.features > * h3,\n.features > * p {\n margin-bottom: 1rem;\n}\n\n.features > * .button {\n margin-bottom: 0;\n}\n\n@media only screen and (min-width: 1024px) {\n .features {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n }\n .features > * {\n display: flex;\n flex: 1 0 0;\n flex-direction: column;\n margin-left: 3rem;\n margin-right: 0;\n }\n .features > * .button {\n align-self: center;\n margin-top: auto;\n }\n .features > *:first-child {\n margin-left: 0;\n }\n}\n\nheader.primary.sticky {\n position: fixed;\n top: 0;\n transition: top 0.16s cubic-bezier(0, 0.4, 0.7, 1);\n width: 100%;\n z-index: 100;\n}\n\n.listing {\n margin-bottom: 2rem;\n}\n\n.listing form .search {\n display: flex;\n}\n\n.listing form .search label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.listing form .search .text {\n flex-grow: 1;\n}\n\n.listing form .search .submit {\n flex-basis: 120px;\n flex-shrink: 0;\n}\n\n.listing form .search .submit input {\n height: 100%;\n width: 100%;\n}\n\n.listing form .filters {\n margin-bottom: 2rem;\n}\n\n.listing form .filters label {\n display: inline;\n}\n\n.listing form .filters span {\n background-color: #07547c;\n border-radius: 0.5rem;\n color: #fff;\n display: inline-block;\n margin: 0 0.5rem 0.5rem 0;\n padding: 0.5rem 1rem;\n}\n\n.listing form .filters input[type=\"checkbox\"]:checked + span {\n background-color: #0C96DD;\n}\n\n.listing form .filters input[type=\"checkbox\"] {\n display: none;\n}\n\n.listing ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.listing ul li {\n border-top: 4px solid #e5e5e5;\n margin-bottom: 0;\n padding: 2rem 0;\n}\n\n.listing ul li .meta {\n display: block;\n font-size: 0.9rem;\n margin-bottom: 1em;\n}\n\n.listing ul li h2 + .meta {\n margin-top: -1em;\n}\n\n.listing ul li .summary p:last-of-type {\n margin-bottom: 0;\n}\n\n.login {\n background: #EEE;\n margin-left: auto;\n margin-right: auto;\n max-width: 600px;\n padding: 3rem;\n}\n\n.login input:focus {\n box-shadow: 0 0 5px rgba(114, 164, 0, 0.7);\n}\n\n.login .submit {\n text-align: center;\n}\n\n.login .actions {\n text-align: center;\n}\n\n@media only screen and (min-width: 669px) {\n .login .actions {\n align-items: center;\n display: flex;\n justify-content: space-between;\n flex-flow: row wrap;\n }\n .login .actions > * {\n margin: 0;\n padding: 0;\n }\n .login .actions label {\n margin-left: 1em;\n }\n .login .actions a {\n display: block;\n margin-left: auto;\n text-align: right;\n }\n}\n\nnav.pagination {\n display: flex;\n justify-content: center;\n}\n\nnav.pagination ul {\n border: 1px solid #e5e5e5;\n border-radius: 2px;\n display: flex;\n justify-content: center;\n}\n\nnav.pagination li {\n margin-bottom: 0;\n}\n\nnav.pagination a {\n color: #0C96DD;\n padding: 0.5rem 1rem;\n position: relative;\n}\n\nnav.pagination li:not(:last-child) a {\n border-right: 1px solid #e5e5e5;\n}\n\nnav.pagination li.active a {\n background-color: #0C96DD;\n color: #fff;\n cursor: default;\n pointer-events: none;\n}\n\nnav.pagination li.active a::before, nav.pagination li.active a::after {\n background-color: #0C96DD;\n}\n\nnav.pagination li.active a:hover {\n color: #fff;\n background-color: #EB7424;\n}\n\nnav.pagination li.active a:hover::before, nav.pagination li.active a:hover::after {\n background-color: #EB7424;\n}\n\nnav.pagination li.disabled a {\n color: #e5e5e5;\n cursor: default;\n pointer-events: none;\n}\n\nnav.pagination li.previous a::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\nnav.pagination li.next a::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\nnav.pagination li:hover:not(.active):not(.disabled) a {\n background-color: #0C96DD;\n color: #FFF;\n}\n\nnav.pagination li:hover:not(.active):not(.disabled) a::before {\n background-color: #0C96DD;\n color: #FFF;\n}\n\n@media only screen and (max-width: 1023px) {\n .desktop nav.primary .dropdown,\n .desktop nav.primary i.fa {\n display: none;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .desktop nav.primary i.fa {\n display: inline-block;\n }\n .desktop nav.primary .dropdown {\n background-color: #2A2A2A;\n color: #FFF;\n display: block;\n font-size: 1rem;\n min-width: 260px;\n opacity: 0;\n padding: 2rem 0;\n position: absolute;\n top: 100%;\n transition: opacity 300ms;\n visibility: hidden;\n z-index: 1;\n }\n .desktop nav.primary .dropdown ul {\n display: block;\n }\n .desktop nav.primary .dropdown .menu > * {\n padding: 0 1rem;\n }\n .desktop nav.primary .dropdown .menu li {\n margin-bottom: 0.4em;\n }\n .desktop nav.primary .dropdown .menu a {\n color: #0C96DD;\n }\n .desktop nav.primary .dropdown .menu a:hover,\n .desktop nav.primary .dropdown .menu a:focus {\n color: #0975ad;\n }\n .desktop nav.primary .dropdown.open {\n opacity: 1;\n visibility: visible;\n }\n}\n\n.desktop nav.primary li.mega {\n position: static;\n}\n\n@media only screen and (min-width: 1024px) {\n .desktop nav.primary li.mega .dropdown {\n left: 0;\n top: 100%;\n width: 100%;\n }\n .desktop nav.primary li.mega .dropdown .menu {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n margin-left: auto;\n margin-right: auto;\n max-width: 1168px;\n }\n .desktop nav.primary li.mega .dropdown .menu > * {\n border-left: 1px solid #777;\n flex-basis: 0;\n flex-grow: 1;\n padding: 0 3rem;\n }\n .desktop nav.primary li.mega .dropdown .menu > *:first-child {\n border-left: none;\n padding-left: 0;\n }\n .desktop nav.primary li.mega .dropdown .menu > *:last-child {\n padding-right: 0;\n }\n}\n\n.tabs a {\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e5e5;\n border-color: transparent transparent #e5e5e5;\n}\n\n.tabs li.active a {\n border-color: #e5e5e5 #e5e5e5 transparent;\n}\n\n.tabs li:hover:not(.active) a {\n background: #e5e5e5;\n}\n\n.testimonial {\n background-color: #191919;\n margin-bottom: 4rem;\n padding: 4rem 0 4rem;\n text-align: center;\n}\n\n.testimonial .asset {\n margin-bottom: 2rem;\n}\n\n.testimonial .asset img {\n max-width: 280px;\n}\n\n.testimonial blockquote {\n border: none;\n color: #fff;\n font-size: 1.125rem;\n margin-bottom: 1rem;\n padding: 0 2.5rem;\n position: relative;\n}\n\n.testimonial blockquote::before, .testimonial blockquote::after {\n color: #727272;\n font-family: Georgia, serif;\n font-size: 3.375rem;\n position: absolute;\n}\n\n.testimonial blockquote::before {\n content: \"“\";\n left: 0;\n line-height: 1;\n top: 0;\n}\n\n.testimonial blockquote::after {\n content: \"”\";\n line-height: 0;\n right: 0;\n bottom: 0;\n}\n\n.testimonial blockquote ~ p {\n color: #727272;\n font-size: 0.875rem;\n margin-bottom: 0;\n padding: 0 2.5rem;\n}\n\n@media only screen and (min-width: 1024px) {\n .testimonial {\n text-align: left;\n }\n .testimonial .container > div {\n display: flex;\n justify-content: space-between;\n }\n .testimonial .asset {\n flex-basis: 33%;\n flex-shrink: 0;\n margin-bottom: 0;\n margin-right: 4rem;\n }\n .testimonial .asset img {\n max-width: 100%;\n }\n .testimonial blockquote {\n font-size: 1.5rem;\n padding: 0 6rem;\n }\n .testimonial blockquote::before, .testimonial blockquote::after {\n font-size: 7rem;\n }\n .testimonial blockquote ~ p {\n font-size: 1rem;\n padding: 0 6rem;\n }\n}\n\n.tiles > * {\n background-color: #EEE;\n margin-bottom: 2rem;\n padding: 2rem;\n text-align: left;\n}\n\n.tiles > * *:last-child {\n margin-bottom: 0;\n}\n\n@media only screen and (min-width: 669px) {\n .tiles {\n display: flex;\n flex-flow: row wrap;\n margin-left: -1rem;\n margin-right: -1rem;\n }\n .tiles > * {\n flex-basis: calc(50% - 2rem);\n flex-shrink: 0;\n margin-left: 1rem;\n margin-right: 1rem;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .tiles > * {\n flex-basis: calc((100% / 4) - (2rem));\n }\n}\n\n/* = Base = */\na, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, datalist, dd, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, hr, i, iframe, img, input, label, legend, li, main, meter, nav, object, ol, option, p, pre, progress, q, section, select, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, u, ul, video {\n border: 0;\n box-sizing: border-box;\n font: inherit;\n font-size: 100%;\n margin: 0;\n outline: 0;\n padding: 0;\n vertical-align: baseline;\n}\n\narticle, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {\n display: block;\n}\n\nhtml {\n background-color: #FFF;\n color: #191919;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n font-size: 16px;\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n}\n\nbody {\n min-width: 300px;\n}\n\nimg {\n max-width: 100%;\n vertical-align: middle;\n}\n\n::selection {\n background: #e5e5e5;\n}\n\n::-moz-selection {\n background: #e5e5e5;\n}\n\n/* = Layout = */\n.group::before, .group::after {\n content: \"\";\n display: table;\n}\n\n.group::after {\n clear: both;\n}\n\n.container {\n margin-left: auto;\n margin-right: auto;\n max-width: 1200px;\n padding-left: 1rem;\n padding-right: 1rem;\n position: relative;\n}\n\n.columns > hr {\n border: 0;\n display: none;\n}\n\n@media only screen and (min-width: 669px) {\n .columns {\n display: table;\n table-layout: fixed;\n width: 100%;\n }\n .columns > * {\n display: table-cell;\n vertical-align: top;\n }\n .columns > hr {\n display: table-cell;\n width: 1rem;\n }\n}\n\n.sr-only {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.search-drawer {\n background-color: #4A4A4A;\n}\n\n.search-drawer > div {\n max-height: 0;\n overflow: hidden;\n transition: max-height 150ms ease;\n}\n\n.search-drawer > div.open {\n max-height: 80px;\n}\n\n.search-drawer form {\n display: flex;\n padding: 1rem 0;\n}\n\n.search-drawer form > * {\n margin-bottom: 0;\n}\n\n.search-drawer form .text {\n flex: 1 1 auto;\n}\n\n.search-drawer form .submit input {\n height: 100%;\n}\n\n.branding img {\n max-width: 180px;\n}\n\nheader.primary {\n background-color: #191919;\n padding: 1rem 0;\n position: relative;\n}\n\nheader.primary .container {\n position: static;\n}\n\nheader.primary .branding {\n flex-basis: 180px;\n flex-shrink: 0;\n}\n\nnav {\n margin-bottom: 2rem;\n}\n\nnav ul {\n list-style: none;\n margin: 0;\n padding-left: 0;\n display: flex;\n}\n\nnav ul li::before {\n display: none;\n}\n\nnav ul li {\n margin-bottom: 0;\n}\n\nnav a {\n color: #0C96DD;\n display: block;\n padding: 0 0.5rem;\n}\n\nnav li.active a,\nnav li.active:hover a {\n color: #191919;\n}\n\nnav.tabs a {\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e5e5;\n border-color: transparent transparent #e5e5e5;\n}\n\nnav.tabs li.active a {\n border-color: #e5e5e5 #e5e5e5 transparent;\n}\n\nnav.tabs li:hover:not(.active) a {\n background: #e5e5e5;\n}\n\nnav.breadcrumbs li:not(:last-child) a {\n padding-right: 0;\n}\n\nnav.breadcrumbs li:not(:last-child) a::after {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n padding-left: 0.5rem;\n}\n\nnav.progress ul {\n border: 1px solid #e5e5e5;\n border-radius: 2px;\n display: block;\n width: 100%;\n}\n\nnav.progress a {\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n}\n\nnav.progress a:hover {\n color: #EB7424;\n}\n\nnav.progress li:not(:last-child) a {\n border-right: 1px solid #e5e5e5;\n}\n\nnav.progress li.active a {\n background-color: #0C96DD;\n color: #FFF;\n cursor: default;\n pointer-events: none;\n}\n\nnav.progress li.active a:hover {\n background-color: #EB7424;\n color: #FFF;\n}\n\nnav.progress li.disabled a {\n color: #e5e5e5;\n cursor: default;\n pointer-events: none;\n}\n\nnav.progress li:hover:not(.active, .disabled) a {\n color: #EB7424;\n}\n\nnav.progress li:not(:last-child) a {\n border: 0;\n}\n\nnav.progress li.complete a {\n background-color: #FFF;\n color: #ccc;\n}\n\nnav.progress li.complete a::before {\n background-color: #FFF;\n}\n\nnav.progress li.complete a:hover {\n color: #0C96DD;\n}\n\n@media only screen and (min-width: 669px) {\n nav.progress ul {\n display: flex;\n }\n nav.progress li {\n flex: 1 1 auto;\n position: relative;\n }\n nav.progress li:last-child a::before {\n display: none;\n }\n nav.progress a::after, nav.progress a::before {\n border: 0 solid transparent;\n border-bottom: 1.25rem solid transparent;\n border-left: 1rem solid #FFF;\n border-top: 1.25rem solid transparent;\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n }\n nav.progress a::after {\n border-left-color: #FFF;\n }\n nav.progress a::before {\n border-left-color: #cccccc;\n margin-right: -1px;\n }\n nav.progress li.active {\n margin-left: -1rem;\n z-index: 2;\n }\n nav.progress li.active::before {\n border-bottom: 1.25rem solid #0C96DD;\n border-left: 1rem solid #FFF;\n border-top: 1.25rem solid #0C96DD;\n content: '';\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 2;\n }\n nav.progress li.active a::after, nav.progress li.active a::before {\n background-color: #0C96DD;\n border-bottom-color: #FFF;\n border-left-color: #0C96DD;\n border-top-color: #FFF;\n }\n nav.progress li.active a::before {\n margin-right: 0;\n }\n nav.progress li.active a:hover::after, nav.progress li.active a:hover::before {\n background-color: #EB7424;\n }\n}\n\nnav.primary {\n margin-bottom: 0.7rem;\n}\n\nnav.primary a {\n color: #FFF;\n}\n\nnav.primary li:hover a {\n color: #0C96DD;\n}\n\nnav.primary > ul li {\n margin-bottom: 0;\n}\n\nnav.primary li a {\n color: #FFF;\n}\n\nnav.primary li.active a,\nnav.primary li:hover a {\n color: #a5a5a5;\n}\n\nnav.utility {\n margin-bottom: 0.7rem;\n}\n\nnav.utility a {\n color: #FFF;\n font-size: 0.8rem;\n}\n\n.header-content {\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n}\n\n.header-content .menu-toggle:hover,\n.header-content .menu-toggle:focus {\n background-color: #0C96DD;\n}\n\n.header-content > .dropdown {\n background-color: #262626;\n z-index: 1001;\n}\n\n.header-content > .dropdown.sub-menu {\n background-color: #333333;\n z-index: 1002;\n}\n\n.desktop {\n display: none;\n}\n\nform.search {\n display: flex;\n}\n\nform.search .text,\nform.search .submit {\n margin-bottom: 0;\n}\n\nform.search .text {\n width: 100%;\n}\n\nform.search label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\nform.search .submit {\n flex-basis: 33%;\n flex-shrink: 0;\n}\n\nform.search input {\n border: none;\n width: 100%;\n}\n\n.torso {\n padding-bottom: 3rem;\n padding-top: 3rem;\n}\n\n.hero {\n background: #191919 url(../img/hero.jpg) no-repeat center top/cover;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n height: 240px;\n -webkit-justify-content: center;\n justify-content: center;\n text-align: center;\n}\n\n.hero .copy {\n margin-left: auto;\n margin-right: auto;\n max-width: 1200px;\n padding-left: 1rem;\n padding-right: 1rem;\n position: relative;\n}\n\n.hero .copy * {\n color: #FFF;\n}\n\nmain section:not(:last-child) {\n border-bottom: 1px solid #e5e5e5;\n margin-bottom: 3rem;\n padding-bottom: 2rem;\n}\n\naside.primary {\n margin-bottom: 2rem;\n}\n\nnav.supplemental {\n margin-bottom: 0;\n}\n\nnav.supplemental ul {\n display: block;\n}\n\nnav.supplemental ul li {\n display: block;\n float: none;\n margin-bottom: 0;\n}\n\nnav.supplemental ul li a {\n color: #0C96DD;\n display: block;\n padding: 0.25em 0;\n}\n\nnav.supplemental ul li a:hover {\n color: #191919;\n}\n\nnav.supplemental ul ul a {\n color: #727272;\n font-size: 0.8rem;\n line-height: 2;\n padding: 0;\n}\n\nnav.supplemental > ul > li {\n padding-bottom: 0.5em;\n}\n\nnav.supplemental > ul > li ~ li {\n border-top: 1px solid #e5e5e5;\n padding-top: 0.5em;\n}\n\nfooter.primary {\n background-color: #191919;\n color: #FFF;\n font-size: 0.9rem;\n padding: 3rem 0;\n text-align: center;\n}\n\nfooter.primary .branding {\n margin-top: 0;\n}\n\nfooter.primary .branding a {\n margin-bottom: 1rem;\n}\n\nfooter.primary a {\n color: #0C96DD;\n display: inline-block;\n}\n\nfooter.primary a:hover {\n color: #0975ad;\n}\n\nfooter.primary nav ul {\n margin-bottom: 2rem;\n text-align: center;\n}\n\nfooter.primary .social a {\n color: #FFF;\n}\n\nfooter.primary .legal {\n text-align: center;\n}\n\nfooter.primary .legal p {\n margin-bottom: 0.25rem;\n}\n\nfooter.primary .legal a {\n margin-left: 0.35rem;\n margin-right: 0.35rem;\n}\n\n.social {\n list-style: none;\n margin: 0;\n padding-left: 0;\n margin-bottom: 1rem;\n}\n\n.social li::before {\n display: none;\n}\n\n.social li {\n display: inline-block;\n font-size: 1.5rem;\n margin-bottom: 0;\n margin-right: 0.4rem;\n}\n\n.social .facebook a {\n color: #3664A2;\n}\n\n.social .linkedin a {\n color: #0077B5;\n}\n\n.social .twitter a {\n color: #55ACEE;\n}\n\n.social a:hover {\n opacity: 0.7;\n}\n\n/* = Typography = */\nh1,\nh2,\nh3,\nh4,\nh5 {\n line-height: 1.2;\n margin-bottom: 0.6em;\n}\n\nh1 {\n font-size: 2.2rem;\n}\n\nh2 {\n font-size: 1.7rem;\n}\n\nh3 {\n font-size: 1.3rem;\n}\n\nh4 {\n font-size: 1.1rem;\n}\n\nh5 {\n font-size: 1rem;\n}\n\nstrong {\n font-weight: bold;\n}\n\nem {\n font-style: italic;\n}\n\nblockquote {\n border-left: 1px solid #e5e5e5;\n color: #727272;\n font-style: italic;\n margin-bottom: 1.5em;\n padding-left: 1rem;\n}\n\n.intro {\n color: #727272;\n}\n\n.intro p {\n font-size: 1.3rem;\n margin-bottom: 0.8em;\n}\n\n.guide {\n color: #727272;\n font-size: 1.25rem;\n}\n\n.meta {\n color: #727272;\n}\n\nhr {\n border: 0;\n border-top: 1px solid #727272;\n display: block;\n height: 0;\n margin: 2em auto 3em;\n width: 100%;\n}\n\na {\n color: #0C96DD;\n cursor: pointer;\n text-decoration: none;\n}\n\na:hover, a:active {\n color: #EB7424;\n}\n\na:focus {\n outline: thin dotted;\n}\n\na.disabled, a[disabled] {\n color: #cccccc;\n cursor: default;\n pointer-events: none;\n}\n\np,\nol,\nul,\ndl {\n margin-bottom: 2rem;\n}\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol li,\nol dt,\nol dd,\nul li,\nul dt,\nul dd {\n margin-bottom: 0.5em;\n}\n\nul {\n list-style: disc;\n}\n\ndt {\n font-weight: bold;\n padding-left: 0.5em;\n}\n\ndd {\n padding-left: 2em;\n}\n\npre {\n background-color: #4A4A4A;\n padding: 1em;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\ncode {\n color: #FBCE78;\n font-family: \"Consolas\", monospace;\n padding: 2px 4px;\n}\n\n.sr-only {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n/* = Forms = */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font: inherit;\n margin: 0;\n}\n\n.button,\n.checkboxes,\n.file,\n.password,\n.radios,\n.reset,\n.select,\n.submit,\n.text,\n.textarea {\n margin-bottom: 2rem;\n}\n\nlabel {\n cursor: pointer;\n display: block;\n font-weight: bold;\n margin-bottom: 0.5em;\n}\n\n.required {\n color: #CE2A2A;\n}\n\nfieldset .help {\n color: #727272;\n display: block;\n font-size: 0.8rem;\n margin: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"email\"],\ninput[type=\"month\"],\ninput[type=\"number\"],\ninput[type=\"password\"],\ninput[type=\"search\"],\ninput[type=\"tel\"],\ninput[type=\"text\"],\ninput[type=\"time\"],\ninput[type=\"url\"],\ninput[type=\"week\"],\ntextarea {\n border: 1px solid #e5e5e5;\n border-radius: 0;\n box-sizing: border-box;\n color: #191919;\n display: block;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n margin: 0;\n padding: 0.4em 0.6em;\n width: 100%;\n}\n\ninput[type=\"reset\"],\ninput[type=\"search\"],\ninput[type=\"text\"],\ninput[type=\"submit\"] {\n border-radius: 0;\n -webkit-appearance: none;\n}\n\n::-webkit-input-placeholder {\n color: #4A4A4A;\n}\n\n::ms-input-placeholder {\n color: #4A4A4A;\n}\n\n::-moz-placeholder {\n color: #4A4A4A;\n}\n\n::-placeholder {\n color: #4A4A4A;\n}\n\n.multiple select {\n padding-left: 5px;\n padding-right: 10px;\n}\n\ntextarea {\n height: 8em;\n overflow: auto;\n resize: vertical;\n}\n\n.radio,\n.checkbox {\n font-weight: normal;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n padding: 0;\n}\n\na.button {\n background-color: #0C96DD;\n color: #FFF;\n display: inline-block;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n font-weight: bold;\n padding: 0.4em 1em;\n text-align: center;\n vertical-align: top;\n margin-bottom: 0;\n}\n\na.button:hover, a.button:focus {\n background-color: #EB7424;\n}\n\na.button.disabled, a.button[disabled] {\n background-color: #8c8c8c;\n color: #cccccc;\n pointer-events: none;\n}\n\nbutton,\ninput[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n background-color: #0C96DD;\n color: #FFF;\n display: inline-block;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n font-weight: bold;\n padding: 0.4em 1em;\n text-align: center;\n vertical-align: top;\n border: none;\n cursor: pointer;\n}\n\nbutton:hover, button:focus,\ninput[type=\"button\"]:hover,\ninput[type=\"button\"]:focus,\ninput[type=\"reset\"]:hover,\ninput[type=\"reset\"]:focus,\ninput[type=\"submit\"]:hover,\ninput[type=\"submit\"]:focus {\n background-color: #EB7424;\n}\n\nbutton.disabled, button[disabled],\ninput[type=\"button\"].disabled,\ninput[type=\"button\"][disabled],\ninput[type=\"reset\"].disabled,\ninput[type=\"reset\"][disabled],\ninput[type=\"submit\"].disabled,\ninput[type=\"submit\"][disabled] {\n background-color: #8c8c8c;\n color: #cccccc;\n pointer-events: none;\n}\n\n/* = Iconography = */\n.thumbs-up::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n margin-right: 0.5em;\n}\n\n/* = Messaging = */\n.success {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n background-color: #48AC2C;\n}\n\n.success p:last-of-type,\n.success ul:last-of-type {\n margin-bottom: 0;\n}\n\n.success a {\n text-decoration: underline;\n}\n\n.success::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n display: inline-block;\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n}\n\n.success::before {\n content: \"\\f00c\";\n}\n\n.success a {\n color: #FFF;\n}\n\n.success a:hover {\n color: #d9d9d9;\n}\n\n.info {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n background-color: #DDD;\n}\n\n.info p:last-of-type,\n.info ul:last-of-type {\n margin-bottom: 0;\n}\n\n.info a {\n text-decoration: underline;\n}\n\n.info::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n display: inline-block;\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n}\n\n.info::before {\n content: \"\\f129\";\n}\n\n.error {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n background-color: #CE2A2A;\n}\n\n.error p:last-of-type,\n.error ul:last-of-type {\n margin-bottom: 0;\n}\n\n.error a {\n text-decoration: underline;\n}\n\n.error::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n display: inline-block;\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n}\n\n.error::before {\n content: \"\\f12a\";\n}\n\n.error a {\n color: #DDD;\n}\n\n.error a:hover {\n color: #b7b7b7;\n}\n\n/* = Tables = */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n margin-bottom: 2rem;\n width: 100%;\n}\n\ntable caption {\n font-size: 0.9rem;\n margin-bottom: 0.75em;\n}\n\ntable td,\ntable th {\n padding: 0.5em 1em;\n text-align: left;\n vertical-align: top;\n}\n\ntable th {\n background-color: #191919;\n color: #FFF;\n font-weight: bold;\n text-transform: uppercase;\n}\n\ntable td {\n border: 1px solid #e5e5e5;\n}\n\ntable tr:nth-child(even) td {\n background-color: #F3F3F3;\n}\n\n/* = Section Specific = */\n/* = Page Specific = */\n/* = Media Queries = */\n@media only screen and (min-width: 1024px) {\n /* = Layout = */\n header.primary {\n padding-bottom: 0;\n }\n header.primary .branding {\n margin-right: 2rem;\n }\n nav ul {\n text-align: left;\n }\n nav.primary {\n margin-bottom: 0;\n }\n nav.primary > ul > li {\n font-size: 1.1rem;\n margin-left: 1rem;\n padding-bottom: 1rem;\n position: relative;\n }\n nav.primary > ul > li:first-child {\n margin-left: 0;\n }\n nav.primary ul {\n text-align: left;\n }\n nav.primary ul li li {\n display: block;\n float: none;\n }\n .utilities nav.utility {\n margin-bottom: 0.4rem;\n }\n .utilities nav.utility ul {\n text-align: right;\n }\n .desktop {\n align-items: flex-end;\n display: flex;\n flex: 1 1 auto;\n flex-flow: column nowrap;\n justify-content: space-between;\n }\n .desktop nav.primary {\n align-self: flex-start;\n }\n button.menu-toggle {\n display: none;\n }\n .torso .wrap {\n display: flex;\n justify-content: space-between;\n }\n .torso .wrap main {\n flex: 1 1 auto;\n padding-right: 2rem;\n }\n .torso .wrap aside.primary {\n flex: 0 0 25%;\n }\n aside.primary {\n margin-bottom: 0;\n }\n aside.primary nav ul {\n text-align: left;\n }\n footer.primary .wrapper {\n display: flex;\n justify-content: space-between;\n }\n footer.primary .wrapper > * {\n flex: 1 0 0;\n }\n footer.primary .wrapper > nav {\n flex-grow: 2;\n margin-bottom: 0;\n }\n footer.primary .branding {\n margin-right: 0;\n max-width: none;\n text-align: left;\n }\n footer.primary .social {\n text-align: right;\n }\n /* = Typography = */\n h1 {\n font-size: 2.6rem;\n }\n h2 {\n font-size: 2.1rem;\n }\n h3 {\n font-size: 1.6rem;\n }\n h4 {\n font-size: 1.25rem;\n }\n h5 {\n font-size: 1.15rem;\n }\n}\n\n/* = Print Styles = */\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n /* Black prints faster: h5bp.com/s */\n text-shadow: none !important;\n }\n a {\n text-decoration: underline;\n }\n pre,\n blockquote,\n tr,\n img,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n page-break-inside: avoid;\n }\n thead {\n display: table-header-group;\n }\n @page {\n margin: 0.5cm;\n }\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n}\n","/**\n * Built using Imarc Boilerplate v2.1\n *\n * Copyright 2016 Imarc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * = Table of Contents =\n * Variables\n * Mixins\n * Components\n * Base\n * Layout\n * Typography\n * Forms\n * Iconography\n * Messaging\n * Tables\n * Section Specific\n * Page Specific\n * Media Queries\n * Print Styles\n */\n\n@import \"_components\";\n\n\n/* = Variables = */\n\n$font-stack: \"Helvetica Neue\", Arial, sans-serif;\n\n/* Grays */\n$white: #FFF;\n$lightgray: #DDD;\n$gray: #808080;\n$darkgray: #4A4A4A;\n$charcoal: #191919;\n$black: #000;\n\n/* The brand colors (name them the color) */\n$brand-blue: #0C96DD;\n$brand-orange: #EB7424;\n\n/* Messaging colors */\n$success: #48AC2C;\n$error: #CE2A2A;\n$info: #DDD;\n\n/* Applied colors */\n$plain-text: $charcoal;\n$meta-text: lighten($charcoal, 35%);\n$link: $brand-blue;\n$link-hover: $brand-orange;\n$border: lighten($charcoal, 80%);\n\n/* Social Network Colors */\n$facebook: #3664A2;\n$twitter: #55ACEE;\n$linkedin: #0077B5;\n$youtube: #CD201F;\n\n/* Breakpoint values */\n$medium: 669px;\n$large: 1024px;\n\n\n\n/* = Mixins = */\n\n@mixin button {\n background-color: $link;\n color: #FFF;\n display: inline-block;\n font-family: $font-stack;\n font-weight: bold;\n padding: 0.4em 1em;\n text-align: center;\n vertical-align: top;\n\n &:hover,\n &:focus {\n background-color: $link-hover;\n }\n\n &.disabled,\n &[disabled] {\n background-color: lighten($charcoal, 45%);\n color: darken(#FFF, 20%);\n pointer-events: none;\n }\n}\n\n@mixin container {\n margin-left: auto;\n margin-right: auto;\n max-width: 1200px;\n padding-left: 1rem;\n padding-right: 1rem;\n position: relative;\n}\n\n@mixin grouping {\n &::before,\n &::after {\n content: \"\";\n display: table;\n }\n &::after {\n clear: both;\n }\n}\n\n@mixin fontawesome($character: \"\") {\n font: normal normal normal 1em unquote(\"/\") 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n\n @if $character != \"\" {\n content: $character;\n } @else {\n display: inline-block;\n }\n}\n\n@mixin messaging {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n p:last-of-type,\n ul:last-of-type {\n margin-bottom: 0;\n }\n a {\n text-decoration: underline;\n }\n &::before {\n @include fontawesome;\n\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n }\n}\n\n@mixin no-bullets {\n list-style: none;\n margin: 0;\n padding-left: 0;\n\n li::before {\n display: none;\n }\n}\n\n@mixin transition($properties: all, $duration: 250ms, $easing: ease-in-out) {\n @if length($properties) > 1 {\n -webkit-transition-property: $properties;\n transition-property: $properties;\n } @else {\n -webkit-transition: $properties $duration $easing;\n transition: $properties $duration $easing;\n }\n}\n\n@mixin visuallyhidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n\n/* = Components = */\n\n.accordion {\n @include accordion();\n}\n\n.backgroundvideo {\n @include backgroundvideo();\n}\n\n.carousel {\n @include carousel;\n}\n\n.dossier {\n @include dossier($gutter: 2rem, $photoWidth: 25%, $direction: row);\n}\n\n.header-content > .dropdown,\n.mobile {\n @include mobileNavigation;\n}\n\n.features {\n @include features($gutter: 3rem);\n}\n\nheader.primary.sticky {\n @include sticky-header();\n}\n\n.listing {\n @include listing();\n}\n\n.login {\n @include login;\n}\n\nnav.pagination {\n @include pagination();\n}\n\n.desktop nav.primary {\n @include dropdown();\n li.mega {\n @include dropdown-mega();\n }\n}\n\n.tabs {\n @include tabs();\n}\n\n.testimonial {\n @include testimonial;\n}\n\n.tiles {\n @include tiles();\n}\n\n\n/* = Base = */\n\na, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, datalist, dd, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, hr, i, iframe, img, input, label, legend, li, main, meter, nav, object, ol, option, p, pre, progress, q, section, select, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, u, ul, video {\n border: 0;\n box-sizing: border-box;\n font: inherit;\n font-size: 100%;\n margin: 0;\n outline: 0;\n padding: 0;\n vertical-align: baseline;\n}\n\narticle, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {\n display: block;\n}\n\nhtml {\n background-color: #FFF;\n color: $plain-text;\n font-family: $font-stack;\n font-size: 16px;\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n}\n\nbody {\n min-width: 300px;\n}\n\nimg {\n max-width: 100%;\n vertical-align: middle;\n}\n\n::selection {\n background: $border;\n}\n\n::-moz-selection {\n background: $border;\n}\n\n\n/* = Layout = */\n\n.group {\n @include grouping;\n}\n\n.container {\n @include container;\n}\n\n.columns {\n @include columns;\n}\n\n.sr-only {\n @include visuallyhidden;\n}\n\n.search-drawer {\n background-color: $darkgray;\n > div {\n max-height: 0;\n overflow: hidden;\n transition: max-height 150ms ease;\n &.open {\n max-height: 80px;\n }\n }\n form {\n display: flex;\n padding: 1rem 0;\n > * {\n margin-bottom: 0;\n }\n .text {\n flex: 1 1 auto;\n }\n .submit input {\n height: 100%;\n }\n }\n}\n\n.branding {\n img {\n max-width: 180px;\n }\n}\n\nheader.primary {\n background-color: $charcoal;\n padding: 1rem 0;\n position: relative;\n .container {\n position: static;\n }\n .branding {\n flex-basis: 180px;\n flex-shrink: 0;\n }\n}\n\nnav {\n margin-bottom: 2rem;\n ul {\n @include no-bullets;\n \n display: flex;\n li {\n margin-bottom: 0;\n }\n }\n a {\n color: $link;\n display: block;\n padding: 0 0.5rem;\n }\n\n li.active a,\n li.active:hover a {\n color: $charcoal;\n }\n\n &.tabs {\n @include tabs;\n }\n\n &.breadcrumbs {\n @include breadcrumbs();\n }\n\n &.progress {\n @include progress();\n }\n\n}\n\nnav.primary {\n margin-bottom: 0.7rem;\n\n a {\n color: #FFF;\n }\n\n li:hover a {\n color: $brand-blue;\n }\n\n > ul {\n li {\n margin-bottom: 0;\n }\n }\n li a {\n color: #FFF;\n }\n li.active,\n li:hover {\n a {\n color: lighten($charcoal, 55%);\n }\n }\n}\n\nnav.utility {\n margin-bottom: 0.7rem;\n a {\n color: #FFF;\n font-size: 0.8rem;\n }\n}\n\n.header-content {\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n .menu-toggle:hover,\n .menu-toggle:focus {\n background-color: $link;\n }\n > .dropdown {\n background-color: lighten($charcoal, 5%);\n z-index: 1001; \n &.sub-menu {\n background-color: lighten($charcoal, 10%);\n z-index: 1002;\n }\n }\n}\n\n.desktop {\n display: none;\n}\n\nform.search {\n display: flex;\n .text,\n .submit {\n margin-bottom: 0;\n }\n .text {\n width: 100%;\n }\n label {\n @include visuallyhidden;\n }\n .submit {\n flex-basis: 33%;\n flex-shrink: 0;\n }\n input {\n border: none;\n width: 100%;\n }\n}\n\n.torso {\n padding-bottom: 3rem;\n padding-top: 3rem;\n}\n\n.hero {\n background: $plain-text url(../img/hero.jpg) no-repeat center top / cover;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n height: 240px;\n -webkit-justify-content: center;\n justify-content: center;\n text-align: center;\n .copy {\n @include container;\n * {\n color: #FFF;\n }\n }\n}\n\nmain section {\n &:not(:last-child) {\n border-bottom: 1px solid $border;\n margin-bottom: 3rem;\n padding-bottom: 2rem;\n }\n}\n\naside.primary {\n margin-bottom: 2rem;\n}\n\nnav.supplemental {\n margin-bottom: 0;\n ul {\n display: block;\n li {\n display: block;\n float: none;\n margin-bottom: 0;\n a {\n color: $link;\n display: block;\n padding: 0.25em 0;\n }\n a:hover {\n color: $plain-text;\n }\n }\n ul {\n a {\n color: $meta-text;\n font-size: 0.8rem;\n line-height: 2;\n padding: 0;\n }\n }\n }\n > ul {\n > li {\n padding-bottom: 0.5em;\n }\n > li ~ li {\n border-top: 1px solid $border;\n padding-top: 0.5em;\n }\n }\n}\n\nfooter.primary {\n background-color: $charcoal;\n color: #FFF;\n font-size: 0.9rem;\n padding: 3rem 0;\n text-align: center;\n .branding {\n margin-top: 0;\n a {\n margin-bottom: 1rem;\n }\n }\n a {\n color: $link;\n display: inline-block;\n &:hover {\n color: darken($link, 10%);\n }\n }\n nav ul {\n margin-bottom: 2rem;\n text-align: center;\n }\n .social a {\n color: #FFF;\n }\n .legal {\n text-align: center;\n p {\n margin-bottom: 0.25rem;\n }\n a {\n margin-left: 0.35rem;\n margin-right: 0.35rem;\n }\n }\n}\n\n.social {\n @include no-bullets;\n\n margin-bottom: 1rem;\n li {\n display: inline-block;\n font-size: 1.5rem;\n margin-bottom: 0;\n margin-right: 0.4rem;\n }\n .facebook a {\n color: $facebook;\n }\n .linkedin a {\n color: $linkedin;\n }\n .twitter a {\n color: $twitter;\n }\n a:hover {\n opacity: 0.7;\n }\n}\n\n\n/* = Typography = */\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n line-height: 1.2;\n margin-bottom: 0.6em;\n}\n\nh1 {\n font-size: 2.2rem;\n}\n\nh2 {\n font-size: 1.7rem;\n}\n\nh3 {\n font-size: 1.3rem;\n}\n\nh4 {\n font-size: 1.1rem;\n}\n\nh5 {\n font-size: 1rem;\n}\n\nstrong {\n font-weight: bold;\n}\n\nem {\n font-style: italic;\n}\n\nblockquote {\n border-left: 1px solid $border;\n color: $meta-text;\n font-style: italic;\n margin-bottom: 1.5em;\n padding-left: 1rem;\n}\n\n.intro {\n color: $meta-text;\n p {\n font-size: 1.3rem;\n margin-bottom: 0.8em;\n }\n}\n\n.guide {\n color: $meta-text;\n font-size: 1.25rem;\n}\n\n.meta {\n color: $meta-text;\n}\n\nhr {\n border: 0;\n border-top: 1px solid $meta-text;\n display: block;\n height: 0;\n margin: 2em auto 3em;\n width: 100%;\n}\n\n@mixin link {\n color: $link;\n cursor: pointer;\n text-decoration: none;\n\n &:hover,\n &:active {\n color: $link-hover;\n }\n &:focus {\n outline: thin dotted;\n }\n\n &.disabled,\n &[disabled] {\n color: darken(#FFF, 20%);\n cursor: default;\n pointer-events: none;\n }\n}\na {\n @include link;\n}\n\np,\nol,\nul,\ndl {\n margin-bottom: 2rem;\n}\n\nol,\nul {\n padding-left: 2rem;\n li,\n dt,\n dd {\n margin-bottom: 0.5em;\n }\n}\n\nul {\n list-style: disc;\n}\n\ndt {\n font-weight: bold;\n padding-left: 0.5em;\n}\n\ndd {\n padding-left: 2em;\n}\n\npre {\n background-color: #4A4A4A;\n padding: 1em;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\ncode {\n color: #FBCE78;\n font-family: \"Consolas\", monospace;\n padding: 2px 4px;\n}\n\n.sr-only {\n @include visuallyhidden;\n}\n\n\n/* = Forms = */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font: inherit;\n margin: 0;\n}\n\n.button,\n.checkboxes,\n.file,\n.password,\n.radios,\n.reset,\n.select,\n.submit,\n.text,\n.textarea {\n margin-bottom: 2rem;\n}\n\nlabel {\n cursor: pointer;\n display: block;\n font-weight: bold;\n margin-bottom: 0.5em;\n}\n\n.required {\n color: $error;\n}\n\nfieldset .help {\n color: $meta-text;\n display: block;\n font-size: 0.8rem;\n margin: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"email\"],\ninput[type=\"month\"],\ninput[type=\"number\"],\ninput[type=\"password\"],\ninput[type=\"search\"],\ninput[type=\"tel\"],\ninput[type=\"text\"],\ninput[type=\"time\"],\ninput[type=\"url\"],\ninput[type=\"week\"],\ntextarea {\n border: 1px solid $border;\n border-radius: 0;\n box-sizing: border-box;\n color: $plain-text;\n display: block;\n font-family: $font-stack;\n margin: 0;\n padding: 0.4em 0.6em;\n width: 100%;\n}\n\ninput[type=\"reset\"],\ninput[type=\"search\"],\ninput[type=\"text\"],\ninput[type=\"submit\"] {\n border-radius: 0;\n -webkit-appearance: none;\n}\n\n::-webkit-input-placeholder {\n color: #4A4A4A;\n}\n\n::ms-input-placeholder {\n color: #4A4A4A;\n}\n\n::-moz-placeholder {\n color: #4A4A4A;\n}\n\n::-placeholder {\n color: #4A4A4A;\n}\n\n.multiple select {\n padding-left: 5px;\n padding-right: 10px;\n}\n\ntextarea {\n height: 8em;\n overflow: auto;\n resize: vertical;\n}\n\n.radio,\n.checkbox {\n font-weight: normal;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n padding: 0;\n}\n\na.button {\n @include button;\n margin-bottom: 0;\n}\n\nbutton,\ninput[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n @include button;\n border: none;\n cursor: pointer;\n}\n\n\n/* = Iconography = */\n\n.thumbs-up::before {\n @include fontawesome(\"\\f087\");\n\n margin-right: 0.5em;\n}\n\n\n/* = Messaging = */\n\n.success {\n @include messaging;\n\n background-color: $success;\n &::before {\n content: \"\\f00c\";\n }\n a {\n color: #FFF;\n }\n a:hover {\n color: darken(#FFF, 15%);\n }\n}\n\n.info {\n @include messaging;\n\n background-color: $info;\n &::before {\n content: \"\\f129\";\n }\n}\n\n.error {\n @include messaging;\n\n background-color: $error;\n &::before {\n content: \"\\f12a\";\n }\n a {\n color: $info;\n }\n a:hover {\n color: darken($info, 15%);\n }\n}\n\n\n/* = Tables = */\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n margin-bottom: 2rem;\n width: 100%;\n caption {\n font-size: 0.9rem;\n margin-bottom: 0.75em;\n }\n td,\n th {\n padding: 0.5em 1em;\n text-align: left;\n vertical-align: top;\n }\n th {\n background-color: $plain-text;\n color: #FFF;\n font-weight: bold;\n text-transform: uppercase;\n }\n td {\n border: 1px solid $border;\n }\n tr:nth-child(even) td {\n background-color: #F3F3F3;\n }\n}\n\n\n/* = Section Specific = */\n\n\n/* = Page Specific = */\n\n\n/* = Media Queries = */\n\n@media only screen and (min-width: $medium) {\n \n}\n\n\n@media only screen and (min-width: $large) {\n\n /* = Layout = */\n \n header.primary {\n padding-bottom: 0;\n .branding {\n margin-right: 2rem;\n }\n }\n\n nav {\n ul {\n text-align: left;\n }\n }\n\n nav.primary {\n margin-bottom: 0;\n > ul > li {\n font-size: 1.1rem;\n margin-left: 1rem;\n padding-bottom: 1rem;\n position: relative;\n }\n > ul > li:first-child {\n margin-left: 0;\n }\n ul {\n text-align: left;\n li li {\n display: block;\n float: none;\n }\n }\n }\n\n .utilities {\n nav.utility {\n margin-bottom: 0.4rem;\n ul {\n text-align: right;\n }\n }\n }\n\n .desktop {\n align-items: flex-end;\n display: flex;\n flex: 1 1 auto;\n flex-flow: column nowrap;\n justify-content: space-between;\n\n nav.primary {\n align-self: flex-start;\n }\n }\n\n button.menu-toggle {\n display: none;\n }\n \n .torso .wrap {\n display: flex;\n justify-content: space-between;\n main {\n flex: 1 1 auto;\n padding-right: 2rem;\n }\n aside.primary {\n flex: 0 0 25%;\n }\n }\n\n aside.primary {\n margin-bottom: 0;\n nav ul {\n text-align: left;\n }\n }\n\n footer.primary {\n .wrapper {\n display: flex;\n justify-content: space-between;\n > * {\n flex: 1 0 0;\n }\n > nav {\n flex-grow: 2;\n margin-bottom: 0;\n }\n }\n .branding {\n margin-right: 0;\n max-width: none;\n text-align: left;\n }\n .social {\n text-align: right;\n }\n }\n\n\n /* = Typography = */\n\n h1 {\n font-size: 2.6rem;\n }\n\n h2 {\n font-size: 2.1rem;\n }\n\n h3 {\n font-size: 1.6rem;\n }\n\n h4 {\n font-size: 1.25rem;\n }\n\n h5 {\n font-size: 1.15rem;\n }\n}\n\n\n/* = Print Styles = */\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important; /* Black prints faster: h5bp.com/s */\n text-shadow: none !important;\n }\n\n a {\n text-decoration: underline;\n }\n\n pre,\n blockquote,\n tr,\n img,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n page-break-inside: avoid;\n }\n\n thead {\n display: table-header-group;\n }\n\n @page {\n margin: 0.5cm;\n }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n}\n","/**\n * _components.scss contains solely the mixin definitions for components.\n *\n * + This file should not depend on styles.scss; we should be able to use\n * include this file without including styles.scss.\n * + This file should not generate any CSS on it's own; it should only contain\n * mixin and/or function definitions.\n */\n\n/**\n * Media query breakpoints\n */\n\n$medium: 669px;\n$large: 1024px;\n\n/**\n* ACCORDION\n*\n* ACCORDION requires the accordion.plugin.js file. Within the .accordion\n* class each accordion item requires a div wrapper. Within the div wrapper\n* there is a .header class and a .content class. The .header class is the\n* clickable element that will reveal what is hidden in the .content class.\n* By default .content is hidden by javascript just in case javascript is not available.\n*\n* Emmet: .accordion>div>(.header{header}+.content>{lorem ipsum})\n*\n*/\n\n@mixin accordion() {\n > div {\n .header {\n background: $lightgray;\n color: $plain-text;\n cursor: pointer;\n font-size: 1em;\n margin-top: .5em;\n padding: .5em 1em;\n position: relative;\n text-align: left;\n width: 100%;\n &:hover {\n background: darken($lightgray, 5%);\n }\n &::after {\n bottom: 0;\n height: 1em;\n margin: auto 0;\n position: absolute;\n right: 1em;\n top: 0;\n width: 1em;\n }\n &.open {\n background: darken($lightgray, 5%);\n &::after {\n @include fontawesome(\"\\f068\");\n }\n }\n &.close {\n &::after {\n @include fontawesome(\"\\f067\");\n }\n }\n }\n .content {\n padding: 1em 0;\n &.hidden {\n display: none;\n }\n }\n }\n}\n\n\n/**\n * BACKGROUND VIDEO\n *\n * BACKGROUND VIDEO plays a video (without sound) in the background of an element.\n * Emmet: .backgroundvideo>(.panel>div>h1+p)+video>source[src]\n */\n@mixin backgroundvideo() {\n & {\n align-items: center;\n display: flex;\n height: auto;\n justify-content: center;\n overflow: hidden;\n position: relative;\n .mold {\n background-color: rgba(2255, 255, 255, 0.6);\n padding: 2em;\n text-align: center;\n z-index: 2;\n }\n video {\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n &::before {\n content: \"\";\n display: block;\n padding-top: 30%;\n }\n}\n\n\n/**\n/**\n * BREADCRUMBS\n *\n * The breadcrumb mixin provides basic breadcrumb styling, complete with\n * fontawesome icons being used as separators between crumbs.\n *\n * Emmet: nav.breadcrumbs>ul>li*3>a\n */\n@mixin breadcrumbs() {\n li:not(:last-child) a {\n padding-right: 0;\n\n &::after {\n @include fontawesome(\"\\f105\");\n padding-left: 0.5rem;\n }\n }\n}\n\n\n/**\n * CAROUSEL\n *\n * CAROUSEL uses Slick to create a carousel. It defaults to a rather\n * basic, one-slide-at-a-time implementation with dots, but slick supports a\n * good deal of configuration including showing multiple slides, breakpoints,\n * syncing between slides, and plenty of javascript events and methods for\n * integration.\n *\n * The implementation on Boilerplate is using a CDN to provide\n *\n * + slick.css\n * + slick-theme.css\n * + slick.min.js\n *\n * See http://kenwheeler.github.io/slick/ for more information.\n *\n * The carousel() mixin should be included on a parent element that contains\n * one div per slide. No additional classes are necessary – the slick classes\n * referenced are added dynamically by slick.\n *\n *
    \n *
    \n *

    A slide!

    \n *

    Some text.

    \n *
    \n *
    \n *\n * Emmet: .carousel>div*3>h2+p\n *\n * While there's more information in slick's documentation, .slick-slide wraps\n * slides while .slick-next and .slick-prev are used for the next/previous\n * arrows.\n */\n@mixin carousel() {\n .slick-slide {\n color: #FFF;\n height: auto;\n padding: 3rem;\n }\n .slick-prev,\n .slick-next {\n z-index: 1;\n }\n .slick-prev {\n left: 2rem;\n }\n .slick-next {\n right: 2rem;\n }\n}\n\n\n/**\n * COLUMNS\n *\n * The COLUMNS mixin makes it so that immmediate child elements appear as\n * columns. It is responsive, allowing you to specify the media query at which\n * to switch the layout from stacking to columns.\n *\n * Additionally, it assumes the use of
    elements to create visual gutters\n * that are only visible while displayed as columns.\n *\n *
    \n *
    \n *

    A column

    \n *
    \n *
    \n *
    \n *

    Another column

    \n *
    \n *
    \n *\n * Emmet: .columns>div+(hr+div)*2\n */\n@mixin columns() {\n > hr {\n border: 0;\n display: none;\n }\n @media only screen and (min-width: $medium) {\n & {\n display: table;\n table-layout: fixed;\n width: 100%;\n > * {\n display: table-cell;\n vertical-align: top;\n }\n > hr {\n display: table-cell;\n width: 1rem;\n }\n }\n }\n}\n\n\n/**\n * DOSSIER\n *\n * The DOSSIER mixin displays an individual’s biography and photograph.\n *\n * Emmet: .dossiers>div>(.photo>img^.bio>h2{Lorem Ipsum}+p.title{Vice President}+p{Lorem20})\n */\n@mixin dossier($gutter: 2rem, $photoWidth: 25%, $direction: row) {\n > * {\n text-align: center;\n .photo {\n margin-bottom: 2rem;\n }\n }\n @media only screen and (min-width: $medium) {\n > * {\n display: flex;\n flex-direction: $direction;\n flex-wrap: nowrap;\n margin-bottom: 4rem;\n text-align: left;\n .photo {\n flex: 0 0 $photoWidth;\n margin-bottom: 0;\n margin-right: $gutter;\n @if $direction == row-reverse {\n margin-left: $gutter;\n margin-right: 0;\n }\n }\n .bio {\n .title {\n color: $meta-text;\n text-transform: uppercase;\n }\n }\n }\n }\n}\n\n\n/**\n * DROPDOWN\n *\n * The DROPDOWN mixin allows for dropdown menus. By default, a single\n * column dropdown is used. It is positioned to its parent.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu>ul>li>(a{link name})*3\n */\n@mixin dropdown() {\n @media only screen and (max-width: $large - 1px) {\n .dropdown,\n i.fa {\n display: none;\n }\n }\n @media only screen and (min-width: $large) {\n i.fa {\n display: inline-block;\n }\n .dropdown {\n background-color: #2A2A2A;\n color: #FFF;\n display: block;\n font-size: 1rem;\n min-width: 260px;\n opacity: 0;\n padding: 2rem 0;\n position: absolute;\n top: 100%;\n transition: opacity 300ms;\n visibility: hidden;\n z-index: 1;\n ul {\n display: block;\n }\n .menu {\n > * {\n padding: 0 1rem;\n }\n li {\n margin-bottom: 0.4em;\n }\n a {\n color: #0C96DD;\n }\n a:hover,\n a:focus {\n color: darken(#0C96DD, 10%);\n }\n }\n }\n .dropdown.open {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n\n\n/**\n * DROPDOWN (mega)\n * The DROPDOWN (mega) mixin allows for full-width mega dropdown\n * menus. Call this mixin on a list item. Note that the simple\n * dropdown component is a dependency of this mega dropdown.\n * The mega dropdown is positioned to header.primary instead\n * of its parent list item.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu(div*3)\n */\n@mixin dropdown-mega() {\n position: static;\n @media only screen and (min-width: $large) {\n .dropdown {\n left: 0;\n top: 100%;\n width: 100%;\n .menu {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n margin-left: auto;\n margin-right: auto;\n max-width: 1168px;\n > * {\n border-left: 1px solid #777;\n flex-basis: 0;\n flex-grow: 1;\n padding: 0 3rem;\n }\n > *:first-child {\n border-left: none;\n padding-left: 0;\n }\n > *:last-child {\n padding-right: 0;\n }\n }\n }\n }\n}\n\n\n/**\n * FEATURES house three features in one row. Powered by flexbox,\n * this allows for a bottom alignment of each feature’s anchor. Use the\n * $gutter variable to pass you preferred gutter width.\n *\n * Emmet: .features>(div>(.icon>img)+h4+p+a)*3\n */\n@mixin features($gutter: 3rem) {\n > * {\n background-color: #EEE;\n margin-bottom: 2rem;\n margin-left: auto;\n margin-right: auto;\n padding: 2rem;\n text-align: center;\n img,\n h3,\n p {\n margin-bottom: 1rem;\n }\n .button {\n margin-bottom: 0;\n }\n }\n @media only screen and (min-width: $large) {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n > * {\n display: flex;\n flex: 1 0 0;\n flex-direction: column;\n margin-left: $gutter;\n margin-right: 0;\n .button {\n align-self: center;\n margin-top: auto;\n }\n &:first-child {\n margin-left: 0;\n }\n }\n }\n}\n\n\n/**\n * LISTING shows a listing of entries. It includes an optional search form with filters. \n * Remove the search form elements for a simple list.\n *\n * Emmet: .listing>(form>.search>(.text>label+input^.submit>label+input[type=\"submit\"]))+p.guide{Showing 10 of 20}+ul>li>a>h2{Listing headline}\n */\n@mixin listing() {\n margin-bottom: 2rem;\n form {\n .search {\n display: flex;\n label {\n @include visuallyhidden;\n }\n .text {\n flex-grow: 1;\n }\n .submit {\n flex-basis: 120px;\n flex-shrink: 0;\n }\n .submit input {\n height: 100%;\n width: 100%;\n }\n }\n .filters {\n margin-bottom: 2rem;\n label {\n display: inline;\n }\n span {\n background-color: darken($link, 20%);\n border-radius: 0.5rem;\n color: #fff;\n display: inline-block;\n margin: 0 0.5rem 0.5rem 0;\n padding: 0.5rem 1rem;\n }\n input[type=\"checkbox\"]:checked + span {\n background-color: $link;\n }\n input[type=\"checkbox\"] {\n display: none;\n }\n }\n }\n\n ul {\n list-style: none;\n padding: 0;\n margin: 0;\n li {\n border-top: 4px solid $border;\n margin-bottom: 0;\n padding: 2rem 0;\n .meta {\n display: block;\n font-size: 0.9rem;\n margin-bottom: 1em;\n }\n h2 + .meta {\n margin-top: -1em;\n }\n .summary {\n p:last-of-type {\n margin-bottom: 0;\n }\n }\n }\n }\n}\n\n\n/**\n * The LOGIN mixin is a basic implementation of a login module that includes a\n * username input, password input, submit button, forgot password link, and\n * remember me checkbox\n *\n * Emmet: .login>form>(div.text>label{Username}+input)+(div.password>label{Password}+input[type=\"password\"])+div.actions>(.submit>button{Login})+(label>input[type=\"hidden\"]+input[type=\"checkbox\"])+a{Forgot Your Password?}\n */\n@mixin login {\n background: #EEE;\n margin-left: auto;\n margin-right: auto;\n max-width: 600px;\n padding: 3rem;\n input {\n &:focus {\n box-shadow: 0 0 5px rgba(114, 164, 0, 0.7);\n }\n }\n .submit {\n text-align: center;\n }\n .actions {\n text-align: center;\n\n }\n @media only screen and (min-width: $medium) {\n .actions {\n align-items: center;\n display: flex;\n justify-content: space-between;\n flex-flow: row wrap;\n > * {\n margin: 0;\n padding: 0;\n }\n label {\n margin-left: 1em;\n }\n a {\n display: block;\n margin-left: auto;\n text-align: right;\n }\n }\n }\n}\n\n\n/**\n * MOBILE NAVIGATION\n *\n * Emmet\n */\n\n@mixin mobileNavigation() {\n background-color: $charcoal;\n bottom: 0;\n display: none;\n height: 100%;\n opacity: 0;\n overflow-y: auto;\n padding: 1rem;\n position: fixed;\n top: 0;\n transition: transform .25s;\n width: 80%;\n z-index: 1000;\n &.left {\n display: block;\n left: 0;\n right: auto;\n transform: translateX(-100%);\n }\n &.right {\n display: block;\n left: auto;\n right: 0;\n transform: translateX(100%);\n }\n &.left.open, &.right.open {\n transform: translateX(0);\n transition: transform .25s;\n }\n &.init {\n display: block;\n opacity: 1;\n }\n nav.utility {\n ul li a {\n padding: 0.75rem 0;\n }\n }\n ul {\n display: block;\n padding-left: 0;\n }\n ul li {\n align-items: center;\n border-bottom: 1px solid lighten($charcoal, 10%);\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n margin-bottom: 0;\n text-align: left;\n a {\n color: #fff;\n display: block;\n padding: 1rem 0;\n }\n i.fa {\n display: inline-block;\n }\n\n }\n @media only screen and (min-width: $large) {\n &.open.left {\n transform: translateX(-100%);\n }\n &.open.right {\n transform: translateX(100%);\n }\n }\n}\n\n\n/**\n * PAGINATION\n *\n * Emmet: nav.pagination>ul>(li.previous>a{Previous})+(li*2>a)+(li.active>a)+(li*2>a)+li.next>a{Next}\n */\n@mixin pagination {\n display: flex;\n justify-content: center;\n ul {\n border: 1px solid $border;\n border-radius: 2px;\n display: flex;\n justify-content: center;\n }\n li {\n margin-bottom: 0;\n }\n a {\n color: $link;\n padding: 0.5rem 1rem;\n position: relative;\n }\n li:not(:last-child) a {\n border-right: 1px solid $border;\n }\n li.active a {\n background-color: $brand-blue;\n color: #fff;\n cursor: default;\n pointer-events: none;\n &::before,\n &::after {\n background-color: $brand-blue;\n }\n &:hover {\n color: #fff;\n background-color: $link-hover;\n &::before,\n &::after {\n background-color: $link-hover;\n }\n }\n }\n li.disabled a {\n color: $border;\n cursor: default;\n pointer-events: none;\n }\n li.previous a {\n &::before {\n @include fontawesome(\"\\f100\");\n }\n }\n li.next a {\n &::before {\n @include fontawesome(\"\\f101\");\n }\n }\n li:hover:not(.active):not(.disabled) {\n a {\n background-color: $link;\n color: #FFF;\n\n &::before {\n background-color: $link;\n color: #FFF;\n }\n }\n }\n}\n\n\n/**\n * PROGRESS BREADCRUMBS\n *\n * the progress mixin provides a basic, pill-style progress nav bar like you\n * might find as part of an e-commerce or registration process.\n *\n * Emmet: nav.progress>ul>(li.complete*2>a)+(li.active>a)+(li*2>a)\n */\n@mixin progress() {\n ul {\n border: 1px solid $border;\n border-radius: 2px;\n display: block;\n width: 100%;\n }\n a {\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n &:hover {\n color: $link-hover;\n }\n }\n li:not(:last-child) a {\n border-right: 1px solid $border;\n }\n li.active {\n a {\n background-color: $link;\n color: #FFF;\n cursor: default;\n pointer-events: none;\n\n &:hover {\n background-color: $link-hover;\n color: #FFF;\n }\n }\n }\n li.disabled a {\n color: $border;\n cursor: default;\n pointer-events: none;\n }\n li:hover:not(.active,.disabled) a {\n color: $link-hover;\n }\n li:not(:last-child) a {\n border: 0;\n }\n li.complete a {\n background-color: #FFF;\n color: #ccc;\n &::before {\n background-color: #FFF;\n }\n &:hover {\n color: $link;\n }\n }\n @media only screen and (min-width: $medium) {\n ul {\n display: flex;\n }\n li {\n flex: 1 1 auto;\n position: relative;\n }\n li:last-child a {\n &::before {\n display: none;\n }\n }\n a {\n &::after,\n &::before {\n border: 0 solid transparent;\n border-bottom: 1.25rem solid rgba(0,0,0,0);\n border-left: 1rem solid #FFF; \n border-top: 1.25rem solid rgba(0,0,0,0);\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n }\n &::after {\n border-left-color: #FFF;\n }\n &::before {\n border-left-color: darken($border, 10%);\n margin-right: -1px;\n }\n }\n li.active {\n margin-left: -1rem;\n z-index: 2;\n &::before {\n border-bottom: 1.25rem solid $link;\n border-left: 1rem solid #FFF;\n border-top: 1.25rem solid $link;\n content: '';\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 2;\n }\n a {\n &::after,\n &::before {\n background-color: $link;\n border-bottom-color: #FFF;\n border-left-color: $link;\n border-top-color: #FFF;\n }\n &::before {\n margin-right: 0;\n }\n }\n a:hover {\n &::after,\n &::before {\n background-color: $link-hover;\n }\n }\n }\n }\n}\n\n\n/**\n * STICKY HEADER\n *\n * The STICKY-HEADER mixin works with js (sticky-header.plugin.js) to hide the\n * header as you scroll down, and show it as you scroll back up. This is\n * responsive as the \"top\" value is dynamically set in the\n * js based on the height of the header. Top padding is also added\n * to the body dynamically via js so that the header doesn't overlap any\n * content.\n *\n * Emmet: header.primary\n *\n **/\n@mixin sticky-header() {\n position: fixed;\n top: 0;\n transition: top 0.16s cubic-bezier(0, .40, .70, 1);\n width: 100%;\n z-index: 100;\n}\n\n\n/**\n * TABS\n *\n * Emmet: nav.tabs>ul>li*3>a\n */\n@mixin tabs {\n a {\n border-radius: 4px 4px 0 0;\n border: 1px solid $border;\n border-color: transparent transparent $border;\n }\n\n li.active {\n a {\n border-color: $border $border transparent;\n }\n }\n\n li:hover:not(.active) {\n a {\n background: $border;\n }\n }\n}\n\n\n/**\n* TESTIMONIAL\n*\n* The TESTIMONIAL mixin is a basic implementation of a testimonial design.\n* Emmet: div.testimonial>div.container>blockquote+p\n* To use the TESTIMONIAL WITH ASSET component, you simply need to add additional html markup, see emmet below.\n* Emmet: div.testimonial.asset>div.container>(div>img)+blockquote+p\n*/\n\n@mixin testimonial($gutterWidth: 4rem) {\n background-color: $charcoal;\n margin-bottom: 4rem;\n padding: 4rem 0 4rem;\n text-align: center;\n .asset {\n margin-bottom: 2rem;\n img {\n max-width: 280px;\n }\n }\n blockquote {\n border: none;\n color: #fff;\n font-size: 1.125rem;\n margin-bottom: 1rem;\n padding: 0 2.5rem;\n position: relative;\n &::before,\n &::after {\n color: $meta-text;\n font-family: Georgia, serif;\n font-size: 3.375rem;\n position: absolute;\n }\n &::before {\n content: \"“\";\n left: 0;\n line-height: 1;\n top: 0;\n }\n &::after {\n content: \"”\";\n line-height: 0;\n right: 0;\n bottom: 0;\n }\n ~ p {\n color: $meta-text;\n font-size: 0.875rem;\n margin-bottom: 0;\n padding: 0 2.5rem;\n }\n }\n @media only screen and (min-width: $large) {\n text-align: left;\n .container > div {\n display: flex;\n justify-content: space-between;\n }\n .asset {\n flex-basis: 33%;\n flex-shrink: 0;\n margin-bottom: 0;\n margin-right: $gutterWidth;\n img {\n max-width: 100%;\n }\n }\n blockquote {\n font-size: 1.5rem;\n padding: 0 6rem;\n &::before,\n &::after {\n font-size: 7rem;\n }\n ~ p {\n font-size: 1rem;\n padding: 0 6rem;\n }\n }\n }\n}\n\n\n/**\n * TILES\n *\n * Tiles helps you create an equal-width column grid layout without the use of row wrappers.\n * Tiles is similar to the Features component, expect that Tiles’s items can wrap.\n * Powered by flexbox, you can pass in a $gutter width and $column amount. Note that the\n * specified $column amount only is respected at the large breakpoint. Tiles will automatically\n * two-up your items at the medium breakpoint, and stack them at the small breakpoint.\n *\n *\n * Emmet: .tiles>.tiles\n *\n **/\n\n@mixin tiles($gutter: 2rem, $columns: 4) {\n > * {\n background-color: #EEE;\n margin-bottom: $gutter;\n padding: 2rem;\n text-align: left;\n *:last-child {\n margin-bottom: 0;\n }\n }\n @media only screen and (min-width: $medium) {\n display: flex;\n flex-flow: row wrap;\n margin-left: -$gutter / 2;\n margin-right: -$gutter / 2;\n > * {\n flex-basis: calc(50% - #{$gutter});\n flex-shrink: 0;\n margin-left: $gutter / 2;\n margin-right: $gutter / 2;\n }\n }\n @media only screen and (min-width: $large) {\n > * {\n flex-basis: calc((100% / #{$columns}) - (#{$gutter}));\n }\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["styles.css","styles.scss","_components.scss"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":["@charset \"UTF-8\";\n/**\n * Built using Imarc Boilerplate v2.1\n *\n * Copyright 2016 Imarc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * = Table of Contents =\n * Variables\n * Mixins\n * Components\n * Base\n * Layout\n * Typography\n * Forms\n * Iconography\n * Messaging\n * Tables\n * Section Specific\n * Page Specific\n * Media Queries\n * Print Styles\n */\n/**\n * _components.scss contains solely the mixin definitions for components.\n *\n * + This file should not depend on styles.scss; we should be able to use\n * include this file without including styles.scss.\n * + This file should not generate any CSS on it's own; it should only contain\n * mixin and/or function definitions.\n */\n/**\n * Media query breakpoints\n */\n/**\n* ACCORDION\n*\n* ACCORDION requires the accordion.plugin.js file. Within the .accordion\n* class each accordion item requires a div wrapper. Within the div wrapper\n* there is a .header class and a .content class. The .header class is the\n* clickable element that will reveal what is hidden in the .content class.\n* By default .content is hidden by javascript just in case javascript is not available.\n*\n* Emmet: .accordion>div>(.header{header}+.content>{lorem ipsum})\n*\n*/\n/**\n * BACKGROUND VIDEO\n *\n * BACKGROUND VIDEO plays a video (without sound) in the background of an element.\n * Emmet: .backgroundvideo>(.panel>div>h1+p)+video>source[src]\n */\n/**\n/**\n * BREADCRUMBS\n *\n * The breadcrumb mixin provides basic breadcrumb styling, complete with\n * fontawesome icons being used as separators between crumbs.\n *\n * Emmet: nav.breadcrumbs>ul>li*3>a\n */\n/**\n * CAROUSEL\n *\n * CAROUSEL uses Slick to create a carousel. It defaults to a rather\n * basic, one-slide-at-a-time implementation with dots, but slick supports a\n * good deal of configuration including showing multiple slides, breakpoints,\n * syncing between slides, and plenty of javascript events and methods for\n * integration.\n *\n * The implementation on Boilerplate is using a CDN to provide\n *\n * + slick.css\n * + slick-theme.css\n * + slick.min.js\n *\n * See http://kenwheeler.github.io/slick/ for more information.\n *\n * The carousel() mixin should be included on a parent element that contains\n * one div per slide. No additional classes are necessary – the slick classes\n * referenced are added dynamically by slick.\n *\n *
    \n *
    \n *

    A slide!

    \n *

    Some text.

    \n *
    \n *
    \n *\n * Emmet: .carousel>div*3>h2+p\n *\n * While there's more information in slick's documentation, .slick-slide wraps\n * slides while .slick-next and .slick-prev are used for the next/previous\n * arrows.\n */\n/**\n * COLUMNS\n *\n * The COLUMNS mixin makes it so that immmediate child elements appear as\n * columns. It is responsive, allowing you to specify the media query at which\n * to switch the layout from stacking to columns.\n *\n * Additionally, it assumes the use of
    elements to create visual gutters\n * that are only visible while displayed as columns.\n *\n *
    \n *
    \n *

    A column

    \n *
    \n *
    \n *
    \n *

    Another column

    \n *
    \n *
    \n *\n * Emmet: .columns>div+(hr+div)*2\n */\n/**\n * DOSSIER\n *\n * The DOSSIER mixin displays an individual’s biography and photograph.\n *\n * Emmet: .dossiers>div>(.photo>img^.bio>h2{Lorem Ipsum}+p.title{Vice President}+p{Lorem20})\n */\n/**\n * DROPDOWN\n *\n * The DROPDOWN mixin allows for dropdown menus. By default, a single\n * column dropdown is used. It is positioned to its parent.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu>ul>li>(a{link name})*3\n */\n/**\n * DROPDOWN (mega)\n * The DROPDOWN (mega) mixin allows for full-width mega dropdown\n * menus. Call this mixin on a list item. Note that the simple\n * dropdown component is a dependency of this mega dropdown.\n * The mega dropdown is positioned to header.primary instead\n * of its parent list item.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu(div*3)\n */\n/**\n * FEATURES house three features in one row. Powered by flexbox,\n * this allows for a bottom alignment of each feature’s anchor. Use the\n * $gutter variable to pass you preferred gutter width.\n *\n * Emmet: .features>(div>(.icon>img)+h4+p+a)*3\n */\n/**\n * LISTING shows a listing of entries. It includes an optional search form with filters. \n * Remove the search form elements for a simple list.\n *\n * Emmet: .listing>(form>.search>(.text>label+input^.submit>label+input[type=\"submit\"]))+p.guide{Showing 10 of 20}+ul>li>a>h2{Listing headline}\n */\n/**\n * The LOGIN mixin is a basic implementation of a login module that includes a\n * username input, password input, submit button, forgot password link, and\n * remember me checkbox\n *\n * Emmet: .login>form>(div.text>label{Username}+input)+(div.password>label{Password}+input[type=\"password\"])+div.actions>(.submit>button{Login})+(label>input[type=\"hidden\"]+input[type=\"checkbox\"])+a{Forgot Your Password?}\n */\n/**\n * MOBILE NAVIGATION\n *\n * Emmet\n */\n/**\n * PAGINATION\n *\n * Emmet: nav.pagination>ul>(li.previous>a{Previous})+(li*2>a)+(li.active>a)+(li*2>a)+li.next>a{Next}\n */\n/**\n * PROGRESS BREADCRUMBS\n *\n * the progress mixin provides a basic, pill-style progress nav bar like you\n * might find as part of an e-commerce or registration process.\n *\n * Emmet: nav.progress>ul>(li.complete*2>a)+(li.active>a)+(li*2>a)\n */\n/**\n * STICKY HEADER\n *\n * The STICKY-HEADER mixin works with js (sticky-header.plugin.js) to hide the\n * header as you scroll down, and show it as you scroll back up. This is\n * responsive as the \"top\" value is dynamically set in the\n * js based on the height of the header. Top padding is also added\n * to the body dynamically via js so that the header doesn't overlap any\n * content.\n *\n * Emmet: header.primary\n *\n **/\n/**\n * TABS\n *\n * Emmet: nav.tabs>ul>li*3>a\n */\n/**\n* TESTIMONIAL\n*\n* The TESTIMONIAL mixin is a basic implementation of a testimonial design.\n* Emmet: div.testimonial>div.container>blockquote+p\n* To use the TESTIMONIAL WITH ASSET component, you simply need to add additional html markup, see emmet below.\n* Emmet: div.testimonial.asset>div.container>(div>img)+blockquote+p\n*/\n/**\n * TILES\n *\n * Tiles helps you create an equal-width column grid layout without the use of row wrappers.\n * Tiles is similar to the Features component, expect that Tiles’s items can wrap.\n * Powered by flexbox, you can pass in a $gutter width and $column amount. Note that the\n * specified $column amount only is respected at the large breakpoint. Tiles will automatically\n * two-up your items at the medium breakpoint, and stack them at the small breakpoint.\n *\n *\n * Emmet: .tiles>.tiles\n *\n **/\n/* = Variables = */\n/* Grays */\n/* The brand colors (name them the color) */\n/* Messaging colors */\n/* Applied colors */\n/* Social Network Colors */\n/* Breakpoint values */\n/* = Mixins = */\n/* = Components = */\n.accordion > div .header {\n background: #DDD;\n color: #191919;\n cursor: pointer;\n font-size: 1em;\n margin-top: .5em;\n padding: .5em 1em;\n position: relative;\n text-align: left;\n width: 100%;\n}\n\n.accordion > div .header:hover {\n background: #d0d0d0;\n}\n\n.accordion > div .header::after {\n bottom: 0;\n height: 1em;\n margin: auto 0;\n position: absolute;\n right: 1em;\n top: 0;\n width: 1em;\n}\n\n.accordion > div .header.open {\n background: #d0d0d0;\n}\n\n.accordion > div .header.open::after {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\n.accordion > div .header.close::after {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\n.accordion > div .content {\n padding: 1em 0;\n}\n\n.accordion > div .content.hidden {\n display: none;\n}\n\n.backgroundvideo {\n align-items: center;\n display: flex;\n height: auto;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n\n.backgroundvideo .mold {\n background-color: rgba(255, 255, 255, 0.6);\n padding: 2em;\n text-align: center;\n z-index: 2;\n}\n\n.backgroundvideo video {\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n}\n\n.backgroundvideo::before {\n content: \"\";\n display: block;\n padding-top: 30%;\n}\n\n.carousel .slick-slide {\n color: #FFF;\n height: auto;\n padding: 3rem;\n}\n\n.carousel .slick-prev,\n.carousel .slick-next {\n z-index: 1;\n}\n\n.carousel .slick-prev {\n left: 2rem;\n}\n\n.carousel .slick-next {\n right: 2rem;\n}\n\n.dossier > * {\n text-align: center;\n}\n\n.dossier > * .photo {\n margin-bottom: 2rem;\n}\n\n@media only screen and (min-width: 669px) {\n .dossier > * {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n margin-bottom: 4rem;\n text-align: left;\n }\n .dossier > * .photo {\n flex: 0 0 25%;\n margin-bottom: 0;\n margin-right: 2rem;\n }\n .dossier > * .bio .title {\n color: #727272;\n text-transform: uppercase;\n }\n}\n\n.header-content > .dropdown,\n.mobile {\n background-color: #191919;\n bottom: 0;\n display: none;\n height: 100%;\n opacity: 0;\n overflow-y: auto;\n padding: 1rem;\n position: fixed;\n top: 0;\n transition: transform .25s;\n width: 80%;\n z-index: 1000;\n}\n\n.header-content > .dropdown.left,\n.mobile.left {\n display: block;\n left: 0;\n right: auto;\n transform: translateX(-100%);\n}\n\n.header-content > .dropdown.right,\n.mobile.right {\n display: block;\n left: auto;\n right: 0;\n transform: translateX(100%);\n}\n\n.header-content > .dropdown.left.open, .header-content > .dropdown.right.open,\n.mobile.left.open,\n.mobile.right.open {\n transform: translateX(0);\n transition: transform .25s;\n}\n\n.header-content > .dropdown.init,\n.mobile.init {\n display: block;\n opacity: 1;\n}\n\n.header-content > .dropdown nav.utility ul li a,\n.mobile nav.utility ul li a {\n padding: 0.75rem 0;\n}\n\n.header-content > .dropdown ul,\n.mobile ul {\n display: block;\n padding-left: 0;\n}\n\n.header-content > .dropdown ul li,\n.mobile ul li {\n align-items: center;\n border-bottom: 1px solid #333333;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n margin-bottom: 0;\n text-align: left;\n}\n\n.header-content > .dropdown ul li a,\n.mobile ul li a {\n color: #fff;\n display: block;\n padding: 1rem 0;\n}\n\n.header-content > .dropdown ul li i.fa,\n.mobile ul li i.fa {\n display: inline-block;\n}\n\n@media only screen and (min-width: 1024px) {\n .header-content > .dropdown.open.left,\n .mobile.open.left {\n transform: translateX(-100%);\n }\n .header-content > .dropdown.open.right,\n .mobile.open.right {\n transform: translateX(100%);\n }\n}\n\n.features > * {\n background-color: #EEE;\n margin-bottom: 2rem;\n margin-left: auto;\n margin-right: auto;\n padding: 2rem;\n text-align: center;\n}\n\n.features > * img,\n.features > * h3,\n.features > * p {\n margin-bottom: 1rem;\n}\n\n.features > * .button {\n margin-bottom: 0;\n}\n\n@media only screen and (min-width: 1024px) {\n .features {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n }\n .features > * {\n display: flex;\n flex: 1 0 0;\n flex-direction: column;\n margin-left: 3rem;\n margin-right: 0;\n }\n .features > * .button {\n align-self: center;\n margin-top: auto;\n }\n .features > *:first-child {\n margin-left: 0;\n }\n}\n\nheader.primary.sticky {\n position: fixed;\n top: 0;\n transition: top 0.16s cubic-bezier(0, 0.4, 0.7, 1);\n width: 100%;\n z-index: 100;\n}\n\n.listing {\n margin-bottom: 2rem;\n}\n\n.listing form .search {\n display: flex;\n}\n\n.listing form .search label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.listing form .search .text {\n flex-grow: 1;\n}\n\n.listing form .search .submit {\n flex-basis: 120px;\n flex-shrink: 0;\n}\n\n.listing form .search .submit input {\n height: 100%;\n width: 100%;\n}\n\n.listing form .filters {\n margin-bottom: 2rem;\n}\n\n.listing form .filters label {\n display: inline;\n}\n\n.listing form .filters span {\n background-color: #07547c;\n border-radius: 0.5rem;\n color: #fff;\n display: inline-block;\n margin: 0 0.5rem 0.5rem 0;\n padding: 0.5rem 1rem;\n}\n\n.listing form .filters input[type=\"checkbox\"]:checked + span {\n background-color: #0C96DD;\n}\n\n.listing form .filters input[type=\"checkbox\"] {\n display: none;\n}\n\n.listing ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.listing ul li {\n border-top: 4px solid #e5e5e5;\n margin-bottom: 0;\n padding: 2rem 0;\n}\n\n.listing ul li .meta {\n display: block;\n font-size: 0.9rem;\n margin-bottom: 1em;\n}\n\n.listing ul li h2 + .meta {\n margin-top: -1em;\n}\n\n.listing ul li .summary p:last-of-type {\n margin-bottom: 0;\n}\n\n.login {\n background: #EEE;\n margin-left: auto;\n margin-right: auto;\n max-width: 600px;\n padding: 3rem;\n}\n\n.login input:focus {\n box-shadow: 0 0 5px rgba(114, 164, 0, 0.7);\n}\n\n.login .submit {\n text-align: center;\n}\n\n.login .actions {\n text-align: center;\n}\n\n@media only screen and (min-width: 669px) {\n .login .actions {\n align-items: center;\n display: flex;\n justify-content: space-between;\n flex-flow: row wrap;\n }\n .login .actions > * {\n margin: 0;\n padding: 0;\n }\n .login .actions label {\n margin-left: 1em;\n }\n .login .actions a {\n display: block;\n margin-left: auto;\n text-align: right;\n }\n}\n\nnav.pagination {\n display: flex;\n justify-content: center;\n}\n\nnav.pagination ul {\n border: 1px solid #e5e5e5;\n border-radius: 2px;\n display: flex;\n justify-content: center;\n}\n\nnav.pagination li {\n margin-bottom: 0;\n}\n\nnav.pagination a {\n color: #0C96DD;\n padding: 0.5rem 1rem;\n position: relative;\n}\n\nnav.pagination li:not(:last-child) a {\n border-right: 1px solid #e5e5e5;\n}\n\nnav.pagination li.active a {\n background-color: #0C96DD;\n color: #fff;\n cursor: default;\n pointer-events: none;\n}\n\nnav.pagination li.active a::before, nav.pagination li.active a::after {\n background-color: #0C96DD;\n}\n\nnav.pagination li.active a:hover {\n color: #fff;\n background-color: #EB7424;\n}\n\nnav.pagination li.active a:hover::before, nav.pagination li.active a:hover::after {\n background-color: #EB7424;\n}\n\nnav.pagination li.disabled a {\n color: #e5e5e5;\n cursor: default;\n pointer-events: none;\n}\n\nnav.pagination li.previous a::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\nnav.pagination li.next a::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n}\n\nnav.pagination li:hover:not(.active):not(.disabled) a {\n background-color: #0C96DD;\n color: #FFF;\n}\n\nnav.pagination li:hover:not(.active):not(.disabled) a::before {\n background-color: #0C96DD;\n color: #FFF;\n}\n\n@media only screen and (max-width: 1023px) {\n .desktop nav.primary .dropdown,\n .desktop nav.primary i.fa {\n display: none;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .desktop nav.primary i.fa {\n display: inline-block;\n }\n .desktop nav.primary .dropdown {\n background-color: #2A2A2A;\n color: #FFF;\n display: block;\n font-size: 1rem;\n min-width: 260px;\n opacity: 0;\n padding: 2rem 0;\n position: absolute;\n top: 100%;\n transition: opacity 300ms;\n visibility: hidden;\n z-index: 1;\n }\n .desktop nav.primary .dropdown ul {\n display: block;\n }\n .desktop nav.primary .dropdown .menu > * {\n padding: 0 1rem;\n }\n .desktop nav.primary .dropdown .menu li {\n margin-bottom: 0.4em;\n }\n .desktop nav.primary .dropdown .menu a {\n color: #0C96DD;\n }\n .desktop nav.primary .dropdown .menu a:hover,\n .desktop nav.primary .dropdown .menu a:focus {\n color: #0975ad;\n }\n .desktop nav.primary .dropdown.open {\n opacity: 1;\n visibility: visible;\n }\n}\n\n.desktop nav.primary li.mega {\n position: static;\n}\n\n@media only screen and (min-width: 1024px) {\n .desktop nav.primary li.mega .dropdown {\n left: 0;\n top: 100%;\n width: 100%;\n }\n .desktop nav.primary li.mega .dropdown .menu {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n margin-left: auto;\n margin-right: auto;\n max-width: 1168px;\n }\n .desktop nav.primary li.mega .dropdown .menu > * {\n border-left: 1px solid #777;\n flex-basis: 0;\n flex-grow: 1;\n padding: 0 3rem;\n }\n .desktop nav.primary li.mega .dropdown .menu > *:first-child {\n border-left: none;\n padding-left: 0;\n }\n .desktop nav.primary li.mega .dropdown .menu > *:last-child {\n padding-right: 0;\n }\n}\n\n.tabs a {\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e5e5;\n border-color: transparent transparent #e5e5e5;\n}\n\n.tabs li.active a {\n border-color: #e5e5e5 #e5e5e5 transparent;\n}\n\n.tabs li:hover:not(.active) a {\n background: #e5e5e5;\n}\n\n.testimonial {\n background-color: #191919;\n margin-bottom: 4rem;\n padding: 4rem 0 4rem;\n text-align: center;\n}\n\n.testimonial .asset {\n margin-bottom: 2rem;\n}\n\n.testimonial .asset img {\n max-width: 280px;\n}\n\n.testimonial blockquote {\n border: none;\n color: #fff;\n font-size: 1.125rem;\n margin-bottom: 1rem;\n padding: 0 2.5rem;\n position: relative;\n}\n\n.testimonial blockquote::before, .testimonial blockquote::after {\n color: #727272;\n font-family: Georgia, serif;\n font-size: 3.375rem;\n position: absolute;\n}\n\n.testimonial blockquote::before {\n content: \"“\";\n left: 0;\n line-height: 1;\n top: 0;\n}\n\n.testimonial blockquote::after {\n content: \"”\";\n line-height: 0;\n right: 0;\n bottom: 0;\n}\n\n.testimonial blockquote ~ p {\n color: #727272;\n font-size: 0.875rem;\n margin-bottom: 0;\n padding: 0 2.5rem;\n}\n\n@media only screen and (min-width: 1024px) {\n .testimonial {\n text-align: left;\n }\n .testimonial .container > div {\n display: flex;\n justify-content: space-between;\n }\n .testimonial .asset {\n flex-basis: 33%;\n flex-shrink: 0;\n margin-bottom: 0;\n margin-right: 4rem;\n }\n .testimonial .asset img {\n max-width: 100%;\n }\n .testimonial blockquote {\n font-size: 1.5rem;\n padding: 0 6rem;\n }\n .testimonial blockquote::before, .testimonial blockquote::after {\n font-size: 7rem;\n }\n .testimonial blockquote ~ p {\n font-size: 1rem;\n padding: 0 6rem;\n }\n}\n\n.tiles > * {\n background-color: #EEE;\n margin-bottom: 2rem;\n padding: 2rem;\n text-align: left;\n}\n\n.tiles > * *:last-child {\n margin-bottom: 0;\n}\n\n@media only screen and (min-width: 669px) {\n .tiles {\n display: flex;\n flex-flow: row wrap;\n margin-left: -1rem;\n margin-right: -1rem;\n }\n .tiles > * {\n flex-basis: calc(50% - 2rem);\n flex-shrink: 0;\n margin-left: 1rem;\n margin-right: 1rem;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .tiles > * {\n flex-basis: calc((100% / 4) - (2rem));\n }\n}\n\n/* = Base = */\na, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, datalist, dd, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, hr, i, iframe, img, input, label, legend, li, main, meter, nav, object, ol, option, p, pre, progress, q, section, select, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, u, ul, video {\n border: 0;\n box-sizing: border-box;\n font: inherit;\n font-size: 100%;\n margin: 0;\n outline: 0;\n padding: 0;\n vertical-align: baseline;\n}\n\narticle, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {\n display: block;\n}\n\nhtml {\n background-color: #FFF;\n color: #191919;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n font-size: 16px;\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n}\n\nbody {\n min-width: 300px;\n}\n\nimg {\n max-width: 100%;\n vertical-align: middle;\n}\n\n::selection {\n background: #e5e5e5;\n}\n\n::-moz-selection {\n background: #e5e5e5;\n}\n\n/* = Layout = */\n.group::before, .group::after {\n content: \"\";\n display: table;\n}\n\n.group::after {\n clear: both;\n}\n\n.container {\n margin-left: auto;\n margin-right: auto;\n max-width: 1200px;\n padding-left: 1rem;\n padding-right: 1rem;\n position: relative;\n}\n\n.columns > hr {\n border: 0;\n display: none;\n}\n\n@media only screen and (min-width: 669px) {\n .columns {\n display: table;\n table-layout: fixed;\n width: 100%;\n }\n .columns > * {\n display: table-cell;\n vertical-align: top;\n }\n .columns > hr {\n display: table-cell;\n width: 1rem;\n }\n}\n\n.sr-only {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.search-drawer {\n background-color: #4A4A4A;\n}\n\n.search-drawer > div {\n max-height: 0;\n overflow: hidden;\n transition: max-height 150ms ease;\n}\n\n.search-drawer > div.open {\n max-height: 80px;\n}\n\n.search-drawer form {\n display: flex;\n padding: 1rem 0;\n}\n\n.search-drawer form > * {\n margin-bottom: 0;\n}\n\n.search-drawer form .text {\n flex: 1 1 auto;\n}\n\n.search-drawer form .submit input {\n height: 100%;\n}\n\n.branding img {\n max-width: 180px;\n}\n\nheader.primary {\n background-color: #191919;\n padding: 1rem 0;\n position: relative;\n}\n\nheader.primary .container {\n position: static;\n}\n\nheader.primary .branding {\n flex-basis: 180px;\n flex-shrink: 0;\n}\n\nnav {\n margin-bottom: 2rem;\n}\n\nnav ul {\n list-style: none;\n margin: 0;\n padding-left: 0;\n display: flex;\n}\n\nnav ul li::before {\n display: none;\n}\n\nnav ul li {\n margin-bottom: 0;\n}\n\nnav a {\n color: #0C96DD;\n display: block;\n padding: 0 0.5rem;\n}\n\nnav li.active a,\nnav li.active:hover a {\n color: #191919;\n}\n\nnav.tabs a {\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e5e5;\n border-color: transparent transparent #e5e5e5;\n}\n\nnav.tabs li.active a {\n border-color: #e5e5e5 #e5e5e5 transparent;\n}\n\nnav.tabs li:hover:not(.active) a {\n background: #e5e5e5;\n}\n\nnav.breadcrumbs li:not(:last-child) a {\n padding-right: 0;\n}\n\nnav.breadcrumbs li:not(:last-child) a::after {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n padding-left: 0.5rem;\n}\n\nnav.progress ul {\n border: 1px solid #e5e5e5;\n border-radius: 2px;\n display: block;\n width: 100%;\n}\n\nnav.progress a {\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n}\n\nnav.progress a:hover {\n color: #EB7424;\n}\n\nnav.progress li:not(:last-child) a {\n border-right: 1px solid #e5e5e5;\n}\n\nnav.progress li.active a {\n background-color: #0C96DD;\n color: #FFF;\n cursor: default;\n pointer-events: none;\n}\n\nnav.progress li.active a:hover {\n background-color: #EB7424;\n color: #FFF;\n}\n\nnav.progress li.disabled a {\n color: #e5e5e5;\n cursor: default;\n pointer-events: none;\n}\n\nnav.progress li:hover:not(.active, .disabled) a {\n color: #EB7424;\n}\n\nnav.progress li:not(:last-child) a {\n border: 0;\n}\n\nnav.progress li.complete a {\n background-color: #FFF;\n color: #ccc;\n}\n\nnav.progress li.complete a::before {\n background-color: #FFF;\n}\n\nnav.progress li.complete a:hover {\n color: #0C96DD;\n}\n\n@media only screen and (min-width: 669px) {\n nav.progress ul {\n display: flex;\n }\n nav.progress li {\n flex: 1 1 auto;\n position: relative;\n }\n nav.progress li:last-child a::before {\n display: none;\n }\n nav.progress a::after, nav.progress a::before {\n border: 0 solid transparent;\n border-bottom: 1.25rem solid transparent;\n border-left: 1rem solid #FFF;\n border-top: 1.25rem solid transparent;\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n }\n nav.progress a::after {\n border-left-color: #FFF;\n }\n nav.progress a::before {\n border-left-color: #cccccc;\n margin-right: -1px;\n }\n nav.progress li.active {\n margin-left: -1rem;\n z-index: 2;\n }\n nav.progress li.active::before {\n border-bottom: 1.25rem solid #0C96DD;\n border-left: 1rem solid #FFF;\n border-top: 1.25rem solid #0C96DD;\n content: '';\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 2;\n }\n nav.progress li.active a::after, nav.progress li.active a::before {\n background-color: #0C96DD;\n border-bottom-color: #FFF;\n border-left-color: #0C96DD;\n border-top-color: #FFF;\n }\n nav.progress li.active a::before {\n margin-right: 0;\n }\n nav.progress li.active a:hover::after, nav.progress li.active a:hover::before {\n background-color: #EB7424;\n }\n}\n\nnav.primary {\n margin-bottom: 0.7rem;\n}\n\nnav.primary a {\n color: #FFF;\n}\n\nnav.primary li:hover a {\n color: #0C96DD;\n}\n\nnav.primary > ul li {\n margin-bottom: 0;\n}\n\nnav.primary li a {\n color: #FFF;\n}\n\nnav.primary li.active a,\nnav.primary li:hover a {\n color: #a5a5a5;\n}\n\nnav.utility {\n margin-bottom: 0.7rem;\n}\n\nnav.utility a {\n color: #FFF;\n font-size: 0.8rem;\n}\n\n.header-content {\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n}\n\n.header-content .menu-toggle:hover,\n.header-content .menu-toggle:focus {\n background-color: #0C96DD;\n}\n\n.header-content > .dropdown {\n background-color: #262626;\n z-index: 1001;\n}\n\n.header-content > .dropdown.sub-menu {\n background-color: #333333;\n z-index: 1002;\n}\n\n.desktop {\n display: none;\n}\n\nform.search {\n display: flex;\n}\n\nform.search .text,\nform.search .submit {\n margin-bottom: 0;\n}\n\nform.search .text {\n width: 100%;\n}\n\nform.search label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\nform.search .submit {\n flex-basis: 33%;\n flex-shrink: 0;\n}\n\nform.search input {\n border: none;\n width: 100%;\n}\n\n.torso {\n padding-bottom: 3rem;\n padding-top: 3rem;\n}\n\n.hero {\n background: #191919 url(../img/hero.jpg) no-repeat center top/cover;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n height: 240px;\n -webkit-justify-content: center;\n justify-content: center;\n text-align: center;\n}\n\n.hero .copy {\n margin-left: auto;\n margin-right: auto;\n max-width: 1200px;\n padding-left: 1rem;\n padding-right: 1rem;\n position: relative;\n}\n\n.hero .copy * {\n color: #FFF;\n}\n\nmain section:not(:last-child) {\n border-bottom: 1px solid #e5e5e5;\n margin-bottom: 3rem;\n padding-bottom: 2rem;\n}\n\naside.primary {\n margin-bottom: 2rem;\n}\n\nnav.supplemental {\n margin-bottom: 0;\n}\n\nnav.supplemental ul {\n display: block;\n}\n\nnav.supplemental ul li {\n display: block;\n float: none;\n margin-bottom: 0;\n}\n\nnav.supplemental ul li a {\n color: #0C96DD;\n display: block;\n padding: 0.25em 0;\n}\n\nnav.supplemental ul li a:hover {\n color: #191919;\n}\n\nnav.supplemental ul ul a {\n color: #727272;\n font-size: 0.8rem;\n line-height: 2;\n padding: 0;\n}\n\nnav.supplemental > ul > li {\n padding-bottom: 0.5em;\n}\n\nnav.supplemental > ul > li ~ li {\n border-top: 1px solid #e5e5e5;\n padding-top: 0.5em;\n}\n\nfooter.primary {\n background-color: #191919;\n color: #FFF;\n font-size: 0.9rem;\n padding: 3rem 0;\n text-align: center;\n}\n\nfooter.primary .branding {\n margin-top: 0;\n}\n\nfooter.primary .branding a {\n margin-bottom: 1rem;\n}\n\nfooter.primary a {\n color: #0C96DD;\n display: inline-block;\n}\n\nfooter.primary a:hover {\n color: #0975ad;\n}\n\nfooter.primary nav ul {\n justify-content: center;\n margin-bottom: 2rem;\n text-align: center;\n}\n\nfooter.primary .social a {\n color: #FFF;\n}\n\nfooter.primary .legal {\n text-align: center;\n}\n\nfooter.primary .legal p {\n margin-bottom: 0.25rem;\n}\n\nfooter.primary .legal a {\n margin-left: 0.35rem;\n margin-right: 0.35rem;\n}\n\n.social {\n list-style: none;\n margin: 0;\n padding-left: 0;\n margin-bottom: 1rem;\n}\n\n.social li::before {\n display: none;\n}\n\n.social li {\n display: inline-block;\n font-size: 1.5rem;\n margin-bottom: 0;\n margin-right: 0.4rem;\n}\n\n.social .facebook a {\n color: #3664A2;\n}\n\n.social .linkedin a {\n color: #0077B5;\n}\n\n.social .twitter a {\n color: #55ACEE;\n}\n\n.social a:hover {\n opacity: 0.7;\n}\n\n/* = Typography = */\nh1,\nh2,\nh3,\nh4,\nh5 {\n line-height: 1.2;\n margin-bottom: 0.6em;\n}\n\nh1 {\n font-size: 2.2rem;\n}\n\nh2 {\n font-size: 1.7rem;\n}\n\nh3 {\n font-size: 1.3rem;\n}\n\nh4 {\n font-size: 1.1rem;\n}\n\nh5 {\n font-size: 1rem;\n}\n\nstrong {\n font-weight: bold;\n}\n\nem {\n font-style: italic;\n}\n\nblockquote {\n border-left: 1px solid #e5e5e5;\n color: #727272;\n font-style: italic;\n margin-bottom: 1.5em;\n padding-left: 1rem;\n}\n\n.intro {\n color: #727272;\n}\n\n.intro p {\n font-size: 1.3rem;\n margin-bottom: 0.8em;\n}\n\n.guide {\n color: #727272;\n font-size: 1.25rem;\n}\n\n.meta {\n color: #727272;\n}\n\nhr {\n border: 0;\n border-top: 1px solid #727272;\n display: block;\n height: 0;\n margin: 2em auto 3em;\n width: 100%;\n}\n\na {\n color: #0C96DD;\n cursor: pointer;\n text-decoration: none;\n}\n\na:hover, a:active {\n color: #EB7424;\n}\n\na:focus {\n outline: thin dotted;\n}\n\na.disabled, a[disabled] {\n color: #cccccc;\n cursor: default;\n pointer-events: none;\n}\n\np,\nol,\nul,\ndl {\n margin-bottom: 2rem;\n}\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol li,\nol dt,\nol dd,\nul li,\nul dt,\nul dd {\n margin-bottom: 0.5em;\n}\n\nul {\n list-style: disc;\n}\n\ndt {\n font-weight: bold;\n padding-left: 0.5em;\n}\n\ndd {\n padding-left: 2em;\n}\n\npre {\n background-color: #4A4A4A;\n padding: 1em;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\ncode {\n color: #FBCE78;\n font-family: \"Consolas\", monospace;\n padding: 2px 4px;\n}\n\n.sr-only {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n/* = Forms = */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font: inherit;\n margin: 0;\n}\n\n.button,\n.checkboxes,\n.file,\n.password,\n.radios,\n.reset,\n.select,\n.submit,\n.text,\n.textarea {\n margin-bottom: 2rem;\n}\n\nlabel {\n cursor: pointer;\n display: block;\n font-weight: bold;\n margin-bottom: 0.5em;\n}\n\n.required {\n color: #CE2A2A;\n}\n\nfieldset .help {\n color: #727272;\n display: block;\n font-size: 0.8rem;\n margin: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"email\"],\ninput[type=\"month\"],\ninput[type=\"number\"],\ninput[type=\"password\"],\ninput[type=\"search\"],\ninput[type=\"tel\"],\ninput[type=\"text\"],\ninput[type=\"time\"],\ninput[type=\"url\"],\ninput[type=\"week\"],\ntextarea {\n border: 1px solid #e5e5e5;\n border-radius: 0;\n box-sizing: border-box;\n color: #191919;\n display: block;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n margin: 0;\n padding: 0.4em 0.6em;\n width: 100%;\n}\n\ninput[type=\"reset\"],\ninput[type=\"search\"],\ninput[type=\"text\"],\ninput[type=\"submit\"] {\n border-radius: 0;\n -webkit-appearance: none;\n}\n\n::-webkit-input-placeholder {\n color: #4A4A4A;\n}\n\n::ms-input-placeholder {\n color: #4A4A4A;\n}\n\n::-moz-placeholder {\n color: #4A4A4A;\n}\n\n::-placeholder {\n color: #4A4A4A;\n}\n\n.multiple select {\n padding-left: 5px;\n padding-right: 10px;\n}\n\ntextarea {\n height: 8em;\n overflow: auto;\n resize: vertical;\n}\n\n.radio,\n.checkbox {\n font-weight: normal;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n padding: 0;\n}\n\na.button {\n background-color: #0C96DD;\n color: #FFF;\n display: inline-block;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n font-weight: bold;\n padding: 0.4em 1em;\n text-align: center;\n vertical-align: top;\n margin-bottom: 0;\n}\n\na.button:hover, a.button:focus {\n background-color: #EB7424;\n}\n\na.button.disabled, a.button[disabled] {\n background-color: #8c8c8c;\n color: #cccccc;\n pointer-events: none;\n}\n\nbutton,\ninput[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n background-color: #0C96DD;\n color: #FFF;\n display: inline-block;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n font-weight: bold;\n padding: 0.4em 1em;\n text-align: center;\n vertical-align: top;\n border: none;\n cursor: pointer;\n}\n\nbutton:hover, button:focus,\ninput[type=\"button\"]:hover,\ninput[type=\"button\"]:focus,\ninput[type=\"reset\"]:hover,\ninput[type=\"reset\"]:focus,\ninput[type=\"submit\"]:hover,\ninput[type=\"submit\"]:focus {\n background-color: #EB7424;\n}\n\nbutton.disabled, button[disabled],\ninput[type=\"button\"].disabled,\ninput[type=\"button\"][disabled],\ninput[type=\"reset\"].disabled,\ninput[type=\"reset\"][disabled],\ninput[type=\"submit\"].disabled,\ninput[type=\"submit\"][disabled] {\n background-color: #8c8c8c;\n color: #cccccc;\n pointer-events: none;\n}\n\n/* = Iconography = */\n.thumbs-up::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n content: \"\";\n margin-right: 0.5em;\n}\n\n/* = Messaging = */\n.success {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n background-color: #48AC2C;\n}\n\n.success p:last-of-type,\n.success ul:last-of-type {\n margin-bottom: 0;\n}\n\n.success a {\n text-decoration: underline;\n}\n\n.success::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n display: inline-block;\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n}\n\n.success::before {\n content: \"\\f00c\";\n}\n\n.success a {\n color: #FFF;\n}\n\n.success a:hover {\n color: #d9d9d9;\n}\n\n.info {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n background-color: #DDD;\n}\n\n.info p:last-of-type,\n.info ul:last-of-type {\n margin-bottom: 0;\n}\n\n.info a {\n text-decoration: underline;\n}\n\n.info::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n display: inline-block;\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n}\n\n.info::before {\n content: \"\\f129\";\n}\n\n.error {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n background-color: #CE2A2A;\n}\n\n.error p:last-of-type,\n.error ul:last-of-type {\n margin-bottom: 0;\n}\n\n.error a {\n text-decoration: underline;\n}\n\n.error::before {\n font: normal normal normal 1em / 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n display: inline-block;\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n}\n\n.error::before {\n content: \"\\f12a\";\n}\n\n.error a {\n color: #DDD;\n}\n\n.error a:hover {\n color: #b7b7b7;\n}\n\n/* = Tables = */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n margin-bottom: 2rem;\n width: 100%;\n}\n\ntable caption {\n font-size: 0.9rem;\n margin-bottom: 0.75em;\n}\n\ntable td,\ntable th {\n padding: 0.5em 1em;\n text-align: left;\n vertical-align: top;\n}\n\ntable th {\n background-color: #191919;\n color: #FFF;\n font-weight: bold;\n text-transform: uppercase;\n}\n\ntable td {\n border: 1px solid #e5e5e5;\n}\n\ntable tr:nth-child(even) td {\n background-color: #F3F3F3;\n}\n\n/* = Section Specific = */\n/* = Page Specific = */\n/* = Media Queries = */\n@media only screen and (min-width: 1024px) {\n /* = Layout = */\n header.primary {\n padding-bottom: 0;\n }\n header.primary .branding {\n margin-right: 2rem;\n }\n nav ul {\n text-align: left;\n }\n nav.primary {\n margin-bottom: 0;\n }\n nav.primary > ul > li {\n font-size: 1.1rem;\n margin-left: 1rem;\n padding-bottom: 1rem;\n position: relative;\n }\n nav.primary > ul > li:first-child {\n margin-left: 0;\n }\n nav.primary ul {\n text-align: left;\n }\n nav.primary ul li li {\n display: block;\n float: none;\n }\n .utilities nav.utility {\n margin-bottom: 0.4rem;\n }\n .utilities nav.utility ul {\n text-align: right;\n }\n .desktop {\n align-items: flex-end;\n display: flex;\n flex: 1 1 auto;\n flex-flow: column nowrap;\n justify-content: space-between;\n }\n .desktop nav.primary {\n align-self: flex-start;\n }\n button.menu-toggle {\n display: none;\n }\n .torso .wrap {\n display: flex;\n justify-content: space-between;\n }\n .torso .wrap main {\n flex: 1 1 auto;\n padding-right: 2rem;\n }\n .torso .wrap aside.primary {\n flex: 0 0 25%;\n }\n aside.primary {\n margin-bottom: 0;\n }\n aside.primary nav ul {\n text-align: left;\n }\n footer.primary .wrapper {\n display: flex;\n }\n footer.primary .wrapper > * {\n flex: 1 0 0;\n }\n footer.primary .wrapper > nav {\n flex-grow: 2;\n margin-bottom: 0;\n }\n footer.primary .wrapper > nav > ul {\n justify-content: center;\n }\n footer.primary .branding {\n margin-right: 0;\n max-width: none;\n text-align: left;\n }\n footer.primary .social {\n text-align: right;\n }\n /* = Typography = */\n h1 {\n font-size: 2.6rem;\n }\n h2 {\n font-size: 2.1rem;\n }\n h3 {\n font-size: 1.6rem;\n }\n h4 {\n font-size: 1.25rem;\n }\n h5 {\n font-size: 1.15rem;\n }\n}\n\n/* = Print Styles = */\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important;\n /* Black prints faster: h5bp.com/s */\n text-shadow: none !important;\n }\n a {\n text-decoration: underline;\n }\n pre,\n blockquote,\n tr,\n img,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n page-break-inside: avoid;\n }\n thead {\n display: table-header-group;\n }\n @page {\n margin: 0.5cm;\n }\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n}\n","/**\n * Built using Imarc Boilerplate v2.1\n *\n * Copyright 2016 Imarc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * = Table of Contents =\n * Variables\n * Mixins\n * Components\n * Base\n * Layout\n * Typography\n * Forms\n * Iconography\n * Messaging\n * Tables\n * Section Specific\n * Page Specific\n * Media Queries\n * Print Styles\n */\n\n@import \"_components\";\n\n\n/* = Variables = */\n\n$font-stack: \"Helvetica Neue\", Arial, sans-serif;\n\n/* Grays */\n$white: #FFF;\n$lightgray: #DDD;\n$gray: #808080;\n$darkgray: #4A4A4A;\n$charcoal: #191919;\n$black: #000;\n\n/* The brand colors (name them the color) */\n$brand-blue: #0C96DD;\n$brand-orange: #EB7424;\n\n/* Messaging colors */\n$success: #48AC2C;\n$error: #CE2A2A;\n$info: #DDD;\n\n/* Applied colors */\n$plain-text: $charcoal;\n$meta-text: lighten($charcoal, 35%);\n$link: $brand-blue;\n$link-hover: $brand-orange;\n$border: lighten($charcoal, 80%);\n\n/* Social Network Colors */\n$facebook: #3664A2;\n$twitter: #55ACEE;\n$linkedin: #0077B5;\n$youtube: #CD201F;\n\n/* Breakpoint values */\n$medium: 669px;\n$large: 1024px;\n\n\n\n/* = Mixins = */\n\n@mixin button {\n background-color: $link;\n color: #FFF;\n display: inline-block;\n font-family: $font-stack;\n font-weight: bold;\n padding: 0.4em 1em;\n text-align: center;\n vertical-align: top;\n\n &:hover,\n &:focus {\n background-color: $link-hover;\n }\n\n &.disabled,\n &[disabled] {\n background-color: lighten($charcoal, 45%);\n color: darken(#FFF, 20%);\n pointer-events: none;\n }\n}\n\n@mixin container {\n margin-left: auto;\n margin-right: auto;\n max-width: 1200px;\n padding-left: 1rem;\n padding-right: 1rem;\n position: relative;\n}\n\n@mixin grouping {\n &::before,\n &::after {\n content: \"\";\n display: table;\n }\n &::after {\n clear: both;\n }\n}\n\n@mixin fontawesome($character: \"\") {\n font: normal normal normal 1em unquote(\"/\") 1 FontAwesome;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n speak: none;\n text-rendering: auto;\n text-transform: none;\n\n @if $character != \"\" {\n content: $character;\n } @else {\n display: inline-block;\n }\n}\n\n@mixin messaging {\n margin-bottom: 2rem;\n padding: 1em 3em;\n position: relative;\n p:last-of-type,\n ul:last-of-type {\n margin-bottom: 0;\n }\n a {\n text-decoration: underline;\n }\n &::before {\n @include fontawesome;\n\n content: \"\";\n display: block;\n font-size: 20px;\n height: 23px;\n left: 1em;\n position: absolute;\n top: 1em;\n width: 23px;\n }\n}\n\n@mixin no-bullets {\n list-style: none;\n margin: 0;\n padding-left: 0;\n\n li::before {\n display: none;\n }\n}\n\n@mixin transition($properties: all, $duration: 250ms, $easing: ease-in-out) {\n @if length($properties) > 1 {\n -webkit-transition-property: $properties;\n transition-property: $properties;\n } @else {\n -webkit-transition: $properties $duration $easing;\n transition: $properties $duration $easing;\n }\n}\n\n@mixin visuallyhidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n\n/* = Components = */\n\n.accordion {\n @include accordion();\n}\n\n.backgroundvideo {\n @include backgroundvideo();\n}\n\n.carousel {\n @include carousel;\n}\n\n.dossier {\n @include dossier($gutter: 2rem, $photoWidth: 25%, $direction: row);\n}\n\n.header-content > .dropdown,\n.mobile {\n @include mobileNavigation;\n}\n\n.features {\n @include features($gutter: 3rem);\n}\n\nheader.primary.sticky {\n @include sticky-header();\n}\n\n.listing {\n @include listing();\n}\n\n.login {\n @include login;\n}\n\nnav.pagination {\n @include pagination();\n}\n\n.desktop nav.primary {\n @include dropdown();\n li.mega {\n @include dropdown-mega();\n }\n}\n\n.tabs {\n @include tabs();\n}\n\n.testimonial {\n @include testimonial;\n}\n\n.tiles {\n @include tiles();\n}\n\n\n/* = Base = */\n\na, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, datalist, dd, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, hr, i, iframe, img, input, label, legend, li, main, meter, nav, object, ol, option, p, pre, progress, q, section, select, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, u, ul, video {\n border: 0;\n box-sizing: border-box;\n font: inherit;\n font-size: 100%;\n margin: 0;\n outline: 0;\n padding: 0;\n vertical-align: baseline;\n}\n\narticle, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {\n display: block;\n}\n\nhtml {\n background-color: #FFF;\n color: $plain-text;\n font-family: $font-stack;\n font-size: 16px;\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n}\n\nbody {\n min-width: 300px;\n}\n\nimg {\n max-width: 100%;\n vertical-align: middle;\n}\n\n::selection {\n background: $border;\n}\n\n::-moz-selection {\n background: $border;\n}\n\n\n/* = Layout = */\n\n.group {\n @include grouping;\n}\n\n.container {\n @include container;\n}\n\n.columns {\n @include columns;\n}\n\n.sr-only {\n @include visuallyhidden;\n}\n\n.search-drawer {\n background-color: $darkgray;\n > div {\n max-height: 0;\n overflow: hidden;\n transition: max-height 150ms ease;\n &.open {\n max-height: 80px;\n }\n }\n form {\n display: flex;\n padding: 1rem 0;\n > * {\n margin-bottom: 0;\n }\n .text {\n flex: 1 1 auto;\n }\n .submit input {\n height: 100%;\n }\n }\n}\n\n.branding {\n img {\n max-width: 180px;\n }\n}\n\nheader.primary {\n background-color: $charcoal;\n padding: 1rem 0;\n position: relative;\n .container {\n position: static;\n }\n .branding {\n flex-basis: 180px;\n flex-shrink: 0;\n }\n}\n\nnav {\n margin-bottom: 2rem;\n ul {\n @include no-bullets;\n \n display: flex;\n li {\n margin-bottom: 0;\n }\n }\n a {\n color: $link;\n display: block;\n padding: 0 0.5rem;\n }\n\n li.active a,\n li.active:hover a {\n color: $charcoal;\n }\n\n &.tabs {\n @include tabs;\n }\n\n &.breadcrumbs {\n @include breadcrumbs();\n }\n\n &.progress {\n @include progress();\n }\n\n}\n\nnav.primary {\n margin-bottom: 0.7rem;\n\n a {\n color: #FFF;\n }\n\n li:hover a {\n color: $brand-blue;\n }\n\n > ul {\n li {\n margin-bottom: 0;\n }\n }\n li a {\n color: #FFF;\n }\n li.active,\n li:hover {\n a {\n color: lighten($charcoal, 55%);\n }\n }\n}\n\nnav.utility {\n margin-bottom: 0.7rem;\n a {\n color: #FFF;\n font-size: 0.8rem;\n }\n}\n\n.header-content {\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n .menu-toggle:hover,\n .menu-toggle:focus {\n background-color: $link;\n }\n > .dropdown {\n background-color: lighten($charcoal, 5%);\n z-index: 1001; \n &.sub-menu {\n background-color: lighten($charcoal, 10%);\n z-index: 1002;\n }\n }\n}\n\n.desktop {\n display: none;\n}\n\nform.search {\n display: flex;\n .text,\n .submit {\n margin-bottom: 0;\n }\n .text {\n width: 100%;\n }\n label {\n @include visuallyhidden;\n }\n .submit {\n flex-basis: 33%;\n flex-shrink: 0;\n }\n input {\n border: none;\n width: 100%;\n }\n}\n\n.torso {\n padding-bottom: 3rem;\n padding-top: 3rem;\n}\n\n.hero {\n background: $plain-text url(../img/hero.jpg) no-repeat center top / cover;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n height: 240px;\n -webkit-justify-content: center;\n justify-content: center;\n text-align: center;\n .copy {\n @include container;\n * {\n color: #FFF;\n }\n }\n}\n\nmain section {\n &:not(:last-child) {\n border-bottom: 1px solid $border;\n margin-bottom: 3rem;\n padding-bottom: 2rem;\n }\n}\n\naside.primary {\n margin-bottom: 2rem;\n}\n\nnav.supplemental {\n margin-bottom: 0;\n ul {\n display: block;\n li {\n display: block;\n float: none;\n margin-bottom: 0;\n a {\n color: $link;\n display: block;\n padding: 0.25em 0;\n }\n a:hover {\n color: $plain-text;\n }\n }\n ul {\n a {\n color: $meta-text;\n font-size: 0.8rem;\n line-height: 2;\n padding: 0;\n }\n }\n }\n > ul {\n > li {\n padding-bottom: 0.5em;\n }\n > li ~ li {\n border-top: 1px solid $border;\n padding-top: 0.5em;\n }\n }\n}\n\nfooter.primary {\n background-color: $charcoal;\n color: #FFF;\n font-size: 0.9rem;\n padding: 3rem 0;\n text-align: center;\n .branding {\n margin-top: 0;\n a {\n margin-bottom: 1rem;\n }\n }\n a {\n color: $link;\n display: inline-block;\n &:hover {\n color: darken($link, 10%);\n }\n }\n nav ul {\n justify-content: center;\n margin-bottom: 2rem;\n text-align: center;\n }\n .social a {\n color: #FFF;\n }\n .legal {\n text-align: center;\n p {\n margin-bottom: 0.25rem;\n }\n a {\n margin-left: 0.35rem;\n margin-right: 0.35rem;\n }\n }\n}\n\n.social {\n @include no-bullets;\n\n margin-bottom: 1rem;\n li {\n display: inline-block;\n font-size: 1.5rem;\n margin-bottom: 0;\n margin-right: 0.4rem;\n }\n .facebook a {\n color: $facebook;\n }\n .linkedin a {\n color: $linkedin;\n }\n .twitter a {\n color: $twitter;\n }\n a:hover {\n opacity: 0.7;\n }\n}\n\n\n/* = Typography = */\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n line-height: 1.2;\n margin-bottom: 0.6em;\n}\n\nh1 {\n font-size: 2.2rem;\n}\n\nh2 {\n font-size: 1.7rem;\n}\n\nh3 {\n font-size: 1.3rem;\n}\n\nh4 {\n font-size: 1.1rem;\n}\n\nh5 {\n font-size: 1rem;\n}\n\nstrong {\n font-weight: bold;\n}\n\nem {\n font-style: italic;\n}\n\nblockquote {\n border-left: 1px solid $border;\n color: $meta-text;\n font-style: italic;\n margin-bottom: 1.5em;\n padding-left: 1rem;\n}\n\n.intro {\n color: $meta-text;\n p {\n font-size: 1.3rem;\n margin-bottom: 0.8em;\n }\n}\n\n.guide {\n color: $meta-text;\n font-size: 1.25rem;\n}\n\n.meta {\n color: $meta-text;\n}\n\nhr {\n border: 0;\n border-top: 1px solid $meta-text;\n display: block;\n height: 0;\n margin: 2em auto 3em;\n width: 100%;\n}\n\n@mixin link {\n color: $link;\n cursor: pointer;\n text-decoration: none;\n\n &:hover,\n &:active {\n color: $link-hover;\n }\n &:focus {\n outline: thin dotted;\n }\n\n &.disabled,\n &[disabled] {\n color: darken(#FFF, 20%);\n cursor: default;\n pointer-events: none;\n }\n}\na {\n @include link;\n}\n\np,\nol,\nul,\ndl {\n margin-bottom: 2rem;\n}\n\nol,\nul {\n padding-left: 2rem;\n li,\n dt,\n dd {\n margin-bottom: 0.5em;\n }\n}\n\nul {\n list-style: disc;\n}\n\ndt {\n font-weight: bold;\n padding-left: 0.5em;\n}\n\ndd {\n padding-left: 2em;\n}\n\npre {\n background-color: #4A4A4A;\n padding: 1em;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\ncode {\n color: #FBCE78;\n font-family: \"Consolas\", monospace;\n padding: 2px 4px;\n}\n\n.sr-only {\n @include visuallyhidden;\n}\n\n\n/* = Forms = */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font: inherit;\n margin: 0;\n}\n\n.button,\n.checkboxes,\n.file,\n.password,\n.radios,\n.reset,\n.select,\n.submit,\n.text,\n.textarea {\n margin-bottom: 2rem;\n}\n\nlabel {\n cursor: pointer;\n display: block;\n font-weight: bold;\n margin-bottom: 0.5em;\n}\n\n.required {\n color: $error;\n}\n\nfieldset .help {\n color: $meta-text;\n display: block;\n font-size: 0.8rem;\n margin: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"email\"],\ninput[type=\"month\"],\ninput[type=\"number\"],\ninput[type=\"password\"],\ninput[type=\"search\"],\ninput[type=\"tel\"],\ninput[type=\"text\"],\ninput[type=\"time\"],\ninput[type=\"url\"],\ninput[type=\"week\"],\ntextarea {\n border: 1px solid $border;\n border-radius: 0;\n box-sizing: border-box;\n color: $plain-text;\n display: block;\n font-family: $font-stack;\n margin: 0;\n padding: 0.4em 0.6em;\n width: 100%;\n}\n\ninput[type=\"reset\"],\ninput[type=\"search\"],\ninput[type=\"text\"],\ninput[type=\"submit\"] {\n border-radius: 0;\n -webkit-appearance: none;\n}\n\n::-webkit-input-placeholder {\n color: #4A4A4A;\n}\n\n::ms-input-placeholder {\n color: #4A4A4A;\n}\n\n::-moz-placeholder {\n color: #4A4A4A;\n}\n\n::-placeholder {\n color: #4A4A4A;\n}\n\n.multiple select {\n padding-left: 5px;\n padding-right: 10px;\n}\n\ntextarea {\n height: 8em;\n overflow: auto;\n resize: vertical;\n}\n\n.radio,\n.checkbox {\n font-weight: normal;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n padding: 0;\n}\n\na.button {\n @include button;\n margin-bottom: 0;\n}\n\nbutton,\ninput[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n @include button;\n border: none;\n cursor: pointer;\n}\n\n\n/* = Iconography = */\n\n.thumbs-up::before {\n @include fontawesome(\"\\f087\");\n\n margin-right: 0.5em;\n}\n\n\n/* = Messaging = */\n\n.success {\n @include messaging;\n\n background-color: $success;\n &::before {\n content: \"\\f00c\";\n }\n a {\n color: #FFF;\n }\n a:hover {\n color: darken(#FFF, 15%);\n }\n}\n\n.info {\n @include messaging;\n\n background-color: $info;\n &::before {\n content: \"\\f129\";\n }\n}\n\n.error {\n @include messaging;\n\n background-color: $error;\n &::before {\n content: \"\\f12a\";\n }\n a {\n color: $info;\n }\n a:hover {\n color: darken($info, 15%);\n }\n}\n\n\n/* = Tables = */\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n margin-bottom: 2rem;\n width: 100%;\n caption {\n font-size: 0.9rem;\n margin-bottom: 0.75em;\n }\n td,\n th {\n padding: 0.5em 1em;\n text-align: left;\n vertical-align: top;\n }\n th {\n background-color: $plain-text;\n color: #FFF;\n font-weight: bold;\n text-transform: uppercase;\n }\n td {\n border: 1px solid $border;\n }\n tr:nth-child(even) td {\n background-color: #F3F3F3;\n }\n}\n\n\n/* = Section Specific = */\n\n\n/* = Page Specific = */\n\n\n/* = Media Queries = */\n\n@media only screen and (min-width: $medium) {\n \n}\n\n\n@media only screen and (min-width: $large) {\n\n /* = Layout = */\n \n header.primary {\n padding-bottom: 0;\n .branding {\n margin-right: 2rem;\n }\n }\n\n nav {\n ul {\n text-align: left;\n }\n }\n\n nav.primary {\n margin-bottom: 0;\n > ul > li {\n font-size: 1.1rem;\n margin-left: 1rem;\n padding-bottom: 1rem;\n position: relative;\n }\n > ul > li:first-child {\n margin-left: 0;\n }\n ul {\n text-align: left;\n li li {\n display: block;\n float: none;\n }\n }\n }\n\n .utilities {\n nav.utility {\n margin-bottom: 0.4rem;\n ul {\n text-align: right;\n }\n }\n }\n\n .desktop {\n align-items: flex-end;\n display: flex;\n flex: 1 1 auto;\n flex-flow: column nowrap;\n justify-content: space-between;\n\n nav.primary {\n align-self: flex-start;\n }\n }\n\n button.menu-toggle {\n display: none;\n }\n \n .torso .wrap {\n display: flex;\n justify-content: space-between;\n main {\n flex: 1 1 auto;\n padding-right: 2rem;\n }\n aside.primary {\n flex: 0 0 25%;\n }\n }\n\n aside.primary {\n margin-bottom: 0;\n nav ul {\n text-align: left;\n }\n }\n\n footer.primary {\n .wrapper {\n display: flex;\n > * {\n flex: 1 0 0;\n }\n > nav {\n flex-grow: 2;\n margin-bottom: 0;\n }\n > nav > ul {\n justify-content: center;\n }\n }\n .branding {\n margin-right: 0;\n max-width: none;\n text-align: left;\n }\n .social {\n text-align: right;\n }\n }\n\n\n /* = Typography = */\n\n h1 {\n font-size: 2.6rem;\n }\n\n h2 {\n font-size: 2.1rem;\n }\n\n h3 {\n font-size: 1.6rem;\n }\n\n h4 {\n font-size: 1.25rem;\n }\n\n h5 {\n font-size: 1.15rem;\n }\n}\n\n\n/* = Print Styles = */\n\n@media print {\n * {\n background-color: transparent !important;\n box-shadow: none !important;\n color: #000 !important; /* Black prints faster: h5bp.com/s */\n text-shadow: none !important;\n }\n\n a {\n text-decoration: underline;\n }\n\n pre,\n blockquote,\n tr,\n img,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n page-break-inside: avoid;\n }\n\n thead {\n display: table-header-group;\n }\n\n @page {\n margin: 0.5cm;\n }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n}\n","/**\n * _components.scss contains solely the mixin definitions for components.\n *\n * + This file should not depend on styles.scss; we should be able to use\n * include this file without including styles.scss.\n * + This file should not generate any CSS on it's own; it should only contain\n * mixin and/or function definitions.\n */\n\n/**\n * Media query breakpoints\n */\n\n$medium: 669px;\n$large: 1024px;\n\n/**\n* ACCORDION\n*\n* ACCORDION requires the accordion.plugin.js file. Within the .accordion\n* class each accordion item requires a div wrapper. Within the div wrapper\n* there is a .header class and a .content class. The .header class is the\n* clickable element that will reveal what is hidden in the .content class.\n* By default .content is hidden by javascript just in case javascript is not available.\n*\n* Emmet: .accordion>div>(.header{header}+.content>{lorem ipsum})\n*\n*/\n\n@mixin accordion() {\n > div {\n .header {\n background: $lightgray;\n color: $plain-text;\n cursor: pointer;\n font-size: 1em;\n margin-top: .5em;\n padding: .5em 1em;\n position: relative;\n text-align: left;\n width: 100%;\n &:hover {\n background: darken($lightgray, 5%);\n }\n &::after {\n bottom: 0;\n height: 1em;\n margin: auto 0;\n position: absolute;\n right: 1em;\n top: 0;\n width: 1em;\n }\n &.open {\n background: darken($lightgray, 5%);\n &::after {\n @include fontawesome(\"\\f068\");\n }\n }\n &.close {\n &::after {\n @include fontawesome(\"\\f067\");\n }\n }\n }\n .content {\n padding: 1em 0;\n &.hidden {\n display: none;\n }\n }\n }\n}\n\n\n/**\n * BACKGROUND VIDEO\n *\n * BACKGROUND VIDEO plays a video (without sound) in the background of an element.\n * Emmet: .backgroundvideo>(.panel>div>h1+p)+video>source[src]\n */\n@mixin backgroundvideo() {\n & {\n align-items: center;\n display: flex;\n height: auto;\n justify-content: center;\n overflow: hidden;\n position: relative;\n .mold {\n background-color: rgba(2255, 255, 255, 0.6);\n padding: 2em;\n text-align: center;\n z-index: 2;\n }\n video {\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n &::before {\n content: \"\";\n display: block;\n padding-top: 30%;\n }\n}\n\n\n/**\n/**\n * BREADCRUMBS\n *\n * The breadcrumb mixin provides basic breadcrumb styling, complete with\n * fontawesome icons being used as separators between crumbs.\n *\n * Emmet: nav.breadcrumbs>ul>li*3>a\n */\n@mixin breadcrumbs() {\n li:not(:last-child) a {\n padding-right: 0;\n\n &::after {\n @include fontawesome(\"\\f105\");\n padding-left: 0.5rem;\n }\n }\n}\n\n\n/**\n * CAROUSEL\n *\n * CAROUSEL uses Slick to create a carousel. It defaults to a rather\n * basic, one-slide-at-a-time implementation with dots, but slick supports a\n * good deal of configuration including showing multiple slides, breakpoints,\n * syncing between slides, and plenty of javascript events and methods for\n * integration.\n *\n * The implementation on Boilerplate is using a CDN to provide\n *\n * + slick.css\n * + slick-theme.css\n * + slick.min.js\n *\n * See http://kenwheeler.github.io/slick/ for more information.\n *\n * The carousel() mixin should be included on a parent element that contains\n * one div per slide. No additional classes are necessary – the slick classes\n * referenced are added dynamically by slick.\n *\n *
    \n *
    \n *

    A slide!

    \n *

    Some text.

    \n *
    \n *
    \n *\n * Emmet: .carousel>div*3>h2+p\n *\n * While there's more information in slick's documentation, .slick-slide wraps\n * slides while .slick-next and .slick-prev are used for the next/previous\n * arrows.\n */\n@mixin carousel() {\n .slick-slide {\n color: #FFF;\n height: auto;\n padding: 3rem;\n }\n .slick-prev,\n .slick-next {\n z-index: 1;\n }\n .slick-prev {\n left: 2rem;\n }\n .slick-next {\n right: 2rem;\n }\n}\n\n\n/**\n * COLUMNS\n *\n * The COLUMNS mixin makes it so that immmediate child elements appear as\n * columns. It is responsive, allowing you to specify the media query at which\n * to switch the layout from stacking to columns.\n *\n * Additionally, it assumes the use of
    elements to create visual gutters\n * that are only visible while displayed as columns.\n *\n *
    \n *
    \n *

    A column

    \n *
    \n *
    \n *
    \n *

    Another column

    \n *
    \n *
    \n *\n * Emmet: .columns>div+(hr+div)*2\n */\n@mixin columns() {\n > hr {\n border: 0;\n display: none;\n }\n @media only screen and (min-width: $medium) {\n & {\n display: table;\n table-layout: fixed;\n width: 100%;\n > * {\n display: table-cell;\n vertical-align: top;\n }\n > hr {\n display: table-cell;\n width: 1rem;\n }\n }\n }\n}\n\n\n/**\n * DOSSIER\n *\n * The DOSSIER mixin displays an individual’s biography and photograph.\n *\n * Emmet: .dossiers>div>(.photo>img^.bio>h2{Lorem Ipsum}+p.title{Vice President}+p{Lorem20})\n */\n@mixin dossier($gutter: 2rem, $photoWidth: 25%, $direction: row) {\n > * {\n text-align: center;\n .photo {\n margin-bottom: 2rem;\n }\n }\n @media only screen and (min-width: $medium) {\n > * {\n display: flex;\n flex-direction: $direction;\n flex-wrap: nowrap;\n margin-bottom: 4rem;\n text-align: left;\n .photo {\n flex: 0 0 $photoWidth;\n margin-bottom: 0;\n margin-right: $gutter;\n @if $direction == row-reverse {\n margin-left: $gutter;\n margin-right: 0;\n }\n }\n .bio {\n .title {\n color: $meta-text;\n text-transform: uppercase;\n }\n }\n }\n }\n}\n\n\n/**\n * DROPDOWN\n *\n * The DROPDOWN mixin allows for dropdown menus. By default, a single\n * column dropdown is used. It is positioned to its parent.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu>ul>li>(a{link name})*3\n */\n@mixin dropdown() {\n @media only screen and (max-width: $large - 1px) {\n .dropdown,\n i.fa {\n display: none;\n }\n }\n @media only screen and (min-width: $large) {\n i.fa {\n display: inline-block;\n }\n .dropdown {\n background-color: #2A2A2A;\n color: #FFF;\n display: block;\n font-size: 1rem;\n min-width: 260px;\n opacity: 0;\n padding: 2rem 0;\n position: absolute;\n top: 100%;\n transition: opacity 300ms;\n visibility: hidden;\n z-index: 1;\n ul {\n display: block;\n }\n .menu {\n > * {\n padding: 0 1rem;\n }\n li {\n margin-bottom: 0.4em;\n }\n a {\n color: #0C96DD;\n }\n a:hover,\n a:focus {\n color: darken(#0C96DD, 10%);\n }\n }\n }\n .dropdown.open {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n\n\n/**\n * DROPDOWN (mega)\n * The DROPDOWN (mega) mixin allows for full-width mega dropdown\n * menus. Call this mixin on a list item. Note that the simple\n * dropdown component is a dependency of this mega dropdown.\n * The mega dropdown is positioned to header.primary instead\n * of its parent list item.\n *\n * Emmet: nav.primary>ul>li>a{link name}+.dropdown>.menu(div*3)\n */\n@mixin dropdown-mega() {\n position: static;\n @media only screen and (min-width: $large) {\n .dropdown {\n left: 0;\n top: 100%;\n width: 100%;\n .menu {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n margin-left: auto;\n margin-right: auto;\n max-width: 1168px;\n > * {\n border-left: 1px solid #777;\n flex-basis: 0;\n flex-grow: 1;\n padding: 0 3rem;\n }\n > *:first-child {\n border-left: none;\n padding-left: 0;\n }\n > *:last-child {\n padding-right: 0;\n }\n }\n }\n }\n}\n\n\n/**\n * FEATURES house three features in one row. Powered by flexbox,\n * this allows for a bottom alignment of each feature’s anchor. Use the\n * $gutter variable to pass you preferred gutter width.\n *\n * Emmet: .features>(div>(.icon>img)+h4+p+a)*3\n */\n@mixin features($gutter: 3rem) {\n > * {\n background-color: #EEE;\n margin-bottom: 2rem;\n margin-left: auto;\n margin-right: auto;\n padding: 2rem;\n text-align: center;\n img,\n h3,\n p {\n margin-bottom: 1rem;\n }\n .button {\n margin-bottom: 0;\n }\n }\n @media only screen and (min-width: $large) {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n > * {\n display: flex;\n flex: 1 0 0;\n flex-direction: column;\n margin-left: $gutter;\n margin-right: 0;\n .button {\n align-self: center;\n margin-top: auto;\n }\n &:first-child {\n margin-left: 0;\n }\n }\n }\n}\n\n\n/**\n * LISTING shows a listing of entries. It includes an optional search form with filters. \n * Remove the search form elements for a simple list.\n *\n * Emmet: .listing>(form>.search>(.text>label+input^.submit>label+input[type=\"submit\"]))+p.guide{Showing 10 of 20}+ul>li>a>h2{Listing headline}\n */\n@mixin listing() {\n margin-bottom: 2rem;\n form {\n .search {\n display: flex;\n label {\n @include visuallyhidden;\n }\n .text {\n flex-grow: 1;\n }\n .submit {\n flex-basis: 120px;\n flex-shrink: 0;\n }\n .submit input {\n height: 100%;\n width: 100%;\n }\n }\n .filters {\n margin-bottom: 2rem;\n label {\n display: inline;\n }\n span {\n background-color: darken($link, 20%);\n border-radius: 0.5rem;\n color: #fff;\n display: inline-block;\n margin: 0 0.5rem 0.5rem 0;\n padding: 0.5rem 1rem;\n }\n input[type=\"checkbox\"]:checked + span {\n background-color: $link;\n }\n input[type=\"checkbox\"] {\n display: none;\n }\n }\n }\n\n ul {\n list-style: none;\n padding: 0;\n margin: 0;\n li {\n border-top: 4px solid $border;\n margin-bottom: 0;\n padding: 2rem 0;\n .meta {\n display: block;\n font-size: 0.9rem;\n margin-bottom: 1em;\n }\n h2 + .meta {\n margin-top: -1em;\n }\n .summary {\n p:last-of-type {\n margin-bottom: 0;\n }\n }\n }\n }\n}\n\n\n/**\n * The LOGIN mixin is a basic implementation of a login module that includes a\n * username input, password input, submit button, forgot password link, and\n * remember me checkbox\n *\n * Emmet: .login>form>(div.text>label{Username}+input)+(div.password>label{Password}+input[type=\"password\"])+div.actions>(.submit>button{Login})+(label>input[type=\"hidden\"]+input[type=\"checkbox\"])+a{Forgot Your Password?}\n */\n@mixin login {\n background: #EEE;\n margin-left: auto;\n margin-right: auto;\n max-width: 600px;\n padding: 3rem;\n input {\n &:focus {\n box-shadow: 0 0 5px rgba(114, 164, 0, 0.7);\n }\n }\n .submit {\n text-align: center;\n }\n .actions {\n text-align: center;\n\n }\n @media only screen and (min-width: $medium) {\n .actions {\n align-items: center;\n display: flex;\n justify-content: space-between;\n flex-flow: row wrap;\n > * {\n margin: 0;\n padding: 0;\n }\n label {\n margin-left: 1em;\n }\n a {\n display: block;\n margin-left: auto;\n text-align: right;\n }\n }\n }\n}\n\n\n/**\n * MOBILE NAVIGATION\n *\n * Emmet\n */\n\n@mixin mobileNavigation() {\n background-color: $charcoal;\n bottom: 0;\n display: none;\n height: 100%;\n opacity: 0;\n overflow-y: auto;\n padding: 1rem;\n position: fixed;\n top: 0;\n transition: transform .25s;\n width: 80%;\n z-index: 1000;\n &.left {\n display: block;\n left: 0;\n right: auto;\n transform: translateX(-100%);\n }\n &.right {\n display: block;\n left: auto;\n right: 0;\n transform: translateX(100%);\n }\n &.left.open, &.right.open {\n transform: translateX(0);\n transition: transform .25s;\n }\n &.init {\n display: block;\n opacity: 1;\n }\n nav.utility {\n ul li a {\n padding: 0.75rem 0;\n }\n }\n ul {\n display: block;\n padding-left: 0;\n }\n ul li {\n align-items: center;\n border-bottom: 1px solid lighten($charcoal, 10%);\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n margin-bottom: 0;\n text-align: left;\n a {\n color: #fff;\n display: block;\n padding: 1rem 0;\n }\n i.fa {\n display: inline-block;\n }\n\n }\n @media only screen and (min-width: $large) {\n &.open.left {\n transform: translateX(-100%);\n }\n &.open.right {\n transform: translateX(100%);\n }\n }\n}\n\n\n/**\n * PAGINATION\n *\n * Emmet: nav.pagination>ul>(li.previous>a{Previous})+(li*2>a)+(li.active>a)+(li*2>a)+li.next>a{Next}\n */\n@mixin pagination {\n display: flex;\n justify-content: center;\n ul {\n border: 1px solid $border;\n border-radius: 2px;\n display: flex;\n justify-content: center;\n }\n li {\n margin-bottom: 0;\n }\n a {\n color: $link;\n padding: 0.5rem 1rem;\n position: relative;\n }\n li:not(:last-child) a {\n border-right: 1px solid $border;\n }\n li.active a {\n background-color: $brand-blue;\n color: #fff;\n cursor: default;\n pointer-events: none;\n &::before,\n &::after {\n background-color: $brand-blue;\n }\n &:hover {\n color: #fff;\n background-color: $link-hover;\n &::before,\n &::after {\n background-color: $link-hover;\n }\n }\n }\n li.disabled a {\n color: $border;\n cursor: default;\n pointer-events: none;\n }\n li.previous a {\n &::before {\n @include fontawesome(\"\\f100\");\n }\n }\n li.next a {\n &::before {\n @include fontawesome(\"\\f101\");\n }\n }\n li:hover:not(.active):not(.disabled) {\n a {\n background-color: $link;\n color: #FFF;\n\n &::before {\n background-color: $link;\n color: #FFF;\n }\n }\n }\n}\n\n\n/**\n * PROGRESS BREADCRUMBS\n *\n * the progress mixin provides a basic, pill-style progress nav bar like you\n * might find as part of an e-commerce or registration process.\n *\n * Emmet: nav.progress>ul>(li.complete*2>a)+(li.active>a)+(li*2>a)\n */\n@mixin progress() {\n ul {\n border: 1px solid $border;\n border-radius: 2px;\n display: block;\n width: 100%;\n }\n a {\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n &:hover {\n color: $link-hover;\n }\n }\n li:not(:last-child) a {\n border-right: 1px solid $border;\n }\n li.active {\n a {\n background-color: $link;\n color: #FFF;\n cursor: default;\n pointer-events: none;\n\n &:hover {\n background-color: $link-hover;\n color: #FFF;\n }\n }\n }\n li.disabled a {\n color: $border;\n cursor: default;\n pointer-events: none;\n }\n li:hover:not(.active,.disabled) a {\n color: $link-hover;\n }\n li:not(:last-child) a {\n border: 0;\n }\n li.complete a {\n background-color: #FFF;\n color: #ccc;\n &::before {\n background-color: #FFF;\n }\n &:hover {\n color: $link;\n }\n }\n @media only screen and (min-width: $medium) {\n ul {\n display: flex;\n }\n li {\n flex: 1 1 auto;\n position: relative;\n }\n li:last-child a {\n &::before {\n display: none;\n }\n }\n a {\n &::after,\n &::before {\n border: 0 solid transparent;\n border-bottom: 1.25rem solid rgba(0,0,0,0);\n border-left: 1rem solid #FFF; \n border-top: 1.25rem solid rgba(0,0,0,0);\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n }\n &::after {\n border-left-color: #FFF;\n }\n &::before {\n border-left-color: darken($border, 10%);\n margin-right: -1px;\n }\n }\n li.active {\n margin-left: -1rem;\n z-index: 2;\n &::before {\n border-bottom: 1.25rem solid $link;\n border-left: 1rem solid #FFF;\n border-top: 1.25rem solid $link;\n content: '';\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 2;\n }\n a {\n &::after,\n &::before {\n background-color: $link;\n border-bottom-color: #FFF;\n border-left-color: $link;\n border-top-color: #FFF;\n }\n &::before {\n margin-right: 0;\n }\n }\n a:hover {\n &::after,\n &::before {\n background-color: $link-hover;\n }\n }\n }\n }\n}\n\n\n/**\n * STICKY HEADER\n *\n * The STICKY-HEADER mixin works with js (sticky-header.plugin.js) to hide the\n * header as you scroll down, and show it as you scroll back up. This is\n * responsive as the \"top\" value is dynamically set in the\n * js based on the height of the header. Top padding is also added\n * to the body dynamically via js so that the header doesn't overlap any\n * content.\n *\n * Emmet: header.primary\n *\n **/\n@mixin sticky-header() {\n position: fixed;\n top: 0;\n transition: top 0.16s cubic-bezier(0, .40, .70, 1);\n width: 100%;\n z-index: 100;\n}\n\n\n/**\n * TABS\n *\n * Emmet: nav.tabs>ul>li*3>a\n */\n@mixin tabs {\n a {\n border-radius: 4px 4px 0 0;\n border: 1px solid $border;\n border-color: transparent transparent $border;\n }\n\n li.active {\n a {\n border-color: $border $border transparent;\n }\n }\n\n li:hover:not(.active) {\n a {\n background: $border;\n }\n }\n}\n\n\n/**\n* TESTIMONIAL\n*\n* The TESTIMONIAL mixin is a basic implementation of a testimonial design.\n* Emmet: div.testimonial>div.container>blockquote+p\n* To use the TESTIMONIAL WITH ASSET component, you simply need to add additional html markup, see emmet below.\n* Emmet: div.testimonial.asset>div.container>(div>img)+blockquote+p\n*/\n\n@mixin testimonial($gutterWidth: 4rem) {\n background-color: $charcoal;\n margin-bottom: 4rem;\n padding: 4rem 0 4rem;\n text-align: center;\n .asset {\n margin-bottom: 2rem;\n img {\n max-width: 280px;\n }\n }\n blockquote {\n border: none;\n color: #fff;\n font-size: 1.125rem;\n margin-bottom: 1rem;\n padding: 0 2.5rem;\n position: relative;\n &::before,\n &::after {\n color: $meta-text;\n font-family: Georgia, serif;\n font-size: 3.375rem;\n position: absolute;\n }\n &::before {\n content: \"“\";\n left: 0;\n line-height: 1;\n top: 0;\n }\n &::after {\n content: \"”\";\n line-height: 0;\n right: 0;\n bottom: 0;\n }\n ~ p {\n color: $meta-text;\n font-size: 0.875rem;\n margin-bottom: 0;\n padding: 0 2.5rem;\n }\n }\n @media only screen and (min-width: $large) {\n text-align: left;\n .container > div {\n display: flex;\n justify-content: space-between;\n }\n .asset {\n flex-basis: 33%;\n flex-shrink: 0;\n margin-bottom: 0;\n margin-right: $gutterWidth;\n img {\n max-width: 100%;\n }\n }\n blockquote {\n font-size: 1.5rem;\n padding: 0 6rem;\n &::before,\n &::after {\n font-size: 7rem;\n }\n ~ p {\n font-size: 1rem;\n padding: 0 6rem;\n }\n }\n }\n}\n\n\n/**\n * TILES\n *\n * Tiles helps you create an equal-width column grid layout without the use of row wrappers.\n * Tiles is similar to the Features component, expect that Tiles’s items can wrap.\n * Powered by flexbox, you can pass in a $gutter width and $column amount. Note that the\n * specified $column amount only is respected at the large breakpoint. Tiles will automatically\n * two-up your items at the medium breakpoint, and stack them at the small breakpoint.\n *\n *\n * Emmet: .tiles>.tiles\n *\n **/\n\n@mixin tiles($gutter: 2rem, $columns: 4) {\n > * {\n background-color: #EEE;\n margin-bottom: $gutter;\n padding: 2rem;\n text-align: left;\n *:last-child {\n margin-bottom: 0;\n }\n }\n @media only screen and (min-width: $medium) {\n display: flex;\n flex-flow: row wrap;\n margin-left: -$gutter / 2;\n margin-right: -$gutter / 2;\n > * {\n flex-basis: calc(50% - #{$gutter});\n flex-shrink: 0;\n margin-left: $gutter / 2;\n margin-right: $gutter / 2;\n }\n }\n @media only screen and (min-width: $large) {\n > * {\n flex-basis: calc((100% / #{$columns}) - (#{$gutter}));\n }\n }\n}\n"]} \ No newline at end of file diff --git a/css/styles.scss b/css/styles.scss index 030cf50..2372e91 100755 --- a/css/styles.scss +++ b/css/styles.scss @@ -559,6 +559,7 @@ footer.primary { } } nav ul { + justify-content: center; margin-bottom: 2rem; text-align: center; } @@ -1053,7 +1054,6 @@ table { footer.primary { .wrapper { display: flex; - justify-content: space-between; > * { flex: 1 0 0; } @@ -1061,6 +1061,9 @@ table { flex-grow: 2; margin-bottom: 0; } + > nav > ul { + justify-content: center; + } } .branding { margin-right: 0;