diff --git a/.kickoff/config/webpack.config.js b/.kickoff/config/webpack.config.js index 5d841fb3..b2d330d8 100644 --- a/.kickoff/config/webpack.config.js +++ b/.kickoff/config/webpack.config.js @@ -5,15 +5,12 @@ const config = require('../shared/config'); const path = require('path'); const webpack = require('webpack'); -const entryPoints = {}; -entryPoints[config.js.distFile] = [`${config.js.srcDir}/${config.js.srcFile}`]; - let webpackConfig = { - entry: entryPoints, + entry: config.js.entryPoints, output: { path: `${config.js.distDir}`, - publicPath: `${config.js.distDir}`, - filename: '[name]', + publicPath: `${config.js.distDir}/`, + filename: '[name].js', }, devServer: { inline: true, @@ -23,9 +20,9 @@ let webpackConfig = { module: { loaders: [ { - test: /\.js$/, - exclude: /node_modules/, - loader: 'babel', + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel', }, ], }, diff --git a/.kickoff/shared/config.js b/.kickoff/shared/config.js index dc10d6bf..f578e644 100644 --- a/.kickoff/shared/config.js +++ b/.kickoff/shared/config.js @@ -2,6 +2,8 @@ * Global Gulp vars * Many of the Gulp tasks use these vars. Change as much as you like :) */ +var pkg = require('../../package.json'); + const ConfigOptions = function() { const config = this; @@ -28,9 +30,16 @@ const ConfigOptions = function() { // Javascript-related vars config.js = { - srcDir: `${config.srcDir}/js`, // config.js.srcFile + srcDir: `${config.srcDir}/js`, // config.js.srcDir srcFile: 'script.js', // config.js.srcFile + entryPoints: { + kickoff: `${this.srcDir}/js/script.js`, + + // Create more entry-points by adding to this array, e.g. + // foo: `${this.srcDir}/js/bar.js`, + }, + distDir: `${config.distDir}/js`, // config.js.distDir distFile: 'kickoff.js', // config.js.distFile // Renaming this changes the name of the generated JS file @@ -50,6 +59,16 @@ const ConfigOptions = function() { srcDir: `${config.srcDir}/icons`, // config.icons.srcDir distDir: `${config.distDir}/img`, // config.icons.distDir }; + + + // Banners and info + config.misc = { + banner: `/** + * <%= pkg.title %> <%= pkg.version %> + * <%= pkg.homepage %> + */ +` + } }; module.exports = new ConfigOptions(); diff --git a/.kickoff/tasks/css.js b/.kickoff/tasks/css.js index 5dbcc82f..ff8a7792 100644 --- a/.kickoff/tasks/css.js +++ b/.kickoff/tasks/css.js @@ -9,6 +9,9 @@ const postcss = require('gulp-postcss'); const sass = require('gulp-sass'); const stylelint = require('gulp-stylelint'); const gulpIf = require('gulp-if'); +const banner = require('gulp-banner'); +var pkg = require('../../package.json'); + // PostCSS plugins const reporter = require('postcss-reporter'); @@ -25,8 +28,7 @@ gulp.task('css', () => { return gulp.src([`${config.css.scssDir}/*.scss`]) .pipe( - gulpIf( - process.env.TEST, + gulpIf(process.env.TEST, stylelint({ reporters: [ { @@ -40,8 +42,7 @@ gulp.task('css', () => { .pipe( - gulpIf( - process.env.TEST, + gulpIf(process.env.TEST, postcss([ bemLinter(), doiuse({ @@ -51,20 +52,14 @@ gulp.task('css', () => { 'node_modules/**' ] }), - reporter({ - clearMessages: true, - }) + reporter({ clearMessages: true }) ], - { - syntax: scss - }) + { syntax: scss }) ) ) // Init sourcemaps - .pipe( - gulpIf(!process.env.RELEASE, sourcemaps.init()) - ) + .pipe( gulpIf(!process.env.RELEASE, sourcemaps.init()) ) // Sass Compilation .pipe( @@ -83,22 +78,19 @@ gulp.task('css', () => { // Compress CSS .pipe( - gulpIf( - process.env.RELEASE === 'true', + gulpIf(process.env.RELEASE === 'true', postcss([ cssnano() ]) ) ) + .pipe(banner(config.misc.banner, { pkg: pkg })) + // Write sourcemaps - .pipe( - gulpIf(!process.env.RELEASE, sourcemaps.write()) - ) + .pipe( gulpIf(!process.env.RELEASE, sourcemaps.write()) ) // Write file - .pipe( - gulp.dest(`${config.css.distDir}`) - ); + .pipe( gulp.dest(`${config.css.distDir}`) ); }); diff --git a/.kickoff/tasks/images.js b/.kickoff/tasks/images.js index 4522a5f2..5a7e8749 100644 --- a/.kickoff/tasks/images.js +++ b/.kickoff/tasks/images.js @@ -9,8 +9,6 @@ const cache = require('gulp-cached'); gulp.task('images', () => { - // process.env.RELEASE = false; - return gulp.src([`${config.img.srcDir}/**/*`]) .pipe( imagemin() diff --git a/.kickoff/tasks/javascript.js b/.kickoff/tasks/javascript.js index e05cfcc7..8af21f42 100644 --- a/.kickoff/tasks/javascript.js +++ b/.kickoff/tasks/javascript.js @@ -11,10 +11,10 @@ const webpackConfig = require('../config/webpack.config.js'); gulp.task('javascript', () => { // additional webpack config options - const myConfig = Object.create(webpackConfig); + const myConfig = webpackConfig; // generate source maps for css and js - myConfig.devtool = 'source-map'; + // myConfig.devtool = 'source-map'; // myConfig.output.publicPath = './'; @@ -27,7 +27,7 @@ gulp.task('javascript', () => { ); // run webpack - webpack(myConfig, (err) => { + return webpack(myConfig, (err) => { if (err) throw new gutil.PluginError('compile', err); }); }); diff --git a/.kickoff/tasks/watcher.js b/.kickoff/tasks/watcher.js index 531ea4d4..90bf5657 100644 --- a/.kickoff/tasks/watcher.js +++ b/.kickoff/tasks/watcher.js @@ -7,12 +7,7 @@ const gulp = require('gulp'); const runSequence = require('run-sequence'); -gulp.task('watcher', () => { - - runSequence( - 'compile' - ); - +gulp.task('watcher', ['compile'], () => { gulp.watch([`${config.css.scssDir}/**/*.scss`], ['css']); gulp.watch([`${config.icons.srcDir}/**/*`], ['icons']); gulp.watch([`${config.img.srcDir}/**/*`], ['images']); diff --git a/assets/dist/css/.gitkeep b/assets/dist/css/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css index 2a981289..ccf9dd34 100644 --- a/assets/dist/css/kickoff.css +++ b/assets/dist/css/kickoff.css @@ -1,3314 +1,5 @@ -@charset "UTF-8"; /** - * Site dependencies - * See http://trykickoff.com/demos/ for more info + * Kickoff 7.1.0 + * http://trykickoff.com */ -/* - * Mixins, helpers and functions - * Most CSS3 vendor prefixed items have a mixin, - * but we should not need them if autoprefixer is being used - * See mixins/css3.scss for the full list - */ -/** - * Usage: - * - * getVal(100, $map) - uses an integer - * getVal(mid, $map) - uses a Sass map - * getVal($foo, $map) - uses a Sass variable - */ -/** - * Get breakpoints - * - * bp() - * - * Usage: - * bp(100) - uses an integer - * bp(mid) - uses the $breakpoints Sass map - * bp($foo) - uses a Sass variable - */ -/** - * Get type size - * - * type() - * - * Usage: - * type(100) - uses an integer - * type(mid) - uses the $type Sass map - * type($foo) - uses a Sass variable - */ -/** - * Usage: - * - $grid-configuration: ( - 'columns': 12, - 'layouts': ( - 'small': 800px, - 'medium': 1000px, - 'large': 1200px, - ), - ); - - div { - font-size: map-deep-get($grid-configuration, 'columns'); - width: map-deep-get($grid-configuration, 'layouts', 'medium'); - } - */ -/** - * Sass Mixins - * - Responsive - * - Dimensions - * - Positioning - * - Utility - * - Forms - * - Module Naming Helpers - */ -/** - * Responsive media query mixins - * - These are used so that we can define separate media-query content - * - Arguments can use: - * - a named breakpoint in the $breakpoints map, e.g. mid - * - a pixel value e.g. 500px - * - a unitless value that is eqivalent to a pixel e.g. 500 - */ -/** - * Min-width media query: - * - Equivalent to: @media screen and (min-width: 20em) { ... } - * - Usage: @include respond-min(mid) { ... }; - */ -/** - * Max-width media query: - * - Equivalent to: @media screen and (max-width: 20em) { ... } - * - Usage: @include respond-max(mid) { ... }; - */ -/** - * Min-max-width media query: - * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... } - * - Usage: @include respond-min-max(narrow, 600) { ... }; - */ -/** - * HiDPI mixin. - * @include hidpi { ... }; - * Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) - */ -/** - * Hidpi with a minimum width media query - * @include hidpi-min(bp(mid), 1.5) { ... }; - */ -/** - * Hidpi with a max width media query - * @include hidpi-max(bp(mid), 1.3) { ... }; - */ -/** - * Dimensions-based mixins - * - REM calculation - * - Typography mixins based on the REM mixin - * - font-size - * - line-height - * - font-size-ems - */ -/** - * Typography mixins - */ -/** - * position - * Usage: - * @include position(absolute, 10px 20px 30px 10px); - */ -/** - * vertical-center - * Vertically center any element. Needs support for CSS tranforms. - * Usage: - * @include vertical-center; - */ -/** - * Utility Mixins - * - clearfix - * - font-face - * - - * - sizing shortcuts - * - size - * - square - * - resizable - */ -/** - * Sizing shortcuts - */ -/** - * bemify [modified for Kickoff] - * https://gtihub.com/franzheidl/bemify - * Franz Heidl 2015 - * - * Usage: https://gist.github.com/mrmartineau/0cd2010bf265d712bafb - */ -/** - * Core variables - * Edit your color palette and app vars before your begin - */ -/** - * Global Color palette - * - Generic colors - * - Color scheme - * - Common colors - * - Links - * - Text selection - * -
- * - Any others.. - */ -/** - * Variables - * - Typography - * - Breakpoints - * - Paths - * - Layout & Grid - * - App-specific - */ -/** - * Typography - * - * Base sizes: - * Set this in pixels (but do not add px), - * the font-size mixin will convert to REMS - */ -/** - * Breakpoints - * There are no common breakpoints so these are just a suggestions - * You'll need to define your own breakpoints to suit your design - * Add your breakpoints to this Sass map - * Used in the Kickoff grid - */ -/** - * Path vars - */ -/** - * App-specific variables - */ -/* CSS Reset - Normalize etc */ -/** - * Kickoff reset - */ -html { - box-sizing: border-box; } - -*, *:before, *:after { - box-sizing: inherit; } - -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. - */ -html { - font-family: sans-serif; - /* 1 */ - -ms-text-size-adjust: 100%; - /* 2 */ - -webkit-text-size-adjust: 100%; - /* 2 */ } - -/** - * Remove the margin in all browsers (opinionated). - */ -body { - margin: 0; } - -/* HTML5 display definitions - ========================================================================== */ -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - /* 1 */ - display: block; } - -/** - * Add the correct display in IE 9-. - */ -audio, -canvas, -progress, -video { - display: inline-block; } - -/** - * Add the correct display in iOS 4-7. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - vertical-align: baseline; } - -/** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. - */ -template, -[hidden] { - display: none; } - -/* Links - ========================================================================== */ -/** - * Remove the gray background on active links in IE 10. - */ -a { - background-color: transparent; } - -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ -a:active, -a:hover { - outline-width: 0; } - -/* Text-level semantics - ========================================================================== */ -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ -abbr[title] { - border-bottom: none; - /* 1 */ - text-decoration: underline; - /* 2 */ - text-decoration: underline dotted; - /* 2 */ } - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ -b, -strong { - font-weight: inherit; } - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ -b, -strong { - font-weight: bolder; } - -/** - * Add the correct font style in Android 4.3-. - */ -dfn { - font-style: italic; } - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; } - -/** - * Add the correct background and color in IE 9-. - */ -mark { - background-color: #ff0; - color: #000; } - -/** - * Add the correct font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sub { - bottom: -0.25em; } - -sup { - top: -0.5em; } - -/* Embedded content - ========================================================================== */ -/** - * Remove the border on images inside links in IE 10-. - */ -img { - border-style: none; } - -/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } - -/** - * Add the correct margin in IE 8. - */ -figure { - margin: 1em 40px; } - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -/* Forms - ========================================================================== */ -/** - * Change font properties to `inherit` in all browsers (opinionated). - */ -button, -input, -select, -textarea { - font: inherit; } - -/** - * Restore the font weight unset by the previous rule. - */ -optgroup { - font-weight: bold; } - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - * 2. Show the overflow in Edge, Firefox, and IE. - */ -button, -input, -select { - /* 2 */ - overflow: visible; } - -/** - * Remove the margin in Safari. - * 1. Remove the margin in Firefox and Safari. - */ -button, -input, -select, -textarea { - /* 1 */ - margin: 0; } - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ -button, -select { - /* 1 */ - text-transform: none; } - -/** - * Change the cursor in all browsers (opinionated). - */ -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; } - -/** - * Restore the default cursor to disabled elements unset by the previous rule. - */ -[disabled] { - cursor: default; } - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS. - */ -button, -html [type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; - /* 2 */ } - -/** - * Remove the inner border and padding in Firefox. - */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } - -/** - * Restore the focus styles unset by the previous rule. - */ -button:-moz-focusring, -input:-moz-focusring { - outline: 1px dotted ButtonText; } - -/** - * Change the border, margin, and padding in all browsers (opinionated). - */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; } - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ -legend { - box-sizing: border-box; - /* 1 */ - color: inherit; - /* 2 */ - display: table; - /* 1 */ - max-width: 100%; - /* 1 */ - padding: 0; - /* 3 */ - white-space: normal; - /* 1 */ } - -/** - * Remove the default vertical scrollbar in IE. - */ -textarea { - overflow: auto; } - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ } - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; } - -/** - * Correct the odd appearance of search inputs in Chrome and Safari. - */ -[type="search"] { - -webkit-appearance: textfield; } - -/** - * Remove the inner padding and cancel buttons in Chrome on OS X and - * Safari on OS X. - */ -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * Global typography styles - * See http://trykickoff.com/demos/typography.html for more info - */ -/** - * Typography - * - Base - * - Paragraphs - * - Headings - * - Type sizes - * - Misc - * - Utilities - * - * Body font size, leadings etc have been set in _variables.scss - * Resources: - * http://www.gridlover.net/ - * http://modularscale.com/ - * http://lamb.cc/typograph/ - * - */ -html { - font-size: 18px; - -webkit-text-size-adjust: 100%; } - @media screen and (min-width: 46.875em) { - html { - font-size: 20px; } } - -body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 1rem; - line-height: 1.4; - color: #444; - -webkit-font-feature-settings: "liga","dlig", "hist"; - font-feature-settings: "liga","dlig", "hist"; - -webkit-font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; - font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; } - -/** - * Paragraphs - */ -p { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 1rem; - margin-top: 0; - margin-bottom: 28px; } - -/** - * Headings - */ -h1, h2, h3, h4, h5, h6 { - margin: 0; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: bold; - line-height: 1.1; - text-rendering: optimizelegibility; - margin-top: 0; - margin-bottom: 28px; } - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - font-weight: normal; } - -h1, .h1, .alpha { - font-size: 2rem; - margin-bottom: 56px; } - -h2, .h2, .beta { - font-size: 1.6rem; } - -h3, .h3, .gamma { - font-size: 1.25rem; } - -h4, .h4, .delta { - font-size: 1rem; } - -h5, .h5, .epsilon, -h6, .h6, .zeta { - font-size: 1rem; - margin-bottom: 0; } - -* + h1, * + .h1, * + .alpha, -* + h2, * + .h2, * + .beta, -* + h3, * + .h3, * + .gamma, -* + h4, * + .h4, * + .delta { - margin-top: 28px; } - -small { - font-size: 80%; } - -/** - * Miscellaneous - */ -strong, b { - font-weight: bold; } - -em, i { - font-style: italic; } - -abbr[title] { - border-bottom: 1px dotted #ddd; - cursor: help; } - -/** - * Blockquotes - */ -blockquote { - padding-left: 10px; - margin: 28px; - border-left: 4px solid #cccccc; } - blockquote p { - margin-bottom: 0; - font-size: 1rem; - font-weight: 300; } - blockquote small { - display: block; - color: #b3b3b3; } - blockquote small:before { - content: '\2014 \00A0'; } - -q:before, q:after, -blockquote:before, -blockquote:after { - content: ""; } - -cite { - font-style: normal; } - -dfn { - font-style: italic; } - -mark { - background: #feef6d; - padding: 2px 4px; - border-radius: 3px; } - -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -.5em; } - -sub { - bottom: -.25em; } - -samp { - font-family: Menlo, Monaco, "Courier New", monospace; } - -/** - * Utilities - */ -.text-centre, -.text-center { - text-align: center; } - -.text-left { - text-align: left; } - -.text-right { - text-align: right; } - -::-moz-selection { - color: #fff; - background: #181830; - text-shadow: none; } - -::selection { - color: #fff; - background: #181830; - text-shadow: none; } - -hr { - margin: 28px 0; - border: 0; - height: 1px; - background-color: #b3b3b3; } - -.hyphenate { - overflow-wrap: break-word; - word-wrap: break-word; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; } - -/** - * Components: - * See http://trykickoff.com/demos/components.html for more info - */ -/** - * Forms - * ================================= - * Index: - * - Associated Form Variables - * - Generic form styles - * - Form inputs and groups - * - Form field feedback states - * - Horizontal & vertical forms - * - Horizontal-specific styles - */ -/** - * Custom Checkboxes and radios - * - * IE9+ - * - * -------------------------------- - * - * Checkbox button example HTML - * - * - * - * ------------------------------- - * - * Radio button example HTML - * - * - * - * ================================= */ -.control--custom { - position: relative; - display: block; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding-left: 2.3em; } - -.control--custom--inline { - display: inline-block; - padding-right: 2em; } - -.control--custom-input { - position: absolute; - opacity: 0; - z-index: -1; } - -.control-indicator { - position: absolute; - left: 0; - display: inline-block; - width: 1.3em; - height: 1.3em; - -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); - transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); - border: 1px solid #ccc; - background-color: #ccc; - vertical-align: middle; - margin-top: 0; - box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; } - -.control--custom-input:focus ~ .control-indicator { - box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #181830; } - -.control-indicator--checkbox, -.control-indicator--tickbox { - border-radius: .2em; } - .control-indicator--checkbox:before, .control-indicator--checkbox:after, - .control-indicator--tickbox:before, - .control-indicator--tickbox:after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 90%; - display: block; - opacity: 0; - -webkit-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; } - -.control-indicator--checkbox:before, .control-indicator--checkbox:after { - top: 50%; - width: 90%; - height: 0.1em; - background-color: #f1f1f1; } - -.control-indicator--checkbox:before { - -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0); - -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0); - transform: translate(-50%, -50%) rotate(45deg) scale(0); } - -.control-indicator--checkbox:after { - -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(0); - -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(0); - transform: translate(-50%, -50%) rotate(-45deg) scale(0); } - -.control-indicator--tickbox:before { - top: 0; - -webkit-transform: translateX(-50%) rotate(45deg) scale(0); - -ms-transform: translateX(-50%) rotate(45deg) scale(0); - transform: translateX(-50%) rotate(45deg) scale(0); - border: 0.1em solid #f1f1f1; - background-color: transparent; - width: 40%; - height: 80%; - border-top: 0; - border-left: 0; } - -.control-indicator--tickbox:after { - display: none; } - -.control--custom-input:checked ~ .control-indicator--checkbox, -.control--custom-input:checked ~ .control-indicator--tickbox { - background-color: #181830; - border: 0.1em solid #181830; } - .control--custom-input:checked ~ .control-indicator--checkbox:before, .control--custom-input:checked ~ .control-indicator--checkbox:after, - .control--custom-input:checked ~ .control-indicator--tickbox:before, - .control--custom-input:checked ~ .control-indicator--tickbox:after { - opacity: 1; } - -.control--custom-input:checked ~ .control-indicator--tickbox:before, .control--custom-input:checked ~ .control-indicator--tickbox:after { - -webkit-transform: translateX(-50%) rotate(45deg) scale(1); - -ms-transform: translateX(-50%) rotate(45deg) scale(1); - transform: translateX(-50%) rotate(45deg) scale(1); } - -.control--custom-input:checked ~ .control-indicator--checkbox:before { - -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1); - -ms-transform: translate(-50%, -50%) rotate(45deg) scale(1); - transform: translate(-50%, -50%) rotate(45deg) scale(1); } - -.control--custom-input:checked ~ .control-indicator--checkbox:after { - -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1); - -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(1); - transform: translate(-50%, -50%) rotate(-45deg) scale(1); } - -.control-indicator--radio { - border-radius: 50%; } - -.control--custom-input:checked ~ .control-indicator--radio { - background-color: #f1f1f1; - border: 0.3em solid #181830; } - -/** - * Custom select element - * - * Firefox 39+, IE10+ - * - *
- * - *
- * - *
- *
- */ -.form-controlGroup-inputWrapper--select { - position: relative; - display: block; - padding: 0; - /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ } - .form-controlGroup-inputWrapper--select:after { - color: #181830; - content: "\25BC"; - font-size: .7em; - padding: 0; - position: absolute; - right: 1.2em; - top: 50%; - margin-top: -9px; - z-index: 2; - /* These hacks make the select behind the arrow clickable in some browsers */ - -ms-pointer-events: none; - pointer-events: none; - background: url(#); } - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .form-controlGroup-inputWrapper--select:after { - display: none; } } - .form-controlGroup-inputWrapper--select .form-input--select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value { - background: transparent; - color: #222; } } - -option { - font-weight: normal; } - -/** - * Custom file input - * - *
- - -
- -
-
- */ -/** - * Custom file input - */ -.form-input--file { - position: relative; - overflow: hidden; - padding-right: 120px; - text-overflow: ellipsis; - white-space: nowrap; } - -.form-input-file { - opacity: 0; - visibility: hidden; - position: absolute; - top: 0; - left: 0; } - -.form-input--file-button { - cursor: pointer; - display: inline-block; - position: absolute; - top: 0; - right: -1px; - bottom: 0; - padding: .44em 1em 0; - background-color: #d9d9d9; } - .form-input--file-button:hover { - background-color: #ccc; } - -/** - * Generic form styles - * ================================= - * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-above - * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html - * Usage: -
- -
- -
-
- */ -.form { - margin: 0 0 28px; } - -.form-fieldset { - padding: 0; - margin: 0; - border: 0; } - -.form-legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: 28px; - font-size: 1.25rem; - line-height: 1.4; - color: #444; - border: 0; - border-bottom: 1px solid #eee; - white-space: normal; } - .form-legend small { - font-size: 0.8rem; - color: #b3b3b3; } - -/** - * Form inputs and groups - */ -.form-controlGroup { - margin-top: 14px; - margin-bottom: 14px; - list-style-type: none; } - -.form-legend + .form-controlGroup { - margin-top: 28px; - -webkit-margin-top-collapse: separate; } - -.form-label { - display: block; - color: #444; - font-weight: bold; } - .form-label small { - font-weight: normal; - color: #919191; } - -.form-input { - display: block; - width: 100%; - height: 2.5em; - padding: .5em; - font-size: 1rem; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.4; - color: #444; - font-weight: normal; - vertical-align: baseline; - background-color: #fff; - border: 2px solid #ccc; - border-radius: 5px; - background-clip: padding-box; - -webkit-transition: border 200ms ease-in-out; - transition: border 200ms ease-in-out; } - .form-input:focus { - border-color: #181830; - outline: 0; - outline: thin dotted \9; } - .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - line-height: normal; - cursor: pointer; - border-radius: 0; - box-sizing: border-box; } - .form-input[type="image"] { - border: 0; } - .form-input[type="file"] { - width: auto; - height: 28px; - padding: initial; - line-height: initial; - border: initial; - background-color: #fff; - background-color: initial; } - .form-input[type="hidden"] { - display: none; } - .form-input[type="color"] { - width: 40px; - height: 40px; - overflow: hidden; - padding: 2px; } - .form-input[type="password"] { - font-family: sans-serif; } - .form-input[type="range"] { - width: 100%; } - .form-input > .radio:first-child, - .form-input > .checkbox:first-child { - padding-top: 5px; } - .form-input[disabled], .form-input[readonly] { - background-color: #e6e6e6; - border-color: #ccc; - cursor: not-allowed; } - -.form-input--textarea { - height: auto; - resize: vertical; } - -.form-input--textarea--uneditable { - width: auto; - height: auto; } - -.form-input--select { - background-color: #fff; } - .form-input--select[multiple], .form-input--select[size] { - height: auto; } - -.form-input-file { - display: inline-block; - width: 100%; - font-size: 1rem; - margin: 0; - vertical-align: middle; - line-height: 1em; } - .form-input-file:focus { - outline: none; } - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - width: auto; - cursor: pointer; - -webkit-appearance: button; } - -/** - * Checkboxes: - * ================================= - - - - * Radios: - * ================================= - - - */ -.control { - display: block; } - .control input[type="radio"], - .control input[type="checkbox"] { - vertical-align: middle; - margin-right: .5em; - margin-top: -.1em; - display: inline; - line-height: normal; } - -.control--inline { - display: inline-block; - vertical-align: middle; - margin-right: 1.5em; } - -/** - * Search input - */ -.form-input--search { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; - border-radius: 100px; } - -/** - * Form actions - */ -.form-actions { - padding: 28px 20px; - margin-top: 28px; - margin-bottom: 28px; - background-color: #f5f5f5; - border-top: 1px solid #ddd; } - .form-actions .btn { - margin-right: 10px; } - .form-actions .btn:last-child { - margin-right: 0; } - -/** - * Form validation messages - */ -.form-controlGroup .form-message { - display: none; - padding-top: 0.5em; - padding-left: 0.5em; } - -.form-actions .form-message { - padding: 0.5em; } - -/** - * Form field feedback states - */ -.has-warning { - color: #f4aa47; } - -.form-controlGroup.has-warning .form-label { - color: #f4aa47; } - -.form-controlGroup.has-warning .form-input { - color: #f4aa47; - border-color: #f4aa47; } - .form-controlGroup.has-warning .form-input:focus { - border-color: #f19417; } - -.form-controlGroup.has-warning .form-message { - display: block; - color: #f4aa47; } - -.has-error { - color: #B94A4D; } - -.form-controlGroup.has-error .form-label { - color: #B94A4D; } - -.form-controlGroup.has-error .form-input { - color: #B94A4D; - border-color: #B94A4D; } - .form-controlGroup.has-error .form-input:focus { - border-color: #963a3c; } - -.form-controlGroup.has-error .form-message { - display: block; - color: #B94A4D; } - -.has-success { - color: #16c98d; } - -.form-controlGroup.has-success .form-label { - color: #16c98d; } - -.form-controlGroup.has-success .form-input { - color: #16c98d; - border-color: #16c98d; } - .form-controlGroup.has-success .form-input:focus { - border-color: #119b6d; } - -.form-controlGroup.has-success .form-message { - display: block; - color: #16c98d; } - -.has-info { - color: #288ad6; } - -.form-controlGroup.has-info .form-label { - color: #288ad6; } - -.form-controlGroup.has-info .form-input { - color: #288ad6; - border-color: #288ad6; } - .form-controlGroup.has-info .form-input:focus { - border-color: #206eab; } - -.form-controlGroup.has-info .form-message { - display: block; - color: #288ad6; } - -/** - * Placeholder text - * ================================= - * Gets special styles; can't be bundled together though for some reason - */ -:-ms-input-placeholder { - color: #b3b3b3; } - -:-moz-placeholder { - color: #b3b3b3; } - -::-webkit-input-placeholder { - color: #b3b3b3; } - -@media screen and (min-width: 46.875em) { - /** - * Horizontal-specific styles - * ================================= - * add .form--horizontal to the
element - * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-inline - * Code: https://gist.github.com/mrmartineau/6712577#file-labels-inline-html - */ - .form--horizontal .form-controlGroup { - margin-bottom: 28px; } - .form--horizontal .form-controlGroup:after { - content: ""; - display: table; - clear: both; } - .form--horizontal .form-controlGroup .form-input--fileWrapper { - margin-left: 0; } - .form--horizontal .form-label { - float: left; - width: 140px; - padding-top: 5px; - text-align: right; } - .form--horizontal .form-controlGroup-inputWrapper { - margin-left: 160px; } - .form--horizontal .form-controlGroup-inputWrapper:first-child { - padding-left: 160px; } - .form--horizontal .form-helpBlock { - margin-top: 14px; - margin-bottom: 0; } - .form--horizontal .form-actions { - padding-left: 160px; } } - -/** - * The Kickoff Flexbox Grid - * ================================= - * Default grid classes - * Grid gutter options - * Modifier Classes (column height and cell alignment) - * Legacy fallbacks for flexbox - * Grid span classes - * Breakpoint stacking - */ -/* Import Grid helpers and mixins */ -/** - * Kickoff grid helpers - */ -/** - * Grid stacking - * Stack grids based on a given breakpoint - * - * Usage: - * .g--stack--narrow - * .g--stack--wide - */ -/** - * Gutter Calculations - * Default: percent - * Usage: gutterCalc() or gutterCalc(false) - * When show-unit is true, returns the percentage, otherwise return a decimal - */ -/** - * Grid columns width calculations - * This is where the magic of working out the column widths happens - * - * $column-span: define the width for the number of columns required - * $show-unit: Switch return value between percentage (default) and decimal - * $include-gutters: if gutters should be included in the calculations. Default = false - * $legacy-calc: if we are working out a legacy column width calculation, or not. Default = false - */ -/** - * Column width mixin - * Usage: - * @include column(2); - */ -/** - * Basic Usage: - * ================================= -
-
-
-
- */ -.g { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; } - -.g-col { - display: block; - -webkit-box-flex: 1; - -ms-flex: 1 0 0; - flex: 1 0 0; - min-width: 0; } - -/** - * Gutter calcs – applied to grid columns in our grid (direct descendants only) - * Default: pixels (can look at changing to percentage) - * Usage: gutterCalc() or gutterCalc(false) - */ -.g--gutter { - margin-left: -10px; - margin-right: -10px; } - .g--gutter > .g-col { - padding-left: 10px; - padding-right: 10px; } - -.g--gutter--scaled > .g-col { - margin-left: 2%; - margin-right: 0; } - .g--gutter--scaled > .g-col:first-child { - margin-left: 0; } - -.g--stack > .g-col { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - margin-left: 0; } - -/** - * .g--equalHeight – Equal Height Child Elements - */ -.g--equalHeight > .g-col { - display: -webkit-box; - display: -ms-flexbox; - display: flex; } - .g--equalHeight > .g-col > * { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; } - -/** - * Alignment - * Modifier classes to move our grid elements around - */ -.g--alignTop { - -webkit-box-align: start; - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; } - -.g--alignBottom { - -webkit-box-align: end; - -ms-flex-align: end; - -ms-grid-row-align: flex-end; - align-items: flex-end; } - -.g--alignRight { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.g--alignCenter { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - -.g--alignCenter--v { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; } - -/** - * Centering - * Centers an individual column, rather than the entire grid - */ -.g-col--centered { - margin: 0 auto; } - -/** - * Shrinking Content - * Shrink a .g-col down to only the space it needs (flexbox only) - */ -.g-col--shrink { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; } - -/** - * Add fallbacks for non-flexbox supporting browsers (for example, IE8/9) - */ -.no-flexbox .g { - display: block !important; } - .no-flexbox .g:after { - content: ""; - display: table; - clear: both; } - -.no-flexbox .g-col { - float: left; - min-height: 1px; - position: relative; - clear: none; - box-sizing: border-box; } - -.no-flexbox .g--stack .g-col { - width: 100%; } - -.no-flexbox .g--equalHeight > .g-col { - display: block; } - -/** - * Grid Span classes (for different breakpoints) - * - * Applied by using .g-spanx to .g-col elements, where x is the number of columns - */ -.g-span1 { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 8.3333333333% !important; } - .g-span1.g-holdWidth { - min-width: 83.3333333333pxpx; } - .g--gutter--scaled .g-span1.g-holdWidth { - min-width: 63.3333333333pxpx; } - .g--gutter--scaled .g-span1 { - -ms-flex-preferred-size: 6.5% !important; - flex-basis: 6.5% !important; - max-width: 6.5%; - margin-left: 2%; } - .no-flexbox .g-span1 { - width: 8.3333333333% !important; } - -.g-span2 { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 16.6666666667% !important; } - .g-span2.g-holdWidth { - min-width: 166.666666667pxpx; } - .g--gutter--scaled .g-span2.g-holdWidth { - min-width: 146.666666667pxpx; } - .g--gutter--scaled .g-span2 { - -ms-flex-preferred-size: 15% !important; - flex-basis: 15% !important; - max-width: 15%; - margin-left: 2%; } - .no-flexbox .g-span2 { - width: 16.6666666667% !important; } - -.g-span3 { - -ms-flex-preferred-size: 25% !important; - flex-basis: 25% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 25% !important; } - .g-span3.g-holdWidth { - min-width: 250pxpx; } - .g--gutter--scaled .g-span3.g-holdWidth { - min-width: 230pxpx; } - .g--gutter--scaled .g-span3 { - -ms-flex-preferred-size: 23.5% !important; - flex-basis: 23.5% !important; - max-width: 23.5%; - margin-left: 2%; } - .no-flexbox .g-span3 { - width: 25% !important; } - -.g-span4 { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 33.3333333333% !important; } - .g-span4.g-holdWidth { - min-width: 333.333333333pxpx; } - .g--gutter--scaled .g-span4.g-holdWidth { - min-width: 313.333333333pxpx; } - .g--gutter--scaled .g-span4 { - -ms-flex-preferred-size: 32% !important; - flex-basis: 32% !important; - max-width: 32%; - margin-left: 2%; } - .no-flexbox .g-span4 { - width: 33.3333333333% !important; } - -.g-span5 { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 41.6666666667% !important; } - .g-span5.g-holdWidth { - min-width: 416.666666667pxpx; } - .g--gutter--scaled .g-span5.g-holdWidth { - min-width: 396.666666667pxpx; } - .g--gutter--scaled .g-span5 { - -ms-flex-preferred-size: 40.5% !important; - flex-basis: 40.5% !important; - max-width: 40.5%; - margin-left: 2%; } - .no-flexbox .g-span5 { - width: 41.6666666667% !important; } - -.g-span6 { - -ms-flex-preferred-size: 50% !important; - flex-basis: 50% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 50% !important; } - .g-span6.g-holdWidth { - min-width: 500pxpx; } - .g--gutter--scaled .g-span6.g-holdWidth { - min-width: 480pxpx; } - .g--gutter--scaled .g-span6 { - -ms-flex-preferred-size: 49% !important; - flex-basis: 49% !important; - max-width: 49%; - margin-left: 2%; } - .no-flexbox .g-span6 { - width: 50% !important; } - -.g-span7 { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 58.3333333333% !important; } - .g-span7.g-holdWidth { - min-width: 583.333333333pxpx; } - .g--gutter--scaled .g-span7.g-holdWidth { - min-width: 563.333333333pxpx; } - .g--gutter--scaled .g-span7 { - -ms-flex-preferred-size: 57.5% !important; - flex-basis: 57.5% !important; - max-width: 57.5%; - margin-left: 2%; } - .no-flexbox .g-span7 { - width: 58.3333333333% !important; } - -.g-span8 { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 66.6666666667% !important; } - .g-span8.g-holdWidth { - min-width: 666.666666667pxpx; } - .g--gutter--scaled .g-span8.g-holdWidth { - min-width: 646.666666667pxpx; } - .g--gutter--scaled .g-span8 { - -ms-flex-preferred-size: 66% !important; - flex-basis: 66% !important; - max-width: 66%; - margin-left: 2%; } - .no-flexbox .g-span8 { - width: 66.6666666667% !important; } - -.g-span9 { - -ms-flex-preferred-size: 75% !important; - flex-basis: 75% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 75% !important; } - .g-span9.g-holdWidth { - min-width: 750pxpx; } - .g--gutter--scaled .g-span9.g-holdWidth { - min-width: 730pxpx; } - .g--gutter--scaled .g-span9 { - -ms-flex-preferred-size: 74.5% !important; - flex-basis: 74.5% !important; - max-width: 74.5%; - margin-left: 2%; } - .no-flexbox .g-span9 { - width: 75% !important; } - -.g-span10 { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 83.3333333333% !important; } - .g-span10.g-holdWidth { - min-width: 833.333333333pxpx; } - .g--gutter--scaled .g-span10.g-holdWidth { - min-width: 813.333333333pxpx; } - .g--gutter--scaled .g-span10 { - -ms-flex-preferred-size: 83% !important; - flex-basis: 83% !important; - max-width: 83%; - margin-left: 2%; } - .no-flexbox .g-span10 { - width: 83.3333333333% !important; } - -.g-span11 { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 91.6666666667% !important; } - .g-span11.g-holdWidth { - min-width: 916.666666667pxpx; } - .g--gutter--scaled .g-span11.g-holdWidth { - min-width: 896.666666667pxpx; } - .g--gutter--scaled .g-span11 { - -ms-flex-preferred-size: 91.5% !important; - flex-basis: 91.5% !important; - max-width: 91.5%; - margin-left: 2%; } - .no-flexbox .g-span11 { - width: 91.6666666667% !important; } - -.g-span12 { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100% !important; } - .g-span12.g-holdWidth { - min-width: 1000pxpx; } - .g--gutter--scaled .g-span12.g-holdWidth { - min-width: 980pxpx; } - .g--gutter--scaled .g-span12 { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - max-width: 100%; - margin-left: 0; } - .no-flexbox .g-span12 { - width: 100% !important; } - -@media screen and (min-width: 25em) { - .g-span1--narrow { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 8.3333333333% !important; } - .g-span1--narrow.g-holdWidth--narrow { - min-width: 83.3333333333pxpx; } - .g--gutter--scaled .g-span1--narrow.g-holdWidth--narrow { - min-width: 63.3333333333pxpx; } - .g--gutter--scaled .g-span1--narrow { - -ms-flex-preferred-size: 6.5% !important; - flex-basis: 6.5% !important; - max-width: 6.5%; - margin-left: 2%; } - .no-flexbox .g-span1--narrow { - width: 8.3333333333% !important; } - .g-span2--narrow { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 16.6666666667% !important; } - .g-span2--narrow.g-holdWidth--narrow { - min-width: 166.666666667pxpx; } - .g--gutter--scaled .g-span2--narrow.g-holdWidth--narrow { - min-width: 146.666666667pxpx; } - .g--gutter--scaled .g-span2--narrow { - -ms-flex-preferred-size: 15% !important; - flex-basis: 15% !important; - max-width: 15%; - margin-left: 2%; } - .no-flexbox .g-span2--narrow { - width: 16.6666666667% !important; } - .g-span3--narrow { - -ms-flex-preferred-size: 25% !important; - flex-basis: 25% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 25% !important; } - .g-span3--narrow.g-holdWidth--narrow { - min-width: 250pxpx; } - .g--gutter--scaled .g-span3--narrow.g-holdWidth--narrow { - min-width: 230pxpx; } - .g--gutter--scaled .g-span3--narrow { - -ms-flex-preferred-size: 23.5% !important; - flex-basis: 23.5% !important; - max-width: 23.5%; - margin-left: 2%; } - .no-flexbox .g-span3--narrow { - width: 25% !important; } - .g-span4--narrow { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 33.3333333333% !important; } - .g-span4--narrow.g-holdWidth--narrow { - min-width: 333.333333333pxpx; } - .g--gutter--scaled .g-span4--narrow.g-holdWidth--narrow { - min-width: 313.333333333pxpx; } - .g--gutter--scaled .g-span4--narrow { - -ms-flex-preferred-size: 32% !important; - flex-basis: 32% !important; - max-width: 32%; - margin-left: 2%; } - .no-flexbox .g-span4--narrow { - width: 33.3333333333% !important; } - .g-span5--narrow { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 41.6666666667% !important; } - .g-span5--narrow.g-holdWidth--narrow { - min-width: 416.666666667pxpx; } - .g--gutter--scaled .g-span5--narrow.g-holdWidth--narrow { - min-width: 396.666666667pxpx; } - .g--gutter--scaled .g-span5--narrow { - -ms-flex-preferred-size: 40.5% !important; - flex-basis: 40.5% !important; - max-width: 40.5%; - margin-left: 2%; } - .no-flexbox .g-span5--narrow { - width: 41.6666666667% !important; } - .g-span6--narrow { - -ms-flex-preferred-size: 50% !important; - flex-basis: 50% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 50% !important; } - .g-span6--narrow.g-holdWidth--narrow { - min-width: 500pxpx; } - .g--gutter--scaled .g-span6--narrow.g-holdWidth--narrow { - min-width: 480pxpx; } - .g--gutter--scaled .g-span6--narrow { - -ms-flex-preferred-size: 49% !important; - flex-basis: 49% !important; - max-width: 49%; - margin-left: 2%; } - .no-flexbox .g-span6--narrow { - width: 50% !important; } - .g-span7--narrow { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 58.3333333333% !important; } - .g-span7--narrow.g-holdWidth--narrow { - min-width: 583.333333333pxpx; } - .g--gutter--scaled .g-span7--narrow.g-holdWidth--narrow { - min-width: 563.333333333pxpx; } - .g--gutter--scaled .g-span7--narrow { - -ms-flex-preferred-size: 57.5% !important; - flex-basis: 57.5% !important; - max-width: 57.5%; - margin-left: 2%; } - .no-flexbox .g-span7--narrow { - width: 58.3333333333% !important; } - .g-span8--narrow { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 66.6666666667% !important; } - .g-span8--narrow.g-holdWidth--narrow { - min-width: 666.666666667pxpx; } - .g--gutter--scaled .g-span8--narrow.g-holdWidth--narrow { - min-width: 646.666666667pxpx; } - .g--gutter--scaled .g-span8--narrow { - -ms-flex-preferred-size: 66% !important; - flex-basis: 66% !important; - max-width: 66%; - margin-left: 2%; } - .no-flexbox .g-span8--narrow { - width: 66.6666666667% !important; } - .g-span9--narrow { - -ms-flex-preferred-size: 75% !important; - flex-basis: 75% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 75% !important; } - .g-span9--narrow.g-holdWidth--narrow { - min-width: 750pxpx; } - .g--gutter--scaled .g-span9--narrow.g-holdWidth--narrow { - min-width: 730pxpx; } - .g--gutter--scaled .g-span9--narrow { - -ms-flex-preferred-size: 74.5% !important; - flex-basis: 74.5% !important; - max-width: 74.5%; - margin-left: 2%; } - .no-flexbox .g-span9--narrow { - width: 75% !important; } - .g-span10--narrow { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 83.3333333333% !important; } - .g-span10--narrow.g-holdWidth--narrow { - min-width: 833.333333333pxpx; } - .g--gutter--scaled .g-span10--narrow.g-holdWidth--narrow { - min-width: 813.333333333pxpx; } - .g--gutter--scaled .g-span10--narrow { - -ms-flex-preferred-size: 83% !important; - flex-basis: 83% !important; - max-width: 83%; - margin-left: 2%; } - .no-flexbox .g-span10--narrow { - width: 83.3333333333% !important; } - .g-span11--narrow { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 91.6666666667% !important; } - .g-span11--narrow.g-holdWidth--narrow { - min-width: 916.666666667pxpx; } - .g--gutter--scaled .g-span11--narrow.g-holdWidth--narrow { - min-width: 896.666666667pxpx; } - .g--gutter--scaled .g-span11--narrow { - -ms-flex-preferred-size: 91.5% !important; - flex-basis: 91.5% !important; - max-width: 91.5%; - margin-left: 2%; } - .no-flexbox .g-span11--narrow { - width: 91.6666666667% !important; } - .g-span12--narrow { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100% !important; } - .g-span12--narrow.g-holdWidth--narrow { - min-width: 1000pxpx; } - .g--gutter--scaled .g-span12--narrow.g-holdWidth--narrow { - min-width: 980pxpx; } - .g--gutter--scaled .g-span12--narrow { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - max-width: 100%; - margin-left: 0; } - .no-flexbox .g-span12--narrow { - width: 100% !important; } } - -@media screen and (min-width: 46.875em) { - .g-span1--mid { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 8.3333333333% !important; } - .g-span1--mid.g-holdWidth--mid { - min-width: 83.3333333333pxpx; } - .g--gutter--scaled .g-span1--mid.g-holdWidth--mid { - min-width: 63.3333333333pxpx; } - .g--gutter--scaled .g-span1--mid { - -ms-flex-preferred-size: 6.5% !important; - flex-basis: 6.5% !important; - max-width: 6.5%; - margin-left: 2%; } - .no-flexbox .g-span1--mid { - width: 8.3333333333% !important; } - .g-span2--mid { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 16.6666666667% !important; } - .g-span2--mid.g-holdWidth--mid { - min-width: 166.666666667pxpx; } - .g--gutter--scaled .g-span2--mid.g-holdWidth--mid { - min-width: 146.666666667pxpx; } - .g--gutter--scaled .g-span2--mid { - -ms-flex-preferred-size: 15% !important; - flex-basis: 15% !important; - max-width: 15%; - margin-left: 2%; } - .no-flexbox .g-span2--mid { - width: 16.6666666667% !important; } - .g-span3--mid { - -ms-flex-preferred-size: 25% !important; - flex-basis: 25% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 25% !important; } - .g-span3--mid.g-holdWidth--mid { - min-width: 250pxpx; } - .g--gutter--scaled .g-span3--mid.g-holdWidth--mid { - min-width: 230pxpx; } - .g--gutter--scaled .g-span3--mid { - -ms-flex-preferred-size: 23.5% !important; - flex-basis: 23.5% !important; - max-width: 23.5%; - margin-left: 2%; } - .no-flexbox .g-span3--mid { - width: 25% !important; } - .g-span4--mid { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 33.3333333333% !important; } - .g-span4--mid.g-holdWidth--mid { - min-width: 333.333333333pxpx; } - .g--gutter--scaled .g-span4--mid.g-holdWidth--mid { - min-width: 313.333333333pxpx; } - .g--gutter--scaled .g-span4--mid { - -ms-flex-preferred-size: 32% !important; - flex-basis: 32% !important; - max-width: 32%; - margin-left: 2%; } - .no-flexbox .g-span4--mid { - width: 33.3333333333% !important; } - .g-span5--mid { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 41.6666666667% !important; } - .g-span5--mid.g-holdWidth--mid { - min-width: 416.666666667pxpx; } - .g--gutter--scaled .g-span5--mid.g-holdWidth--mid { - min-width: 396.666666667pxpx; } - .g--gutter--scaled .g-span5--mid { - -ms-flex-preferred-size: 40.5% !important; - flex-basis: 40.5% !important; - max-width: 40.5%; - margin-left: 2%; } - .no-flexbox .g-span5--mid { - width: 41.6666666667% !important; } - .g-span6--mid { - -ms-flex-preferred-size: 50% !important; - flex-basis: 50% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 50% !important; } - .g-span6--mid.g-holdWidth--mid { - min-width: 500pxpx; } - .g--gutter--scaled .g-span6--mid.g-holdWidth--mid { - min-width: 480pxpx; } - .g--gutter--scaled .g-span6--mid { - -ms-flex-preferred-size: 49% !important; - flex-basis: 49% !important; - max-width: 49%; - margin-left: 2%; } - .no-flexbox .g-span6--mid { - width: 50% !important; } - .g-span7--mid { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 58.3333333333% !important; } - .g-span7--mid.g-holdWidth--mid { - min-width: 583.333333333pxpx; } - .g--gutter--scaled .g-span7--mid.g-holdWidth--mid { - min-width: 563.333333333pxpx; } - .g--gutter--scaled .g-span7--mid { - -ms-flex-preferred-size: 57.5% !important; - flex-basis: 57.5% !important; - max-width: 57.5%; - margin-left: 2%; } - .no-flexbox .g-span7--mid { - width: 58.3333333333% !important; } - .g-span8--mid { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 66.6666666667% !important; } - .g-span8--mid.g-holdWidth--mid { - min-width: 666.666666667pxpx; } - .g--gutter--scaled .g-span8--mid.g-holdWidth--mid { - min-width: 646.666666667pxpx; } - .g--gutter--scaled .g-span8--mid { - -ms-flex-preferred-size: 66% !important; - flex-basis: 66% !important; - max-width: 66%; - margin-left: 2%; } - .no-flexbox .g-span8--mid { - width: 66.6666666667% !important; } - .g-span9--mid { - -ms-flex-preferred-size: 75% !important; - flex-basis: 75% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 75% !important; } - .g-span9--mid.g-holdWidth--mid { - min-width: 750pxpx; } - .g--gutter--scaled .g-span9--mid.g-holdWidth--mid { - min-width: 730pxpx; } - .g--gutter--scaled .g-span9--mid { - -ms-flex-preferred-size: 74.5% !important; - flex-basis: 74.5% !important; - max-width: 74.5%; - margin-left: 2%; } - .no-flexbox .g-span9--mid { - width: 75% !important; } - .g-span10--mid { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 83.3333333333% !important; } - .g-span10--mid.g-holdWidth--mid { - min-width: 833.333333333pxpx; } - .g--gutter--scaled .g-span10--mid.g-holdWidth--mid { - min-width: 813.333333333pxpx; } - .g--gutter--scaled .g-span10--mid { - -ms-flex-preferred-size: 83% !important; - flex-basis: 83% !important; - max-width: 83%; - margin-left: 2%; } - .no-flexbox .g-span10--mid { - width: 83.3333333333% !important; } - .g-span11--mid { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 91.6666666667% !important; } - .g-span11--mid.g-holdWidth--mid { - min-width: 916.666666667pxpx; } - .g--gutter--scaled .g-span11--mid.g-holdWidth--mid { - min-width: 896.666666667pxpx; } - .g--gutter--scaled .g-span11--mid { - -ms-flex-preferred-size: 91.5% !important; - flex-basis: 91.5% !important; - max-width: 91.5%; - margin-left: 2%; } - .no-flexbox .g-span11--mid { - width: 91.6666666667% !important; } - .g-span12--mid { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100% !important; } - .g-span12--mid.g-holdWidth--mid { - min-width: 1000pxpx; } - .g--gutter--scaled .g-span12--mid.g-holdWidth--mid { - min-width: 980pxpx; } - .g--gutter--scaled .g-span12--mid { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - max-width: 100%; - margin-left: 0; } - .no-flexbox .g-span12--mid { - width: 100% !important; } } - -@media screen and (min-width: 62.5em) { - .g-span1--wide { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 8.3333333333% !important; } - .g-span1--wide.g-holdWidth--wide { - min-width: 83.3333333333pxpx; } - .g--gutter--scaled .g-span1--wide.g-holdWidth--wide { - min-width: 63.3333333333pxpx; } - .g--gutter--scaled .g-span1--wide { - -ms-flex-preferred-size: 6.5% !important; - flex-basis: 6.5% !important; - max-width: 6.5%; - margin-left: 2%; } - .no-flexbox .g-span1--wide { - width: 8.3333333333% !important; } - .g-span2--wide { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 16.6666666667% !important; } - .g-span2--wide.g-holdWidth--wide { - min-width: 166.666666667pxpx; } - .g--gutter--scaled .g-span2--wide.g-holdWidth--wide { - min-width: 146.666666667pxpx; } - .g--gutter--scaled .g-span2--wide { - -ms-flex-preferred-size: 15% !important; - flex-basis: 15% !important; - max-width: 15%; - margin-left: 2%; } - .no-flexbox .g-span2--wide { - width: 16.6666666667% !important; } - .g-span3--wide { - -ms-flex-preferred-size: 25% !important; - flex-basis: 25% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 25% !important; } - .g-span3--wide.g-holdWidth--wide { - min-width: 250pxpx; } - .g--gutter--scaled .g-span3--wide.g-holdWidth--wide { - min-width: 230pxpx; } - .g--gutter--scaled .g-span3--wide { - -ms-flex-preferred-size: 23.5% !important; - flex-basis: 23.5% !important; - max-width: 23.5%; - margin-left: 2%; } - .no-flexbox .g-span3--wide { - width: 25% !important; } - .g-span4--wide { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 33.3333333333% !important; } - .g-span4--wide.g-holdWidth--wide { - min-width: 333.333333333pxpx; } - .g--gutter--scaled .g-span4--wide.g-holdWidth--wide { - min-width: 313.333333333pxpx; } - .g--gutter--scaled .g-span4--wide { - -ms-flex-preferred-size: 32% !important; - flex-basis: 32% !important; - max-width: 32%; - margin-left: 2%; } - .no-flexbox .g-span4--wide { - width: 33.3333333333% !important; } - .g-span5--wide { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 41.6666666667% !important; } - .g-span5--wide.g-holdWidth--wide { - min-width: 416.666666667pxpx; } - .g--gutter--scaled .g-span5--wide.g-holdWidth--wide { - min-width: 396.666666667pxpx; } - .g--gutter--scaled .g-span5--wide { - -ms-flex-preferred-size: 40.5% !important; - flex-basis: 40.5% !important; - max-width: 40.5%; - margin-left: 2%; } - .no-flexbox .g-span5--wide { - width: 41.6666666667% !important; } - .g-span6--wide { - -ms-flex-preferred-size: 50% !important; - flex-basis: 50% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 50% !important; } - .g-span6--wide.g-holdWidth--wide { - min-width: 500pxpx; } - .g--gutter--scaled .g-span6--wide.g-holdWidth--wide { - min-width: 480pxpx; } - .g--gutter--scaled .g-span6--wide { - -ms-flex-preferred-size: 49% !important; - flex-basis: 49% !important; - max-width: 49%; - margin-left: 2%; } - .no-flexbox .g-span6--wide { - width: 50% !important; } - .g-span7--wide { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 58.3333333333% !important; } - .g-span7--wide.g-holdWidth--wide { - min-width: 583.333333333pxpx; } - .g--gutter--scaled .g-span7--wide.g-holdWidth--wide { - min-width: 563.333333333pxpx; } - .g--gutter--scaled .g-span7--wide { - -ms-flex-preferred-size: 57.5% !important; - flex-basis: 57.5% !important; - max-width: 57.5%; - margin-left: 2%; } - .no-flexbox .g-span7--wide { - width: 58.3333333333% !important; } - .g-span8--wide { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 66.6666666667% !important; } - .g-span8--wide.g-holdWidth--wide { - min-width: 666.666666667pxpx; } - .g--gutter--scaled .g-span8--wide.g-holdWidth--wide { - min-width: 646.666666667pxpx; } - .g--gutter--scaled .g-span8--wide { - -ms-flex-preferred-size: 66% !important; - flex-basis: 66% !important; - max-width: 66%; - margin-left: 2%; } - .no-flexbox .g-span8--wide { - width: 66.6666666667% !important; } - .g-span9--wide { - -ms-flex-preferred-size: 75% !important; - flex-basis: 75% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 75% !important; } - .g-span9--wide.g-holdWidth--wide { - min-width: 750pxpx; } - .g--gutter--scaled .g-span9--wide.g-holdWidth--wide { - min-width: 730pxpx; } - .g--gutter--scaled .g-span9--wide { - -ms-flex-preferred-size: 74.5% !important; - flex-basis: 74.5% !important; - max-width: 74.5%; - margin-left: 2%; } - .no-flexbox .g-span9--wide { - width: 75% !important; } - .g-span10--wide { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 83.3333333333% !important; } - .g-span10--wide.g-holdWidth--wide { - min-width: 833.333333333pxpx; } - .g--gutter--scaled .g-span10--wide.g-holdWidth--wide { - min-width: 813.333333333pxpx; } - .g--gutter--scaled .g-span10--wide { - -ms-flex-preferred-size: 83% !important; - flex-basis: 83% !important; - max-width: 83%; - margin-left: 2%; } - .no-flexbox .g-span10--wide { - width: 83.3333333333% !important; } - .g-span11--wide { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 91.6666666667% !important; } - .g-span11--wide.g-holdWidth--wide { - min-width: 916.666666667pxpx; } - .g--gutter--scaled .g-span11--wide.g-holdWidth--wide { - min-width: 896.666666667pxpx; } - .g--gutter--scaled .g-span11--wide { - -ms-flex-preferred-size: 91.5% !important; - flex-basis: 91.5% !important; - max-width: 91.5%; - margin-left: 2%; } - .no-flexbox .g-span11--wide { - width: 91.6666666667% !important; } - .g-span12--wide { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100% !important; } - .g-span12--wide.g-holdWidth--wide { - min-width: 1000pxpx; } - .g--gutter--scaled .g-span12--wide.g-holdWidth--wide { - min-width: 980pxpx; } - .g--gutter--scaled .g-span12--wide { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - max-width: 100%; - margin-left: 0; } - .no-flexbox .g-span12--wide { - width: 100% !important; } } - -@media screen and (min-width: 78.125em) { - .g-span1--huge { - -ms-flex-preferred-size: 8.3333333333% !important; - flex-basis: 8.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 8.3333333333% !important; } - .g-span1--huge.g-holdWidth--huge { - min-width: 83.3333333333pxpx; } - .g--gutter--scaled .g-span1--huge.g-holdWidth--huge { - min-width: 63.3333333333pxpx; } - .g--gutter--scaled .g-span1--huge { - -ms-flex-preferred-size: 6.5% !important; - flex-basis: 6.5% !important; - max-width: 6.5%; - margin-left: 2%; } - .no-flexbox .g-span1--huge { - width: 8.3333333333% !important; } - .g-span2--huge { - -ms-flex-preferred-size: 16.6666666667% !important; - flex-basis: 16.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 16.6666666667% !important; } - .g-span2--huge.g-holdWidth--huge { - min-width: 166.666666667pxpx; } - .g--gutter--scaled .g-span2--huge.g-holdWidth--huge { - min-width: 146.666666667pxpx; } - .g--gutter--scaled .g-span2--huge { - -ms-flex-preferred-size: 15% !important; - flex-basis: 15% !important; - max-width: 15%; - margin-left: 2%; } - .no-flexbox .g-span2--huge { - width: 16.6666666667% !important; } - .g-span3--huge { - -ms-flex-preferred-size: 25% !important; - flex-basis: 25% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 25% !important; } - .g-span3--huge.g-holdWidth--huge { - min-width: 250pxpx; } - .g--gutter--scaled .g-span3--huge.g-holdWidth--huge { - min-width: 230pxpx; } - .g--gutter--scaled .g-span3--huge { - -ms-flex-preferred-size: 23.5% !important; - flex-basis: 23.5% !important; - max-width: 23.5%; - margin-left: 2%; } - .no-flexbox .g-span3--huge { - width: 25% !important; } - .g-span4--huge { - -ms-flex-preferred-size: 33.3333333333% !important; - flex-basis: 33.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 33.3333333333% !important; } - .g-span4--huge.g-holdWidth--huge { - min-width: 333.333333333pxpx; } - .g--gutter--scaled .g-span4--huge.g-holdWidth--huge { - min-width: 313.333333333pxpx; } - .g--gutter--scaled .g-span4--huge { - -ms-flex-preferred-size: 32% !important; - flex-basis: 32% !important; - max-width: 32%; - margin-left: 2%; } - .no-flexbox .g-span4--huge { - width: 33.3333333333% !important; } - .g-span5--huge { - -ms-flex-preferred-size: 41.6666666667% !important; - flex-basis: 41.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 41.6666666667% !important; } - .g-span5--huge.g-holdWidth--huge { - min-width: 416.666666667pxpx; } - .g--gutter--scaled .g-span5--huge.g-holdWidth--huge { - min-width: 396.666666667pxpx; } - .g--gutter--scaled .g-span5--huge { - -ms-flex-preferred-size: 40.5% !important; - flex-basis: 40.5% !important; - max-width: 40.5%; - margin-left: 2%; } - .no-flexbox .g-span5--huge { - width: 41.6666666667% !important; } - .g-span6--huge { - -ms-flex-preferred-size: 50% !important; - flex-basis: 50% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 50% !important; } - .g-span6--huge.g-holdWidth--huge { - min-width: 500pxpx; } - .g--gutter--scaled .g-span6--huge.g-holdWidth--huge { - min-width: 480pxpx; } - .g--gutter--scaled .g-span6--huge { - -ms-flex-preferred-size: 49% !important; - flex-basis: 49% !important; - max-width: 49%; - margin-left: 2%; } - .no-flexbox .g-span6--huge { - width: 50% !important; } - .g-span7--huge { - -ms-flex-preferred-size: 58.3333333333% !important; - flex-basis: 58.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 58.3333333333% !important; } - .g-span7--huge.g-holdWidth--huge { - min-width: 583.333333333pxpx; } - .g--gutter--scaled .g-span7--huge.g-holdWidth--huge { - min-width: 563.333333333pxpx; } - .g--gutter--scaled .g-span7--huge { - -ms-flex-preferred-size: 57.5% !important; - flex-basis: 57.5% !important; - max-width: 57.5%; - margin-left: 2%; } - .no-flexbox .g-span7--huge { - width: 58.3333333333% !important; } - .g-span8--huge { - -ms-flex-preferred-size: 66.6666666667% !important; - flex-basis: 66.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 66.6666666667% !important; } - .g-span8--huge.g-holdWidth--huge { - min-width: 666.666666667pxpx; } - .g--gutter--scaled .g-span8--huge.g-holdWidth--huge { - min-width: 646.666666667pxpx; } - .g--gutter--scaled .g-span8--huge { - -ms-flex-preferred-size: 66% !important; - flex-basis: 66% !important; - max-width: 66%; - margin-left: 2%; } - .no-flexbox .g-span8--huge { - width: 66.6666666667% !important; } - .g-span9--huge { - -ms-flex-preferred-size: 75% !important; - flex-basis: 75% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 75% !important; } - .g-span9--huge.g-holdWidth--huge { - min-width: 750pxpx; } - .g--gutter--scaled .g-span9--huge.g-holdWidth--huge { - min-width: 730pxpx; } - .g--gutter--scaled .g-span9--huge { - -ms-flex-preferred-size: 74.5% !important; - flex-basis: 74.5% !important; - max-width: 74.5%; - margin-left: 2%; } - .no-flexbox .g-span9--huge { - width: 75% !important; } - .g-span10--huge { - -ms-flex-preferred-size: 83.3333333333% !important; - flex-basis: 83.3333333333% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 83.3333333333% !important; } - .g-span10--huge.g-holdWidth--huge { - min-width: 833.333333333pxpx; } - .g--gutter--scaled .g-span10--huge.g-holdWidth--huge { - min-width: 813.333333333pxpx; } - .g--gutter--scaled .g-span10--huge { - -ms-flex-preferred-size: 83% !important; - flex-basis: 83% !important; - max-width: 83%; - margin-left: 2%; } - .no-flexbox .g-span10--huge { - width: 83.3333333333% !important; } - .g-span11--huge { - -ms-flex-preferred-size: 91.6666666667% !important; - flex-basis: 91.6666666667% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 91.6666666667% !important; } - .g-span11--huge.g-holdWidth--huge { - min-width: 916.666666667pxpx; } - .g--gutter--scaled .g-span11--huge.g-holdWidth--huge { - min-width: 896.666666667pxpx; } - .g--gutter--scaled .g-span11--huge { - -ms-flex-preferred-size: 91.5% !important; - flex-basis: 91.5% !important; - max-width: 91.5%; - margin-left: 2%; } - .no-flexbox .g-span11--huge { - width: 91.6666666667% !important; } - .g-span12--huge { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100% !important; } - .g-span12--huge.g-holdWidth--huge { - min-width: 1000pxpx; } - .g--gutter--scaled .g-span12--huge.g-holdWidth--huge { - min-width: 980pxpx; } - .g--gutter--scaled .g-span12--huge { - -ms-flex-preferred-size: 100% !important; - flex-basis: 100% !important; - max-width: 100%; - margin-left: 0; } - .no-flexbox .g-span12--huge { - width: 100% !important; } } - -@media screen and (max-width: 25em) { - .g--stack--narrow { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--narrow > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--narrow > .g-col { - width: 100% !important; } } - -@media screen and (max-width: 46.875em) { - .g--stack--mid { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--mid > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--mid > .g-col { - width: 100% !important; } } - -@media screen and (max-width: 62.5em) { - .g--stack--wide { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--wide > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--wide > .g-col { - width: 100% !important; } } - -@media screen and (max-width: 78.125em) { - .g--stack--huge { - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; } - .g--stack--huge > .g-col { - -ms-flex-preferred-size: auto !important; - flex-basis: auto !important; - max-width: 100% !important; - margin-left: 0; } - .no-flexbox .g--stack--huge > .g-col { - width: 100% !important; } } - -/** - * Links - */ -a { - -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); - transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); } - a, a:link { - color: #288ad6; - text-decoration: none; } - a:visited { - color: #288ad6; - text-decoration: none; } - a:hover, a:focus { - color: #185380; } - a:active { - color: #185380; } - -/** - * Buttons - * ================================= - * Index: - * - Associated Button Variables - * - Base button styling - * – Button Modifiers - * – btn--primary - * – btn--block - */ -/** - * Define associated Button variables - */ -/** - * Base button styles – Based on csswizardry.com/beautons - * - * 1. Allow us to better style box model properties. - * 2. Line different sized buttons up a little nicer. - * 3. Stop buttons wrapping and looking broken. - * 4. Make buttons inherit font styles. - * 5. Force all elements using beautons to appear clickable. - * 6. Normalise box model styles. - * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then - * there is 1em of space above and below that text. We therefore apply 1em - * of space to the left and right, as padding, to keep consistent spacing. - * 8. Fixes odd inner spacing in IE7. - * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion. - *10. Prevents from inheriting default anchor styles. - */ -.btn { - display: inline-block; - /* [1] */ - vertical-align: middle; - /* [2] */ - white-space: nowrap; - /* [3] */ - font-family: inherit; - /* [4] */ - font-size: 100%; - /* [4] */ - cursor: pointer; - /* [5] */ - border: none; - /* [6] */ - margin: 0; - /* [6] */ - padding-top: 0; - /* [6] */ - padding-bottom: 0; - /* [6] */ - line-height: 2.5; - /* [7] */ - height: 2.5em; - /* [7] */ - padding-right: 1.5em; - /* [7] */ - padding-left: 1.5em; - /* [7] */ - overflow: visible; - /* [8] */ - text-align: center; - background-color: #95a5a6; - border-radius: 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; } - .btn, .btn:link, .btn:visited { - color: #fff; } - .btn:hover, .btn:active, .btn:focus { - background-color: #798d8f; } - .btn, .btn:hover, .btn:active, .btn:focus, .btn:visited { - text-decoration: none; } - .btn:active, .btn:focus { - outline: none; } - .btn.disabled, .btn[disabled] { - cursor: default; - background-image: none; - opacity: .65; } - -.btn--primary { - background-color: #288ad6; } - .btn--primary, .btn--primary:link, .btn--primary:visited { - color: #fff; } - .btn--primary:hover, .btn--primary:active, .btn--primary:focus { - background-color: #206eab; } - -.btn--block { - display: block; - width: 100%; - padding-left: 0; - padding-right: 0; } - .btn--block + .btn--block { - margin-top: 10px; } - -input[type="submit"].btn--block, -input[type="reset"].btn--block, -input[type="button"].btn--block { - width: 100%; } - -/** - * Lists - * - (Un)ordered lists - * - Unstyled lists - * - Definition lists - * - Centred lists - * - Floated lists - */ -ul { - list-style-type: disc; } - -ol { - list-style-type: decimal; } - -ul, ol { - padding: 0; - margin: 0 0 28px 28px; } - ul ul, - ul ol, ol ul, - ol ol { - margin-left: 56px; } - ul ul, ol ul { - list-style-type: circle; } - ul ul ul, ol ul ul { - list-style-type: square; } - ul ol, ol ol { - list-style-type: upper-roman; } - ul ol ol, ol ol ol { - list-style-type: lower-roman; } - ul ul, ul ol, ol ul, ol ol { - margin-bottom: 0; } - -/** - * Unstyled lists - */ -.unstyled { - margin: 0; - padding: 0; - list-style: none; - list-style-image: none; } - -/** - * Definition lists - */ -dl { - margin-bottom: 28px; } - -dt { - font-weight: bold; } - -dd { - margin-left: 28px; } - -/** - * Centred lists - * - * Usage: - - */ -.l-list--centred, .l-list--centered { - text-align: center; } - .l-list--centred li, .l-list--centered li { - display: inline; } - -/** - * Floated lists - * Usage: - - */ -.l-list--floated:after { - content: ""; - display: table; - clear: both; } - -.l-list--floated li { - float: left; - display: inline-block; } - -/** - * Embedded content - */ -img { - font-style: italic; - color: #c00; - border: 0; - -ms-interpolation-mode: bicubic; } - img.img--left { - margin: 0 20px 0 0; } - img.img--right { - margin: 0 0 0 20px; } - -svg:not(:root) { - overflow: hidden; } - -img, object, embed, video { - max-width: 100%; } - -/** - * Remove the gap between audio, canvas, iframes, - * images, videos and the bottom of their containers: - * https://github.com/h5bp/html5-boilerplate/issues/440 - */ -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; } - -/** - * Media Object - * - * Place any image- and text-like content side-by-side, as per: - * http://csswizardry.com/2013/05/the-flag-object/ - * - * +---------+ - * | | ~~~~ ~~~~~~~~~~~ - * | | ~~~~~~~ ~~~~~ ~~ - * | | ~~~~~~~~~~~~ - * +---------+ - * - * Markup: -
-
- -
-
-

Lorem ipsum dolor sit amet.

-
-
- */ -.media { - display: table; - width: 100%; } - -.media-img, -.media-body { - display: table-cell; - vertical-align: middle; } - .media--top .media-img, .media--top - .media-body { - vertical-align: top; } - .media--bottom .media-img, .media--bottom - .media-body { - vertical-align: bottom; } - -.media-body { - width: 100%; } - -.media-img { - padding-right: 10px; } - .media-img > img { - display: block; - max-width: none; } - .media--rev .media-img { - padding-right: 0; - padding-left: 10px; } - -@media screen and (max-width: 46.875em) { - .media--stackOnSkinny .media-img, - .media--stackOnSkinny .media-body { - display: block; } } - -@media screen and (min-width: 46.875em) { - .media--stackOnWide .media-img, - .media--stackOnWide .media-body { - display: block; } } - -/** - * Fluid width video - * - 16:9 aspect ratio by default - * Usage: - *