diff --git a/css/styles.css b/css/styles.css index 2a64dfa..d908edc 100755 --- a/css/styles.css +++ b/css/styles.css @@ -1,8 +1,8 @@ @charset "UTF-8"; /** - * Built using Imarc Boilerplate v2.1 + * Built using Imarc Boilerplate v3.0 * - * Copyright 2016 Imarc + * Copyright 2017 Imarc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * @@ -286,13 +286,10 @@ } .backgroundvideo { - -webkit-align-items: center; - align-items: center; - display: -webkit-flex; + align-items: center; display: flex; height: auto; - -webkit-justify-content: center; - justify-content: center; + justify-content: center; overflow: hidden; position: relative; } @@ -347,18 +344,14 @@ @media only screen and (min-width: 669px) { .dossier > * { - display: -webkit-flex; display: flex; - -webkit-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; + flex-direction: row; + flex-wrap: nowrap; margin-bottom: 4rem; text-align: left; } .dossier > * .photo { - -webkit-flex: 0 0 25%; - flex: 0 0 25%; + flex: 0 0 25%; margin-bottom: 0; margin-right: 2rem; } @@ -433,15 +426,11 @@ .header-content > .dropdown ul li, .mobile ul li { - -webkit-align-items: center; - align-items: center; + align-items: center; border-bottom: 1px solid #333333; - display: -webkit-flex; display: flex; - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - -webkit-justify-content: space-between; - justify-content: space-between; + flex-flow: row nowrap; + justify-content: space-between; margin-bottom: 0; text-align: left; } @@ -492,27 +481,20 @@ @media only screen and (min-width: 1024px) { .features { - display: -webkit-flex; display: flex; - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - -webkit-justify-content: space-between; - justify-content: space-between; + flex-flow: row nowrap; + justify-content: space-between; } .features > * { - display: -webkit-flex; display: flex; - -webkit-flex: 1 0 0; - flex: 1 0 0; - -webkit-flex-direction: column; - flex-direction: column; + flex: 1 0 0; + flex-direction: column; margin-left: 3rem; margin-right: 0; } .features > * .button { - -webkit-align-self: center; - -ms-grid-row-align: center; - align-self: center; + -ms-grid-row-align: center; + align-self: center; margin-top: auto; } .features > *:first-child { @@ -533,7 +515,6 @@ header.primary.sticky { } .listing form .search { - display: -webkit-flex; display: flex; } @@ -549,15 +530,12 @@ header.primary.sticky { } .listing form .search .text { - -webkit-flex-grow: 1; - flex-grow: 1; + flex-grow: 1; } .listing form .search .submit { - -webkit-flex-basis: 120px; - flex-basis: 120px; - -webkit-flex-shrink: 0; - flex-shrink: 0; + flex-basis: 120px; + flex-shrink: 0; } .listing form .search .submit input { @@ -638,14 +616,10 @@ header.primary.sticky { @media only screen and (min-width: 669px) { .login .actions { - -webkit-align-items: center; - align-items: center; - display: -webkit-flex; + align-items: center; display: flex; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; + justify-content: space-between; + flex-flow: row wrap; } .login .actions > * { margin: 0; @@ -662,19 +636,15 @@ header.primary.sticky { } nav.pagination { - display: -webkit-flex; display: flex; - -webkit-justify-content: center; - justify-content: center; + justify-content: center; } nav.pagination ul { border: 1px solid #e5e5e5; border-radius: 2px; - display: -webkit-flex; display: flex; - -webkit-justify-content: center; - justify-content: center; + justify-content: center; } nav.pagination li { @@ -805,22 +775,17 @@ nav.pagination li:hover:not(.active):not(.disabled) a::before { width: 100%; } .desktop nav.primary li.mega .dropdown .menu { - display: -webkit-flex; display: flex; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-justify-content: space-between; - justify-content: space-between; + flex-flow: row wrap; + justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1168px; } .desktop nav.primary li.mega .dropdown .menu > * { border-left: 1px solid #777; - -webkit-flex-basis: 0; - flex-basis: 0; - -webkit-flex-grow: 1; - flex-grow: 1; + flex-basis: 0; + flex-grow: 1; padding: 0 3rem; } .desktop nav.primary li.mega .dropdown .menu > *:first-child { @@ -903,16 +868,12 @@ nav.pagination li:hover:not(.active):not(.disabled) a::before { text-align: left; } .testimonial .container > div { - display: -webkit-flex; display: flex; - -webkit-justify-content: space-between; - justify-content: space-between; + justify-content: space-between; } .testimonial .asset { - -webkit-flex-basis: 33%; - flex-basis: 33%; - -webkit-flex-shrink: 0; - flex-shrink: 0; + flex-basis: 33%; + flex-shrink: 0; margin-bottom: 0; margin-right: 4rem; } @@ -945,18 +906,14 @@ nav.pagination li:hover:not(.active):not(.disabled) a::before { @media only screen and (min-width: 669px) { .tiles { - display: -webkit-flex; display: flex; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; + flex-flow: row wrap; margin-left: -1rem; margin-right: -1rem; } .tiles > * { - -webkit-flex-basis: calc(50% - 2rem); - flex-basis: calc(50% - 2rem); - -webkit-flex-shrink: 0; - flex-shrink: 0; + flex-basis: calc(50% - 2rem); + flex-shrink: 0; margin-left: 1rem; margin-right: 1rem; } @@ -964,8 +921,7 @@ nav.pagination li:hover:not(.active):not(.disabled) a::before { @media only screen and (min-width: 1024px) { .tiles > * { - -webkit-flex-basis: calc((100% / 4) - (2rem)); - flex-basis: calc((100% / 4) - (2rem)); + flex-basis: calc((100% / 4) - (2rem)); } } @@ -1082,7 +1038,6 @@ img { } .search-drawer form { - display: -webkit-flex; display: flex; padding: 1rem 0; } @@ -1092,8 +1047,7 @@ img { } .search-drawer form .text { - -webkit-flex: 1 1 auto; - flex: 1 1 auto; + flex: 1 1 auto; } .search-drawer form .submit input { @@ -1115,10 +1069,8 @@ header.primary .container { } header.primary .branding { - -webkit-flex-basis: 180px; - flex-basis: 180px; - -webkit-flex-shrink: 0; - flex-shrink: 0; + flex-basis: 180px; + flex-shrink: 0; } nav { @@ -1129,7 +1081,6 @@ nav ul { list-style: none; margin: 0; padding-left: 0; - display: -webkit-flex; display: flex; } @@ -1243,12 +1194,10 @@ nav.progress li.complete a:hover { @media only screen and (min-width: 669px) { nav.progress ul { - display: -webkit-flex; display: flex; } nav.progress li { - -webkit-flex: 1 1 auto; - flex: 1 1 auto; + flex: 1 1 auto; position: relative; } nav.progress li:last-child a::before { @@ -1336,14 +1285,10 @@ nav.utility a { } .header-content { - -webkit-align-items: center; - align-items: center; - display: -webkit-flex; + align-items: center; display: flex; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-justify-content: space-between; - justify-content: space-between; + flex-flow: row wrap; + justify-content: space-between; } .header-content .menu-toggle:hover, @@ -1366,7 +1311,6 @@ nav.utility a { } form.search { - display: -webkit-flex; display: flex; } @@ -1391,10 +1335,8 @@ form.search label { } form.search .submit { - -webkit-flex-basis: 33%; - flex-basis: 33%; - -webkit-flex-shrink: 0; - flex-shrink: 0; + flex-basis: 33%; + flex-shrink: 0; } form.search input { @@ -1409,12 +1351,9 @@ form.search input { .hero { background: #191919 url(../img/hero.jpg) no-repeat center top/cover; - display: -webkit-flex; display: flex; - -webkit-flex-direction: column; flex-direction: column; height: 240px; - -webkit-justify-content: center; justify-content: center; text-align: center; } @@ -1508,8 +1447,7 @@ footer.primary a:hover { } footer.primary nav ul { - -webkit-justify-content: center; - justify-content: center; + justify-content: center; margin-bottom: 2rem; text-align: center; } @@ -2104,38 +2042,28 @@ table tr:nth-child(even) td { text-align: right; } .desktop { - -webkit-align-items: flex-end; - align-items: flex-end; - display: -webkit-flex; + align-items: flex-end; display: flex; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-flex-flow: column nowrap; - flex-flow: column nowrap; - -webkit-justify-content: space-between; - justify-content: space-between; + flex: 1 1 auto; + flex-flow: column nowrap; + justify-content: space-between; } .desktop nav.primary { - -webkit-align-self: flex-start; - align-self: flex-start; + align-self: flex-start; } button.menu-toggle { display: none; } .torso .wrap { - display: -webkit-flex; display: flex; - -webkit-justify-content: space-between; - justify-content: space-between; + justify-content: space-between; } .torso .wrap main { - -webkit-flex: 1 1 auto; - flex: 1 1 auto; + flex: 1 1 auto; padding-right: 2rem; } .torso .wrap aside.primary { - -webkit-flex: 0 0 25%; - flex: 0 0 25%; + flex: 0 0 25%; } aside.primary { margin-bottom: 0; @@ -2144,21 +2072,17 @@ table tr:nth-child(even) td { text-align: left; } footer.primary .wrapper { - display: -webkit-flex; display: flex; } footer.primary .wrapper > * { - -webkit-flex: 1 0 0; - flex: 1 0 0; + flex: 1 0 0; } footer.primary .wrapper > nav { - -webkit-flex-grow: 2; - flex-grow: 2; + flex-grow: 2; margin-bottom: 0; } footer.primary .wrapper > nav > ul { - -webkit-justify-content: center; - justify-content: center; + justify-content: center; } footer.primary .branding { margin-right: 0; diff --git a/css/styles.css.map b/css/styles.css.map index fdce92c..5845adc 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 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 +{"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 v3.0\n *\n * Copyright 2017 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 v3.0\n *\n * Copyright 2017 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 2372e91..6b949a8 100755 --- a/css/styles.scss +++ b/css/styles.scss @@ -1,7 +1,7 @@ /** - * Built using Imarc Boilerplate v2.1 + * Built using Imarc Boilerplate v3.0 * - * Copyright 2016 Imarc + * Copyright 2017 Imarc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * @@ -356,7 +356,7 @@ nav { margin-bottom: 2rem; ul { @include no-bullets; - + display: flex; li { margin-bottom: 0; @@ -433,7 +433,7 @@ nav.utility { } > .dropdown { background-color: lighten($charcoal, 5%); - z-index: 1001; + z-index: 1001; &.sub-menu { background-color: lighten($charcoal, 10%); z-index: 1002; @@ -966,14 +966,14 @@ table { /* = Media Queries = */ @media only screen and (min-width: $medium) { - + } @media only screen and (min-width: $large) { /* = Layout = */ - + header.primary { padding-bottom: 0; .branding { @@ -1031,7 +1031,7 @@ table { button.menu-toggle { display: none; } - + .torso .wrap { display: flex; justify-content: space-between;