├── media └── logo.png ├── site ├── assets │ ├── .DS_Store │ ├── favicon.ico │ ├── images │ │ ├── favicon.png │ │ ├── hnpwa-logo.png │ │ ├── vuehn-mobile.png │ │ ├── polymer-mobile.png │ │ ├── reacthn-mobile.png │ │ ├── angular2hn-mobile.png │ │ ├── preacthn-mobile.png │ │ ├── sveltehn-mobile.png │ │ ├── viperhtml-mobile.png │ │ └── reacthn-kristofer-mobile.png │ ├── styles │ │ └── main.scss │ └── manifest.json ├── service-acc.json.gpg ├── .gitignore ├── init.go ├── _contributors │ ├── dan.txt │ ├── jonny.txt │ ├── evan.txt │ ├── steve.txt │ ├── addy.txt │ ├── rich.txt │ ├── kevin.txt │ ├── andrea.txt │ ├── chris.txt │ ├── houssein.txt │ └── kristofer.txt ├── index.md ├── sw-precache-config.js ├── _includes │ ├── service-worker-register.html │ ├── google-analytics.html │ ├── header.html │ ├── github-corner.svg │ ├── footer.html │ ├── head.html │ └── implementation.html ├── _layouts │ ├── default.html │ └── home.html ├── package.json ├── app.yaml ├── Gemfile ├── _apps │ ├── svelte-hacker-news.txt │ ├── viper-news.txt │ ├── angular-hn.txt │ ├── vue-hacker-news.txt │ ├── react-hn-kristofer.txt │ ├── preact-hn.txt │ ├── react-hn.txt │ └── polymer-hn.txt ├── Gemfile.lock ├── _config.yml └── _sass │ ├── extra.scss │ └── tachyons.scss ├── .travis.yml ├── CONTRIBUTING.md └── README.md /media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/media/logo.png -------------------------------------------------------------------------------- /site/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/.DS_Store -------------------------------------------------------------------------------- /site/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/favicon.ico -------------------------------------------------------------------------------- /site/service-acc.json.gpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/service-acc.json.gpg -------------------------------------------------------------------------------- /site/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | service-acc.json 5 | service-worker.js 6 | node_modules 7 | -------------------------------------------------------------------------------- /site/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/favicon.png -------------------------------------------------------------------------------- /site/assets/images/hnpwa-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/hnpwa-logo.png -------------------------------------------------------------------------------- /site/assets/images/vuehn-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/vuehn-mobile.png -------------------------------------------------------------------------------- /site/assets/images/polymer-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/polymer-mobile.png -------------------------------------------------------------------------------- /site/assets/images/reacthn-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/reacthn-mobile.png -------------------------------------------------------------------------------- /site/init.go: -------------------------------------------------------------------------------- 1 | // Included to enable deployment to Google App Engine 2 | package hello 3 | 4 | import ( 5 | ) 6 | 7 | func init() { 8 | } -------------------------------------------------------------------------------- /site/assets/images/angular2hn-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/angular2hn-mobile.png -------------------------------------------------------------------------------- /site/assets/images/preacthn-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/preacthn-mobile.png -------------------------------------------------------------------------------- /site/assets/images/sveltehn-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/sveltehn-mobile.png -------------------------------------------------------------------------------- /site/assets/images/viperhtml-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/viperhtml-mobile.png -------------------------------------------------------------------------------- /site/_contributors/dan.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 8 3 | name: 'Dan' 4 | image: https://github.com/azakus.png 5 | link: https://github.com/azakus 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/jonny.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 2 3 | name: 'Jonny' 4 | image: https://github.com/insin.png 5 | link: https://github.com/insin 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/evan.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 5 3 | name: 'Evan' 4 | image: https://github.com/yyx990803.png 5 | link: https://github.com/yyx990803 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/steve.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 10 3 | name: 'Steve' 4 | image: https://github.com/sorvell.png 5 | link: https://github.com/sorvell 6 | --- 7 | -------------------------------------------------------------------------------- /site/assets/images/reacthn-kristofer-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/hacker-news-pwas/master/site/assets/images/reacthn-kristofer-mobile.png -------------------------------------------------------------------------------- /site/_contributors/addy.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 1 3 | name: 'Addy' 4 | image: https://github.com/addyosmani.png 5 | link: https://github.com/addyosmani 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/rich.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 4 3 | name: 'Rich' 4 | image: https://github.com/Rich-Harris.png 5 | link: https://github.com/Rich-Harris 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/kevin.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 9 3 | name: 'Kevin' 4 | image: https://github.com/kevinpschaaf.png 5 | link: https://github.com/kevinpschaaf 6 | --- 7 | -------------------------------------------------------------------------------- /site/assets/styles/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | 5 | @import "tachyons"; 6 | @import "extra"; 7 | -------------------------------------------------------------------------------- /site/_contributors/andrea.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 7 3 | name: 'Andrea' 4 | image: https://github.com/WebReflection.png 5 | link: https://github.com/WebReflection 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/chris.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 11 3 | name: 'Chris' 4 | image: https://github.com/chrisdwheatley.png 5 | link: https://github.com/chrisdwheatley 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/houssein.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 6 3 | name: 'Houssein' 4 | image: https://github.com/housseindjirdeh.png 5 | link: https://github.com/housseindjirdeh 6 | --- 7 | -------------------------------------------------------------------------------- /site/_contributors/kristofer.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 3 3 | name: 'Kristofer' 4 | image: https://github.com/kristoferbaxter.png 5 | link: https://github.com/kristoferbaxter 6 | --- 7 | -------------------------------------------------------------------------------- /site/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # You don't need to edit this file, it's empty on purpose. 3 | # Edit theme's home layout instead if you wanna make some changes 4 | layout: home 5 | --- 6 | -------------------------------------------------------------------------------- /site/sw-precache-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | staticFileGlobs: [ 3 | "_site/**/*.html", 4 | "_site/assets/**/*" 5 | ], 6 | stripPrefix: '_site/', 7 | runtimeCaching: [{ 8 | urlPattern: /^https:\/\/github.com\/(.*).png/, 9 | handler: 'cacheFirst', 10 | options: { 11 | cache: { 12 | name: 'contributor-headshots' 13 | } 14 | } 15 | }] 16 | }; 17 | -------------------------------------------------------------------------------- /site/_includes/service-worker-register.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /site/assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Hacker News PWA", 3 | "short_name": "HN PWA", 4 | "description": "Hacker News readers as Progressive Web Apps", 5 | "theme_color": "#F4751E", 6 | "background_color": "#FFFFFF", 7 | "start_url": "/", 8 | "display": "standalone", 9 | "icons": [ 10 | { 11 | "src": "/assets/images/favicon.png", 12 | "type": "image/png", 13 | "sizes": "512x512" 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /site/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 |
11 |
12 | {{ content }} 13 |
14 |
15 | 16 | {% include footer.html %} 17 | 18 | {% include service-worker-register.html %} 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /site/_includes/google-analytics.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hacker-news-pwas", 3 | "description": "Hacker News readers as Progressive Web Apps", 4 | "scripts": { 5 | "build": "JEKYLL_ENV=production bundle exec jekyll build", 6 | "dev": "bundle exec jekyll serve", 7 | "dev-sw": "npm run build && sw-precache --config=sw-precache-config.js && npm run dev", 8 | "precache": "sw-precache --config=sw-precache-config.js --root=_site --verbose" 9 | }, 10 | "devDependencies": { 11 | "sw-precache": "^5.1.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /site/_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | HN PWA 4 |

Hacker News readers as Progressive Web Apps

5 |
6 | 7 | 8 | {% include github-corner.svg %} 9 | 10 |
11 | -------------------------------------------------------------------------------- /site/_includes/github-corner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /site/app.yaml: -------------------------------------------------------------------------------- 1 | --- 2 | runtime: go 3 | api_version: go1 4 | default_expiration: 300s 5 | 6 | handlers: 7 | - url: / 8 | static_files: _site/index.html 9 | upload: _site/index\.html 10 | http_headers: 11 | X-UA-Compatible: "IE=edge" 12 | 13 | - url: /(.*) 14 | static_files: _site/\1 15 | upload: _site/(.*) 16 | 17 | skip_files: 18 | - ^_apps 19 | - ^_contributors 20 | - ^_includes 21 | - ^_layouts 22 | - ^_sass 23 | - ^assets 24 | - ^node_modules 25 | - ^_config\.yml$ 26 | - ^Gemfile.* 27 | - ^package\.json$ 28 | - ^sw-precache-config\.js$ 29 | - ^(.*/)?.*\.md$ 30 | - ^(.*/)?.*\.gpg$ 31 | 32 | - ^(.*/)?#.*#$ 33 | - ^(.*/)?.*~$ 34 | - ^(.*/)?.*\.py[co]$ 35 | - ^(.*/)?.*/RCS/.*$ 36 | - ^(.*/)?\..*$ 37 | -------------------------------------------------------------------------------- /site/_includes/footer.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /site/Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | ruby RUBY_VERSION 3 | 4 | # Hello! This is where you manage which Jekyll version is used to run. 5 | # When you want to use a different version, change it below, save the 6 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so: 7 | # 8 | # bundle exec jekyll serve 9 | # 10 | # This will help ensure the proper Jekyll version is running. 11 | # Happy Jekylling! 12 | gem "jekyll", "3.3.1" 13 | 14 | # This is the default theme for new Jekyll sites. You may change this to anything you like. 15 | gem "minima", "~> 2.0" 16 | 17 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and 18 | # uncomment the line below. To upgrade, run `bundle update github-pages`. 19 | # gem "github-pages", group: :jekyll_plugins 20 | 21 | # If you have any plugins, put them here! 22 | group :jekyll_plugins do 23 | gem "jekyll-feed", "~> 0.6" 24 | end 25 | -------------------------------------------------------------------------------- /site/_apps/svelte-hacker-news.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 4 3 | title: 'Svelte Hacker News' 4 | github-title: 'sveltejs/svelte-hackernews' 5 | libraries: 6 | - name: 'Svelte' 7 | module-bundling: 'Rollup' 8 | service-worker: 'Application Shell + data caching' 9 | server-side-rendering: 'Yes' 10 | api: 'Hacker News Firebase API' 11 | hosting: 'Now' 12 | authors: 13 | - name: 'Rich' 14 | lighthouse: '93/100' 15 | interactive-em: '3.6s' 16 | interactive-faster-3g: '2.3s' 17 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170506_9H_40a4c53f3f07b983e44feb518271d8a7&run=3 18 | wpt-em-link: https://www.webpagetest.org/result/170506_CY_60f3658fb6ca1c3c8426feccc631bfe8/ 19 | wpt-faster-3g-link: https://www.webpagetest.org/result/170506_9H_40a4c53f3f07b983e44feb518271d8a7/ 20 | image: /assets/images/sveltehn-mobile.png 21 | app-link: https://svelte-hn.now.sh/ 22 | github-link: https://github.com/sveltejs/svelte-hackernews 23 | framework-link: https://svelte.technology/ 24 | --- 25 | -------------------------------------------------------------------------------- /site/_apps/viper-news.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 7 3 | title: 'Viper-news' 4 | github-title: 'WebReflection/viper-news' 5 | libraries: 6 | - name: 'viperHTML' 7 | module-bundling: 'Browserify' 8 | service-worker: 'Application Shell + data caching' 9 | perfomance-patterns: 'Asynchronous Partial Outputs' 10 | server-side-rendering: 'Yes' 11 | api: 'Hacker News Firebase API' 12 | hosting: 'Google App Engine' 13 | authors: 14 | - name: 'Andrea' 15 | lighthouse: '93/100' 16 | interactive-em: '3.1s' 17 | interactive-faster-3g: '2.0s' 18 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170511_7Q_15882b2c52ed51c614ec707736e52940&run=3 19 | wpt-em-link: https://www.webpagetest.org/result/170511_AW_b2e2360d4207831ece22ab4210ab9444/ 20 | wpt-faster-3g-link: https://www.webpagetest.org/result/170511_7Q_15882b2c52ed51c614ec707736e52940/ 21 | image: /assets/images/viperhtml-mobile.png 22 | app-link: https://viperhtml-164315.appspot.com/ 23 | github-link: https://github.com/WebReflection/viper-news 24 | framework-link: https://github.com/WebReflection/viperHTML 25 | --- 26 | -------------------------------------------------------------------------------- /site/_apps/angular-hn.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 6 3 | title: 'Angular HN' 4 | github-title: 'housseindjirdeh/angular2-hn' 5 | libraries: 6 | - name: 'Angular' 7 | scaffolding: 'Angular CLI' 8 | module-bundling: 'Webpack' 9 | service-worker: 'Application Shell + data caching with sw-precache' 10 | perfomance-patterns: 'Lazy loaded modules' 11 | server-side-rendering: 'None' 12 | api: 'Node-hnapi (unofficial)' 13 | hosting: 'Firebase' 14 | authors: 15 | - name: 'Houssein' 16 | lighthouse: '87/100' 17 | interactive-em: '6.1s' 18 | interactive-faster-3g: '4.2s' 19 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170511_K9_dc8782ce30bfee7e9e5744736d44cd26&run=3 20 | wpt-em-link: https://www.webpagetest.org/result/170511_G4_45d46ba11f34aedeb022f60e4f77adbe/ 21 | wpt-faster-3g-link: https://www.webpagetest.org/result/170511_K9_dc8782ce30bfee7e9e5744736d44cd26/ 22 | image: /assets/images/angular2hn-mobile.png 23 | app-link: https://angular2-hn.firebaseapp.com/ 24 | github-link: https://github.com/housseindjirdeh/angular2-hn 25 | framework-link: https://angular.io/ 26 | --- 27 | -------------------------------------------------------------------------------- /site/_apps/vue-hacker-news.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 5 3 | title: 'Vue Hacker News 2.0' 4 | github-title: 'vuejs/vue-hackernews-2.0' 5 | libraries: 6 | - name: 'Vue' 7 | - name: 'vue-router' 8 | - name: 'Vuex' 9 | module-bundling: 'Webpack' 10 | service-worker: 'Application Shell + data caching with SWPrecachePlugin' 11 | perfomance-patterns: 'Server-side data pre-fetching, preload/prefetch resources' 12 | server-side-rendering: 'Yes' 13 | api: 'Hacker News Firebase API' 14 | hosting: 'Now' 15 | other-details: 'Inlined CSS used by rendered components' 16 | authors: 17 | - name: 'Evan' 18 | lighthouse: '93/100' 19 | interactive-em: '2.9s' 20 | interactive-faster-3g: '2.4s' 21 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170423_PF_32D&run=1 22 | wpt-em-link: https://www.webpagetest.org/result/170413_KY_7F4/ 23 | wpt-faster-3g-link: https://www.webpagetest.org/result/170420_MK_556/ 24 | image: /assets/images/vuehn-mobile.png 25 | app-link: https://vue-hn.now.sh/ 26 | github-link: https://github.com/vuejs/vue-hackernews-2.0 27 | framework-link: https://vuejs.org/ 28 | --- 29 | -------------------------------------------------------------------------------- /site/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {% if jekyll.environment == 'production' and site.google_analytics %} 17 | {% include google-analytics.html %} 18 | {% endif %} 19 | 20 | -------------------------------------------------------------------------------- /site/_apps/react-hn-kristofer.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 1 3 | title: 'React HN' 4 | github-title: 'kristoferbaxter/react-hn' 5 | library: 'React' 6 | libraries: 7 | - name: 'React' 8 | - name: 'React Router' 9 | module-bundling: 'Webpack' 10 | service-worker: 'Application Shell with OfflinePlugin' 11 | perfomance-patterns: 'HTTP/2 with Server Push, Brotli and Zopfli static assets' 12 | server-side-rendering: 'Yes' 13 | api: 'In-memory cached Hacker News Firebase API' 14 | hosting: 'Webfaction + Cloudflare' 15 | authors: 16 | - name: 'Kristofer' 17 | lighthouse: '91/100' 18 | interactive-em: '3.4s' 19 | interactive-faster-3g: '1.8s' 20 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170523_JN_1CAH&run=3 21 | wpt-em-link: https://www.webpagetest.org/result/170522_PN_86f54c759ef3ac8ee1cdc7cb8f62528f/ 22 | wpt-faster-3g-link: https://www.webpagetest.org/result/170523_JN_1CAH/ 23 | image: /assets/images/reacthn-kristofer-mobile.png 24 | app-link: https://react-hn.kristoferbaxter.com/ 25 | github-link: https://github.com/kristoferbaxter/react-hn 26 | framework-link: https://facebook.github.io/react/ 27 | --- 28 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 2.3.3 4 | before_install: 5 | - cd site 6 | - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then echo $super_secret_password | gpg --passphrase-fd 0 service-acc.json.gpg; fi' 7 | - nvm install 7 8 | - npm install 9 | script: 10 | - npm run build 11 | - npm run precache 12 | deploy: 13 | provider: gae 14 | skip_cleanup: true 15 | keyfile: service-acc.json 16 | project: hnpwa-prod 17 | env: 18 | global: 19 | secure: Xrj7PhES/LHZSdRt4ft/j5I/9+TXVmZ6t0NlrUlR+vo82ZKxFszedXoHcIVhxk0dZBBA26kQmM+RMasLtcmAbgzeSeXBhMAqcSKIX7BtcMpzc0hSnF5pCTueDH3JmW1IeDzT9n7WMXovRAjnjOIMqBKOBnlppZ72xbKi0a3wTrlAmZFtBz4leO3dHQUC6IxOfB8m1xhGGDvyXvADGyy5yEGHzXpWQj495k6c1hsQargl8Rq/DyYPCWHkiLLMzkstreYokQjM8FIIjr0u7XfYI+3DadHqNUZyAKYKUfoz2LXqEx/eZNEU89kMVMctBgInoRXagSoSter2aCa3BKIRxAEyTGgRH71ujDHD1IgiLknbEcVLoaC5n3+2N/QQlyvULZ6MXN8LscTTUiqyDDHTqW1Znklsdxg93sqXzXPIHP7vfydzomVpn6GZ4OijHZ/fTJc7O8FkFw+VXHGmDXPkfJZNhenfCZR60ZgHTRV7QverQEOg5tXLEGq7y/O2Y/ViOP9qDtCDeY4uOuwvMn3ofDX7qyzoK4BCk9PZfdsezh9nE2R1E5CmU2Mqv5N1WiIQ0VvNe/C5GtDXAdoGUeLFXm4JzJZquAZPrMmtH/MRzu+TtYWUIabinMiuhbwozELBSNh/5Sd0w2/PMcZkBP5XNj4e3GdMo8DwM9BsdImZ0B8= 20 | -------------------------------------------------------------------------------- /site/_apps/preact-hn.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 3 3 | title: 'Preact HN' 4 | github-title: 'kristoferbaxter/preact-hn' 5 | library: 'Preact' 6 | libraries: 7 | - name: 'Preact' 8 | - name: 'Preact Router' 9 | module-bundling: 'Webpack' 10 | service-worker: 'Application Shell with OfflinePlugin' 11 | perfomance-patterns: 'HTTP/2 with Server Push, Brotli and Zopfli static assets' 12 | server-side-rendering: 'Yes' 13 | api: 'In-memory cached Hacker News Firebase API' 14 | hosting: 'Webfaction + Cloudflare' 15 | authors: 16 | - name: 'Kristofer' 17 | lighthouse: '93/100' 18 | interactive-em: '2.3s' 19 | interactive-faster-3g: '1.7s' 20 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170511_E0_8c496a263005af3b781063741a159cb8&run=3 21 | wpt-em-link: https://www.webpagetest.org/result/170511_35_23743024b907386a966d2367e0d96b38/ 22 | wpt-faster-3g-link: https://www.webpagetest.org/result/170511_E0_8c496a263005af3b781063741a159cb8/ 23 | image: /assets/images/preacthn-mobile.png 24 | app-link: https://hn.kristoferbaxter.com/ 25 | github-link: https://github.com/kristoferbaxter/preact-hn 26 | framework-link: https://preactjs.com/ 27 | --- 28 | -------------------------------------------------------------------------------- /site/_apps/react-hn.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 2 3 | title: 'React HN' 4 | github-title: 'insin/react-hn' 5 | library: 'React' 6 | libraries: 7 | - name: 'React' 8 | - name: 'React Router' 9 | module-bundling: 'Webpack' 10 | service-worker: 'Application Shell + data caching with Workbox' 11 | perfomance-patterns: 'PRPL, route-based chunking' 12 | server-side-rendering: 'Yes' 13 | api: 'Hacker News Firebase API + Node-hnapi (unoffical)' 14 | hosting: 'Google App Engine' 15 | other-details: 'Asynchronously loaded routes' 16 | authors: 17 | - name: 'Jonny' 18 | - name: 'Addy' 19 | lighthouse: '91/100' 20 | interactive-em: '6.2s' 21 | interactive-faster-3g: '4.0s' 22 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170511_QV_f71a12eb44f1f058b0741db2eac3d85a&run=3 23 | wpt-em-link: https://www.webpagetest.org/result/170511_Y7_3a354dfc36f824229a1ae2b1ac93fdbf/ 24 | wpt-faster-3g-link: https://www.webpagetest.org/result/170511_QV_f71a12eb44f1f058b0741db2eac3d85a/ 25 | image: /assets/images/reacthn-mobile.png 26 | app-link: https://react-hn.appspot.com/ 27 | github-link: https://github.com/insin/react-hn 28 | framework-link: https://facebook.github.io/react/ 29 | --- 30 | -------------------------------------------------------------------------------- /site/_apps/polymer-hn.txt: -------------------------------------------------------------------------------- 1 | --- 2 | weight: 8 3 | title: 'Polymer HN' 4 | github-title: 'Polymer/hn-polymer-2' 5 | libraries: 6 | - name: 'Polymer' 7 | scaffolding: 'Polymer CLI & Polymer Starter Kit' 8 | module-bundling: 'Polymer-build with HTML Imports' 9 | service-worker: 'Application Shell + data caching with sw-precache' 10 | perfomance-patterns: 'PRPL, code-splitting for granular loading' 11 | server-side-rendering: 'None' 12 | api: 'Node-hnapi (unofficial)' 13 | hosting: 'Firebase functions over HTTP/2 with Server Push + edge-caching' 14 | other-details: 'Route-specific pushing' 15 | authors: 16 | - name: 'Dan' 17 | - name: 'Kevin' 18 | - name: 'Steve' 19 | lighthouse: 92/100 20 | interactive-em: 2.7s 21 | interactive-faster-3g: 2.0s 22 | lighthouse-link: https://www.webpagetest.org/lighthouse.php?test=170516_F6_82399308fdbe29d39cd297ee0960a062&run=3 23 | wpt-em-link: https://www.webpagetest.org/result/170516_F6_82399308fdbe29d39cd297ee0960a062/ 24 | wpt-faster-3g-link: https://www.webpagetest.org/result/170516_WW_6bbab2960100313ae75052346ca7efad/ 25 | image: /assets/images/polymer-mobile.png 26 | app-link: https://hn-polymer-2.firebaseapp.com 27 | github-link: https://github.com/polymer/hn-polymer-2 28 | framework-link: https://www.polymer-project.org 29 | --- 30 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thank you for your interest in contributing! 4 | 5 | If your Hacker News implementation meets the [specifications](https://github.com/tastejs/hacker-news-pwas#specification), don't hesitate to put up a PR to add its summary to HNPWA! 6 | 7 | If you would like to file a PR to update the site's design, please file an [issue](https://github.com/tastejs/hacker-news-pwas/issues/new) for it first. 8 | 9 | ## Setup 10 | 11 | 1. Fork the repo 12 | 2. Clone your fork 13 | 3. Make a branch for your changes 14 | 4. `npm install` 15 | 5. `npm run dev` to kick off a development server 16 | 6. To test the Service Worker locally you can run `npm run dev-sw` instead. 17 | 7. If you're adding a summary of your Hacker News implementation: 18 | * Create a new entry under `_apps` with your application name 19 | * Fill out the list of attributes following the format of any of the other apps in the same directory (you'll need to include an image of your application in a mobile device as well) 20 | * Add yourself to the `_contributors` directory and similarly fill out all the attributes there (make sure the `authors` attribute underneath your app in `_apps` has the same exact name attribute as here) 21 | 8. Create a pull request from your branch on your fork to `master` on this repo 22 | 9. Have your branch get merged in! :star2: 23 | -------------------------------------------------------------------------------- /site/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.5.1) 5 | public_suffix (~> 2.0, >= 2.0.2) 6 | colorator (1.1.0) 7 | ffi (1.9.18) 8 | forwardable-extended (2.6.0) 9 | jekyll (3.3.1) 10 | addressable (~> 2.4) 11 | colorator (~> 1.0) 12 | jekyll-sass-converter (~> 1.0) 13 | jekyll-watch (~> 1.1) 14 | kramdown (~> 1.3) 15 | liquid (~> 3.0) 16 | mercenary (~> 0.3.3) 17 | pathutil (~> 0.9) 18 | rouge (~> 1.7) 19 | safe_yaml (~> 1.0) 20 | jekyll-feed (0.9.2) 21 | jekyll (~> 3.3) 22 | jekyll-sass-converter (1.5.0) 23 | sass (~> 3.4) 24 | jekyll-watch (1.5.0) 25 | listen (~> 3.0, < 3.1) 26 | kramdown (1.13.2) 27 | liquid (3.0.6) 28 | listen (3.0.8) 29 | rb-fsevent (~> 0.9, >= 0.9.4) 30 | rb-inotify (~> 0.9, >= 0.9.7) 31 | mercenary (0.3.6) 32 | minima (2.1.1) 33 | jekyll (~> 3.3) 34 | pathutil (0.14.0) 35 | forwardable-extended (~> 2.6) 36 | public_suffix (2.0.5) 37 | rb-fsevent (0.9.8) 38 | rb-inotify (0.9.8) 39 | ffi (>= 0.5.0) 40 | rouge (1.11.1) 41 | safe_yaml (1.0.4) 42 | sass (3.4.23) 43 | 44 | PLATFORMS 45 | ruby 46 | 47 | DEPENDENCIES 48 | jekyll (= 3.3.1) 49 | jekyll-feed (~> 0.6) 50 | minima (~> 2.0) 51 | 52 | RUBY VERSION 53 | ruby 2.3.3p222 54 | 55 | BUNDLED WITH 56 | 1.14.6 57 | -------------------------------------------------------------------------------- /site/_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely edit after that. If you find 5 | # yourself editing this file very often, consider using Jekyll's data files 6 | # feature for the data you need to update frequently. 7 | # 8 | # For technical reasons, this file is *NOT* reloaded automatically when you use 9 | # 'bundle exec jekyll serve'. If you change this file, please restart the server process. 10 | 11 | # Site settings 12 | # These are used to personalize your new site. If you look in the HTML files, 13 | # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on. 14 | # You can create any custom variable you would like, and they will be accessible 15 | # in the templates via {{ site.myvariable }}. 16 | title: HN PWA - Hacker News readers as Progressive Web Apps 17 | description: > # this means to ignore newlines until "baseurl:" 18 | Hacker News readers as Progressive Web Apps 19 | baseurl: "" # the subpath of your site, e.g. /blog 20 | url: "https://hnpwa.com" # the base hostname & protocol for your site, e.g. http://example.com 21 | twitter_username: tastejs 22 | github_username: tastejs 23 | google_analytics: UA-99127594-1 24 | collections: 25 | - apps 26 | - contributors 27 | 28 | # Build settings 29 | markdown: kramdown 30 | gems: 31 | - jekyll-feed 32 | exclude: 33 | - Gemfile 34 | - Gemfile.lock 35 | - vendor 36 | - init.go 37 | - app.yaml 38 | - package.json 39 | - service-acc.json.gpg 40 | - sw-precache-config.js 41 | - node_modules 42 | -------------------------------------------------------------------------------- /site/_sass/extra.scss: -------------------------------------------------------------------------------- 1 | $primary-orange: #F4751E; 2 | 3 | // overwrite tachyons orange 4 | .b--orange { border-color: $primary-orange; } 5 | .orange { color: $primary-orange; } 6 | .bg-orange { background-color: $primary-orange; } 7 | .hover-orange:hover { color: $primary-orange; } 8 | .hover-orange:focus { color:$primary-orange; } 9 | .hover-bg-orange:hover { background-color: $primary-orange; } 10 | .hover-bg-orange:focus { background-color: $primary-orange; } 11 | 12 | // Svg 13 | .link-svg svg { 14 | height: 1.5rem; 15 | width: 1.5rem; 16 | fill: #555; 17 | 18 | &:hover { 19 | fill: $primary-orange; 20 | } 21 | 22 | // Small 23 | @media screen and (max-width: 30em) { 24 | height: 1rem; 25 | width: 1rem; 26 | } 27 | 28 | // Medium 29 | @media screen and (min-width: 30em) and (max-width: 60em) { 30 | height: 1.25rem; 31 | width: 1.25rem; 32 | } 33 | } 34 | 35 | // Github Corner 36 | .github-corner { 37 | position: absolute; 38 | top: 0; 39 | right: 0; 40 | height: 5rem; 41 | width: 5rem; 42 | fill: $primary-orange; 43 | 44 | &:hover .octo-arm { 45 | animation: octocat-wave 560ms ease-in-out; 46 | } 47 | } 48 | 49 | @keyframes octocat-wave { 50 | 0%, 100% { 51 | transform: rotate(0); 52 | } 53 | 54 | 20%, 55 | 60% { 56 | transform: rotate(-25deg); 57 | } 58 | 59 | 40%, 60 | 80% { 61 | transform: rotate(10deg); 62 | } 63 | } 64 | 65 | 66 | @media (max-width: 500px) { 67 | .github-corner { 68 | &:hover .octo-arm { 69 | animation: none; 70 | } 71 | .octo-arm { 72 | animation: octocat-wave 560ms ease-in-out; 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /site/_layouts/home.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |

6 | A spiritual successor to TodoMVC 7 |

8 |

9 | TodoMVC has helped thousands of developers select 10 | an MV* framework for their JavaScript applications. However, the web ecosystem 11 | has evolved in the past few years allowing us to build powerful applications using 12 | modern browser capabilities. 13 |

14 | 15 |

16 | To provide developers with examples, we collected a list of unofficial Hacker News clients built with a number of popular JavaScript frameworks and libraries. 17 | Each implementation is a complete Progressive Web App that utilizes 18 | different progressive technologies to provide a fast, reliable and engaging experience. 19 |

20 | 21 |

22 | Our implementations aim to follow a loose specification. They are primarily a learning tool and should not be used to compare the performance of one PWA to another. They can differ based on server infrastructure, performance patterns used and other factors. 23 |

24 |
25 | 26 | {% assign sortedApps = site.apps | sort: 'weight' %} 27 | {% assign numAppsIsEven = site.apps.size | modulo: 2 %} 28 | 29 | {% for app in sortedApps %} 30 | {% include implementation.html app=app %} 31 | {% endfor %} 32 | 33 |
34 |

35 | Submit your Hacker News Progressive Web App 36 |

37 | 38 |

39 | If your Hacker News implementation meets the specifications, 40 | feel free to submit a summary of it here! HNPWA serves as a reference for building PWAs with different libraries so the 41 | more examples we have the better. Don't worry if there's already one with the same UI library or framework as yours. 42 |

43 | 44 | SUBMIT 45 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

8 | Hacker News readers as Progressive Web Apps. A spiritual successor to TodoMVC. 9 |

10 | 11 |

12 | Build Status 13 |

14 | 15 | --- 16 | 17 | ## Implementations 18 | 19 | See our [site](https://hnpwa.com/) or the `site/apps` directory for the current 20 | list of implementations. 21 | 22 | ## Specification 23 | 24 | Each implementation must include: 25 | 26 | * Views: Hacker News Top Stories, New, Show, Ask, Jobs & threaded Comments 27 | * App must display 30 items per-page for story list views 28 | * App must be a [Progressive Web App](https://g.co/ProgressiveWebApps) 29 | * App must score over a 90/100 using [Lighthouse](https://github.com/GoogleChrome/lighthouse) 30 | * App must become aim to be interactive in under 5 seconds on a Moto G4 over 3G. Use [WebPageTest](https://www.webpagetest.org/easy) using the auto-selected Moto G4 + Faster 3G setting to validate "Time to interactive" 31 | * We look at numeric Lighthouse scores for TTI as well as a manual inspection of the application's Timeline "trace" and [Filmstrip](https://www.webpagetest.org/video/compare.php?tests=170514_00_bb389f33405b558ea644b37f565c8a56-r:1-c:0) as a sanity check. 32 | * App must use the [Application Shell](https://developers.google.com/web/fundamentals/architecture/app-shell) pattern to instantly load the skeleton of the UI on repeat visits 33 | * App must do its best to work cross-browser 34 | 35 | Optionally: 36 | 37 | * App supports offline caching of HN data (e.g similar to the 'Offline Mode' in ReactHN) 38 | * App may use server-side rendering so displaying content is resilient to JS not loading on the network 39 | 40 | User interface: 41 | 42 | * At this time, HNPWA does not prescribe a specific stylesheet or theme for implementations. We will be aiming to provide this in the near future similar to how we do with TodoMVC. 43 | 44 | ### Data sources 45 | 46 | * [Official real-time Hacker News API powered by Firebase](https://github.com/HackerNews/API) 47 | * [Unofficial Hacker News API](https://github.com/cheeaun/node-hnapi) by cheeaun 48 | 49 | If using the Firebase powered API please use 30 stories per-page to ensure consistency between implementations using the Unofficial API as well as the actual [Hacker News website](https://news.ycombinator.com/) 50 | 51 | ## Network settings 52 | 53 | * Emerging Markets: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency. Tested with [WebPageTest](https://www.webpagetest.org/easy) using the auto-selected Moto G4 + Emerging Markets setting. 54 | * Faster 3G: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 1.6 Mbps 3G connection with 300ms of latency. Tested with [WebPageTest](https://www.webpagetest.org/easy) using the auto-selected Moto G4 + Faster 3G setting. 55 | * `Time to Interactive` readings taken from linked Lighthouse results in WebPageTest. 56 | 57 | ## License 58 | 59 | Each implementation preserves the license noted in the linked to applications. 60 | -------------------------------------------------------------------------------- /site/_includes/implementation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

{{ app.title }}

6 | 7 |

8 | {{ app.github-title }} 9 |

10 | 11 |
12 |
13 |
Lighthouse:
14 |
15 | 16 | {{ app.lighthouse }} 17 | 18 |
19 |
20 | 21 |
22 |
Interactive (Emerging Markets):
23 |
24 | 25 | {{ app.interactive-em }} 26 | 27 |
28 |
29 | 30 |
31 |
Interactive (Faster 3G):
32 |
33 | 34 | {{ app.interactive-faster-3g }} 35 | 36 |
37 |
38 |
39 | 40 |
41 | {% if app.libraries %} 42 |
43 |
Framework/UI libraries:
44 |
45 | {% for library in app.libraries %} 46 | {{ library.name }}{% if forloop.last == false %}, {% endif %} 47 | {% endfor %} 48 |
49 |
50 | {% endif %} 51 | 52 | {% if app.scaffolding %} 53 |
54 |
Scaffolding:
55 |
{{ app.scaffolding }}
56 |
57 | {% endif %} 58 | 59 | {% if app.module-bundling %} 60 |
61 |
Module bundling:
62 |
{{ app.module-bundling }}
63 |
64 | {% endif %} 65 | 66 | {% if app.service-worker %} 67 |
68 |
Service Worker:
69 |
{{ app.service-worker }}
70 |
71 | {% endif %} 72 | 73 | {% if app.perfomance-patterns %} 74 |
75 |
Performance patterns:
76 |
{{ app.perfomance-patterns }}
77 |
78 | {% endif %} 79 | 80 | {% if app.server-side-rendering %} 81 |
82 |
Server-side rendering:
83 |
{{ app.server-side-rendering }}
84 |
85 | {% endif %} 86 | 87 | {% if app.api %} 88 |
89 |
API:
90 |
{{ app.api }}
91 |
92 | {% endif %} 93 | 94 | {% if app.hosting %} 95 |
96 |
Hosting:
97 |
{{ app.hosting }}
98 |
99 | {% endif %} 100 | 101 | {% if app.other-details %} 102 |
103 |
Other details:
104 |
{{ app.other-details }}
105 |
106 | {% endif %} 107 | 108 | {% if app.authors %} 109 |
110 | {% if app.authors.size == 1 %} 111 | Author: 112 | {% endif %} 113 | 114 | {% if app.authors.size > 1 %} 115 | Authors: 116 | {% endif %} 117 |
118 | 119 | {% for author in app.authors %} 120 | {% assign contributor = site.contributors | where: 'name', {{author.name}} | first %} 121 | 122 | {{ 123 | 124 | {% endfor %} 125 | {% endif %} 126 |
127 | 128 |
129 | VIEW APP 130 | SOURCE CODE 131 |
132 |
133 |
134 |
135 |
136 | 137 | {{ app.title }} HN PWA running on a mobile phone 138 | 139 |
140 |
141 |
142 |
-------------------------------------------------------------------------------- /site/_sass/tachyons.scss: -------------------------------------------------------------------------------- 1 | /*! TACHYONS v4.6.1 | http://tachyons.io */ 2 | /* 3 | * 4 | * ________ ______ 5 | * ___ __/_____ _________ /______ ______________________ 6 | * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ 7 | * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) 8 | * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ 9 | * /____/ 10 | * 11 | * TABLE OF CONTENTS 12 | * 13 | * 1. External Library Includes 14 | * - Normalize.css | http://normalize.css.github.io 15 | * 2. Tachyons Modules 16 | * 3. Variables 17 | * - Media Queries 18 | * - Colors 19 | * 4. Debugging 20 | * - Debug all 21 | * - Debug children 22 | * 23 | */ 24 | /* External Library Includes */ 25 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 26 | /** 27 | * 1. Change the default font family in all browsers (opinionated). 28 | * 2. Correct the line height in all browsers. 29 | * 3. Prevent adjustments of font size after orientation changes in 30 | * IE on Windows Phone and in iOS. 31 | */ 32 | /* Document 33 | ========================================================================== */ 34 | html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } 35 | /* Sections 36 | ========================================================================== */ 37 | /** 38 | * Remove the margin in all browsers (opinionated). 39 | */ 40 | body { margin: 0; } 41 | /** 42 | * Add the correct display in IE 9-. 43 | */ 44 | article, aside, footer, header, nav, section { display: block; } 45 | /** 46 | * Correct the font size and margin on `h1` elements within `section` and 47 | * `article` contexts in Chrome, Firefox, and Safari. 48 | */ 49 | h1 { font-size: 2em; margin: .67em 0; } 50 | /* Grouping content 51 | ========================================================================== */ 52 | /** 53 | * Add the correct display in IE 9-. 54 | * 1. Add the correct display in IE. 55 | */ 56 | figcaption, figure, main {/* 1 */ display: block; } 57 | /** 58 | * Add the correct margin in IE 8. 59 | */ 60 | figure { margin: 1em 40px; } 61 | /** 62 | * 1. Add the correct box sizing in Firefox. 63 | * 2. Show the overflow in Edge and IE. 64 | */ 65 | hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } 66 | /** 67 | * 1. Correct the inheritance and scaling of font size in all browsers. 68 | * 2. Correct the odd `em` font sizing in all browsers. 69 | */ 70 | pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } 71 | /* Text-level semantics 72 | ========================================================================== */ 73 | /** 74 | * 1. Remove the gray background on active links in IE 10. 75 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 76 | */ 77 | a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } 78 | /** 79 | * Remove the outline on focused links when they are also active or hovered 80 | * in all browsers (opinionated). 81 | */ 82 | a:active, a:hover { outline-width: 0; } 83 | /** 84 | * 1. Remove the bottom border in Firefox 39-. 85 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 86 | */ 87 | abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } 88 | /** 89 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 90 | */ 91 | b, strong { font-weight: inherit; } 92 | /** 93 | * Add the correct font weight in Chrome, Edge, and Safari. 94 | */ 95 | b, strong { font-weight: bolder; } 96 | /** 97 | * 1. Correct the inheritance and scaling of font size in all browsers. 98 | * 2. Correct the odd `em` font sizing in all browsers. 99 | */ 100 | code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } 101 | /** 102 | * Add the correct font style in Android 4.3-. 103 | */ 104 | dfn { font-style: italic; } 105 | /** 106 | * Add the correct background and color in IE 9-. 107 | */ 108 | mark { background-color: #ff0; color: #000; } 109 | /** 110 | * Add the correct font size in all browsers. 111 | */ 112 | small { font-size: 80%; } 113 | /** 114 | * Prevent `sub` and `sup` elements from affecting the line height in 115 | * all browsers. 116 | */ 117 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 118 | sub { bottom: -0.25em; } 119 | sup { top: -0.5em; } 120 | /* Embedded content 121 | ========================================================================== */ 122 | /** 123 | * Add the correct display in IE 9-. 124 | */ 125 | audio, video { display: inline-block; } 126 | /** 127 | * Add the correct display in iOS 4-7. 128 | */ 129 | audio:not([controls]) { display: none; height: 0; } 130 | /** 131 | * Remove the border on images inside links in IE 10-. 132 | */ 133 | img { border-style: none; } 134 | /** 135 | * Hide the overflow in IE. 136 | */ 137 | svg:not(:root) { overflow: hidden; } 138 | /* Forms 139 | ========================================================================== */ 140 | /** 141 | * 1. Change the font styles in all browsers (opinionated). 142 | * 2. Remove the margin in Firefox and Safari. 143 | */ 144 | button, input, optgroup, select, textarea { font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } 145 | /** 146 | * Show the overflow in IE. 147 | * 1. Show the overflow in Edge. 148 | */ 149 | button, input {/* 1 */ overflow: visible; } 150 | /** 151 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 152 | * 1. Remove the inheritance of text transform in Firefox. 153 | */ 154 | button, select {/* 1 */ text-transform: none; } 155 | /** 156 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 157 | * controls in Android 4. 158 | * 2. Correct the inability to style clickable types in iOS and Safari. 159 | */ 160 | button, html [type="button"], /* 1 */ 161 | [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } 162 | /** 163 | * Remove the inner border and padding in Firefox. 164 | */ 165 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, 166 | [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } 167 | /** 168 | * Restore the focus styles unset by the previous rule. 169 | */ 170 | button:-moz-focusring, [type="button"]:-moz-focusring, 171 | [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } 172 | /** 173 | * Change the border, margin, and padding in all browsers (opinionated). 174 | */ 175 | fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } 176 | /** 177 | * 1. Correct the text wrapping in Edge and IE. 178 | * 2. Correct the color inheritance from `fieldset` elements in IE. 179 | * 3. Remove the padding so developers are not caught out when they zero out 180 | * `fieldset` elements in all browsers. 181 | */ 182 | legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } 183 | /** 184 | * 1. Add the correct display in IE 9-. 185 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 186 | */ 187 | progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } 188 | /** 189 | * Remove the default vertical scrollbar in IE. 190 | */ 191 | textarea { overflow: auto; } 192 | /** 193 | * 1. Add the correct box sizing in IE 10-. 194 | * 2. Remove the padding in IE 10-. 195 | */ 196 | [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } 197 | /** 198 | * Correct the cursor style of increment and decrement buttons in Chrome. 199 | */ 200 | [type="number"]::-webkit-inner-spin-button, 201 | [type="number"]::-webkit-outer-spin-button { height: auto; } 202 | /** 203 | * 1. Correct the odd appearance in Chrome and Safari. 204 | * 2. Correct the outline style in Safari. 205 | */ 206 | [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } 207 | /** 208 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 209 | */ 210 | [type="search"]::-webkit-search-cancel-button, 211 | [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 212 | /** 213 | * 1. Correct the inability to style clickable types in iOS and Safari. 214 | * 2. Change font properties to `inherit` in Safari. 215 | */ 216 | ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } 217 | /* Interactive 218 | ========================================================================== */ 219 | /* 220 | * Add the correct display in IE 9-. 221 | * 1. Add the correct display in Edge, IE, and Firefox. 222 | */ 223 | details, /* 1 */ 224 | menu { display: block; } 225 | /* 226 | * Add the correct display in all browsers. 227 | */ 228 | summary { display: list-item; } 229 | /* Scripting 230 | ========================================================================== */ 231 | /** 232 | * Add the correct display in IE 9-. 233 | */ 234 | canvas { display: inline-block; } 235 | /** 236 | * Add the correct display in IE. 237 | */ 238 | template { display: none; } 239 | /* Hidden 240 | ========================================================================== */ 241 | /** 242 | * Add the correct display in IE 10-. 243 | */ 244 | [hidden] { display: none; } 245 | /* Modules */ 246 | /* 247 | 248 | BOX SIZING 249 | 250 | */ 251 | html, body, div, article, section, main, footer, header, form, fieldset, legend, 252 | pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, textarea, table, 253 | td, th, tr, input[type="email"], input[type="number"], input[type="password"], 254 | input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; } 255 | /* 256 | 257 | ASPECT RATIOS 258 | 259 | */ 260 | /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. 261 | * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e 262 | * Make sure there are no height and width attributes on the embedded media. 263 | * Adapted from: https://github.com/suitcss/components-flex-embed 264 | * 265 | * Example: 266 | * 267 | *
268 | * 269 | *
270 | * 271 | * */ 272 | .aspect-ratio { height: 0; position: relative; } 273 | .aspect-ratio--16x9 { padding-bottom: 56.25%; } 274 | .aspect-ratio--9x16 { padding-bottom: 177.77%; } 275 | .aspect-ratio--4x3 { padding-bottom: 75%; } 276 | .aspect-ratio--3x4 { padding-bottom: 133.33%; } 277 | .aspect-ratio--6x4 { padding-bottom: 66.6%; } 278 | .aspect-ratio--4x6 { padding-bottom: 150%; } 279 | .aspect-ratio--8x5 { padding-bottom: 62.5%; } 280 | .aspect-ratio--5x8 { padding-bottom: 160%; } 281 | .aspect-ratio--7x5 { padding-bottom: 71.42%; } 282 | .aspect-ratio--5x7 { padding-bottom: 140%; } 283 | .aspect-ratio--1x1 { padding-bottom: 100%; } 284 | .aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } 285 | /* 286 | 287 | IMAGES 288 | Docs: http://tachyons.io/docs/elements/images/ 289 | 290 | */ 291 | /* Responsive images! */ 292 | img { max-width: 100%; } 293 | /* 294 | 295 | BACKGROUND SIZE 296 | Docs: http://tachyons.io/docs/themes/background-size/ 297 | 298 | Media Query Extensions: 299 | -ns = not-small 300 | -m = medium 301 | -l = large 302 | 303 | */ 304 | /* 305 | Often used in combination with background image set as an inline style 306 | on an html element. 307 | */ 308 | .cover { background-size: cover !important; } 309 | .contain { background-size: contain !important; } 310 | /* 311 | 312 | BACKGROUND POSITION 313 | 314 | Base: 315 | bg = background 316 | 317 | Modifiers: 318 | -center = center center 319 | -top = top center 320 | -right = center right 321 | -bottom = bottom center 322 | -left = center left 323 | 324 | Media Query Extensions: 325 | -ns = not-small 326 | -m = medium 327 | -l = large 328 | 329 | */ 330 | .bg-center { background-repeat: no-repeat; background-position: center center; } 331 | .bg-top { background-repeat: no-repeat; background-position: top center; } 332 | .bg-right { background-repeat: no-repeat; background-position: center right; } 333 | .bg-bottom { background-repeat: no-repeat; background-position: bottom center; } 334 | .bg-left { background-repeat: no-repeat; background-position: center left; } 335 | /* 336 | 337 | OUTLINES 338 | 339 | Media Query Extensions: 340 | -ns = not-small 341 | -m = medium 342 | -l = large 343 | 344 | */ 345 | .outline { outline: 1px solid; } 346 | .outline-transparent { outline: 1px solid transparent; } 347 | .outline-0 { outline: 0; } 348 | /* 349 | 350 | BORDERS 351 | Docs: http://tachyons.io/docs/themes/borders/ 352 | 353 | Base: 354 | b = border 355 | 356 | Modifiers: 357 | a = all 358 | t = top 359 | r = right 360 | b = bottom 361 | l = left 362 | n = none 363 | 364 | Media Query Extensions: 365 | -ns = not-small 366 | -m = medium 367 | -l = large 368 | 369 | */ 370 | .ba { border-style: solid; border-width: 1px; } 371 | .bt { border-top-style: solid; border-top-width: 1px; } 372 | .br { border-right-style: solid; border-right-width: 1px; } 373 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 374 | .bl { border-left-style: solid; border-left-width: 1px; } 375 | .bn { border-style: none; border-width: 0; } 376 | /* 377 | 378 | BORDER COLORS 379 | Docs: http://tachyons.io/docs/themes/borders/ 380 | 381 | Border colors can be used to extend the base 382 | border classes ba,bt,bb,br,bl found in the _borders.css file. 383 | 384 | The base border class by default will set the color of the border 385 | to that of the current text color. These classes are for the cases 386 | where you desire for the text and border colors to be different. 387 | 388 | Base: 389 | b = border 390 | 391 | Modifiers: 392 | --color-name = each color variable name is also a border color name 393 | 394 | */ 395 | .b--black { border-color: #000; } 396 | .b--near-black { border-color: #111; } 397 | .b--dark-gray { border-color: #333; } 398 | .b--mid-gray { border-color: #555; } 399 | .b--gray { border-color: #777; } 400 | .b--silver { border-color: #999; } 401 | .b--light-silver { border-color: #aaa; } 402 | .b--moon-gray { border-color: #ccc; } 403 | .b--light-gray { border-color: #eee; } 404 | .b--near-white { border-color: #f4f4f4; } 405 | .b--white { border-color: #fff; } 406 | .b--white-90 { border-color: rgba( 255, 255, 255, .9 ); } 407 | .b--white-80 { border-color: rgba( 255, 255, 255, .8 ); } 408 | .b--white-70 { border-color: rgba( 255, 255, 255, .7 ); } 409 | .b--white-60 { border-color: rgba( 255, 255, 255, .6 ); } 410 | .b--white-50 { border-color: rgba( 255, 255, 255, .5 ); } 411 | .b--white-40 { border-color: rgba( 255, 255, 255, .4 ); } 412 | .b--white-30 { border-color: rgba( 255, 255, 255, .3 ); } 413 | .b--white-20 { border-color: rgba( 255, 255, 255, .2 ); } 414 | .b--white-10 { border-color: rgba( 255, 255, 255, .1 ); } 415 | .b--white-05 { border-color: rgba( 255, 255, 255, .05 ); } 416 | .b--white-025 { border-color: rgba( 255, 255, 255, .025 ); } 417 | .b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); } 418 | .b--black-90 { border-color: rgba( 0, 0, 0, .9 ); } 419 | .b--black-80 { border-color: rgba( 0, 0, 0, .8 ); } 420 | .b--black-70 { border-color: rgba( 0, 0, 0, .7 ); } 421 | .b--black-60 { border-color: rgba( 0, 0, 0, .6 ); } 422 | .b--black-50 { border-color: rgba( 0, 0, 0, .5 ); } 423 | .b--black-40 { border-color: rgba( 0, 0, 0, .4 ); } 424 | .b--black-30 { border-color: rgba( 0, 0, 0, .3 ); } 425 | .b--black-20 { border-color: rgba( 0, 0, 0, .2 ); } 426 | .b--black-10 { border-color: rgba( 0, 0, 0, .1 ); } 427 | .b--black-05 { border-color: rgba( 0, 0, 0, .05 ); } 428 | .b--black-025 { border-color: rgba( 0, 0, 0, .025 ); } 429 | .b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); } 430 | .b--dark-red { border-color: #e7040f; } 431 | .b--red { border-color: #ff4136; } 432 | .b--light-red { border-color: #ff725c; } 433 | .b--orange { border-color: #ff6300; } 434 | .b--gold { border-color: #ffb700; } 435 | .b--yellow { border-color: #ffd700; } 436 | .b--light-yellow { border-color: #fbf1a9; } 437 | .b--purple { border-color: #5e2ca5; } 438 | .b--light-purple { border-color: #a463f2; } 439 | .b--dark-pink { border-color: #d5008f; } 440 | .b--hot-pink { border-color: #ff41b4; } 441 | .b--pink { border-color: #ff80cc; } 442 | .b--light-pink { border-color: #ffa3d7; } 443 | .b--dark-green { border-color: #137752; } 444 | .b--green { border-color: #19a974; } 445 | .b--light-green { border-color: #9eebcf; } 446 | .b--navy { border-color: #001b44; } 447 | .b--dark-blue { border-color: #00449e; } 448 | .b--blue { border-color: #357edd; } 449 | .b--light-blue { border-color: #96ccff; } 450 | .b--lightest-blue { border-color: #cdecff; } 451 | .b--washed-blue { border-color: #f6fffe; } 452 | .b--washed-green { border-color: #e8fdf5; } 453 | .b--washed-yellow { border-color: #fffceb; } 454 | .b--washed-red { border-color: #ffdfdf; } 455 | .b--transparent { border-color: transparent; } 456 | .b--inherit { border-color: inherit; } 457 | /* 458 | 459 | BORDER RADIUS 460 | Docs: http://tachyons.io/docs/themes/border-radius/ 461 | 462 | Base: 463 | br = border-radius 464 | 465 | Modifiers: 466 | 0 = 0/none 467 | 1 = 1st step in scale 468 | 2 = 2nd step in scale 469 | 3 = 3rd step in scale 470 | 4 = 4th step in scale 471 | 472 | Literal values: 473 | -100 = 100% 474 | -pill = 9999px 475 | 476 | Media Query Extensions: 477 | -ns = not-small 478 | -m = medium 479 | -l = large 480 | 481 | */ 482 | .br0 { border-radius: 0; } 483 | .br1 { border-radius: .125rem; } 484 | .br2 { border-radius: .25rem; } 485 | .br3 { border-radius: .5rem; } 486 | .br4 { border-radius: 1rem; } 487 | .br-100 { border-radius: 100%; } 488 | .br-pill { border-radius: 9999px; } 489 | .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } 490 | .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 491 | .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } 492 | .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } 493 | /* 494 | 495 | BORDER STYLES 496 | Docs: http://tachyons.io/docs/themes/borders/ 497 | 498 | Depends on base border module in _borders.css 499 | 500 | Base: 501 | b = border-style 502 | 503 | Modifiers: 504 | --none = none 505 | --dotted = dotted 506 | --dashed = dashed 507 | --solid = solid 508 | 509 | Media Query Extensions: 510 | -ns = not-small 511 | -m = medium 512 | -l = large 513 | 514 | */ 515 | .b--dotted { border-style: dotted; } 516 | .b--dashed { border-style: dashed; } 517 | .b--solid { border-style: solid; } 518 | .b--none { border-style: none; } 519 | /* 520 | 521 | BORDER WIDTHS 522 | Docs: http://tachyons.io/docs/themes/borders/ 523 | 524 | Base: 525 | bw = border-width 526 | 527 | Modifiers: 528 | 0 = 0 width border 529 | 1 = 1st step in border-width scale 530 | 2 = 2nd step in border-width scale 531 | 3 = 3rd step in border-width scale 532 | 4 = 4th step in border-width scale 533 | 5 = 5th step in border-width scale 534 | 535 | Media Query Extensions: 536 | -ns = not-small 537 | -m = medium 538 | -l = large 539 | 540 | */ 541 | .bw0 { border-width: 0; } 542 | .bw1 { border-width: .125rem; } 543 | .bw2 { border-width: .25rem; } 544 | .bw3 { border-width: .5rem; } 545 | .bw4 { border-width: 1rem; } 546 | .bw5 { border-width: 2rem; } 547 | /* Resets */ 548 | .bt-0 { border-top-width: 0; } 549 | .br-0 { border-right-width: 0; } 550 | .bb-0 { border-bottom-width: 0; } 551 | .bl-0 { border-left-width: 0; } 552 | /* 553 | 554 | BOX-SHADOW 555 | Docs: http://tachyons.io/docs/themes/box-shadow/ 556 | 557 | Media Query Extensions: 558 | -ns = not-small 559 | -m = medium 560 | -l = large 561 | 562 | */ 563 | .shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } 564 | .shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } 565 | .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } 566 | .shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } 567 | .shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } 568 | /* 569 | 570 | CODE 571 | 572 | */ 573 | .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } 574 | /* 575 | 576 | COORDINATES 577 | Docs: http://tachyons.io/docs/layout/position/ 578 | 579 | Use in combination with the position module. 580 | 581 | Base: 582 | top 583 | bottom 584 | right 585 | left 586 | 587 | Modifiers: 588 | -0 = literal value 0 589 | -1 = literal value 1 590 | -2 = literal value 2 591 | --1 = literal value -1 592 | --2 = literal value -2 593 | 594 | Media Query Extensions: 595 | -ns = not-small 596 | -m = medium 597 | -l = large 598 | 599 | */ 600 | .top-0 { top: 0; } 601 | .right-0 { right: 0; } 602 | .bottom-0 { bottom: 0; } 603 | .left-0 { left: 0; } 604 | .top-1 { top: 1rem; } 605 | .right-1 { right: 1rem; } 606 | .bottom-1 { bottom: 1rem; } 607 | .left-1 { left: 1rem; } 608 | .top-2 { top: 2rem; } 609 | .right-2 { right: 2rem; } 610 | .bottom-2 { bottom: 2rem; } 611 | .left-2 { left: 2rem; } 612 | .top--1 { top: -1rem; } 613 | .right--1 { right: -1rem; } 614 | .bottom--1 { bottom: -1rem; } 615 | .left--1 { left: -1rem; } 616 | .top--2 { top: -2rem; } 617 | .right--2 { right: -2rem; } 618 | .bottom--2 { bottom: -2rem; } 619 | .left--2 { left: -2rem; } 620 | .absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } 621 | /* 622 | 623 | CLEARFIX 624 | http://tachyons.io/docs/layout/clearfix/ 625 | 626 | */ 627 | /* Nicolas Gallaghers Clearfix solution 628 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 629 | .cf:before, .cf:after { content: " "; display: table; } 630 | .cf:after { clear: both; } 631 | .cf { *zoom: 1; } 632 | .cl { clear: left; } 633 | .cr { clear: right; } 634 | .cb { clear: both; } 635 | .cn { clear: none; } 636 | /* 637 | 638 | DISPLAY 639 | Docs: http://tachyons.io/docs/layout/display 640 | 641 | Base: 642 | d = display 643 | 644 | Modifiers: 645 | n = none 646 | b = block 647 | ib = inline-block 648 | it = inline-table 649 | t = table 650 | tc = table-cell 651 | t-row = table-row 652 | t-columm = table-column 653 | t-column-group = table-column-group 654 | 655 | Media Query Extensions: 656 | -ns = not-small 657 | -m = medium 658 | -l = large 659 | 660 | */ 661 | .dn { display: none; } 662 | .di { display: inline; } 663 | .db { display: block; } 664 | .dib { display: inline-block; } 665 | .dit { display: inline-table; } 666 | .dt { display: table; } 667 | .dtc { display: table-cell; } 668 | .dt-row { display: table-row; } 669 | .dt-row-group { display: table-row-group; } 670 | .dt-column { display: table-column; } 671 | .dt-column-group { display: table-column-group; } 672 | /* 673 | This will set table to full width and then 674 | all cells will be equal width 675 | */ 676 | .dt--fixed { table-layout: fixed; width: 100%; } 677 | /* 678 | 679 | FLEXBOX 680 | 681 | Media Query Extensions: 682 | -ns = not-small 683 | -m = medium 684 | -l = large 685 | 686 | */ 687 | .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } 688 | .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 689 | /* 1. Fix for Chrome 44 bug. 690 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 691 | .flex-auto { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 692 | .flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 693 | .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 694 | .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 695 | .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } 696 | .items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 697 | .items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 698 | .items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 699 | .items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 700 | .items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 701 | .self-start { -ms-flex-item-align: start; align-self: flex-start; } 702 | .self-end { -ms-flex-item-align: end; align-self: flex-end; } 703 | .self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } 704 | .self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } 705 | .self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } 706 | .justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 707 | .justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 708 | .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 709 | .justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 710 | .justify-around { -ms-flex-pack: distribute; justify-content: space-around; } 711 | .content-start { -ms-flex-line-pack: start; align-content: flex-start; } 712 | .content-end { -ms-flex-line-pack: end; align-content: flex-end; } 713 | .content-center { -ms-flex-line-pack: center; align-content: center; } 714 | .content-between { -ms-flex-line-pack: justify; align-content: space-between; } 715 | .content-around { -ms-flex-line-pack: distribute; align-content: space-around; } 716 | .content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } 717 | .order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 718 | .order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 719 | .order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 720 | .order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 721 | .order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 722 | .order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 723 | .order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 724 | .order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 725 | .order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 726 | .order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 727 | /* 728 | 729 | FLOATS 730 | http://tachyons.io/docs/layout/floats/ 731 | 732 | 1. Floated elements are automatically rendered as block level elements. 733 | Setting floats to display inline will fix the double margin bug in 734 | ie6. You know... just in case. 735 | 736 | 2. Don't forget to clearfix your floats with .cf 737 | 738 | Base: 739 | f = float 740 | 741 | Modifiers: 742 | l = left 743 | r = right 744 | n = none 745 | 746 | Media Query Extensions: 747 | -ns = not-small 748 | -m = medium 749 | -l = large 750 | 751 | */ 752 | .fl { float: left; _display: inline; } 753 | .fr { float: right; _display: inline; } 754 | .fn { float: none; } 755 | /* 756 | 757 | FONT FAMILY GROUPS 758 | Docs: http://tachyons.io/docs/typography/font-family/ 759 | 760 | */ 761 | .sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } 762 | .serif { font-family: georgia, times, serif; } 763 | .system-sans-serif { font-family: sans-serif; } 764 | .system-serif { font-family: serif; } 765 | /* Monospaced Typefaces (for code) */ 766 | /* From http://cssfontstack.com */ 767 | code, .code { font-family: Consolas, monaco, monospace; } 768 | .courier { font-family: 'Courier Next', courier, monospace; } 769 | /* Sans-Serif Typefaces */ 770 | .helvetica { font-family: 'helvetica neue', helvetica, sans-serif; } 771 | .avenir { font-family: 'avenir next', avenir, sans-serif; } 772 | /* Serif Typefaces */ 773 | .athelas { font-family: athelas, georgia, serif; } 774 | .georgia { font-family: georgia, serif; } 775 | .times { font-family: times, serif; } 776 | .bodoni { font-family: "Bodoni MT", serif; } 777 | .calisto { font-family: "Calisto MT", serif; } 778 | .garamond { font-family: garamond, serif; } 779 | .baskerville { font-family: baskerville, serif; } 780 | /* 781 | 782 | FONT STYLE 783 | Docs: http://tachyons.io/docs/typography/font-style/ 784 | 785 | Media Query Extensions: 786 | -ns = not-small 787 | -m = medium 788 | -l = large 789 | 790 | */ 791 | .i { font-style: italic; } 792 | .fs-normal { font-style: normal; } 793 | /* 794 | 795 | FONT WEIGHT 796 | Docs: http://tachyons.io/docs/typography/font-weight/ 797 | 798 | Base 799 | fw = font-weight 800 | 801 | Modifiers: 802 | 1 = literal value 100 803 | 2 = literal value 200 804 | 3 = literal value 300 805 | 4 = literal value 400 806 | 5 = literal value 500 807 | 6 = literal value 600 808 | 7 = literal value 700 809 | 8 = literal value 800 810 | 9 = literal value 900 811 | 812 | Media Query Extensions: 813 | -ns = not-small 814 | -m = medium 815 | -l = large 816 | 817 | */ 818 | .normal { font-weight: normal; } 819 | .b { font-weight: bold; } 820 | .fw1 { font-weight: 100; } 821 | .fw2 { font-weight: 200; } 822 | .fw3 { font-weight: 300; } 823 | .fw4 { font-weight: 400; } 824 | .fw5 { font-weight: 500; } 825 | .fw6 { font-weight: 600; } 826 | .fw7 { font-weight: 700; } 827 | .fw8 { font-weight: 800; } 828 | .fw9 { font-weight: 900; } 829 | /* 830 | 831 | FORMS 832 | 833 | */ 834 | .input-reset { -webkit-appearance: none; -moz-appearance: none; } 835 | .button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; } 836 | /* 837 | 838 | HEIGHTS 839 | Docs: http://tachyons.io/docs/layout/heights/ 840 | 841 | Base: 842 | h = height 843 | min-h = min-height 844 | min-vh = min-height vertical screen height 845 | vh = vertical screen height 846 | 847 | Modifiers 848 | 1 = 1st step in height scale 849 | 2 = 2nd step in height scale 850 | 3 = 3rd step in height scale 851 | 4 = 4th step in height scale 852 | 5 = 5th step in height scale 853 | 854 | -25 = literal value 25% 855 | -50 = literal value 50% 856 | -75 = literal value 75% 857 | -100 = literal value 100% 858 | 859 | -auto = string value of auto 860 | -inherit = string value of inherit 861 | 862 | Media Query Extensions: 863 | -ns = not-small 864 | -m = medium 865 | -l = large 866 | 867 | */ 868 | /* Height Scale */ 869 | .h1 { height: 1rem; } 870 | .h2 { height: 2rem; } 871 | .h3 { height: 4rem; } 872 | .h4 { height: 8rem; } 873 | .h5 { height: 16rem; } 874 | /* Height Percentages - Based off of height of parent */ 875 | .h-25 { height: 25%; } 876 | .h-50 { height: 50%; } 877 | .h-75 { height: 75%; } 878 | .h-100 { height: 100%; } 879 | .min-h-100 { min-height: 100%; } 880 | /* Screen Height Percentage */ 881 | .vh-25 { height: 25vh; } 882 | .vh-50 { height: 50vh; } 883 | .vh-75 { height: 75vh; } 884 | .vh-100 { height: 100vh; } 885 | .min-vh-100 { min-height: 100vh; } 886 | /* String Properties */ 887 | .h-auto { height: auto; } 888 | .h-inherit { height: inherit; } 889 | /* 890 | 891 | LETTER SPACING 892 | Docs: http://tachyons.io/docs/typography/tracking/ 893 | 894 | Media Query Extensions: 895 | -ns = not-small 896 | -m = medium 897 | -l = large 898 | 899 | */ 900 | .tracked { letter-spacing: .1em; } 901 | .tracked-tight { letter-spacing: -.05em; } 902 | .tracked-mega { letter-spacing: .25em; } 903 | /* 904 | 905 | LINE HEIGHT / LEADING 906 | Docs: http://tachyons.io/docs/typography/line-height 907 | 908 | Media Query Extensions: 909 | -ns = not-small 910 | -m = medium 911 | -l = large 912 | 913 | */ 914 | .lh-solid { line-height: 1; } 915 | .lh-title { line-height: 1.25; } 916 | .lh-copy { line-height: 1.5; } 917 | /* 918 | 919 | LINKS 920 | Docs: http://tachyons.io/docs/elements/links/ 921 | 922 | */ 923 | .link { text-decoration: none; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } 924 | .link:link, .link:visited { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } 925 | .link:hover { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } 926 | .link:active { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } 927 | .link:focus { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; outline: 1px dotted currentColor; } 928 | /* 929 | 930 | LISTS 931 | http://tachyons.io/docs/elements/lists/ 932 | 933 | */ 934 | .list { list-style-type: none; } 935 | /* 936 | 937 | MAX WIDTHS 938 | Docs: http://tachyons.io/docs/layout/max-widths/ 939 | 940 | Base: 941 | mw = max-width 942 | 943 | Modifiers 944 | 1 = 1st step in width scale 945 | 2 = 2nd step in width scale 946 | 3 = 3rd step in width scale 947 | 4 = 4th step in width scale 948 | 5 = 5th step in width scale 949 | 6 = 6st step in width scale 950 | 7 = 7nd step in width scale 951 | 8 = 8rd step in width scale 952 | 9 = 9th step in width scale 953 | 954 | -100 = literal value 100% 955 | 956 | -none = string value none 957 | 958 | 959 | Media Query Extensions: 960 | -ns = not-small 961 | -m = medium 962 | -l = large 963 | 964 | */ 965 | /* Max Width Percentages */ 966 | .mw-100 { max-width: 100%; } 967 | /* Max Width Scale */ 968 | .mw1 { max-width: 1rem; } 969 | .mw2 { max-width: 2rem; } 970 | .mw3 { max-width: 4rem; } 971 | .mw4 { max-width: 8rem; } 972 | .mw5 { max-width: 16rem; } 973 | .mw6 { max-width: 32rem; } 974 | .mw7 { max-width: 48rem; } 975 | .mw8 { max-width: 64rem; } 976 | .mw9 { max-width: 96rem; } 977 | /* Max Width String Properties */ 978 | .mw-none { max-width: none; } 979 | /* 980 | 981 | WIDTHS 982 | Docs: http://tachyons.io/docs/layout/widths/ 983 | 984 | Base: 985 | w = width 986 | 987 | Modifiers 988 | 1 = 1st step in width scale 989 | 2 = 2nd step in width scale 990 | 3 = 3rd step in width scale 991 | 4 = 4th step in width scale 992 | 5 = 5th step in width scale 993 | 994 | -10 = literal value 10% 995 | -20 = literal value 20% 996 | -25 = literal value 25% 997 | -30 = literal value 30% 998 | -33 = literal value 33% 999 | -34 = literal value 34% 1000 | -40 = literal value 40% 1001 | -50 = literal value 50% 1002 | -60 = literal value 60% 1003 | -70 = literal value 70% 1004 | -75 = literal value 75% 1005 | -80 = literal value 80% 1006 | -90 = literal value 90% 1007 | -100 = literal value 100% 1008 | 1009 | -third = 100% / 3 (Not supported in opera mini or IE8) 1010 | -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) 1011 | -auto = string value auto 1012 | 1013 | 1014 | Media Query Extensions: 1015 | -ns = not-small 1016 | -m = medium 1017 | -l = large 1018 | 1019 | */ 1020 | /* Width Scale */ 1021 | .w1 { width: 1rem; } 1022 | .w2 { width: 2rem; } 1023 | .w3 { width: 4rem; } 1024 | .w4 { width: 8rem; } 1025 | .w5 { width: 16rem; } 1026 | .w-10 { width: 10%; } 1027 | .w-20 { width: 20%; } 1028 | .w-25 { width: 25%; } 1029 | .w-30 { width: 30%; } 1030 | .w-33 { width: 33%; } 1031 | .w-34 { width: 34%; } 1032 | .w-40 { width: 40%; } 1033 | .w-50 { width: 50%; } 1034 | .w-60 { width: 60%; } 1035 | .w-70 { width: 70%; } 1036 | .w-75 { width: 75%; } 1037 | .w-80 { width: 80%; } 1038 | .w-90 { width: 90%; } 1039 | .w-100 { width: 100%; } 1040 | .w-third { width: calc( 100% / 3 ); } 1041 | .w-two-thirds { width: calc( 100% / 1.5 ); } 1042 | .w-auto { width: auto; } 1043 | /* 1044 | 1045 | OVERFLOW 1046 | 1047 | Media Query Extensions: 1048 | -ns = not-small 1049 | -m = medium 1050 | -l = large 1051 | 1052 | */ 1053 | .overflow-visible { overflow: visible; } 1054 | .overflow-hidden { overflow: hidden; } 1055 | .overflow-scroll { overflow: scroll; } 1056 | .overflow-auto { overflow: auto; } 1057 | .overflow-x-visible { overflow-x: visible; } 1058 | .overflow-x-hidden { overflow-x: hidden; } 1059 | .overflow-x-scroll { overflow-x: scroll; } 1060 | .overflow-x-auto { overflow-x: auto; } 1061 | .overflow-y-visible { overflow-y: visible; } 1062 | .overflow-y-hidden { overflow-y: hidden; } 1063 | .overflow-y-scroll { overflow-y: scroll; } 1064 | .overflow-y-auto { overflow-y: auto; } 1065 | /* 1066 | 1067 | POSITIONING 1068 | Docs: http://tachyons.io/docs/layout/position/ 1069 | 1070 | Media Query Extensions: 1071 | -ns = not-small 1072 | -m = medium 1073 | -l = large 1074 | 1075 | */ 1076 | .static { position: static; } 1077 | .relative { position: relative; } 1078 | .absolute { position: absolute; } 1079 | .fixed { position: fixed; } 1080 | /* 1081 | 1082 | OPACITY 1083 | Docs: http://tachyons.io/docs/themes/opacity/ 1084 | 1085 | */ 1086 | .o-100 { opacity: 1; } 1087 | .o-90 { opacity: .9; } 1088 | .o-80 { opacity: .8; } 1089 | .o-70 { opacity: .7; } 1090 | .o-60 { opacity: .6; } 1091 | .o-50 { opacity: .5; } 1092 | .o-40 { opacity: .4; } 1093 | .o-30 { opacity: .3; } 1094 | .o-20 { opacity: .2; } 1095 | .o-10 { opacity: .1; } 1096 | .o-05 { opacity: .05; } 1097 | .o-025 { opacity: .025; } 1098 | .o-0 { opacity: 0; } 1099 | /* 1100 | 1101 | ROTATIONS 1102 | 1103 | */ 1104 | .rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } 1105 | .rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } 1106 | .rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } 1107 | .rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } 1108 | .rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } 1109 | .rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } 1110 | .rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } 1111 | /* 1112 | 1113 | SKINS 1114 | Docs: http://tachyons.io/docs/themes/skins/ 1115 | 1116 | Classes for setting foreground and background colors on elements. 1117 | If you haven't declared a border color, but set border on an element, it will 1118 | be set to the current text color. 1119 | 1120 | */ 1121 | /* Text colors */ 1122 | .black-90 { color: rgba( 0, 0, 0, .9 ); } 1123 | .black-80 { color: rgba( 0, 0, 0, .8 ); } 1124 | .black-70 { color: rgba( 0, 0, 0, .7 ); } 1125 | .black-60 { color: rgba( 0, 0, 0, .6 ); } 1126 | .black-50 { color: rgba( 0, 0, 0, .5 ); } 1127 | .black-40 { color: rgba( 0, 0, 0, .4 ); } 1128 | .black-30 { color: rgba( 0, 0, 0, .3 ); } 1129 | .black-20 { color: rgba( 0, 0, 0, .2 ); } 1130 | .black-10 { color: rgba( 0, 0, 0, .1 ); } 1131 | .black-05 { color: rgba( 0, 0, 0, .05 ); } 1132 | .white-90 { color: rgba( 255, 255, 255, .9 ); } 1133 | .white-80 { color: rgba( 255, 255, 255, .8 ); } 1134 | .white-70 { color: rgba( 255, 255, 255, .7 ); } 1135 | .white-60 { color: rgba( 255, 255, 255, .6 ); } 1136 | .white-50 { color: rgba( 255, 255, 255, .5 ); } 1137 | .white-40 { color: rgba( 255, 255, 255, .4 ); } 1138 | .white-30 { color: rgba( 255, 255, 255, .3 ); } 1139 | .white-20 { color: rgba( 255, 255, 255, .2 ); } 1140 | .white-10 { color: rgba( 255, 255, 255, .1 ); } 1141 | .black { color: #000; } 1142 | .near-black { color: #111; } 1143 | .dark-gray { color: #333; } 1144 | .mid-gray { color: #555; } 1145 | .gray { color: #777; } 1146 | .silver { color: #999; } 1147 | .light-silver { color: #aaa; } 1148 | .moon-gray { color: #ccc; } 1149 | .light-gray { color: #eee; } 1150 | .near-white { color: #f4f4f4; } 1151 | .white { color: #fff; } 1152 | .dark-red { color: #e7040f; } 1153 | .red { color: #ff4136; } 1154 | .light-red { color: #ff725c; } 1155 | .orange { color: #ff6300; } 1156 | .gold { color: #ffb700; } 1157 | .yellow { color: #ffd700; } 1158 | .light-yellow { color: #fbf1a9; } 1159 | .purple { color: #5e2ca5; } 1160 | .light-purple { color: #a463f2; } 1161 | .dark-pink { color: #d5008f; } 1162 | .hot-pink { color: #ff41b4; } 1163 | .pink { color: #ff80cc; } 1164 | .light-pink { color: #ffa3d7; } 1165 | .dark-green { color: #137752; } 1166 | .green { color: #19a974; } 1167 | .light-green { color: #9eebcf; } 1168 | .navy { color: #001b44; } 1169 | .dark-blue { color: #00449e; } 1170 | .blue { color: #357edd; } 1171 | .light-blue { color: #96ccff; } 1172 | .lightest-blue { color: #cdecff; } 1173 | .washed-blue { color: #f6fffe; } 1174 | .washed-green { color: #e8fdf5; } 1175 | .washed-yellow { color: #fffceb; } 1176 | .washed-red { color: #ffdfdf; } 1177 | .color-inherit { color: inherit; } 1178 | .bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); } 1179 | .bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); } 1180 | .bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); } 1181 | .bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); } 1182 | .bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); } 1183 | .bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); } 1184 | .bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); } 1185 | .bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); } 1186 | .bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); } 1187 | .bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); } 1188 | .bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); } 1189 | .bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); } 1190 | .bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); } 1191 | .bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); } 1192 | .bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); } 1193 | .bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); } 1194 | .bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); } 1195 | .bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); } 1196 | .bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); } 1197 | /* Background colors */ 1198 | .bg-black { background-color: #000; } 1199 | .bg-near-black { background-color: #111; } 1200 | .bg-dark-gray { background-color: #333; } 1201 | .bg-mid-gray { background-color: #555; } 1202 | .bg-gray { background-color: #777; } 1203 | .bg-silver { background-color: #999; } 1204 | .bg-light-silver { background-color: #aaa; } 1205 | .bg-moon-gray { background-color: #ccc; } 1206 | .bg-light-gray { background-color: #eee; } 1207 | .bg-near-white { background-color: #f4f4f4; } 1208 | .bg-white { background-color: #fff; } 1209 | .bg-transparent { background-color: transparent; } 1210 | .bg-dark-red { background-color: #e7040f; } 1211 | .bg-red { background-color: #ff4136; } 1212 | .bg-light-red { background-color: #ff725c; } 1213 | .bg-orange { background-color: #ff6300; } 1214 | .bg-gold { background-color: #ffb700; } 1215 | .bg-yellow { background-color: #ffd700; } 1216 | .bg-light-yellow { background-color: #fbf1a9; } 1217 | .bg-purple { background-color: #5e2ca5; } 1218 | .bg-light-purple { background-color: #a463f2; } 1219 | .bg-dark-pink { background-color: #d5008f; } 1220 | .bg-hot-pink { background-color: #ff41b4; } 1221 | .bg-pink { background-color: #ff80cc; } 1222 | .bg-light-pink { background-color: #ffa3d7; } 1223 | .bg-dark-green { background-color: #137752; } 1224 | .bg-green { background-color: #19a974; } 1225 | .bg-light-green { background-color: #9eebcf; } 1226 | .bg-navy { background-color: #001b44; } 1227 | .bg-dark-blue { background-color: #00449e; } 1228 | .bg-blue { background-color: #357edd; } 1229 | .bg-light-blue { background-color: #96ccff; } 1230 | .bg-lightest-blue { background-color: #cdecff; } 1231 | .bg-washed-blue { background-color: #f6fffe; } 1232 | .bg-washed-green { background-color: #e8fdf5; } 1233 | .bg-washed-yellow { background-color: #fffceb; } 1234 | .bg-washed-red { background-color: #ffdfdf; } 1235 | .bg-inherit { background-color: inherit; } 1236 | /* 1237 | 1238 | SKINS:PSEUDO 1239 | 1240 | Customize the color of an element when 1241 | it is focused or hovered over. 1242 | 1243 | */ 1244 | .hover-black:hover { color: #000; } 1245 | .hover-black:focus { color: #000; } 1246 | .hover-near-black:hover { color: #111; } 1247 | .hover-near-black:focus { color: #111; } 1248 | .hover-dark-gray:hover { color: #333; } 1249 | .hover-dark-gray:focus { color: #333; } 1250 | .hover-mid-gray:hover { color: #555; } 1251 | .hover-mid-gray:focus { color: #555; } 1252 | .hover-gray:hover { color: #777; } 1253 | .hover-gray:focus { color: #777; } 1254 | .hover-silver:hover { color: #999; } 1255 | .hover-silver:focus { color: #999; } 1256 | .hover-light-silver:hover { color: #aaa; } 1257 | .hover-light-silver:focus { color: #aaa; } 1258 | .hover-moon-gray:hover { color: #ccc; } 1259 | .hover-moon-gray:focus { color: #ccc; } 1260 | .hover-light-gray:hover { color: #eee; } 1261 | .hover-light-gray:focus { color: #eee; } 1262 | .hover-near-white:hover { color: #f4f4f4; } 1263 | .hover-near-white:focus { color: #f4f4f4; } 1264 | .hover-white:hover { color: #fff; } 1265 | .hover-white:focus { color: #fff; } 1266 | .hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); } 1267 | .hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); } 1268 | .hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); } 1269 | .hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); } 1270 | .hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); } 1271 | .hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); } 1272 | .hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); } 1273 | .hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); } 1274 | .hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); } 1275 | .hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); } 1276 | .hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); } 1277 | .hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); } 1278 | .hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); } 1279 | .hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); } 1280 | .hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); } 1281 | .hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); } 1282 | .hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); } 1283 | .hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); } 1284 | .hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); } 1285 | .hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); } 1286 | .hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); } 1287 | .hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); } 1288 | .hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); } 1289 | .hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); } 1290 | .hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); } 1291 | .hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); } 1292 | .hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); } 1293 | .hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); } 1294 | .hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); } 1295 | .hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); } 1296 | .hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); } 1297 | .hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); } 1298 | .hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); } 1299 | .hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); } 1300 | .hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); } 1301 | .hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); } 1302 | .hover-inherit:hover, .hover-inherit:focus { color: inherit; } 1303 | .hover-bg-black:hover { background-color: #000; } 1304 | .hover-bg-black:focus { background-color: #000; } 1305 | .hover-bg-near-black:hover { background-color: #111; } 1306 | .hover-bg-near-black:focus { background-color: #111; } 1307 | .hover-bg-dark-gray:hover { background-color: #333; } 1308 | .hover-bg-dark-gray:focus { background-color: #333; } 1309 | .hover-bg-dark-gray:focus { background-color: #555; } 1310 | .hover-bg-mid-gray:hover { background-color: #555; } 1311 | .hover-bg-gray:hover { background-color: #777; } 1312 | .hover-bg-gray:focus { background-color: #777; } 1313 | .hover-bg-silver:hover { background-color: #999; } 1314 | .hover-bg-silver:focus { background-color: #999; } 1315 | .hover-bg-light-silver:hover { background-color: #aaa; } 1316 | .hover-bg-light-silver:focus { background-color: #aaa; } 1317 | .hover-bg-moon-gray:hover { background-color: #ccc; } 1318 | .hover-bg-moon-gray:focus { background-color: #ccc; } 1319 | .hover-bg-light-gray:hover { background-color: #eee; } 1320 | .hover-bg-light-gray:focus { background-color: #eee; } 1321 | .hover-bg-near-white:hover { background-color: #f4f4f4; } 1322 | .hover-bg-near-white:focus { background-color: #f4f4f4; } 1323 | .hover-bg-white:hover { background-color: #fff; } 1324 | .hover-bg-white:focus { background-color: #fff; } 1325 | .hover-bg-transparent:hover { background-color: transparent; } 1326 | .hover-bg-transparent:focus { background-color: transparent; } 1327 | .hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); } 1328 | .hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); } 1329 | .hover-bg-black-80:hover { background-color: rgba( 0, 0, 0, .8 ); } 1330 | .hover-bg-black-80:focus { background-color: rgba( 0, 0, 0, .8 ); } 1331 | .hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); } 1332 | .hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); } 1333 | .hover-bg-black-60:hover { background-color: rgba( 0, 0, 0, .6 ); } 1334 | .hover-bg-black-60:focus { background-color: rgba( 0, 0, 0, .6 ); } 1335 | .hover-bg-black-50:hover { background-color: rgba( 0, 0, 0, .5 ); } 1336 | .hover-bg-black-50:focus { background-color: rgba( 0, 0, 0, .5 ); } 1337 | .hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); } 1338 | .hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); } 1339 | .hover-bg-black-30:hover { background-color: rgba( 0, 0, 0, .3 ); } 1340 | .hover-bg-black-30:focus { background-color: rgba( 0, 0, 0, .3 ); } 1341 | .hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); } 1342 | .hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); } 1343 | .hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); } 1344 | .hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); } 1345 | .hover-bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); } 1346 | .hover-bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); } 1347 | .hover-bg-white-80:hover { background-color: rgba( 255, 255, 255, .8 ); } 1348 | .hover-bg-white-80:focus { background-color: rgba( 255, 255, 255, .8 ); } 1349 | .hover-bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); } 1350 | .hover-bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); } 1351 | .hover-bg-white-60:hover { background-color: rgba( 255, 255, 255, .6 ); } 1352 | .hover-bg-white-60:focus { background-color: rgba( 255, 255, 255, .6 ); } 1353 | .hover-bg-white-50:hover { background-color: rgba( 255, 255, 255, .5 ); } 1354 | .hover-bg-white-50:focus { background-color: rgba( 255, 255, 255, .5 ); } 1355 | .hover-bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); } 1356 | .hover-bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); } 1357 | .hover-bg-white-30:hover { background-color: rgba( 255, 255, 255, .3 ); } 1358 | .hover-bg-white-30:focus { background-color: rgba( 255, 255, 255, .3 ); } 1359 | .hover-bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); } 1360 | .hover-bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); } 1361 | .hover-bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); } 1362 | .hover-bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); } 1363 | .hover-dark-red:hover { color: #e7040f; } 1364 | .hover-dark-red:focus { color: #e7040f; } 1365 | .hover-red:hover { color: #ff4136; } 1366 | .hover-red:focus { color: #ff4136; } 1367 | .hover-light-red:hover { color: #ff725c; } 1368 | .hover-light-red:focus { color: #ff725c; } 1369 | .hover-orange:hover { color: #ff6300; } 1370 | .hover-orange:focus { color: #ff6300; } 1371 | .hover-gold:hover { color: #ffb700; } 1372 | .hover-gold:focus { color: #ffb700; } 1373 | .hover-yellow:hover { color: #ffd700; } 1374 | .hover-yellow:focus { color: #ffd700; } 1375 | .hover-light-yellow:hover { color: #fbf1a9; } 1376 | .hover-light-yellow:focus { color: #fbf1a9; } 1377 | .hover-purple:hover { color: #5e2ca5; } 1378 | .hover-purple:focus { color: #5e2ca5; } 1379 | .hover-light-purple:hover { color: #a463f2; } 1380 | .hover-light-purple:focus { color: #a463f2; } 1381 | .hover-dark-pink:hover { color: #d5008f; } 1382 | .hover-dark-pink:focus { color: #d5008f; } 1383 | .hover-hot-pink:hover { color: #ff41b4; } 1384 | .hover-hot-pink:focus { color: #ff41b4; } 1385 | .hover-pink:hover { color: #ff80cc; } 1386 | .hover-pink:focus { color: #ff80cc; } 1387 | .hover-light-pink:hover { color: #ffa3d7; } 1388 | .hover-light-pink:focus { color: #ffa3d7; } 1389 | .hover-dark-green:hover { color: #137752; } 1390 | .hover-dark-green:focus { color: #137752; } 1391 | .hover-green:hover { color: #19a974; } 1392 | .hover-green:focus { color: #19a974; } 1393 | .hover-light-green:hover { color: #9eebcf; } 1394 | .hover-light-green:focus { color: #9eebcf; } 1395 | .hover-navy:hover { color: #001b44; } 1396 | .hover-navy:focus { color: #001b44; } 1397 | .hover-dark-blue:hover { color: #00449e; } 1398 | .hover-dark-blue:focus { color: #00449e; } 1399 | .hover-blue:hover { color: #357edd; } 1400 | .hover-blue:focus { color: #357edd; } 1401 | .hover-light-blue:hover { color: #96ccff; } 1402 | .hover-light-blue:focus { color: #96ccff; } 1403 | .hover-lightest-blue:hover { color: #cdecff; } 1404 | .hover-lightest-blue:focus { color: #cdecff; } 1405 | .hover-washed-blue:hover { color: #f6fffe; } 1406 | .hover-washed-blue:focus { color: #f6fffe; } 1407 | .hover-washed-green:hover { color: #e8fdf5; } 1408 | .hover-washed-green:focus { color: #e8fdf5; } 1409 | .hover-washed-yellow:hover { color: #fffceb; } 1410 | .hover-washed-yellow:focus { color: #fffceb; } 1411 | .hover-washed-red:hover { color: #ffdfdf; } 1412 | .hover-washed-red:focus { color: #ffdfdf; } 1413 | .hover-bg-dark-red:hover { background-color: #e7040f; } 1414 | .hover-bg-dark-red:focus { background-color: #e7040f; } 1415 | .hover-bg-red:hover { background-color: #ff4136; } 1416 | .hover-bg-red:focus { background-color: #ff4136; } 1417 | .hover-bg-light-red:hover { background-color: #ff725c; } 1418 | .hover-bg-light-red:focus { background-color: #ff725c; } 1419 | .hover-bg-orange:hover { background-color: #ff6300; } 1420 | .hover-bg-orange:focus { background-color: #ff6300; } 1421 | .hover-bg-gold:hover { background-color: #ffb700; } 1422 | .hover-bg-gold:focus { background-color: #ffb700; } 1423 | .hover-bg-yellow:hover { background-color: #ffd700; } 1424 | .hover-bg-yellow:focus { background-color: #ffd700; } 1425 | .hover-bg-light-yellow:hover { background-color: #fbf1a9; } 1426 | .hover-bg-light-yellow:focus { background-color: #fbf1a9; } 1427 | .hover-bg-purple:hover { background-color: #5e2ca5; } 1428 | .hover-bg-purple:focus { background-color: #5e2ca5; } 1429 | .hover-bg-light-purple:hover { background-color: #a463f2; } 1430 | .hover-bg-light-purple:focus { background-color: #a463f2; } 1431 | .hover-bg-dark-pink:hover { background-color: #d5008f; } 1432 | .hover-bg-dark-pink:focus { background-color: #d5008f; } 1433 | .hover-bg-hot-pink:hover { background-color: #ff41b4; } 1434 | .hover-bg-hot-pink:focus { background-color: #ff41b4; } 1435 | .hover-bg-pink:hover { background-color: #ff80cc; } 1436 | .hover-bg-pink:focus { background-color: #ff80cc; } 1437 | .hover-bg-light-pink:hover { background-color: #ffa3d7; } 1438 | .hover-bg-light-pink:focus { background-color: #ffa3d7; } 1439 | .hover-bg-dark-green:hover { background-color: #137752; } 1440 | .hover-bg-dark-green:focus { background-color: #137752; } 1441 | .hover-bg-green:hover { background-color: #19a974; } 1442 | .hover-bg-green:focus { background-color: #19a974; } 1443 | .hover-bg-light-green:hover { background-color: #9eebcf; } 1444 | .hover-bg-light-green:focus { background-color: #9eebcf; } 1445 | .hover-bg-navy:hover { background-color: #001b44; } 1446 | .hover-bg-navy:focus { background-color: #001b44; } 1447 | .hover-bg-dark-blue:hover { background-color: #00449e; } 1448 | .hover-bg-dark-blue:focus { background-color: #00449e; } 1449 | .hover-bg-blue:hover { background-color: #357edd; } 1450 | .hover-bg-blue:focus { background-color: #357edd; } 1451 | .hover-bg-light-blue:hover { background-color: #96ccff; } 1452 | .hover-bg-light-blue:focus { background-color: #96ccff; } 1453 | .hover-bg-lightest-blue:hover { background-color: #cdecff; } 1454 | .hover-bg-lightest-blue:focus { background-color: #cdecff; } 1455 | .hover-bg-washed-blue:hover { background-color: #f6fffe; } 1456 | .hover-bg-washed-blue:focus { background-color: #f6fffe; } 1457 | .hover-bg-washed-green:hover { background-color: #e8fdf5; } 1458 | .hover-bg-washed-green:focus { background-color: #e8fdf5; } 1459 | .hover-bg-washed-yellow:hover { background-color: #fffceb; } 1460 | .hover-bg-washed-yellow:focus { background-color: #fffceb; } 1461 | .hover-bg-washed-red:hover { background-color: #ffdfdf; } 1462 | .hover-bg-washed-red:focus { background-color: #ffdfdf; } 1463 | .hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; } 1464 | /* Variables */ 1465 | /* 1466 | SPACING 1467 | Docs: http://tachyons.io/docs/layout/spacing/ 1468 | 1469 | An eight step powers of two scale ranging from 0 to 16rem. 1470 | 1471 | Base: 1472 | p = padding 1473 | m = margin 1474 | 1475 | Modifiers: 1476 | a = all 1477 | h = horizontal 1478 | v = vertical 1479 | t = top 1480 | r = right 1481 | b = bottom 1482 | l = left 1483 | 1484 | 0 = none 1485 | 1 = 1st step in spacing scale 1486 | 2 = 2nd step in spacing scale 1487 | 3 = 3rd step in spacing scale 1488 | 4 = 4th step in spacing scale 1489 | 5 = 5th step in spacing scale 1490 | 6 = 6th step in spacing scale 1491 | 7 = 7th step in spacing scale 1492 | 1493 | Media Query Extensions: 1494 | -ns = not-small 1495 | -m = medium 1496 | -l = large 1497 | 1498 | */ 1499 | .pa0 { padding: 0; } 1500 | .pa1 { padding: .25rem; } 1501 | .pa2 { padding: .5rem; } 1502 | .pa3 { padding: 1rem; } 1503 | .pa4 { padding: 2rem; } 1504 | .pa5 { padding: 4rem; } 1505 | .pa6 { padding: 8rem; } 1506 | .pa7 { padding: 16rem; } 1507 | .pl0 { padding-left: 0; } 1508 | .pl1 { padding-left: .25rem; } 1509 | .pl2 { padding-left: .5rem; } 1510 | .pl3 { padding-left: 1rem; } 1511 | .pl4 { padding-left: 2rem; } 1512 | .pl5 { padding-left: 4rem; } 1513 | .pl6 { padding-left: 8rem; } 1514 | .pl7 { padding-left: 16rem; } 1515 | .pr0 { padding-right: 0; } 1516 | .pr1 { padding-right: .25rem; } 1517 | .pr2 { padding-right: .5rem; } 1518 | .pr3 { padding-right: 1rem; } 1519 | .pr4 { padding-right: 2rem; } 1520 | .pr5 { padding-right: 4rem; } 1521 | .pr6 { padding-right: 8rem; } 1522 | .pr7 { padding-right: 16rem; } 1523 | .pb0 { padding-bottom: 0; } 1524 | .pb1 { padding-bottom: .25rem; } 1525 | .pb2 { padding-bottom: .5rem; } 1526 | .pb3 { padding-bottom: 1rem; } 1527 | .pb4 { padding-bottom: 2rem; } 1528 | .pb5 { padding-bottom: 4rem; } 1529 | .pb6 { padding-bottom: 8rem; } 1530 | .pb7 { padding-bottom: 16rem; } 1531 | .pt0 { padding-top: 0; } 1532 | .pt1 { padding-top: .25rem; } 1533 | .pt2 { padding-top: .5rem; } 1534 | .pt3 { padding-top: 1rem; } 1535 | .pt4 { padding-top: 2rem; } 1536 | .pt5 { padding-top: 4rem; } 1537 | .pt6 { padding-top: 8rem; } 1538 | .pt7 { padding-top: 16rem; } 1539 | .pv0 { padding-top: 0; padding-bottom: 0; } 1540 | .pv1 { padding-top: .25rem; padding-bottom: .25rem; } 1541 | .pv2 { padding-top: .5rem; padding-bottom: .5rem; } 1542 | .pv3 { padding-top: 1rem; padding-bottom: 1rem; } 1543 | .pv4 { padding-top: 2rem; padding-bottom: 2rem; } 1544 | .pv5 { padding-top: 4rem; padding-bottom: 4rem; } 1545 | .pv6 { padding-top: 8rem; padding-bottom: 8rem; } 1546 | .pv7 { padding-top: 16rem; padding-bottom: 16rem; } 1547 | .ph0 { padding-left: 0; padding-right: 0; } 1548 | .ph1 { padding-left: .25rem; padding-right: .25rem; } 1549 | .ph2 { padding-left: .5rem; padding-right: .5rem; } 1550 | .ph3 { padding-left: 1rem; padding-right: 1rem; } 1551 | .ph4 { padding-left: 2rem; padding-right: 2rem; } 1552 | .ph5 { padding-left: 4rem; padding-right: 4rem; } 1553 | .ph6 { padding-left: 8rem; padding-right: 8rem; } 1554 | .ph7 { padding-left: 16rem; padding-right: 16rem; } 1555 | .ma0 { margin: 0; } 1556 | .ma1 { margin: .25rem; } 1557 | .ma2 { margin: .5rem; } 1558 | .ma3 { margin: 1rem; } 1559 | .ma4 { margin: 2rem; } 1560 | .ma5 { margin: 4rem; } 1561 | .ma6 { margin: 8rem; } 1562 | .ma7 { margin: 16rem; } 1563 | .ml0 { margin-left: 0; } 1564 | .ml1 { margin-left: .25rem; } 1565 | .ml2 { margin-left: .5rem; } 1566 | .ml3 { margin-left: 1rem; } 1567 | .ml4 { margin-left: 2rem; } 1568 | .ml5 { margin-left: 4rem; } 1569 | .ml6 { margin-left: 8rem; } 1570 | .ml7 { margin-left: 16rem; } 1571 | .mr0 { margin-right: 0; } 1572 | .mr1 { margin-right: .25rem; } 1573 | .mr2 { margin-right: .5rem; } 1574 | .mr3 { margin-right: 1rem; } 1575 | .mr4 { margin-right: 2rem; } 1576 | .mr5 { margin-right: 4rem; } 1577 | .mr6 { margin-right: 8rem; } 1578 | .mr7 { margin-right: 16rem; } 1579 | .mb0 { margin-bottom: 0; } 1580 | .mb1 { margin-bottom: .25rem; } 1581 | .mb2 { margin-bottom: .5rem; } 1582 | .mb3 { margin-bottom: 1rem; } 1583 | .mb4 { margin-bottom: 2rem; } 1584 | .mb5 { margin-bottom: 4rem; } 1585 | .mb6 { margin-bottom: 8rem; } 1586 | .mb7 { margin-bottom: 16rem; } 1587 | .mt0 { margin-top: 0; } 1588 | .mt1 { margin-top: .25rem; } 1589 | .mt2 { margin-top: .5rem; } 1590 | .mt3 { margin-top: 1rem; } 1591 | .mt4 { margin-top: 2rem; } 1592 | .mt5 { margin-top: 4rem; } 1593 | .mt6 { margin-top: 8rem; } 1594 | .mt7 { margin-top: 16rem; } 1595 | .mv0 { margin-top: 0; margin-bottom: 0; } 1596 | .mv1 { margin-top: .25rem; margin-bottom: .25rem; } 1597 | .mv2 { margin-top: .5rem; margin-bottom: .5rem; } 1598 | .mv3 { margin-top: 1rem; margin-bottom: 1rem; } 1599 | .mv4 { margin-top: 2rem; margin-bottom: 2rem; } 1600 | .mv5 { margin-top: 4rem; margin-bottom: 4rem; } 1601 | .mv6 { margin-top: 8rem; margin-bottom: 8rem; } 1602 | .mv7 { margin-top: 16rem; margin-bottom: 16rem; } 1603 | .mh0 { margin-left: 0; margin-right: 0; } 1604 | .mh1 { margin-left: .25rem; margin-right: .25rem; } 1605 | .mh2 { margin-left: .5rem; margin-right: .5rem; } 1606 | .mh3 { margin-left: 1rem; margin-right: 1rem; } 1607 | .mh4 { margin-left: 2rem; margin-right: 2rem; } 1608 | .mh5 { margin-left: 4rem; margin-right: 4rem; } 1609 | .mh6 { margin-left: 8rem; margin-right: 8rem; } 1610 | .mh7 { margin-left: 16rem; margin-right: 16rem; } 1611 | /* 1612 | NEGATIVE MARGINS 1613 | 1614 | Base: 1615 | n = negative 1616 | 1617 | Modifiers: 1618 | a = all 1619 | t = top 1620 | r = right 1621 | b = bottom 1622 | l = left 1623 | 1624 | 1 = 1st step in spacing scale 1625 | 2 = 2nd step in spacing scale 1626 | 3 = 3rd step in spacing scale 1627 | 4 = 4th step in spacing scale 1628 | 5 = 5th step in spacing scale 1629 | 6 = 6th step in spacing scale 1630 | 7 = 7th step in spacing scale 1631 | 1632 | Media Query Extensions: 1633 | -ns = not-small 1634 | -m = medium 1635 | -l = large 1636 | 1637 | */ 1638 | .na1 { margin: -.25rem; } 1639 | .na2 { margin: -.5rem; } 1640 | .na3 { margin: -1rem; } 1641 | .na4 { margin: -2rem; } 1642 | .na5 { margin: -4rem; } 1643 | .na6 { margin: -8rem; } 1644 | .na7 { margin: -16rem; } 1645 | .nl1 { margin-left: -.25rem; } 1646 | .nl2 { margin-left: -.5rem; } 1647 | .nl3 { margin-left: -1rem; } 1648 | .nl4 { margin-left: -2rem; } 1649 | .nl5 { margin-left: -4rem; } 1650 | .nl6 { margin-left: -8rem; } 1651 | .nl7 { margin-left: -16rem; } 1652 | .nr1 { margin-right: -.25rem; } 1653 | .nr2 { margin-right: -.5rem; } 1654 | .nr3 { margin-right: -1rem; } 1655 | .nr4 { margin-right: -2rem; } 1656 | .nr5 { margin-right: -4rem; } 1657 | .nr6 { margin-right: -8rem; } 1658 | .nr7 { margin-right: -16rem; } 1659 | .nb1 { margin-bottom: -.25rem; } 1660 | .nb2 { margin-bottom: -.5rem; } 1661 | .nb3 { margin-bottom: -1rem; } 1662 | .nb4 { margin-bottom: -2rem; } 1663 | .nb5 { margin-bottom: -4rem; } 1664 | .nb6 { margin-bottom: -8rem; } 1665 | .nb7 { margin-bottom: -16rem; } 1666 | .nt1 { margin-top: -.25rem; } 1667 | .nt2 { margin-top: -.5rem; } 1668 | .nt3 { margin-top: -1rem; } 1669 | .nt4 { margin-top: -2rem; } 1670 | .nt5 { margin-top: -4rem; } 1671 | .nt6 { margin-top: -8rem; } 1672 | .nt7 { margin-top: -16rem; } 1673 | /* 1674 | 1675 | TABLES 1676 | Docs: http://tachyons.io/docs/elements/tables/ 1677 | 1678 | */ 1679 | .collapse { border-collapse: collapse; border-spacing: 0; } 1680 | .striped--light-silver:nth-child(odd) { background-color: #aaa; } 1681 | .striped--moon-gray:nth-child(odd) { background-color: #ccc; } 1682 | .striped--light-gray:nth-child(odd) { background-color: #eee; } 1683 | .striped--near-white:nth-child(odd) { background-color: #f4f4f4; } 1684 | .stripe-light:nth-child(odd) { background-color: rgba( 255, 255, 255, .1 ); } 1685 | .stripe-dark:nth-child(odd) { background-color: rgba( 0, 0, 0, .1 ); } 1686 | /* 1687 | 1688 | TEXT DECORATION 1689 | Docs: http://tachyons.io/docs/typography/text-decoration/ 1690 | 1691 | 1692 | Media Query Extensions: 1693 | -ns = not-small 1694 | -m = medium 1695 | -l = large 1696 | 1697 | */ 1698 | .strike { text-decoration: line-through; } 1699 | .underline { text-decoration: underline; } 1700 | .no-underline { text-decoration: none; } 1701 | /* 1702 | 1703 | TEXT ALIGN 1704 | Docs: http://tachyons.io/docs/typography/text-align/ 1705 | 1706 | Base 1707 | t = text-align 1708 | 1709 | Modifiers 1710 | l = left 1711 | r = right 1712 | c = center 1713 | 1714 | Media Query Extensions: 1715 | -ns = not-small 1716 | -m = medium 1717 | -l = large 1718 | 1719 | */ 1720 | .tl { text-align: left; } 1721 | .tr { text-align: right; } 1722 | .tc { text-align: center; } 1723 | /* 1724 | 1725 | TEXT TRANSFORM 1726 | Docs: http://tachyons.io/docs/typography/text-transform/ 1727 | 1728 | Base: 1729 | tt = text-transform 1730 | 1731 | Modifiers 1732 | c = capitalize 1733 | l = lowercase 1734 | u = uppercase 1735 | n = none 1736 | 1737 | Media Query Extensions: 1738 | -ns = not-small 1739 | -m = medium 1740 | -l = large 1741 | 1742 | */ 1743 | .ttc { text-transform: capitalize; } 1744 | .ttl { text-transform: lowercase; } 1745 | .ttu { text-transform: uppercase; } 1746 | .ttn { text-transform: none; } 1747 | /* 1748 | 1749 | TYPE SCALE 1750 | Docs: http://tachyons.io/docs/typography/scale/ 1751 | 1752 | Base: 1753 | f = font-size 1754 | 1755 | Modifiers 1756 | 1 = 1st step in size scale 1757 | 2 = 2nd step in size scale 1758 | 3 = 3rd step in size scale 1759 | 4 = 4th step in size scale 1760 | 5 = 5th step in size scale 1761 | 6 = 6th step in size scale 1762 | 7 = 7th step in size scale 1763 | 1764 | Media Query Extensions: 1765 | -ns = not-small 1766 | -m = medium 1767 | -l = large 1768 | */ 1769 | /* 1770 | * For Hero/Marketing Titles 1771 | * 1772 | * These generally are too large for mobile 1773 | * so be careful using them on smaller screens. 1774 | * */ 1775 | .f-6, .f-headline { font-size: 6rem; } 1776 | .f-5, .f-subheadline { font-size: 5rem; } 1777 | /* Type Scale */ 1778 | .f1 { font-size: 3rem; } 1779 | .f2 { font-size: 2.25rem; } 1780 | .f3 { font-size: 1.5rem; } 1781 | .f4 { font-size: 1.25rem; } 1782 | .f5 { font-size: 1rem; } 1783 | .f6 { font-size: .875rem; } 1784 | .f7 { font-size: .75rem; } 1785 | /* Small and hard to read for many people so use with extreme caution */ 1786 | /* 1787 | 1788 | TYPOGRAPHY 1789 | http://tachyons.io/docs/typography/measure/ 1790 | 1791 | Media Query Extensions: 1792 | -ns = not-small 1793 | -m = medium 1794 | -l = large 1795 | 1796 | */ 1797 | /* Measure is limited to ~66 characters */ 1798 | .measure { max-width: 30em; } 1799 | /* Measure is limited to ~80 characters */ 1800 | .measure-wide { max-width: 34em; } 1801 | /* Measure is limited to ~45 characters */ 1802 | .measure-narrow { max-width: 20em; } 1803 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 1804 | .indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; } 1805 | .small-caps { font-variant: small-caps; } 1806 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 1807 | .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 1808 | /* 1809 | 1810 | UTILITIES 1811 | 1812 | Media Query Extensions: 1813 | -ns = not-small 1814 | -m = medium 1815 | -l = large 1816 | 1817 | */ 1818 | /* Equivalent to .overflow-y-scroll */ 1819 | .overflow-container { overflow-y: scroll; } 1820 | .center { margin-right: auto; margin-left: auto; } 1821 | /* 1822 | 1823 | VISIBILITY 1824 | 1825 | Media Query Extensions: 1826 | -ns = not-small 1827 | -m = medium 1828 | -l = large 1829 | 1830 | */ 1831 | /* 1832 | Text that is hidden but accessible 1833 | Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 1834 | */ 1835 | .clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } 1836 | /* 1837 | 1838 | WHITE SPACE 1839 | 1840 | Media Query Extensions: 1841 | -ns = not-small 1842 | -m = medium 1843 | -l = large 1844 | 1845 | */ 1846 | .ws-normal { white-space: normal; } 1847 | .nowrap { white-space: nowrap; } 1848 | .pre { white-space: pre; } 1849 | /* 1850 | 1851 | VERTICAL ALIGN 1852 | 1853 | Media Query Extensions: 1854 | -ns = not-small 1855 | -m = medium 1856 | -l = large 1857 | 1858 | */ 1859 | .v-base { vertical-align: baseline; } 1860 | .v-mid { vertical-align: middle; } 1861 | .v-top { vertical-align: top; } 1862 | .v-btm { vertical-align: bottom; } 1863 | /* 1864 | 1865 | HOVER EFFECTS 1866 | Docs: http://tachyons.io/docs/themes/hovers/ 1867 | 1868 | - Dim 1869 | - Glow 1870 | - Hide Child 1871 | - Underline text 1872 | - Grow 1873 | - Pointer 1874 | - Shadow 1875 | 1876 | */ 1877 | /* 1878 | 1879 | Dim element on hover by adding the dim class. 1880 | 1881 | */ 1882 | .dim { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } 1883 | .dim:hover, .dim:focus { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } 1884 | .dim:active { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; } 1885 | /* 1886 | 1887 | Animate opacity to 100% on hover by adding the glow class. 1888 | 1889 | */ 1890 | .glow { -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } 1891 | .glow:hover, .glow:focus { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } 1892 | /* 1893 | 1894 | Hide child & reveal on hover: 1895 | 1896 | Put the hide-child class on a parent element and any nested element with the 1897 | child class will be hidden and displayed on hover or focus. 1898 | 1899 |
1900 |
Hidden until hover or focus
1901 |
Hidden until hover or focus
1902 |
Hidden until hover or focus
1903 |
Hidden until hover or focus
1904 |
1905 | */ 1906 | .hide-child .child { opacity: 0; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } 1907 | .hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } 1908 | .underline-hover:hover, .underline-hover:focus { text-decoration: underline; } 1909 | /* Can combine this with overflow-hidden to make background images grow on hover 1910 | * even if you are using background-size: cover */ 1911 | .grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-out; transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; } 1912 | .grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); } 1913 | .grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); } 1914 | .grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-in-out; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; } 1915 | .grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); } 1916 | .grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); } 1917 | /* Add pointer on hover */ 1918 | .pointer:hover { cursor: pointer; } 1919 | /* 1920 | Add shadow on hover. 1921 | 1922 | Performant box-shadow animation pattern from 1923 | http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 1924 | */ 1925 | .shadow-hover { cursor: pointer; position: relative; -webkit-transition: all .5s cubic-bezier( .165, .84, .44, 1 ); transition: all .5s cubic-bezier( .165, .84, .44, 1 ); } 1926 | .shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); } 1927 | .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; } 1928 | /* Combine with classes in skins and skins-pseudo for 1929 | * many different transition possibilities. */ 1930 | .bg-animate, .bg-animate:hover, .bg-animate:focus { -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } 1931 | /* 1932 | 1933 | Z-INDEX 1934 | 1935 | Base 1936 | z = z-index 1937 | 1938 | Modifiers 1939 | -0 = literal value 0 1940 | -1 = literal value 1 1941 | -2 = literal value 2 1942 | -3 = literal value 3 1943 | -4 = literal value 4 1944 | -5 = literal value 5 1945 | -999 = literal value 999 1946 | -9999 = literal value 9999 1947 | 1948 | -max = largest accepted z-index value as integer 1949 | 1950 | -inherit = string value inherit 1951 | -initial = string value initial 1952 | -unset = string value unset 1953 | 1954 | MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index 1955 | Spec: http://www.w3.org/TR/CSS2/zindex.html 1956 | Articles: 1957 | https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 1958 | 1959 | Tips on extending: 1960 | There might be a time worth using negative z-index values. 1961 | Or if you are using tachyons with another project, you might need to 1962 | adjust these values to suit your needs. 1963 | 1964 | */ 1965 | .z-0 { z-index: 0; } 1966 | .z-1 { z-index: 1; } 1967 | .z-2 { z-index: 2; } 1968 | .z-3 { z-index: 3; } 1969 | .z-4 { z-index: 4; } 1970 | .z-5 { z-index: 5; } 1971 | .z-999 { z-index: 999; } 1972 | .z-9999 { z-index: 9999; } 1973 | .z-max { z-index: 2147483647; } 1974 | .z-inherit { z-index: inherit; } 1975 | .z-initial { z-index: initial; } 1976 | .z-unset { z-index: unset; } 1977 | /* 1978 | 1979 | NESTED 1980 | Tachyons module for styling nested elements 1981 | that are generated by a cms. 1982 | 1983 | */ 1984 | .nested-copy-line-height p, .nested-copy-line-height ul, 1985 | .nested-copy-line-height ol { line-height: 1.5; } 1986 | .nested-headline-line-height h1, .nested-headline-line-height h2, 1987 | .nested-headline-line-height h3, .nested-headline-line-height h4, 1988 | .nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; } 1989 | .nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; } 1990 | .nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; } 1991 | .nested-copy-seperator p+p { margin-top: 1.5em; } 1992 | .nested-img img { width: 100%; max-width: 100%; display: block; } 1993 | .nested-links a { color: #357edd; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } 1994 | .nested-links a:hover { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } 1995 | .nested-links a:focus { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } 1996 | /* 1997 | 1998 | STYLES 1999 | 2000 | Add custom styles here. 2001 | 2002 | */ 2003 | /* Variables */ 2004 | /* Importing here will allow you to override any variables in the modules */ 2005 | /* 2006 | 2007 | Tachyons 2008 | COLOR VARIABLES 2009 | 2010 | Grayscale 2011 | - Solids 2012 | - Transparencies 2013 | Colors 2014 | 2015 | */ 2016 | /* 2017 | 2018 | CUSTOM MEDIA QUERIES 2019 | 2020 | Media query values can be changed to fit your own content. 2021 | There are no magic bullets when it comes to media query width values. 2022 | They should be declared in em units - and they should be set to meet 2023 | the needs of your content. You can also add additional media queries, 2024 | or remove some of the existing ones. 2025 | 2026 | These media queries can be referenced like so: 2027 | 2028 | @media (--breakpoint-not-small) { 2029 | .medium-and-larger-specific-style { 2030 | background-color: red; 2031 | } 2032 | } 2033 | 2034 | @media (--breakpoint-medium) { 2035 | .medium-screen-specific-style { 2036 | background-color: red; 2037 | } 2038 | } 2039 | 2040 | @media (--breakpoint-large) { 2041 | .large-and-larger-screen-specific-style { 2042 | background-color: red; 2043 | } 2044 | } 2045 | 2046 | */ 2047 | /* Media Queries */ 2048 | /* Debugging */ 2049 | /* 2050 | 2051 | DEBUG CHILDREN 2052 | Docs: http://tachyons.io/docs/debug/ 2053 | 2054 | Just add the debug class to any element to see outlines on its 2055 | children. 2056 | 2057 | */ 2058 | .debug * { outline: 1px solid gold; } 2059 | .debug-white * { outline: 1px solid white; } 2060 | .debug-black * { outline: 1px solid black; } 2061 | /* 2062 | 2063 | DEBUG GRID 2064 | http://tachyons.io/docs/debug-grid/ 2065 | 2066 | Can be useful for debugging layout issues 2067 | or helping to make sure things line up perfectly. 2068 | Just tack one of these classes onto a parent element. 2069 | 2070 | */ 2071 | .debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg== ) repeat top left; } 2072 | .debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC ) repeat top left; } 2073 | .debug-grid-8-solid { background: white url( data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z ) repeat top left; } 2074 | .debug-grid-16-solid { background: white url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII= ) repeat top left; } 2075 | /* Uncomment out the line below to help debug layout issues */ 2076 | /* @import './_debug'; */ 2077 | @media screen and (min-width: 30em) { 2078 | .aspect-ratio-ns { height: 0; position: relative; } 2079 | .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } 2080 | .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } 2081 | .aspect-ratio--4x3-ns { padding-bottom: 75%; } 2082 | .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } 2083 | .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } 2084 | .aspect-ratio--4x6-ns { padding-bottom: 150%; } 2085 | .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } 2086 | .aspect-ratio--5x8-ns { padding-bottom: 160%; } 2087 | .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } 2088 | .aspect-ratio--5x7-ns { padding-bottom: 140%; } 2089 | .aspect-ratio--1x1-ns { padding-bottom: 100%; } 2090 | .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } 2091 | .cover-ns { background-size: cover !important; } 2092 | .contain-ns { background-size: contain !important; } 2093 | .bg-center-ns { background-repeat: no-repeat; background-position: center center; } 2094 | .bg-top-ns { background-repeat: no-repeat; background-position: top center; } 2095 | .bg-right-ns { background-repeat: no-repeat; background-position: center right; } 2096 | .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; } 2097 | .bg-left-ns { background-repeat: no-repeat; background-position: center left; } 2098 | .outline-ns { outline: 1px solid; } 2099 | .outline-transparent-ns { outline: 1px solid transparent; } 2100 | .outline-0-ns { outline: 0; } 2101 | .ba-ns { border-style: solid; border-width: 1px; } 2102 | .bt-ns { border-top-style: solid; border-top-width: 1px; } 2103 | .br-ns { border-right-style: solid; border-right-width: 1px; } 2104 | .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } 2105 | .bl-ns { border-left-style: solid; border-left-width: 1px; } 2106 | .bn-ns { border-style: none; border-width: 0; } 2107 | .br0-ns { border-radius: 0; } 2108 | .br1-ns { border-radius: .125rem; } 2109 | .br2-ns { border-radius: .25rem; } 2110 | .br3-ns { border-radius: .5rem; } 2111 | .br4-ns { border-radius: 1rem; } 2112 | .br-100-ns { border-radius: 100%; } 2113 | .br-pill-ns { border-radius: 9999px; } 2114 | .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; } 2115 | .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 2116 | .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; } 2117 | .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; } 2118 | .b--dotted-ns { border-style: dotted; } 2119 | .b--dashed-ns { border-style: dashed; } 2120 | .b--solid-ns { border-style: solid; } 2121 | .b--none-ns { border-style: none; } 2122 | .bw0-ns { border-width: 0; } 2123 | .bw1-ns { border-width: .125rem; } 2124 | .bw2-ns { border-width: .25rem; } 2125 | .bw3-ns { border-width: .5rem; } 2126 | .bw4-ns { border-width: 1rem; } 2127 | .bw5-ns { border-width: 2rem; } 2128 | .bt-0-ns { border-top-width: 0; } 2129 | .br-0-ns { border-right-width: 0; } 2130 | .bb-0-ns { border-bottom-width: 0; } 2131 | .bl-0-ns { border-left-width: 0; } 2132 | .shadow-1-ns { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } 2133 | .shadow-2-ns { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } 2134 | .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } 2135 | .shadow-4-ns { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } 2136 | .shadow-5-ns { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } 2137 | .top-0-ns { top: 0; } 2138 | .left-0-ns { left: 0; } 2139 | .right-0-ns { right: 0; } 2140 | .bottom-0-ns { bottom: 0; } 2141 | .top-1-ns { top: 1rem; } 2142 | .left-1-ns { left: 1rem; } 2143 | .right-1-ns { right: 1rem; } 2144 | .bottom-1-ns { bottom: 1rem; } 2145 | .top-2-ns { top: 2rem; } 2146 | .left-2-ns { left: 2rem; } 2147 | .right-2-ns { right: 2rem; } 2148 | .bottom-2-ns { bottom: 2rem; } 2149 | .top--1-ns { top: -1rem; } 2150 | .right--1-ns { right: -1rem; } 2151 | .bottom--1-ns { bottom: -1rem; } 2152 | .left--1-ns { left: -1rem; } 2153 | .top--2-ns { top: -2rem; } 2154 | .right--2-ns { right: -2rem; } 2155 | .bottom--2-ns { bottom: -2rem; } 2156 | .left--2-ns { left: -2rem; } 2157 | .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; } 2158 | .cl-ns { clear: left; } 2159 | .cr-ns { clear: right; } 2160 | .cb-ns { clear: both; } 2161 | .cn-ns { clear: none; } 2162 | .dn-ns { display: none; } 2163 | .di-ns { display: inline; } 2164 | .db-ns { display: block; } 2165 | .dib-ns { display: inline-block; } 2166 | .dit-ns { display: inline-table; } 2167 | .dt-ns { display: table; } 2168 | .dtc-ns { display: table-cell; } 2169 | .dt-row-ns { display: table-row; } 2170 | .dt-row-group-ns { display: table-row-group; } 2171 | .dt-column-ns { display: table-column; } 2172 | .dt-column-group-ns { display: table-column-group; } 2173 | .dt--fixed-ns { table-layout: fixed; width: 100%; } 2174 | .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; } 2175 | .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 2176 | .flex-auto-ns { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 2177 | .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 2178 | .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 2179 | .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 2180 | .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; } 2181 | .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 2182 | .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 2183 | .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 2184 | .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 2185 | .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 2186 | .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; } 2187 | .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; } 2188 | .self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } 2189 | .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; } 2190 | .self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } 2191 | .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 2192 | .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 2193 | .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 2194 | .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 2195 | .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; } 2196 | .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; } 2197 | .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; } 2198 | .content-center-ns { -ms-flex-line-pack: center; align-content: center; } 2199 | .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; } 2200 | .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; } 2201 | .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; } 2202 | .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 2203 | .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 2204 | .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 2205 | .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 2206 | .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 2207 | .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 2208 | .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 2209 | .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 2210 | .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 2211 | .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 2212 | .fl-ns { float: left; display: inline; } 2213 | .fr-ns { float: right; display: inline; } 2214 | .fn-ns { float: none; } 2215 | .i-ns { font-style: italic; } 2216 | .fs-normal-ns { font-style: normal; } 2217 | .normal-ns { font-weight: normal; } 2218 | .b-ns { font-weight: bold; } 2219 | .fw1-ns { font-weight: 100; } 2220 | .fw2-ns { font-weight: 200; } 2221 | .fw3-ns { font-weight: 300; } 2222 | .fw4-ns { font-weight: 400; } 2223 | .fw5-ns { font-weight: 500; } 2224 | .fw6-ns { font-weight: 600; } 2225 | .fw7-ns { font-weight: 700; } 2226 | .fw8-ns { font-weight: 800; } 2227 | .fw9-ns { font-weight: 900; } 2228 | .h1-ns { height: 1rem; } 2229 | .h2-ns { height: 2rem; } 2230 | .h3-ns { height: 4rem; } 2231 | .h4-ns { height: 8rem; } 2232 | .h5-ns { height: 16rem; } 2233 | .h-25-ns { height: 25%; } 2234 | .h-50-ns { height: 50%; } 2235 | .h-75-ns { height: 75%; } 2236 | .h-100-ns { height: 100%; } 2237 | .min-h-100-ns { min-height: 100%; } 2238 | .vh-25-ns { height: 25vh; } 2239 | .vh-50-ns { height: 50vh; } 2240 | .vh-75-ns { height: 75vh; } 2241 | .vh-100-ns { height: 100vh; } 2242 | .min-vh-100-ns { min-height: 100vh; } 2243 | .h-auto-ns { height: auto; } 2244 | .h-inherit-ns { height: inherit; } 2245 | .tracked-ns { letter-spacing: .1em; } 2246 | .tracked-tight-ns { letter-spacing: -.05em; } 2247 | .tracked-mega-ns { letter-spacing: .25em; } 2248 | .lh-solid-ns { line-height: 1; } 2249 | .lh-title-ns { line-height: 1.25; } 2250 | .lh-copy-ns { line-height: 1.5; } 2251 | .mw-100-ns { max-width: 100%; } 2252 | .mw1-ns { max-width: 1rem; } 2253 | .mw2-ns { max-width: 2rem; } 2254 | .mw3-ns { max-width: 4rem; } 2255 | .mw4-ns { max-width: 8rem; } 2256 | .mw5-ns { max-width: 16rem; } 2257 | .mw6-ns { max-width: 32rem; } 2258 | .mw7-ns { max-width: 48rem; } 2259 | .mw8-ns { max-width: 64rem; } 2260 | .mw9-ns { max-width: 96rem; } 2261 | .mw-none-ns { max-width: none; } 2262 | .w1-ns { width: 1rem; } 2263 | .w2-ns { width: 2rem; } 2264 | .w3-ns { width: 4rem; } 2265 | .w4-ns { width: 8rem; } 2266 | .w5-ns { width: 16rem; } 2267 | .w-10-ns { width: 10%; } 2268 | .w-20-ns { width: 20%; } 2269 | .w-25-ns { width: 25%; } 2270 | .w-30-ns { width: 30%; } 2271 | .w-33-ns { width: 33%; } 2272 | .w-34-ns { width: 34%; } 2273 | .w-40-ns { width: 40%; } 2274 | .w-50-ns { width: 50%; } 2275 | .w-60-ns { width: 60%; } 2276 | .w-70-ns { width: 70%; } 2277 | .w-75-ns { width: 75%; } 2278 | .w-80-ns { width: 80%; } 2279 | .w-90-ns { width: 90%; } 2280 | .w-100-ns { width: 100%; } 2281 | .w-third-ns { width: calc( 100% / 3 ); } 2282 | .w-two-thirds-ns { width: calc( 100% / 1.5 ); } 2283 | .w-auto-ns { width: auto; } 2284 | .overflow-visible-ns { overflow: visible; } 2285 | .overflow-hidden-ns { overflow: hidden; } 2286 | .overflow-scroll-ns { overflow: scroll; } 2287 | .overflow-auto-ns { overflow: auto; } 2288 | .overflow-x-visible-ns { overflow-x: visible; } 2289 | .overflow-x-hidden-ns { overflow-x: hidden; } 2290 | .overflow-x-scroll-ns { overflow-x: scroll; } 2291 | .overflow-x-auto-ns { overflow-x: auto; } 2292 | .overflow-y-visible-ns { overflow-y: visible; } 2293 | .overflow-y-hidden-ns { overflow-y: hidden; } 2294 | .overflow-y-scroll-ns { overflow-y: scroll; } 2295 | .overflow-y-auto-ns { overflow-y: auto; } 2296 | .static-ns { position: static; } 2297 | .relative-ns { position: relative; } 2298 | .absolute-ns { position: absolute; } 2299 | .fixed-ns { position: fixed; } 2300 | .rotate-45-ns { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } 2301 | .rotate-90-ns { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } 2302 | .rotate-135-ns { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } 2303 | .rotate-180-ns { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } 2304 | .rotate-225-ns { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } 2305 | .rotate-270-ns { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } 2306 | .rotate-315-ns { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } 2307 | .pa0-ns { padding: 0; } 2308 | .pa1-ns { padding: .25rem; } 2309 | .pa2-ns { padding: .5rem; } 2310 | .pa3-ns { padding: 1rem; } 2311 | .pa4-ns { padding: 2rem; } 2312 | .pa5-ns { padding: 4rem; } 2313 | .pa6-ns { padding: 8rem; } 2314 | .pa7-ns { padding: 16rem; } 2315 | .pl0-ns { padding-left: 0; } 2316 | .pl1-ns { padding-left: .25rem; } 2317 | .pl2-ns { padding-left: .5rem; } 2318 | .pl3-ns { padding-left: 1rem; } 2319 | .pl4-ns { padding-left: 2rem; } 2320 | .pl5-ns { padding-left: 4rem; } 2321 | .pl6-ns { padding-left: 8rem; } 2322 | .pl7-ns { padding-left: 16rem; } 2323 | .pr0-ns { padding-right: 0; } 2324 | .pr1-ns { padding-right: .25rem; } 2325 | .pr2-ns { padding-right: .5rem; } 2326 | .pr3-ns { padding-right: 1rem; } 2327 | .pr4-ns { padding-right: 2rem; } 2328 | .pr5-ns { padding-right: 4rem; } 2329 | .pr6-ns { padding-right: 8rem; } 2330 | .pr7-ns { padding-right: 16rem; } 2331 | .pb0-ns { padding-bottom: 0; } 2332 | .pb1-ns { padding-bottom: .25rem; } 2333 | .pb2-ns { padding-bottom: .5rem; } 2334 | .pb3-ns { padding-bottom: 1rem; } 2335 | .pb4-ns { padding-bottom: 2rem; } 2336 | .pb5-ns { padding-bottom: 4rem; } 2337 | .pb6-ns { padding-bottom: 8rem; } 2338 | .pb7-ns { padding-bottom: 16rem; } 2339 | .pt0-ns { padding-top: 0; } 2340 | .pt1-ns { padding-top: .25rem; } 2341 | .pt2-ns { padding-top: .5rem; } 2342 | .pt3-ns { padding-top: 1rem; } 2343 | .pt4-ns { padding-top: 2rem; } 2344 | .pt5-ns { padding-top: 4rem; } 2345 | .pt6-ns { padding-top: 8rem; } 2346 | .pt7-ns { padding-top: 16rem; } 2347 | .pv0-ns { padding-top: 0; padding-bottom: 0; } 2348 | .pv1-ns { padding-top: .25rem; padding-bottom: .25rem; } 2349 | .pv2-ns { padding-top: .5rem; padding-bottom: .5rem; } 2350 | .pv3-ns { padding-top: 1rem; padding-bottom: 1rem; } 2351 | .pv4-ns { padding-top: 2rem; padding-bottom: 2rem; } 2352 | .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; } 2353 | .pv6-ns { padding-top: 8rem; padding-bottom: 8rem; } 2354 | .pv7-ns { padding-top: 16rem; padding-bottom: 16rem; } 2355 | .ph0-ns { padding-left: 0; padding-right: 0; } 2356 | .ph1-ns { padding-left: .25rem; padding-right: .25rem; } 2357 | .ph2-ns { padding-left: .5rem; padding-right: .5rem; } 2358 | .ph3-ns { padding-left: 1rem; padding-right: 1rem; } 2359 | .ph4-ns { padding-left: 2rem; padding-right: 2rem; } 2360 | .ph5-ns { padding-left: 4rem; padding-right: 4rem; } 2361 | .ph6-ns { padding-left: 8rem; padding-right: 8rem; } 2362 | .ph7-ns { padding-left: 16rem; padding-right: 16rem; } 2363 | .ma0-ns { margin: 0; } 2364 | .ma1-ns { margin: .25rem; } 2365 | .ma2-ns { margin: .5rem; } 2366 | .ma3-ns { margin: 1rem; } 2367 | .ma4-ns { margin: 2rem; } 2368 | .ma5-ns { margin: 4rem; } 2369 | .ma6-ns { margin: 8rem; } 2370 | .ma7-ns { margin: 16rem; } 2371 | .ml0-ns { margin-left: 0; } 2372 | .ml1-ns { margin-left: .25rem; } 2373 | .ml2-ns { margin-left: .5rem; } 2374 | .ml3-ns { margin-left: 1rem; } 2375 | .ml4-ns { margin-left: 2rem; } 2376 | .ml5-ns { margin-left: 4rem; } 2377 | .ml6-ns { margin-left: 8rem; } 2378 | .ml7-ns { margin-left: 16rem; } 2379 | .mr0-ns { margin-right: 0; } 2380 | .mr1-ns { margin-right: .25rem; } 2381 | .mr2-ns { margin-right: .5rem; } 2382 | .mr3-ns { margin-right: 1rem; } 2383 | .mr4-ns { margin-right: 2rem; } 2384 | .mr5-ns { margin-right: 4rem; } 2385 | .mr6-ns { margin-right: 8rem; } 2386 | .mr7-ns { margin-right: 16rem; } 2387 | .mb0-ns { margin-bottom: 0; } 2388 | .mb1-ns { margin-bottom: .25rem; } 2389 | .mb2-ns { margin-bottom: .5rem; } 2390 | .mb3-ns { margin-bottom: 1rem; } 2391 | .mb4-ns { margin-bottom: 2rem; } 2392 | .mb5-ns { margin-bottom: 4rem; } 2393 | .mb6-ns { margin-bottom: 8rem; } 2394 | .mb7-ns { margin-bottom: 16rem; } 2395 | .mt0-ns { margin-top: 0; } 2396 | .mt1-ns { margin-top: .25rem; } 2397 | .mt2-ns { margin-top: .5rem; } 2398 | .mt3-ns { margin-top: 1rem; } 2399 | .mt4-ns { margin-top: 2rem; } 2400 | .mt5-ns { margin-top: 4rem; } 2401 | .mt6-ns { margin-top: 8rem; } 2402 | .mt7-ns { margin-top: 16rem; } 2403 | .mv0-ns { margin-top: 0; margin-bottom: 0; } 2404 | .mv1-ns { margin-top: .25rem; margin-bottom: .25rem; } 2405 | .mv2-ns { margin-top: .5rem; margin-bottom: .5rem; } 2406 | .mv3-ns { margin-top: 1rem; margin-bottom: 1rem; } 2407 | .mv4-ns { margin-top: 2rem; margin-bottom: 2rem; } 2408 | .mv5-ns { margin-top: 4rem; margin-bottom: 4rem; } 2409 | .mv6-ns { margin-top: 8rem; margin-bottom: 8rem; } 2410 | .mv7-ns { margin-top: 16rem; margin-bottom: 16rem; } 2411 | .mh0-ns { margin-left: 0; margin-right: 0; } 2412 | .mh1-ns { margin-left: .25rem; margin-right: .25rem; } 2413 | .mh2-ns { margin-left: .5rem; margin-right: .5rem; } 2414 | .mh3-ns { margin-left: 1rem; margin-right: 1rem; } 2415 | .mh4-ns { margin-left: 2rem; margin-right: 2rem; } 2416 | .mh5-ns { margin-left: 4rem; margin-right: 4rem; } 2417 | .mh6-ns { margin-left: 8rem; margin-right: 8rem; } 2418 | .mh7-ns { margin-left: 16rem; margin-right: 16rem; } 2419 | .na1-ns { margin: -.25rem; } 2420 | .na2-ns { margin: -.5rem; } 2421 | .na3-ns { margin: -1rem; } 2422 | .na4-ns { margin: -2rem; } 2423 | .na5-ns { margin: -4rem; } 2424 | .na6-ns { margin: -8rem; } 2425 | .na7-ns { margin: -16rem; } 2426 | .nl1-ns { margin-left: -.25rem; } 2427 | .nl2-ns { margin-left: -.5rem; } 2428 | .nl3-ns { margin-left: -1rem; } 2429 | .nl4-ns { margin-left: -2rem; } 2430 | .nl5-ns { margin-left: -4rem; } 2431 | .nl6-ns { margin-left: -8rem; } 2432 | .nl7-ns { margin-left: -16rem; } 2433 | .nr1-ns { margin-right: -.25rem; } 2434 | .nr2-ns { margin-right: -.5rem; } 2435 | .nr3-ns { margin-right: -1rem; } 2436 | .nr4-ns { margin-right: -2rem; } 2437 | .nr5-ns { margin-right: -4rem; } 2438 | .nr6-ns { margin-right: -8rem; } 2439 | .nr7-ns { margin-right: -16rem; } 2440 | .nb1-ns { margin-bottom: -.25rem; } 2441 | .nb2-ns { margin-bottom: -.5rem; } 2442 | .nb3-ns { margin-bottom: -1rem; } 2443 | .nb4-ns { margin-bottom: -2rem; } 2444 | .nb5-ns { margin-bottom: -4rem; } 2445 | .nb6-ns { margin-bottom: -8rem; } 2446 | .nb7-ns { margin-bottom: -16rem; } 2447 | .nt1-ns { margin-top: -.25rem; } 2448 | .nt2-ns { margin-top: -.5rem; } 2449 | .nt3-ns { margin-top: -1rem; } 2450 | .nt4-ns { margin-top: -2rem; } 2451 | .nt5-ns { margin-top: -4rem; } 2452 | .nt6-ns { margin-top: -8rem; } 2453 | .nt7-ns { margin-top: -16rem; } 2454 | .strike-ns { text-decoration: line-through; } 2455 | .underline-ns { text-decoration: underline; } 2456 | .no-underline-ns { text-decoration: none; } 2457 | .tl-ns { text-align: left; } 2458 | .tr-ns { text-align: right; } 2459 | .tc-ns { text-align: center; } 2460 | .ttc-ns { text-transform: capitalize; } 2461 | .ttl-ns { text-transform: lowercase; } 2462 | .ttu-ns { text-transform: uppercase; } 2463 | .ttn-ns { text-transform: none; } 2464 | .f-6-ns, .f-headline-ns { font-size: 6rem; } 2465 | .f-5-ns, .f-subheadline-ns { font-size: 5rem; } 2466 | .f1-ns { font-size: 3rem; } 2467 | .f2-ns { font-size: 2.25rem; } 2468 | .f3-ns { font-size: 1.5rem; } 2469 | .f4-ns { font-size: 1.25rem; } 2470 | .f5-ns { font-size: 1rem; } 2471 | .f6-ns { font-size: .875rem; } 2472 | .f7-ns { font-size: .75rem; } 2473 | .measure-ns { max-width: 30em; } 2474 | .measure-wide-ns { max-width: 34em; } 2475 | .measure-narrow-ns { max-width: 20em; } 2476 | .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; } 2477 | .small-caps-ns { font-variant: small-caps; } 2478 | .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 2479 | .center-ns { margin-right: auto; margin-left: auto; } 2480 | .clip-ns { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } 2481 | .ws-normal-ns { white-space: normal; } 2482 | .nowrap-ns { white-space: nowrap; } 2483 | .pre-ns { white-space: pre; } 2484 | .v-base-ns { vertical-align: baseline; } 2485 | .v-mid-ns { vertical-align: middle; } 2486 | .v-top-ns { vertical-align: top; } 2487 | .v-btm-ns { vertical-align: bottom; } 2488 | } 2489 | @media screen and (min-width: 30em) and (max-width: 60em) { 2490 | .aspect-ratio-m { height: 0; position: relative; } 2491 | .aspect-ratio--16x9-m { padding-bottom: 56.25%; } 2492 | .aspect-ratio--9x16-m { padding-bottom: 177.77%; } 2493 | .aspect-ratio--4x3-m { padding-bottom: 75%; } 2494 | .aspect-ratio--3x4-m { padding-bottom: 133.33%; } 2495 | .aspect-ratio--6x4-m { padding-bottom: 66.6%; } 2496 | .aspect-ratio--4x6-m { padding-bottom: 150%; } 2497 | .aspect-ratio--8x5-m { padding-bottom: 62.5%; } 2498 | .aspect-ratio--5x8-m { padding-bottom: 160%; } 2499 | .aspect-ratio--7x5-m { padding-bottom: 71.42%; } 2500 | .aspect-ratio--5x7-m { padding-bottom: 140%; } 2501 | .aspect-ratio--1x1-m { padding-bottom: 100%; } 2502 | .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } 2503 | .cover-m { background-size: cover !important; } 2504 | .contain-m { background-size: contain !important; } 2505 | .bg-center-m { background-repeat: no-repeat; background-position: center center; } 2506 | .bg-top-m { background-repeat: no-repeat; background-position: top center; } 2507 | .bg-right-m { background-repeat: no-repeat; background-position: center right; } 2508 | .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; } 2509 | .bg-left-m { background-repeat: no-repeat; background-position: center left; } 2510 | .outline-m { outline: 1px solid; } 2511 | .outline-transparent-m { outline: 1px solid transparent; } 2512 | .outline-0-m { outline: 0; } 2513 | .ba-m { border-style: solid; border-width: 1px; } 2514 | .bt-m { border-top-style: solid; border-top-width: 1px; } 2515 | .br-m { border-right-style: solid; border-right-width: 1px; } 2516 | .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } 2517 | .bl-m { border-left-style: solid; border-left-width: 1px; } 2518 | .bn-m { border-style: none; border-width: 0; } 2519 | .br0-m { border-radius: 0; } 2520 | .br1-m { border-radius: .125rem; } 2521 | .br2-m { border-radius: .25rem; } 2522 | .br3-m { border-radius: .5rem; } 2523 | .br4-m { border-radius: 1rem; } 2524 | .br-100-m { border-radius: 100%; } 2525 | .br-pill-m { border-radius: 9999px; } 2526 | .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; } 2527 | .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 2528 | .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; } 2529 | .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; } 2530 | .b--dotted-m { border-style: dotted; } 2531 | .b--dashed-m { border-style: dashed; } 2532 | .b--solid-m { border-style: solid; } 2533 | .b--none-m { border-style: none; } 2534 | .bw0-m { border-width: 0; } 2535 | .bw1-m { border-width: .125rem; } 2536 | .bw2-m { border-width: .25rem; } 2537 | .bw3-m { border-width: .5rem; } 2538 | .bw4-m { border-width: 1rem; } 2539 | .bw5-m { border-width: 2rem; } 2540 | .bt-0-m { border-top-width: 0; } 2541 | .br-0-m { border-right-width: 0; } 2542 | .bb-0-m { border-bottom-width: 0; } 2543 | .bl-0-m { border-left-width: 0; } 2544 | .shadow-1-m { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } 2545 | .shadow-2-m { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } 2546 | .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } 2547 | .shadow-4-m { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } 2548 | .shadow-5-m { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } 2549 | .top-0-m { top: 0; } 2550 | .left-0-m { left: 0; } 2551 | .right-0-m { right: 0; } 2552 | .bottom-0-m { bottom: 0; } 2553 | .top-1-m { top: 1rem; } 2554 | .left-1-m { left: 1rem; } 2555 | .right-1-m { right: 1rem; } 2556 | .bottom-1-m { bottom: 1rem; } 2557 | .top-2-m { top: 2rem; } 2558 | .left-2-m { left: 2rem; } 2559 | .right-2-m { right: 2rem; } 2560 | .bottom-2-m { bottom: 2rem; } 2561 | .top--1-m { top: -1rem; } 2562 | .right--1-m { right: -1rem; } 2563 | .bottom--1-m { bottom: -1rem; } 2564 | .left--1-m { left: -1rem; } 2565 | .top--2-m { top: -2rem; } 2566 | .right--2-m { right: -2rem; } 2567 | .bottom--2-m { bottom: -2rem; } 2568 | .left--2-m { left: -2rem; } 2569 | .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; } 2570 | .cl-m { clear: left; } 2571 | .cr-m { clear: right; } 2572 | .cb-m { clear: both; } 2573 | .cn-m { clear: none; } 2574 | .dn-m { display: none; } 2575 | .di-m { display: inline; } 2576 | .db-m { display: block; } 2577 | .dib-m { display: inline-block; } 2578 | .dit-m { display: inline-table; } 2579 | .dt-m { display: table; } 2580 | .dtc-m { display: table-cell; } 2581 | .dt-row-m { display: table-row; } 2582 | .dt-row-group-m { display: table-row-group; } 2583 | .dt-column-m { display: table-column; } 2584 | .dt-column-group-m { display: table-column-group; } 2585 | .dt--fixed-m { table-layout: fixed; width: 100%; } 2586 | .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; } 2587 | .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 2588 | .flex-auto-m { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 2589 | .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 2590 | .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 2591 | .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 2592 | .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; } 2593 | .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 2594 | .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 2595 | .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 2596 | .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 2597 | .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 2598 | .self-start-m { -ms-flex-item-align: start; align-self: flex-start; } 2599 | .self-end-m { -ms-flex-item-align: end; align-self: flex-end; } 2600 | .self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } 2601 | .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; } 2602 | .self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } 2603 | .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 2604 | .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 2605 | .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 2606 | .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 2607 | .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; } 2608 | .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; } 2609 | .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; } 2610 | .content-center-m { -ms-flex-line-pack: center; align-content: center; } 2611 | .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; } 2612 | .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; } 2613 | .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; } 2614 | .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 2615 | .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 2616 | .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 2617 | .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 2618 | .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 2619 | .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 2620 | .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 2621 | .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 2622 | .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 2623 | .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 2624 | .fl-m { float: left; display: inline; } 2625 | .fr-m { float: right; display: inline; } 2626 | .fn-m { float: none; } 2627 | .i-m { font-style: italic; } 2628 | .fs-normal-m { font-style: normal; } 2629 | .normal-m { font-weight: normal; } 2630 | .b-m { font-weight: bold; } 2631 | .fw1-m { font-weight: 100; } 2632 | .fw2-m { font-weight: 200; } 2633 | .fw3-m { font-weight: 300; } 2634 | .fw4-m { font-weight: 400; } 2635 | .fw5-m { font-weight: 500; } 2636 | .fw6-m { font-weight: 600; } 2637 | .fw7-m { font-weight: 700; } 2638 | .fw8-m { font-weight: 800; } 2639 | .fw9-m { font-weight: 900; } 2640 | .h1-m { height: 1rem; } 2641 | .h2-m { height: 2rem; } 2642 | .h3-m { height: 4rem; } 2643 | .h4-m { height: 8rem; } 2644 | .h5-m { height: 16rem; } 2645 | .h-25-m { height: 25%; } 2646 | .h-50-m { height: 50%; } 2647 | .h-75-m { height: 75%; } 2648 | .h-100-m { height: 100%; } 2649 | .min-h-100-m { min-height: 100%; } 2650 | .vh-25-m { height: 25vh; } 2651 | .vh-50-m { height: 50vh; } 2652 | .vh-75-m { height: 75vh; } 2653 | .vh-100-m { height: 100vh; } 2654 | .min-vh-100-m { min-height: 100vh; } 2655 | .h-auto-m { height: auto; } 2656 | .h-inherit-m { height: inherit; } 2657 | .tracked-m { letter-spacing: .1em; } 2658 | .tracked-tight-m { letter-spacing: -.05em; } 2659 | .tracked-mega-m { letter-spacing: .25em; } 2660 | .lh-solid-m { line-height: 1; } 2661 | .lh-title-m { line-height: 1.25; } 2662 | .lh-copy-m { line-height: 1.5; } 2663 | .mw-100-m { max-width: 100%; } 2664 | .mw1-m { max-width: 1rem; } 2665 | .mw2-m { max-width: 2rem; } 2666 | .mw3-m { max-width: 4rem; } 2667 | .mw4-m { max-width: 8rem; } 2668 | .mw5-m { max-width: 16rem; } 2669 | .mw6-m { max-width: 32rem; } 2670 | .mw7-m { max-width: 48rem; } 2671 | .mw8-m { max-width: 64rem; } 2672 | .mw9-m { max-width: 96rem; } 2673 | .mw-none-m { max-width: none; } 2674 | .w1-m { width: 1rem; } 2675 | .w2-m { width: 2rem; } 2676 | .w3-m { width: 4rem; } 2677 | .w4-m { width: 8rem; } 2678 | .w5-m { width: 16rem; } 2679 | .w-10-m { width: 10%; } 2680 | .w-20-m { width: 20%; } 2681 | .w-25-m { width: 25%; } 2682 | .w-30-m { width: 30%; } 2683 | .w-33-m { width: 33%; } 2684 | .w-34-m { width: 34%; } 2685 | .w-40-m { width: 40%; } 2686 | .w-50-m { width: 50%; } 2687 | .w-60-m { width: 60%; } 2688 | .w-70-m { width: 70%; } 2689 | .w-75-m { width: 75%; } 2690 | .w-80-m { width: 80%; } 2691 | .w-90-m { width: 90%; } 2692 | .w-100-m { width: 100%; } 2693 | .w-third-m { width: calc( 100% / 3 ); } 2694 | .w-two-thirds-m { width: calc( 100% / 1.5 ); } 2695 | .w-auto-m { width: auto; } 2696 | .overflow-visible-m { overflow: visible; } 2697 | .overflow-hidden-m { overflow: hidden; } 2698 | .overflow-scroll-m { overflow: scroll; } 2699 | .overflow-auto-m { overflow: auto; } 2700 | .overflow-x-visible-m { overflow-x: visible; } 2701 | .overflow-x-hidden-m { overflow-x: hidden; } 2702 | .overflow-x-scroll-m { overflow-x: scroll; } 2703 | .overflow-x-auto-m { overflow-x: auto; } 2704 | .overflow-y-visible-m { overflow-y: visible; } 2705 | .overflow-y-hidden-m { overflow-y: hidden; } 2706 | .overflow-y-scroll-m { overflow-y: scroll; } 2707 | .overflow-y-auto-m { overflow-y: auto; } 2708 | .static-m { position: static; } 2709 | .relative-m { position: relative; } 2710 | .absolute-m { position: absolute; } 2711 | .fixed-m { position: fixed; } 2712 | .rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } 2713 | .rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } 2714 | .rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } 2715 | .rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } 2716 | .rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } 2717 | .rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } 2718 | .rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } 2719 | .pa0-m { padding: 0; } 2720 | .pa1-m { padding: .25rem; } 2721 | .pa2-m { padding: .5rem; } 2722 | .pa3-m { padding: 1rem; } 2723 | .pa4-m { padding: 2rem; } 2724 | .pa5-m { padding: 4rem; } 2725 | .pa6-m { padding: 8rem; } 2726 | .pa7-m { padding: 16rem; } 2727 | .pl0-m { padding-left: 0; } 2728 | .pl1-m { padding-left: .25rem; } 2729 | .pl2-m { padding-left: .5rem; } 2730 | .pl3-m { padding-left: 1rem; } 2731 | .pl4-m { padding-left: 2rem; } 2732 | .pl5-m { padding-left: 4rem; } 2733 | .pl6-m { padding-left: 8rem; } 2734 | .pl7-m { padding-left: 16rem; } 2735 | .pr0-m { padding-right: 0; } 2736 | .pr1-m { padding-right: .25rem; } 2737 | .pr2-m { padding-right: .5rem; } 2738 | .pr3-m { padding-right: 1rem; } 2739 | .pr4-m { padding-right: 2rem; } 2740 | .pr5-m { padding-right: 4rem; } 2741 | .pr6-m { padding-right: 8rem; } 2742 | .pr7-m { padding-right: 16rem; } 2743 | .pb0-m { padding-bottom: 0; } 2744 | .pb1-m { padding-bottom: .25rem; } 2745 | .pb2-m { padding-bottom: .5rem; } 2746 | .pb3-m { padding-bottom: 1rem; } 2747 | .pb4-m { padding-bottom: 2rem; } 2748 | .pb5-m { padding-bottom: 4rem; } 2749 | .pb6-m { padding-bottom: 8rem; } 2750 | .pb7-m { padding-bottom: 16rem; } 2751 | .pt0-m { padding-top: 0; } 2752 | .pt1-m { padding-top: .25rem; } 2753 | .pt2-m { padding-top: .5rem; } 2754 | .pt3-m { padding-top: 1rem; } 2755 | .pt4-m { padding-top: 2rem; } 2756 | .pt5-m { padding-top: 4rem; } 2757 | .pt6-m { padding-top: 8rem; } 2758 | .pt7-m { padding-top: 16rem; } 2759 | .pv0-m { padding-top: 0; padding-bottom: 0; } 2760 | .pv1-m { padding-top: .25rem; padding-bottom: .25rem; } 2761 | .pv2-m { padding-top: .5rem; padding-bottom: .5rem; } 2762 | .pv3-m { padding-top: 1rem; padding-bottom: 1rem; } 2763 | .pv4-m { padding-top: 2rem; padding-bottom: 2rem; } 2764 | .pv5-m { padding-top: 4rem; padding-bottom: 4rem; } 2765 | .pv6-m { padding-top: 8rem; padding-bottom: 8rem; } 2766 | .pv7-m { padding-top: 16rem; padding-bottom: 16rem; } 2767 | .ph0-m { padding-left: 0; padding-right: 0; } 2768 | .ph1-m { padding-left: .25rem; padding-right: .25rem; } 2769 | .ph2-m { padding-left: .5rem; padding-right: .5rem; } 2770 | .ph3-m { padding-left: 1rem; padding-right: 1rem; } 2771 | .ph4-m { padding-left: 2rem; padding-right: 2rem; } 2772 | .ph5-m { padding-left: 4rem; padding-right: 4rem; } 2773 | .ph6-m { padding-left: 8rem; padding-right: 8rem; } 2774 | .ph7-m { padding-left: 16rem; padding-right: 16rem; } 2775 | .ma0-m { margin: 0; } 2776 | .ma1-m { margin: .25rem; } 2777 | .ma2-m { margin: .5rem; } 2778 | .ma3-m { margin: 1rem; } 2779 | .ma4-m { margin: 2rem; } 2780 | .ma5-m { margin: 4rem; } 2781 | .ma6-m { margin: 8rem; } 2782 | .ma7-m { margin: 16rem; } 2783 | .ml0-m { margin-left: 0; } 2784 | .ml1-m { margin-left: .25rem; } 2785 | .ml2-m { margin-left: .5rem; } 2786 | .ml3-m { margin-left: 1rem; } 2787 | .ml4-m { margin-left: 2rem; } 2788 | .ml5-m { margin-left: 4rem; } 2789 | .ml6-m { margin-left: 8rem; } 2790 | .ml7-m { margin-left: 16rem; } 2791 | .mr0-m { margin-right: 0; } 2792 | .mr1-m { margin-right: .25rem; } 2793 | .mr2-m { margin-right: .5rem; } 2794 | .mr3-m { margin-right: 1rem; } 2795 | .mr4-m { margin-right: 2rem; } 2796 | .mr5-m { margin-right: 4rem; } 2797 | .mr6-m { margin-right: 8rem; } 2798 | .mr7-m { margin-right: 16rem; } 2799 | .mb0-m { margin-bottom: 0; } 2800 | .mb1-m { margin-bottom: .25rem; } 2801 | .mb2-m { margin-bottom: .5rem; } 2802 | .mb3-m { margin-bottom: 1rem; } 2803 | .mb4-m { margin-bottom: 2rem; } 2804 | .mb5-m { margin-bottom: 4rem; } 2805 | .mb6-m { margin-bottom: 8rem; } 2806 | .mb7-m { margin-bottom: 16rem; } 2807 | .mt0-m { margin-top: 0; } 2808 | .mt1-m { margin-top: .25rem; } 2809 | .mt2-m { margin-top: .5rem; } 2810 | .mt3-m { margin-top: 1rem; } 2811 | .mt4-m { margin-top: 2rem; } 2812 | .mt5-m { margin-top: 4rem; } 2813 | .mt6-m { margin-top: 8rem; } 2814 | .mt7-m { margin-top: 16rem; } 2815 | .mv0-m { margin-top: 0; margin-bottom: 0; } 2816 | .mv1-m { margin-top: .25rem; margin-bottom: .25rem; } 2817 | .mv2-m { margin-top: .5rem; margin-bottom: .5rem; } 2818 | .mv3-m { margin-top: 1rem; margin-bottom: 1rem; } 2819 | .mv4-m { margin-top: 2rem; margin-bottom: 2rem; } 2820 | .mv5-m { margin-top: 4rem; margin-bottom: 4rem; } 2821 | .mv6-m { margin-top: 8rem; margin-bottom: 8rem; } 2822 | .mv7-m { margin-top: 16rem; margin-bottom: 16rem; } 2823 | .mh0-m { margin-left: 0; margin-right: 0; } 2824 | .mh1-m { margin-left: .25rem; margin-right: .25rem; } 2825 | .mh2-m { margin-left: .5rem; margin-right: .5rem; } 2826 | .mh3-m { margin-left: 1rem; margin-right: 1rem; } 2827 | .mh4-m { margin-left: 2rem; margin-right: 2rem; } 2828 | .mh5-m { margin-left: 4rem; margin-right: 4rem; } 2829 | .mh6-m { margin-left: 8rem; margin-right: 8rem; } 2830 | .mh7-m { margin-left: 16rem; margin-right: 16rem; } 2831 | .na1-m { margin: -.25rem; } 2832 | .na2-m { margin: -.5rem; } 2833 | .na3-m { margin: -1rem; } 2834 | .na4-m { margin: -2rem; } 2835 | .na5-m { margin: -4rem; } 2836 | .na6-m { margin: -8rem; } 2837 | .na7-m { margin: -16rem; } 2838 | .nl1-m { margin-left: -.25rem; } 2839 | .nl2-m { margin-left: -.5rem; } 2840 | .nl3-m { margin-left: -1rem; } 2841 | .nl4-m { margin-left: -2rem; } 2842 | .nl5-m { margin-left: -4rem; } 2843 | .nl6-m { margin-left: -8rem; } 2844 | .nl7-m { margin-left: -16rem; } 2845 | .nr1-m { margin-right: -.25rem; } 2846 | .nr2-m { margin-right: -.5rem; } 2847 | .nr3-m { margin-right: -1rem; } 2848 | .nr4-m { margin-right: -2rem; } 2849 | .nr5-m { margin-right: -4rem; } 2850 | .nr6-m { margin-right: -8rem; } 2851 | .nr7-m { margin-right: -16rem; } 2852 | .nb1-m { margin-bottom: -.25rem; } 2853 | .nb2-m { margin-bottom: -.5rem; } 2854 | .nb3-m { margin-bottom: -1rem; } 2855 | .nb4-m { margin-bottom: -2rem; } 2856 | .nb5-m { margin-bottom: -4rem; } 2857 | .nb6-m { margin-bottom: -8rem; } 2858 | .nb7-m { margin-bottom: -16rem; } 2859 | .nt1-m { margin-top: -.25rem; } 2860 | .nt2-m { margin-top: -.5rem; } 2861 | .nt3-m { margin-top: -1rem; } 2862 | .nt4-m { margin-top: -2rem; } 2863 | .nt5-m { margin-top: -4rem; } 2864 | .nt6-m { margin-top: -8rem; } 2865 | .nt7-m { margin-top: -16rem; } 2866 | .strike-m { text-decoration: line-through; } 2867 | .underline-m { text-decoration: underline; } 2868 | .no-underline-m { text-decoration: none; } 2869 | .tl-m { text-align: left; } 2870 | .tr-m { text-align: right; } 2871 | .tc-m { text-align: center; } 2872 | .ttc-m { text-transform: capitalize; } 2873 | .ttl-m { text-transform: lowercase; } 2874 | .ttu-m { text-transform: uppercase; } 2875 | .ttn-m { text-transform: none; } 2876 | .f-6-m, .f-headline-m { font-size: 6rem; } 2877 | .f-5-m, .f-subheadline-m { font-size: 5rem; } 2878 | .f1-m { font-size: 3rem; } 2879 | .f2-m { font-size: 2.25rem; } 2880 | .f3-m { font-size: 1.5rem; } 2881 | .f4-m { font-size: 1.25rem; } 2882 | .f5-m { font-size: 1rem; } 2883 | .f6-m { font-size: .875rem; } 2884 | .f7-m { font-size: .75rem; } 2885 | .measure-m { max-width: 30em; } 2886 | .measure-wide-m { max-width: 34em; } 2887 | .measure-narrow-m { max-width: 20em; } 2888 | .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } 2889 | .small-caps-m { font-variant: small-caps; } 2890 | .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 2891 | .center-m { margin-right: auto; margin-left: auto; } 2892 | .clip-m { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } 2893 | .ws-normal-m { white-space: normal; } 2894 | .nowrap-m { white-space: nowrap; } 2895 | .pre-m { white-space: pre; } 2896 | .v-base-m { vertical-align: baseline; } 2897 | .v-mid-m { vertical-align: middle; } 2898 | .v-top-m { vertical-align: top; } 2899 | .v-btm-m { vertical-align: bottom; } 2900 | } 2901 | @media screen and (min-width: 60em) { 2902 | .aspect-ratio-l { height: 0; position: relative; } 2903 | .aspect-ratio--16x9-l { padding-bottom: 56.25%; } 2904 | .aspect-ratio--9x16-l { padding-bottom: 177.77%; } 2905 | .aspect-ratio--4x3-l { padding-bottom: 75%; } 2906 | .aspect-ratio--3x4-l { padding-bottom: 133.33%; } 2907 | .aspect-ratio--6x4-l { padding-bottom: 66.6%; } 2908 | .aspect-ratio--4x6-l { padding-bottom: 150%; } 2909 | .aspect-ratio--8x5-l { padding-bottom: 62.5%; } 2910 | .aspect-ratio--5x8-l { padding-bottom: 160%; } 2911 | .aspect-ratio--7x5-l { padding-bottom: 71.42%; } 2912 | .aspect-ratio--5x7-l { padding-bottom: 140%; } 2913 | .aspect-ratio--1x1-l { padding-bottom: 100%; } 2914 | .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } 2915 | .cover-l { background-size: cover !important; } 2916 | .contain-l { background-size: contain !important; } 2917 | .bg-center-l { background-repeat: no-repeat; background-position: center center; } 2918 | .bg-top-l { background-repeat: no-repeat; background-position: top center; } 2919 | .bg-right-l { background-repeat: no-repeat; background-position: center right; } 2920 | .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; } 2921 | .bg-left-l { background-repeat: no-repeat; background-position: center left; } 2922 | .outline-l { outline: 1px solid; } 2923 | .outline-transparent-l { outline: 1px solid transparent; } 2924 | .outline-0-l { outline: 0; } 2925 | .ba-l { border-style: solid; border-width: 1px; } 2926 | .bt-l { border-top-style: solid; border-top-width: 1px; } 2927 | .br-l { border-right-style: solid; border-right-width: 1px; } 2928 | .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } 2929 | .bl-l { border-left-style: solid; border-left-width: 1px; } 2930 | .bn-l { border-style: none; border-width: 0; } 2931 | .br0-l { border-radius: 0; } 2932 | .br1-l { border-radius: .125rem; } 2933 | .br2-l { border-radius: .25rem; } 2934 | .br3-l { border-radius: .5rem; } 2935 | .br4-l { border-radius: 1rem; } 2936 | .br-100-l { border-radius: 100%; } 2937 | .br-pill-l { border-radius: 9999px; } 2938 | .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; } 2939 | .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 2940 | .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } 2941 | .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; } 2942 | .b--dotted-l { border-style: dotted; } 2943 | .b--dashed-l { border-style: dashed; } 2944 | .b--solid-l { border-style: solid; } 2945 | .b--none-l { border-style: none; } 2946 | .bw0-l { border-width: 0; } 2947 | .bw1-l { border-width: .125rem; } 2948 | .bw2-l { border-width: .25rem; } 2949 | .bw3-l { border-width: .5rem; } 2950 | .bw4-l { border-width: 1rem; } 2951 | .bw5-l { border-width: 2rem; } 2952 | .bt-0-l { border-top-width: 0; } 2953 | .br-0-l { border-right-width: 0; } 2954 | .bb-0-l { border-bottom-width: 0; } 2955 | .bl-0-l { border-left-width: 0; } 2956 | .shadow-1-l { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } 2957 | .shadow-2-l { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } 2958 | .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } 2959 | .shadow-4-l { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } 2960 | .shadow-5-l { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } 2961 | .top-0-l { top: 0; } 2962 | .left-0-l { left: 0; } 2963 | .right-0-l { right: 0; } 2964 | .bottom-0-l { bottom: 0; } 2965 | .top-1-l { top: 1rem; } 2966 | .left-1-l { left: 1rem; } 2967 | .right-1-l { right: 1rem; } 2968 | .bottom-1-l { bottom: 1rem; } 2969 | .top-2-l { top: 2rem; } 2970 | .left-2-l { left: 2rem; } 2971 | .right-2-l { right: 2rem; } 2972 | .bottom-2-l { bottom: 2rem; } 2973 | .top--1-l { top: -1rem; } 2974 | .right--1-l { right: -1rem; } 2975 | .bottom--1-l { bottom: -1rem; } 2976 | .left--1-l { left: -1rem; } 2977 | .top--2-l { top: -2rem; } 2978 | .right--2-l { right: -2rem; } 2979 | .bottom--2-l { bottom: -2rem; } 2980 | .left--2-l { left: -2rem; } 2981 | .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; } 2982 | .cl-l { clear: left; } 2983 | .cr-l { clear: right; } 2984 | .cb-l { clear: both; } 2985 | .cn-l { clear: none; } 2986 | .dn-l { display: none; } 2987 | .di-l { display: inline; } 2988 | .db-l { display: block; } 2989 | .dib-l { display: inline-block; } 2990 | .dit-l { display: inline-table; } 2991 | .dt-l { display: table; } 2992 | .dtc-l { display: table-cell; } 2993 | .dt-row-l { display: table-row; } 2994 | .dt-row-group-l { display: table-row-group; } 2995 | .dt-column-l { display: table-column; } 2996 | .dt-column-group-l { display: table-column-group; } 2997 | .dt--fixed-l { table-layout: fixed; width: 100%; } 2998 | .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; } 2999 | .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } 3000 | .flex-auto-l { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } 3001 | .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; } 3002 | .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 3003 | .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 3004 | .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; } 3005 | .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 3006 | .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 3007 | .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 3008 | .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 3009 | .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } 3010 | .self-start-l { -ms-flex-item-align: start; align-self: flex-start; } 3011 | .self-end-l { -ms-flex-item-align: end; align-self: flex-end; } 3012 | .self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } 3013 | .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; } 3014 | .self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } 3015 | .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 3016 | .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 3017 | .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 3018 | .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 3019 | .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; } 3020 | .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; } 3021 | .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; } 3022 | .content-center-l { -ms-flex-line-pack: center; align-content: center; } 3023 | .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; } 3024 | .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; } 3025 | .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; } 3026 | .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 3027 | .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } 3028 | .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } 3029 | .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } 3030 | .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } 3031 | .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } 3032 | .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } 3033 | .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } 3034 | .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } 3035 | .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } 3036 | .fl-l { float: left; display: inline; } 3037 | .fr-l { float: right; display: inline; } 3038 | .fn-l { float: none; } 3039 | .i-l { font-style: italic; } 3040 | .fs-normal-l { font-style: normal; } 3041 | .normal-l { font-weight: normal; } 3042 | .b-l { font-weight: bold; } 3043 | .fw1-l { font-weight: 100; } 3044 | .fw2-l { font-weight: 200; } 3045 | .fw3-l { font-weight: 300; } 3046 | .fw4-l { font-weight: 400; } 3047 | .fw5-l { font-weight: 500; } 3048 | .fw6-l { font-weight: 600; } 3049 | .fw7-l { font-weight: 700; } 3050 | .fw8-l { font-weight: 800; } 3051 | .fw9-l { font-weight: 900; } 3052 | .h1-l { height: 1rem; } 3053 | .h2-l { height: 2rem; } 3054 | .h3-l { height: 4rem; } 3055 | .h4-l { height: 8rem; } 3056 | .h5-l { height: 16rem; } 3057 | .h-25-l { height: 25%; } 3058 | .h-50-l { height: 50%; } 3059 | .h-75-l { height: 75%; } 3060 | .h-100-l { height: 100%; } 3061 | .min-h-100-l { min-height: 100%; } 3062 | .vh-25-l { height: 25vh; } 3063 | .vh-50-l { height: 50vh; } 3064 | .vh-75-l { height: 75vh; } 3065 | .vh-100-l { height: 100vh; } 3066 | .min-vh-100-l { min-height: 100vh; } 3067 | .h-auto-l { height: auto; } 3068 | .h-inherit-l { height: inherit; } 3069 | .tracked-l { letter-spacing: .1em; } 3070 | .tracked-tight-l { letter-spacing: -.05em; } 3071 | .tracked-mega-l { letter-spacing: .25em; } 3072 | .lh-solid-l { line-height: 1; } 3073 | .lh-title-l { line-height: 1.25; } 3074 | .lh-copy-l { line-height: 1.5; } 3075 | .mw-100-l { max-width: 100%; } 3076 | .mw1-l { max-width: 1rem; } 3077 | .mw2-l { max-width: 2rem; } 3078 | .mw3-l { max-width: 4rem; } 3079 | .mw4-l { max-width: 8rem; } 3080 | .mw5-l { max-width: 16rem; } 3081 | .mw6-l { max-width: 32rem; } 3082 | .mw7-l { max-width: 48rem; } 3083 | .mw8-l { max-width: 64rem; } 3084 | .mw9-l { max-width: 96rem; } 3085 | .mw-none-l { max-width: none; } 3086 | .w1-l { width: 1rem; } 3087 | .w2-l { width: 2rem; } 3088 | .w3-l { width: 4rem; } 3089 | .w4-l { width: 8rem; } 3090 | .w5-l { width: 16rem; } 3091 | .w-10-l { width: 10%; } 3092 | .w-20-l { width: 20%; } 3093 | .w-25-l { width: 25%; } 3094 | .w-30-l { width: 30%; } 3095 | .w-33-l { width: 33%; } 3096 | .w-34-l { width: 34%; } 3097 | .w-40-l { width: 40%; } 3098 | .w-50-l { width: 50%; } 3099 | .w-60-l { width: 60%; } 3100 | .w-70-l { width: 70%; } 3101 | .w-75-l { width: 75%; } 3102 | .w-80-l { width: 80%; } 3103 | .w-90-l { width: 90%; } 3104 | .w-100-l { width: 100%; } 3105 | .w-third-l { width: calc( 100% / 3 ); } 3106 | .w-two-thirds-l { width: calc( 100% / 1.5 ); } 3107 | .w-auto-l { width: auto; } 3108 | .overflow-visible-l { overflow: visible; } 3109 | .overflow-hidden-l { overflow: hidden; } 3110 | .overflow-scroll-l { overflow: scroll; } 3111 | .overflow-auto-l { overflow: auto; } 3112 | .overflow-x-visible-l { overflow-x: visible; } 3113 | .overflow-x-hidden-l { overflow-x: hidden; } 3114 | .overflow-x-scroll-l { overflow-x: scroll; } 3115 | .overflow-x-auto-l { overflow-x: auto; } 3116 | .overflow-y-visible-l { overflow-y: visible; } 3117 | .overflow-y-hidden-l { overflow-y: hidden; } 3118 | .overflow-y-scroll-l { overflow-y: scroll; } 3119 | .overflow-y-auto-l { overflow-y: auto; } 3120 | .static-l { position: static; } 3121 | .relative-l { position: relative; } 3122 | .absolute-l { position: absolute; } 3123 | .fixed-l { position: fixed; } 3124 | .rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } 3125 | .rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } 3126 | .rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } 3127 | .rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } 3128 | .rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } 3129 | .rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } 3130 | .rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } 3131 | .pa0-l { padding: 0; } 3132 | .pa1-l { padding: .25rem; } 3133 | .pa2-l { padding: .5rem; } 3134 | .pa3-l { padding: 1rem; } 3135 | .pa4-l { padding: 2rem; } 3136 | .pa5-l { padding: 4rem; } 3137 | .pa6-l { padding: 8rem; } 3138 | .pa7-l { padding: 16rem; } 3139 | .pl0-l { padding-left: 0; } 3140 | .pl1-l { padding-left: .25rem; } 3141 | .pl2-l { padding-left: .5rem; } 3142 | .pl3-l { padding-left: 1rem; } 3143 | .pl4-l { padding-left: 2rem; } 3144 | .pl5-l { padding-left: 4rem; } 3145 | .pl6-l { padding-left: 8rem; } 3146 | .pl7-l { padding-left: 16rem; } 3147 | .pr0-l { padding-right: 0; } 3148 | .pr1-l { padding-right: .25rem; } 3149 | .pr2-l { padding-right: .5rem; } 3150 | .pr3-l { padding-right: 1rem; } 3151 | .pr4-l { padding-right: 2rem; } 3152 | .pr5-l { padding-right: 4rem; } 3153 | .pr6-l { padding-right: 8rem; } 3154 | .pr7-l { padding-right: 16rem; } 3155 | .pb0-l { padding-bottom: 0; } 3156 | .pb1-l { padding-bottom: .25rem; } 3157 | .pb2-l { padding-bottom: .5rem; } 3158 | .pb3-l { padding-bottom: 1rem; } 3159 | .pb4-l { padding-bottom: 2rem; } 3160 | .pb5-l { padding-bottom: 4rem; } 3161 | .pb6-l { padding-bottom: 8rem; } 3162 | .pb7-l { padding-bottom: 16rem; } 3163 | .pt0-l { padding-top: 0; } 3164 | .pt1-l { padding-top: .25rem; } 3165 | .pt2-l { padding-top: .5rem; } 3166 | .pt3-l { padding-top: 1rem; } 3167 | .pt4-l { padding-top: 2rem; } 3168 | .pt5-l { padding-top: 4rem; } 3169 | .pt6-l { padding-top: 8rem; } 3170 | .pt7-l { padding-top: 16rem; } 3171 | .pv0-l { padding-top: 0; padding-bottom: 0; } 3172 | .pv1-l { padding-top: .25rem; padding-bottom: .25rem; } 3173 | .pv2-l { padding-top: .5rem; padding-bottom: .5rem; } 3174 | .pv3-l { padding-top: 1rem; padding-bottom: 1rem; } 3175 | .pv4-l { padding-top: 2rem; padding-bottom: 2rem; } 3176 | .pv5-l { padding-top: 4rem; padding-bottom: 4rem; } 3177 | .pv6-l { padding-top: 8rem; padding-bottom: 8rem; } 3178 | .pv7-l { padding-top: 16rem; padding-bottom: 16rem; } 3179 | .ph0-l { padding-left: 0; padding-right: 0; } 3180 | .ph1-l { padding-left: .25rem; padding-right: .25rem; } 3181 | .ph2-l { padding-left: .5rem; padding-right: .5rem; } 3182 | .ph3-l { padding-left: 1rem; padding-right: 1rem; } 3183 | .ph4-l { padding-left: 2rem; padding-right: 2rem; } 3184 | .ph5-l { padding-left: 4rem; padding-right: 4rem; } 3185 | .ph6-l { padding-left: 8rem; padding-right: 8rem; } 3186 | .ph7-l { padding-left: 16rem; padding-right: 16rem; } 3187 | .ma0-l { margin: 0; } 3188 | .ma1-l { margin: .25rem; } 3189 | .ma2-l { margin: .5rem; } 3190 | .ma3-l { margin: 1rem; } 3191 | .ma4-l { margin: 2rem; } 3192 | .ma5-l { margin: 4rem; } 3193 | .ma6-l { margin: 8rem; } 3194 | .ma7-l { margin: 16rem; } 3195 | .ml0-l { margin-left: 0; } 3196 | .ml1-l { margin-left: .25rem; } 3197 | .ml2-l { margin-left: .5rem; } 3198 | .ml3-l { margin-left: 1rem; } 3199 | .ml4-l { margin-left: 2rem; } 3200 | .ml5-l { margin-left: 4rem; } 3201 | .ml6-l { margin-left: 8rem; } 3202 | .ml7-l { margin-left: 16rem; } 3203 | .mr0-l { margin-right: 0; } 3204 | .mr1-l { margin-right: .25rem; } 3205 | .mr2-l { margin-right: .5rem; } 3206 | .mr3-l { margin-right: 1rem; } 3207 | .mr4-l { margin-right: 2rem; } 3208 | .mr5-l { margin-right: 4rem; } 3209 | .mr6-l { margin-right: 8rem; } 3210 | .mr7-l { margin-right: 16rem; } 3211 | .mb0-l { margin-bottom: 0; } 3212 | .mb1-l { margin-bottom: .25rem; } 3213 | .mb2-l { margin-bottom: .5rem; } 3214 | .mb3-l { margin-bottom: 1rem; } 3215 | .mb4-l { margin-bottom: 2rem; } 3216 | .mb5-l { margin-bottom: 4rem; } 3217 | .mb6-l { margin-bottom: 8rem; } 3218 | .mb7-l { margin-bottom: 16rem; } 3219 | .mt0-l { margin-top: 0; } 3220 | .mt1-l { margin-top: .25rem; } 3221 | .mt2-l { margin-top: .5rem; } 3222 | .mt3-l { margin-top: 1rem; } 3223 | .mt4-l { margin-top: 2rem; } 3224 | .mt5-l { margin-top: 4rem; } 3225 | .mt6-l { margin-top: 8rem; } 3226 | .mt7-l { margin-top: 16rem; } 3227 | .mv0-l { margin-top: 0; margin-bottom: 0; } 3228 | .mv1-l { margin-top: .25rem; margin-bottom: .25rem; } 3229 | .mv2-l { margin-top: .5rem; margin-bottom: .5rem; } 3230 | .mv3-l { margin-top: 1rem; margin-bottom: 1rem; } 3231 | .mv4-l { margin-top: 2rem; margin-bottom: 2rem; } 3232 | .mv5-l { margin-top: 4rem; margin-bottom: 4rem; } 3233 | .mv6-l { margin-top: 8rem; margin-bottom: 8rem; } 3234 | .mv7-l { margin-top: 16rem; margin-bottom: 16rem; } 3235 | .mh0-l { margin-left: 0; margin-right: 0; } 3236 | .mh1-l { margin-left: .25rem; margin-right: .25rem; } 3237 | .mh2-l { margin-left: .5rem; margin-right: .5rem; } 3238 | .mh3-l { margin-left: 1rem; margin-right: 1rem; } 3239 | .mh4-l { margin-left: 2rem; margin-right: 2rem; } 3240 | .mh5-l { margin-left: 4rem; margin-right: 4rem; } 3241 | .mh6-l { margin-left: 8rem; margin-right: 8rem; } 3242 | .mh7-l { margin-left: 16rem; margin-right: 16rem; } 3243 | .na1-l { margin: -.25rem; } 3244 | .na2-l { margin: -.5rem; } 3245 | .na3-l { margin: -1rem; } 3246 | .na4-l { margin: -2rem; } 3247 | .na5-l { margin: -4rem; } 3248 | .na6-l { margin: -8rem; } 3249 | .na7-l { margin: -16rem; } 3250 | .nl1-l { margin-left: -.25rem; } 3251 | .nl2-l { margin-left: -.5rem; } 3252 | .nl3-l { margin-left: -1rem; } 3253 | .nl4-l { margin-left: -2rem; } 3254 | .nl5-l { margin-left: -4rem; } 3255 | .nl6-l { margin-left: -8rem; } 3256 | .nl7-l { margin-left: -16rem; } 3257 | .nr1-l { margin-right: -.25rem; } 3258 | .nr2-l { margin-right: -.5rem; } 3259 | .nr3-l { margin-right: -1rem; } 3260 | .nr4-l { margin-right: -2rem; } 3261 | .nr5-l { margin-right: -4rem; } 3262 | .nr6-l { margin-right: -8rem; } 3263 | .nr7-l { margin-right: -16rem; } 3264 | .nb1-l { margin-bottom: -.25rem; } 3265 | .nb2-l { margin-bottom: -.5rem; } 3266 | .nb3-l { margin-bottom: -1rem; } 3267 | .nb4-l { margin-bottom: -2rem; } 3268 | .nb5-l { margin-bottom: -4rem; } 3269 | .nb6-l { margin-bottom: -8rem; } 3270 | .nb7-l { margin-bottom: -16rem; } 3271 | .nt1-l { margin-top: -.25rem; } 3272 | .nt2-l { margin-top: -.5rem; } 3273 | .nt3-l { margin-top: -1rem; } 3274 | .nt4-l { margin-top: -2rem; } 3275 | .nt5-l { margin-top: -4rem; } 3276 | .nt6-l { margin-top: -8rem; } 3277 | .nt7-l { margin-top: -16rem; } 3278 | .strike-l { text-decoration: line-through; } 3279 | .underline-l { text-decoration: underline; } 3280 | .no-underline-l { text-decoration: none; } 3281 | .tl-l { text-align: left; } 3282 | .tr-l { text-align: right; } 3283 | .tc-l { text-align: center; } 3284 | .ttc-l { text-transform: capitalize; } 3285 | .ttl-l { text-transform: lowercase; } 3286 | .ttu-l { text-transform: uppercase; } 3287 | .ttn-l { text-transform: none; } 3288 | .f-6-l, .f-headline-l { font-size: 6rem; } 3289 | .f-5-l, .f-subheadline-l { font-size: 5rem; } 3290 | .f1-l { font-size: 3rem; } 3291 | .f2-l { font-size: 2.25rem; } 3292 | .f3-l { font-size: 1.5rem; } 3293 | .f4-l { font-size: 1.25rem; } 3294 | .f5-l { font-size: 1rem; } 3295 | .f6-l { font-size: .875rem; } 3296 | .f7-l { font-size: .75rem; } 3297 | .measure-l { max-width: 30em; } 3298 | .measure-wide-l { max-width: 34em; } 3299 | .measure-narrow-l { max-width: 20em; } 3300 | .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } 3301 | .small-caps-l { font-variant: small-caps; } 3302 | .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 3303 | .center-l { margin-right: auto; margin-left: auto; } 3304 | .clip-l { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } 3305 | .ws-normal-l { white-space: normal; } 3306 | .nowrap-l { white-space: nowrap; } 3307 | .pre-l { white-space: pre; } 3308 | .v-base-l { vertical-align: baseline; } 3309 | .v-mid-l { vertical-align: middle; } 3310 | .v-top-l { vertical-align: top; } 3311 | .v-btm-l { vertical-align: bottom; } 3312 | } 3313 | --------------------------------------------------------------------------------