├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── dist
    ├── cascade-min.js
    ├── cascade.css
    ├── cascade.js
    └── cascade.min.css
├── docs
    ├── cascadejs-logo.png
    ├── css
    │   ├── font
    │   │   └── Quicksand-Regular.otf
    │   ├── src
    │   │   ├── _code_example.scss
    │   │   ├── _sidebar.scss
    │   │   ├── _syntax.scss
    │   │   ├── cascade.css
    │   │   ├── concise.css
    │   │   └── normalize.css
    │   ├── styles.css
    │   └── styles.scss
    ├── index.html
    └── js
    │   ├── cascade.js
    │   ├── extras.js
    │   └── vendor
    │       └── html5shiv.js
├── gulpfile.js
├── package.json
└── src
    ├── css
        └── cascade.scss
    └── js
        └── cascade.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | 
 2 | The MIT License (MIT)
 3 | 
 4 | Copyright (c) 2017 Joshua Bartlett
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CascadeJS
  2 | 
  3 | [Official Docs](https://bartboy011.github.io/CascadeJS/)
  4 | 
  5 | CascadeJS makes it simple to add cascading animations to individual letters or elements, using only vanilla javascript.
  6 | 
  7 | ## Installation
  8 | 
  9 | Installation is easy, you have three options:
 10 | 
 11 | ```bash
 12 | npm install cascadejs
 13 | bower install cascadejs
 14 | ```
 15 | 
 16 | or just download from GitHub. Then:
 17 | 
 18 | ```html
 19 | <link href='stylesheet' type='text/css' href='cascade.min.css' />
 20 | <script type='text/javascript' src='cascade.min.js' />
 21 | ```
 22 | 
 23 | ## Quick Start
 24 | 
 25 | CascadeJS comes with default settings, so as long as you've included both the JS and CSS files, it will work right out of the box. Here's an example usage:
 26 | 
 27 | ```html
 28 | <link href='stylesheet' type='text/css' href='cascade.css' />
 29 | <script type='text/javascript' src='cascade.js' />
 30 | 
 31 | <h1>Ooooohhhh, fancy.</h1>
 32 | 
 33 | <script>
 34 |   var element = document.getElementsByTagName('h1')[0];
 35 |   var cascade = new Cascade(element).flow();
 36 | </script>
 37 | ```
 38 | 
 39 | ## Usage
 40 | 
 41 | CascadeJS works by reading a line of text, splitting that text into spans around each character, and then adding animations to each span (by default). The splitting is modeled after charming.js, a vanilla javascript version of Lettering.js. Cascade requires an element be passed in on initialization:
 42 | 
 43 | ```javascript
 44 | var cascade = new Cascade(element);
 45 | ```
 46 | 
 47 | Cascade has two methods that can be called:
 48 | 
 49 | ```javascript
 50 | var cascade = new Cascade(element);
 51 | cascade.fragment();
 52 | cascade.flow();
 53 | ```
 54 | 
 55 | Calling `fragment()` will split the text without adding the animations, and must be called on an element with only a text node for a child. Calling `flow()` will first fragment the text, and then animate all children elements in a cascade. I would suggest calling `flow()` whenever possible.
 56 | 
 57 | ### Usage of `flow()`
 58 | 
 59 | Initialize Cascade with an element:
 60 | 
 61 | ```javascript
 62 | var cascade = new Cascade(element);
 63 | ```
 64 | 
 65 | Then call `flow()` with any or none of the following options:
 66 | 
 67 | ```javascript
 68 | cascade.flow({
 69 |   tagName: 'span',
 70 |   classPrefix: 'cascade char',
 71 |   effect: 'fadeUp',
 72 |   totalTime: 0.5,
 73 |   duration: 1,
 74 |   shouldFragment: true,
 75 |   shouldAppendTargetClass: true,
 76 |   targetClass: 'cascade-container'
 77 | });
 78 | ```
 79 | 
 80 | `tagName:` - The tag that will wrap each character, ie `<span>A</span>`. Defaults to 'span'.
 81 | 
 82 | `classPrefix:` - The class(es) to be added to the tags, with an increasing number appended at the end, ie `<span class="cascade char1">A</span>`. Defaults to 'cascade char'.
 83 | 
 84 | `effect:` - The class name that adds the animation. In this default, 'fadeUp' uses a keyframe animation to fade in text while utilizing translateY to slide it up. Defaults to 'fadeUp'.
 85 | 
 86 | `totalTime:` - The amount of time in seconds as a float/integer from the first letter beginning it's animation to the last letter beginning it's animation. Defaults to `0.5`.
 87 | 
 88 | `duration:` - How long each letter's animation lasts. If you'd rather specify this in your CSS, just leave this option empty. Defaults to `null` and doesn't add this styling.
 89 | 
 90 | `shouldFragment:` - If you've previously called `fragment()` on this node, set this option to false otherwise the fragmentation will run again and throw an error. Defaults to true.
 91 | 
 92 | `shouldAppendTargetClass` - Defaults to true, will append a class to the target element after fragmenting.
 93 | 
 94 | `targetClass` - The class to be appended to the target element. Defaults to 'cascade-container'. Note: if you've already added the class to the element that you'd like appended, CascadeJS will skip the appending. Example:
 95 | 
 96 | ```html
 97 | <!-- This element will have a class appended to it -->
 98 | <h1 class='text-center'>Hello!</h1>
 99 | 
100 | <script>
101 |   var element = document.getElementsByTagName('h1')[0];
102 |   var cascade = new Cascade(element);
103 |   cascade.flow({
104 |     targetClass: 'cascade-container'
105 |   });
106 | </script>
107 | 
108 | <!-- This element will NOT have a class appended -->
109 | <h1 class='text-center cascade-container'>Hello!</h1>
110 | 
111 | <script>
112 |   var element = document.getElementsByTagName('h1')[0];
113 |   var cascade = new Cascade(element);
114 |   cascade.flow({
115 |     targetClass: 'cascade-container'
116 |   });
117 | </script>
118 | ```
119 | 
120 | #### Example:
121 | 
122 | ```html
123 | <h1>Hello!</h1>
124 | 
125 | <script>
126 |   var element = document.getElementsByClassName('cascade-container')[0];
127 |   cascade = new Cascade(element).flow({
128 |     totalTime: 2,
129 |     duration: 1.5
130 |   })
131 | </script>
132 | ```
133 | 
134 | Produces:
135 | 
136 | ```html
137 | <h1 class='cascade-container'>
138 |   <span class='cascade char1 fadeUp' style='animation-delay: 0s; animation-duration: 1.5s;'>H</span>
139 |   <span class='cascade char2 fadeUp' style='animation-delay: 0.4s; animation-duration: 1.5s;'>e</span>
140 |   <span class='cascade char3 fadeUp' style='animation-delay: 0.8s; animation-duration: 1.5s;'>l</span>
141 |   <span class='cascade char4 fadeUp' style='animation-delay: 1.2s; animation-duration: 1.5s;'>l</span>
142 |   <span class='cascade char5 fadeUp' style='animation-delay: 1.6s; animation-duration: 1.5s;'>o</span>
143 |   <span class='cascade char6 fadeUp' style='animation-delay: 2s; animation-duration: 1.5s;'>!</span>
144 | </h1>
145 | ```
146 | 
147 | Use Animate.css? Try this:
148 | 
149 | ```javascript
150 | var element = document.getElementsByClassName('cascade-container')[0];
151 | var cascade = new Cascade(element).flow({
152 |   classPrefix: 'animated char',
153 |   effect: 'bounceInLeft'
154 | });
155 | ```
156 | 
157 | You can also call `flow()` on an element that already has children nodes of any kind and they'll be animated as well:
158 | 
159 | ```html
160 | <div class='container'>
161 |   <div>Element One</div>
162 |   <div>Element Two</div>
163 |   <div>Element Three</div>
164 |   <div>Element Four</div>
165 | </div>
166 | 
167 | <script>
168 |   var element = document.getElementsByClassName('container')[0];
169 |   var cascade = new Cascade(element);
170 |   cascade.flow({
171 |     shouldFragment: false,
172 |     shouldAppendTargetClass: false
173 |   });
174 | ```
175 | 
176 | ### Usage of `fragment()`
177 | 
178 | `fragment()` will split and wrap your text, but not animate it. Just want to style each letter in an interesting way? Want a vanilla javascript replacement for lettering.js? This is it. `fragment()` accepts all the same options as `flow()`, but only the following will be applied:
179 | 
180 | ```javascript
181 | var cascade = new Cascade(element).fragment({
182 |   tagName: 'span',
183 |   classPrefix: 'cascade char'
184 | });
185 | ```
186 | 
187 | You can then call
188 | 
189 | ```javascript
190 | cascade.flow({
191 |   shouldFragment: false
192 | });
193 | ```
194 | 
195 | When you're ready for some cool animations.
196 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cascadejs",
 3 |   "description": "CascadeJS makes it simple to add animations to individual letters in a text string, using only vanilla javascript, for dynamic typography.",
 4 |   "main": "cascade.js",
 5 |   "authors": [
 6 |     "Joshua Bartlett"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "keywords": [
10 |     "javascript",
11 |     "npm",
12 |     "animation",
13 |     "cascading",
14 |     "typography",
15 |     "letters"
16 |   ],
17 |   "homepage": "https://github.com/bartboy011/CascadeJS",
18 |   "ignore": [
19 |     "**/.*",
20 |     "node_modules",
21 |     "bower_components",
22 |     "test",
23 |     "tests"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/dist/cascade-min.js:
--------------------------------------------------------------------------------
1 | function Cascade(e,t){function a(e,t){var a=e.className,s=a.match(t);null===s&&(e.className+=t)}function s(e,t,s,l,i){for(var n=e.parentNode,r=e.nodeValue,o=r.length,h=-1,d=1;++h<o;){var c=document.createElement(t),u=document.createTextNode(r[h]);c.className=s+d,c.appendChild(u),n.insertBefore(c,e),++d}n.removeChild(e),this.targetElement=n,this.children=n.childNodes,n.setAttribute("data-made-with","CascadeJS"),l&&a(n,i)}function l(e,t,a,s){e.style.animationDelay=a+"s",null!=s&&(e.style.animationDuration=s+"s"),e.className+=" "+t}this.targetElement=e,this.children=this.targetElement.childNodes,this.setDefaults=function(e){var t=e||{};this.classPrefix=t.classPrefix||"cascade char",this.tagName=t.tagName||"span",this.effect=t.effect||"fadeUp",this.totalTime=t.totalTime||.5,this.duration=t.duration,this.shouldFragment=null==t.shouldFragment||t.shouldFragment,this.shouldAppendTargetClass=null==t.shouldAppendTargetClass||t.shouldAppendTargetClass,this.targetClass=null!=t.targetClass?t.targetClass:" cascade-container"}.bind(this),this.flow=function(e){var t=e||{};this.setDefaults(t),this.shouldFragment&&this.fragment({},!1);for(var a=this.children,s=this.totalTime,i=this.effect,n=this.duration,r=-1;r++<a.length-1;){var o=a[r],h=s/(a.length-1)*r;l(o,i,h,n)}}.bind(this),this.fragment=function(e,t){var a=null==t||t,l=e||{};a&&this.setDefaults(l);var i=this.children;i.length>1?console.error("CascadeJS Error - error in target element:\n Please limit the amount children of this element to 1 (population control and all that)."):i[0].nodeType!==Node.TEXT_NODE?console.error("CascadeJS Error - error in target element:\n Please ensure that the immediate child of this element is text node. If you would like to animate a collection of divs, please add the option shouldFragment: false when calling Cascade.flow()."):s(i[0],this.tagName,this.classPrefix,this.shouldAppendTargetClass,this.targetClass)}.bind(this)}


--------------------------------------------------------------------------------
/dist/cascade.css:
--------------------------------------------------------------------------------
 1 | /* Copyright 2017 Joshua Bartlett */
 2 | /* Available under MIT License */
 3 | .cascade-container * {
 4 |   display: inline-block;
 5 |   white-space: pre; }
 6 | 
 7 | .cascade {
 8 |   -webkit-animation-fill-mode: both;
 9 |           animation-fill-mode: both;
10 |   -webkit-animation-duration: 1s;
11 |           animation-duration: 1s; }
12 | 
13 | @-webkit-keyframes fadeUp {
14 |   from {
15 |     opacity: 0;
16 |     -webkit-transform: translate3d(0, 100%, 0);
17 |             transform: translate3d(0, 100%, 0); }
18 |   to {
19 |     opacity: 1;
20 |     -webkit-transform: none;
21 |             transform: none; } }
22 | 
23 | @keyframes fadeUp {
24 |   from {
25 |     opacity: 0;
26 |     -webkit-transform: translate3d(0, 100%, 0);
27 |             transform: translate3d(0, 100%, 0); }
28 |   to {
29 |     opacity: 1;
30 |     -webkit-transform: none;
31 |             transform: none; } }
32 | 
33 | .fadeUp {
34 |   -webkit-animation-name: fadeUp;
35 |           animation-name: fadeUp; }
36 | 
37 | @-webkit-keyframes fadeDown {
38 |   from {
39 |     opacity: 0;
40 |     -webkit-transform: translate3d(0, -100%, 0);
41 |             transform: translate3d(0, -100%, 0); }
42 |   to {
43 |     opacity: 1;
44 |     -webkit-transform: none;
45 |             transform: none; } }
46 | 
47 | @keyframes fadeDown {
48 |   from {
49 |     opacity: 0;
50 |     -webkit-transform: translate3d(0, -100%, 0);
51 |             transform: translate3d(0, -100%, 0); }
52 |   to {
53 |     opacity: 1;
54 |     -webkit-transform: none;
55 |             transform: none; } }
56 | 
57 | .fadeDown {
58 |   -webkit-animation-name: fadeDown;
59 |           animation-name: fadeDown; }
60 | 
61 | @-webkit-keyframes doTheWave {
62 |   to {
63 |     -webkit-transform: translateY(100px);
64 |             transform: translateY(100px); } }
65 | 
66 | @keyframes doTheWave {
67 |   to {
68 |     -webkit-transform: translateY(100px);
69 |             transform: translateY(100px); } }
70 | 
71 | .doTheWave {
72 |   -webkit-animation-name: doTheWave;
73 |           animation-name: doTheWave;
74 |   -webkit-animation-timing-function: ease-in-out;
75 |           animation-timing-function: ease-in-out;
76 |   -webkit-animation-direction: alternate;
77 |           animation-direction: alternate;
78 |   -webkit-animation-iteration-count: infinite;
79 |           animation-iteration-count: infinite; }
80 | 


--------------------------------------------------------------------------------
/dist/cascade.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Copyright 2017 Joshua Bartlett
  3 |  * Available under MIT License
  4 |  */
  5 | 
  6 | function Cascade(element, options) {
  7 |   // set defaults
  8 |   this.targetElement = element; // element to segment and animate
  9 |   this.children = this.targetElement.childNodes; // pre-segment child nodes
 10 | 
 11 |   this.setDefaults = function (options) {
 12 |     var opts = options || {};
 13 |     this.classPrefix = opts.classPrefix || 'cascade char';
 14 |     this.tagName = opts.tagName || 'span';
 15 |     this.effect = opts.effect || 'fadeUp';
 16 |     this.totalTime = opts.totalTime || 0.5;
 17 |     this.duration = opts.duration;
 18 |     this.shouldFragment = opts.shouldFragment != null ? opts.shouldFragment : true;
 19 |     this.shouldAppendTargetClass = opts.shouldAppendTargetClass != null ? opts.shouldAppendTargetClass : true;
 20 |     this.targetClass = opts.targetClass != null ? opts.targetClass : ' cascade-container';
 21 |   }.bind(this);
 22 | 
 23 |   function appendTargetClass(target, targetClass) {
 24 |     var string = target.className,
 25 |         match = string.match(targetClass);
 26 | 
 27 |     if (match === null) {
 28 |       target.className += targetClass;
 29 |     }
 30 |   }
 31 | 
 32 |   // take a string inside an element, split it, wrap them
 33 |   // in their own tags, then inject the whole thing back
 34 |   // into the parent node
 35 |   function inject(element, tagName, classPrefix, shouldAppendTargetClass, targetClass) {
 36 |     var parent = element.parentNode,
 37 |         string = element.nodeValue,
 38 |         length = string.length,
 39 |         i = -1,
 40 |         count = 1;
 41 | 
 42 |     while (++i < length) {
 43 |       var newNode = document.createElement(tagName),
 44 |           newNodeText = document.createTextNode(string[i]);
 45 | 
 46 |       newNode.className = classPrefix + count;
 47 |       newNode.appendChild(newNodeText);
 48 | 
 49 |       parent.insertBefore(newNode, element);
 50 | 
 51 |       ++count;
 52 |     }
 53 | 
 54 |     parent.removeChild(element);
 55 | 
 56 |     this.targetElement = parent;
 57 |     this.children = parent.childNodes;
 58 | 
 59 |     parent.setAttribute('data-made-with', 'CascadeJS');
 60 | 
 61 |     if (shouldAppendTargetClass) {
 62 |       appendTargetClass(parent, targetClass);
 63 |     }
 64 |   }
 65 | 
 66 |   function animate(item, animationEffect, delay, duration) {
 67 |     item.style.animationDelay = delay + 's';
 68 | 
 69 |     // only add animation-duration to element if it was
 70 |     // specified in the options. Otherwise, let whatever is specified
 71 |     // in the CSS handle this.
 72 |     if (duration != null) {
 73 |       item.style.animationDuration = duration + 's';
 74 |     }
 75 | 
 76 |     item.className += ' ' + animationEffect;
 77 |   }
 78 | 
 79 |   this.flow = function (options) {
 80 |     // set defaults
 81 |     var opts = options || {};
 82 |     this.setDefaults(opts);
 83 | 
 84 |     // split the text into spans if segmentation
 85 |     // hasn't been performed yet
 86 |     if (this.shouldFragment) {
 87 |       this.fragment({}, false);
 88 |     }
 89 | 
 90 |     // iterate through spans and animate them
 91 |     var array = this.children,
 92 |         totalTime = this.totalTime,
 93 |         effect = this.effect,
 94 |         duration = this.duration,
 95 |         i = -1;
 96 |     while (i++ < array.length - 1) {
 97 |       var item = array[i],
 98 |           time = totalTime / (array.length - 1) * i;
 99 |       animate(item, effect, time, duration);
100 |     }
101 |   }.bind(this);
102 | 
103 |   this.fragment = function (options, setDefaults) {
104 |     // set defaults only if they are being passed in from an
105 |     // external call, ie new Cascade.fragment(options) to prevent
106 |     // overwriting defaults when called internally
107 |     var shouldSetDefaults = setDefaults != null ? setDefaults : true;
108 |     var opts = options || {};
109 | 
110 |     // set defaults only if
111 |     if (shouldSetDefaults) {
112 |       this.setDefaults(opts);
113 |     }
114 | 
115 |     var children = this.children;
116 | 
117 |     // throw some errors if elements are set up improperly
118 |     if (children.length > 1) {
119 |       console.error('CascadeJS Error - error in target element:\n Please limit the amount children of this element to 1 (population control and all that).');
120 |     } else if (children[0].nodeType !== Node.TEXT_NODE) {
121 |       console.error('CascadeJS Error - error in target element:\n Please ensure that the immediate child of this element is text node. If you would like to animate a collection of divs, please add the option shouldFragment: false when calling Cascade.flow().');
122 |     } else {
123 |       inject(children[0], this.tagName, this.classPrefix, this.shouldAppendTargetClass, this.targetClass);
124 |     }
125 |   }.bind(this);
126 | }


--------------------------------------------------------------------------------
/dist/cascade.min.css:
--------------------------------------------------------------------------------
1 | .cascade-container *{display:inline-block;white-space:pre}.cascade{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;animation-duration:1s}@-webkit-keyframes fadeUp{from{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeUp{from{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeUp{-webkit-animation-name:fadeUp;animation-name:fadeUp}@-webkit-keyframes fadeDown{from{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeDown{from{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeDown{-webkit-animation-name:fadeDown;animation-name:fadeDown}@-webkit-keyframes doTheWave{to{-webkit-transform:translateY(100px);transform:translateY(100px)}}@keyframes doTheWave{to{-webkit-transform:translateY(100px);transform:translateY(100px)}}.doTheWave{-webkit-animation-name:doTheWave;animation-name:doTheWave;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
2 | 


--------------------------------------------------------------------------------
/docs/cascadejs-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartboy011/CascadeJS/f2569743ac7a143367078863464a5be03aa90c8d/docs/cascadejs-logo.png


--------------------------------------------------------------------------------
/docs/css/font/Quicksand-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartboy011/CascadeJS/f2569743ac7a143367078863464a5be03aa90c8d/docs/css/font/Quicksand-Regular.otf


--------------------------------------------------------------------------------
/docs/css/src/_code_example.scss:
--------------------------------------------------------------------------------
 1 | .code-example {
 2 |   border       : 2px solid transparentize($purple, .7);
 3 |   border-radius: 3px;
 4 |   padding      : .75rem;
 5 | 
 6 |   h1 {
 7 |     font-size: 1.6rem;
 8 |     @media(min-width:768px) {
 9 |       font-size: 2rem;
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/docs/css/src/_sidebar.scss:
--------------------------------------------------------------------------------
 1 | #sidebar {
 2 |   padding-left: .375rem;
 3 |   padding-top : 1.5rem;
 4 |   background  : transparentize($purple, .7);
 5 |   position    : absolute;
 6 |   top         : 0;
 7 |   left        : 0;
 8 |   height      : 100vh;
 9 |   @media(max-width: 768px) {
10 |     display: none;
11 |   }
12 | 
13 |   h2 {
14 |     color : white;
15 |     margin: 0;
16 |   }
17 | 
18 |   ul {
19 |     margin-top  : 0;
20 |     list-style  : none;
21 |     padding-left: 0;
22 | 
23 |     li {
24 |       padding: 8px 0;
25 | 
26 |       a {
27 |         color: white;
28 |       }
29 | 
30 |       ul {
31 |         padding-left: 15px;
32 | 
33 |         li {
34 |           padding  : 8px 0;
35 |           font-size: 14px;
36 |         }
37 |       }
38 |     }
39 |   }
40 | }
41 | 
42 | [underline] {
43 |   position: relative;
44 | 
45 |   &:hover {
46 |     &::after {
47 |       width     : 100%;
48 |       background: transparentize($purple, .6);
49 |     }
50 |   }
51 | 
52 |   &::after {
53 |     content   : '';
54 |     position  : absolute;
55 |     left      : 0;
56 |     bottom    : -2px;
57 |     height    : 2px;
58 |     width     : 0;
59 |     background: transparentize($purple, .999);
60 |     transition: all .2s;
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/docs/css/src/_syntax.scss:
--------------------------------------------------------------------------------
 1 | .hljs-comment,
 2 | .hljs-quote {
 3 |   color: #7d7a68;
 4 | }
 5 | 
 6 | /* Light Purple */
 7 | .hljs-attribute,
 8 | .hljs-link,
 9 | .hljs-name,
10 | .hljs-name,
11 | .hljs-regexp,
12 | .hljs-selector-class,
13 | .hljs-selector-id,
14 | .hljs-tag,
15 | .hljs-template-variable,
16 | .hljs-variable {
17 |   color: transparentize($purple, .3);
18 | }
19 | 
20 | /* Orange */
21 | .hljs-built_in,
22 | .hljs-builtin-name,
23 | .hljs-literal,
24 | .hljs-meta,
25 | .hljs-number,
26 | .hljs-params,
27 | .hljs-type {
28 |   color: $orange;
29 | }
30 | 
31 | /* Blue */
32 | .hljs-bullet,
33 | .hljs-string,
34 | .hljs-symbol {
35 |   color: darken($blue, 20);
36 | }
37 | 
38 | /* Atelier-Dune Blue */
39 | .hljs-section,
40 | .hljs-title {
41 |   color: #6684e1;
42 | }
43 | 
44 | /* Atelier-Dune Purple */
45 | .hljs-keyword,
46 | .hljs-selector-tag {
47 |   color: #b854d4;
48 | }
49 | 
50 | .hljs {
51 |   display   : block;
52 |   overflow-x: auto;
53 |   background: #fefbec;
54 |   color     : #6e6b5e;
55 |   padding   : .5em;
56 | }
57 | 
58 | .hljs-emphasis {
59 |   font-style: italic;
60 | }
61 | 
62 | .hljs-strong {
63 |   font-weight: bold;
64 | }
65 | 


--------------------------------------------------------------------------------
/docs/css/src/cascade.css:
--------------------------------------------------------------------------------
 1 | /* Copyright 2017 Joshua Bartlett */
 2 | /* Available under MIT License */
 3 | .cascade-container * {
 4 |   display: inline-block;
 5 |   white-space: pre; }
 6 | 
 7 | .cascade {
 8 |   -webkit-animation-fill-mode: both;
 9 |           animation-fill-mode: both;
10 |   -webkit-animation-duration: 1s;
11 |           animation-duration: 1s; }
12 | 
13 | @-webkit-keyframes fadeUp {
14 |   from {
15 |     opacity: 0;
16 |     -webkit-transform: translate3d(0, 100%, 0);
17 |             transform: translate3d(0, 100%, 0); }
18 |   to {
19 |     opacity: 1;
20 |     -webkit-transform: none;
21 |             transform: none; } }
22 | 
23 | @keyframes fadeUp {
24 |   from {
25 |     opacity: 0;
26 |     -webkit-transform: translate3d(0, 100%, 0);
27 |             transform: translate3d(0, 100%, 0); }
28 |   to {
29 |     opacity: 1;
30 |     -webkit-transform: none;
31 |             transform: none; } }
32 | 
33 | .fadeUp {
34 |   -webkit-animation-name: fadeUp;
35 |           animation-name: fadeUp; }
36 | 
37 | @-webkit-keyframes fadeDown {
38 |   from {
39 |     opacity: 0;
40 |     -webkit-transform: translate3d(0, -100%, 0);
41 |             transform: translate3d(0, -100%, 0); }
42 |   to {
43 |     opacity: 1;
44 |     -webkit-transform: none;
45 |             transform: none; } }
46 | 
47 | @keyframes fadeDown {
48 |   from {
49 |     opacity: 0;
50 |     -webkit-transform: translate3d(0, -100%, 0);
51 |             transform: translate3d(0, -100%, 0); }
52 |   to {
53 |     opacity: 1;
54 |     -webkit-transform: none;
55 |             transform: none; } }
56 | 
57 | .fadeDown {
58 |   -webkit-animation-name: fadeDown;
59 |           animation-name: fadeDown; }
60 | 
61 | @-webkit-keyframes doTheWave {
62 |   to {
63 |     -webkit-transform: translateY(100px);
64 |             transform: translateY(100px); } }
65 | 
66 | @keyframes doTheWave {
67 |   to {
68 |     -webkit-transform: translateY(100px);
69 |             transform: translateY(100px); } }
70 | 
71 | .doTheWave {
72 |   -webkit-animation-name: doTheWave;
73 |           animation-name: doTheWave;
74 |   -webkit-animation-timing-function: ease-in-out;
75 |           animation-timing-function: ease-in-out;
76 |   -webkit-animation-direction: alternate;
77 |           animation-direction: alternate;
78 |   -webkit-animation-iteration-count: infinite;
79 |           animation-iteration-count: infinite; }
80 | 


--------------------------------------------------------------------------------
/docs/css/src/concise.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | /**
   3 |  * ConciseCSS v4.1.2
   4 |  * https://github.com/ConciseCSS/concise.css
   5 |  *
   6 |  * Copyright 2016 James Kolce, Keenan Payne and ConciseCSS Contributors
   7 |  * Released under the MIT license
   8 |  * http://opensource.org/licenses/MIT
   9 |  */
  10 | 
  11 |  @font-face{
  12 |    src: url('./font/Quicksand-Regular.otf');
  13 |    font-family: 'Quicksand';
  14 |  }
  15 | 
  16 | article, aside, details,
  17 | figcaption, figure, footer, header, main,
  18 | menu,
  19 | nav,
  20 | section,
  21 | summary {
  22 |   display: block; }
  23 | 
  24 | audio,
  25 | canvas,
  26 | progress,
  27 | video {
  28 |   display: inline-block; }
  29 | 
  30 | audio:not([controls]) {
  31 |   display: none;
  32 |   height: 0; }
  33 | 
  34 | template,
  35 | [hidden] {
  36 |   display: none; }
  37 | 
  38 | *,
  39 | ::after,
  40 | ::before {
  41 |   background-repeat: no-repeat;
  42 |   box-sizing: inherit; }
  43 | 
  44 | ::after,
  45 | ::before {
  46 |   text-decoration: inherit;
  47 |   vertical-align: inherit; }
  48 | 
  49 | :root {
  50 |   box-sizing: border-box;
  51 |   font-family: "Quicksand", "Arial", sans-serif;
  52 |   line-height: 1.5;
  53 |   background-color: white;
  54 |   color: #444;
  55 |   -webkit-font-smoothing: antialiased;
  56 |   font-size: 16px; }
  57 |   @media (min-width: 480px) {
  58 |     :root {
  59 |       font-size: 18px; } }
  60 | 
  61 | code,
  62 | kbd,
  63 | pre,
  64 | samp {
  65 |   font-family: "Consolas", monospace;
  66 |   font-size: 0.83333rem;
  67 |   background-color: #f5f5f5; }
  68 | 
  69 | code,
  70 | kbd {
  71 |   vertical-align: middle;
  72 |   display: inline-block;
  73 |   padding: 0 .4em; }
  74 | 
  75 | pre {
  76 |   padding: 0.75rem 1em; }
  77 |   pre > code {
  78 |     white-space: pre; }
  79 | 
  80 | kbd {
  81 |   background-color: transparent;
  82 |   outline: 1px solid #DCDCDC; }
  83 | 
  84 | hr {
  85 |   background-color: #DCDCDC;
  86 |   height: 1px;
  87 |   overflow: visible;
  88 |   border: 0; }
  89 | 
  90 | nav ol,
  91 | nav ul {
  92 |   padding-left: 0; }
  93 | 
  94 | nav li {
  95 |   list-style: none; }
  96 | 
  97 | dt {
  98 |   font-weight: bold; }
  99 | 
 100 | blockquote {
 101 |   padding: 0 1em; }
 102 |   blockquote cite,
 103 |   blockquote footer {
 104 |     color: #777;
 105 |     font-size: 83.33333%;
 106 |     margin-top: 0.75rem; }
 107 |     blockquote cite:before,
 108 |     blockquote footer:before {
 109 |       content: "— "; }
 110 | 
 111 | abbr {
 112 |   -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
 113 |           font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
 114 |   text-transform: uppercase; }
 115 |   abbr[title] {
 116 |     border-bottom: 1px solid #DCDCDC;
 117 |     cursor: help;
 118 |     text-decoration: none; }
 119 | 
 120 | b,
 121 | strong {
 122 |   font-weight: inherit; }
 123 | 
 124 | b,
 125 | strong {
 126 |   font-weight: bolder; }
 127 | 
 128 | dfn {
 129 |   font-style: italic; }
 130 | 
 131 | mark {
 132 |   background-color: #ffff00;
 133 |   color: #000000; }
 134 | 
 135 | progress {
 136 |   vertical-align: baseline; }
 137 | 
 138 | small {
 139 |   font-size: 83.33333%; }
 140 | 
 141 | sub,
 142 | sup {
 143 |   line-height: 0;
 144 |   position: relative;
 145 |   vertical-align: baseline;
 146 |   font-size: 83.33333%; }
 147 | 
 148 | sub {
 149 |   bottom: -0.25em;
 150 |   -webkit-font-feature-settings: "subs" 1;
 151 |           font-feature-settings: "subs" 1; }
 152 | 
 153 | sup {
 154 |   top: -0.25em;
 155 |   -webkit-font-feature-settings: "sups" 1;
 156 |           font-feature-settings: "sups" 1; }
 157 | 
 158 | ::-moz-selection {
 159 |   background-color: #EBE1D3;
 160 |   text-shadow: none; }
 161 | 
 162 | ::selection {
 163 |   background-color: #EBE1D3;
 164 |   text-shadow: none; }
 165 | 
 166 | audio,
 167 | canvas,
 168 | iframe,
 169 | img,
 170 | svg,
 171 | video {
 172 |   vertical-align: middle; }
 173 | 
 174 | img {
 175 |   border-style: none; }
 176 | 
 177 | svg {
 178 |   fill: currentColor; }
 179 | 
 180 | svg:not(:root) {
 181 |   overflow: hidden; }
 182 | 
 183 | a {
 184 |   background-color: transparent;
 185 |   -webkit-text-decoration-skip: objects;
 186 |   color: #C65146;
 187 |   text-decoration: none;
 188 |   -webkit-transition-duration: 150ms;
 189 |           transition-duration: 150ms; }
 190 |   a:focus, a:hover {
 191 |     color: #7f2f27; }
 192 | 
 193 | a:hover {
 194 |   outline-width: 0; }
 195 | 
 196 | table {
 197 |   border-collapse: collapse;
 198 |   border-spacing: 0; }
 199 | 
 200 | input,
 201 | select,
 202 | textarea {
 203 |   background-color: transparent;
 204 |   border-style: none;
 205 |   color: inherit;
 206 |   font: inherit; }
 207 |   input:focus,
 208 |   select:focus,
 209 |   textarea:focus {
 210 |     outline: 2px solid #2b90d9; }
 211 | 
 212 | button, input[type="submit"],
 213 | input {
 214 |   overflow: visible; }
 215 | 
 216 | button, input[type="submit"],
 217 | select {
 218 |   text-transform: none; }
 219 | 
 220 | button, input[type="submit"], html [type="button"],
 221 | [type="reset"],
 222 | [type="submit"] {
 223 |   -webkit-appearance: button;
 224 |   font: inherit; }
 225 | 
 226 | ::-moz-focus-inner {
 227 |   border-style: none;
 228 |   padding: 0; }
 229 | 
 230 | :-moz-focusring {
 231 |   outline: 1px dotted ButtonText; }
 232 | 
 233 | fieldset {
 234 |   border: 1px solid #DCDCDC;
 235 |   padding: 1.5rem 1em; }
 236 | 
 237 | legend {
 238 |   display: table;
 239 |   max-width: 100%;
 240 |   white-space: normal;
 241 |   padding: 0 .5em; }
 242 | 
 243 | textarea {
 244 |   overflow: auto;
 245 |   resize: vertical;
 246 |   height: auto;
 247 |   padding: 0.375rem .5em; }
 248 | 
 249 | [type="checkbox"],
 250 | [type="radio"] {
 251 |   padding: 0; }
 252 | 
 253 | ::-webkit-inner-spin-button,
 254 | ::-webkit-outer-spin-button {
 255 |   height: auto; }
 256 | 
 257 | [type="search"] {
 258 |   -webkit-appearance: textfield;
 259 |   outline-offset: -2px; }
 260 | 
 261 | ::-webkit-search-cancel-button,
 262 | ::-webkit-search-decoration {
 263 |   -webkit-appearance: none; }
 264 | 
 265 | ::-webkit-input-placeholder {
 266 |   color: inherit;
 267 |   opacity: .54; }
 268 | 
 269 | ::-webkit-file-upload-button {
 270 |   -webkit-appearance: button;
 271 |   /* 1 */
 272 |   font: inherit;
 273 |   /* 2 */ }
 274 | 
 275 | input[type="range"] {
 276 |   border: none;
 277 |   padding: 0;
 278 |   width: 100%;
 279 |   -webkit-appearance: none; }
 280 |   input[type="range"]:focus {
 281 |     outline: none; }
 282 |   input[type="range"]::-moz-range-track{
 283 |   background-color: #DCDCDC;
 284 |   border: none;
 285 |   height: 0.3rem; }
 286 |   input[type="range"]::-ms-track{
 287 |   background-color: #DCDCDC;
 288 |   border: none;
 289 |   height: 0.3rem; }
 290 |   input[type="range"]::-webkit-slider-runnable-track{
 291 |   background-color: #DCDCDC;
 292 |   border: none;
 293 |   height: 0.3rem; }
 294 |   input[type="range"]::-moz-range-thumb{
 295 |   border: none;
 296 |   border-radius: 50%;
 297 |   background-color: #C65146;
 298 |   height: 0.75rem;
 299 |   margin-top: -0.225rem;
 300 |   width: 0.75rem; }
 301 |   input[type="range"]::-ms-thumb{
 302 |   border: none;
 303 |   border-radius: 50%;
 304 |   background-color: #C65146;
 305 |   height: 0.75rem;
 306 |   margin-top: -0.225rem;
 307 |   width: 0.75rem; }
 308 |   input[type="range"]::-webkit-slider-thumb{
 309 |   border: none;
 310 |   border-radius: 50%;
 311 |   background-color: #C65146;
 312 |   height: 0.75rem;
 313 |   margin-top: -0.225rem;
 314 |   width: 0.75rem; }
 315 |   input[type="range"]::-webkit-slider-thumb {
 316 |     -webkit-appearance: none; }
 317 | 
 318 | [aria-busy="true"] {
 319 |   cursor: progress; }
 320 | 
 321 | [aria-controls] {
 322 |   cursor: pointer; }
 323 | 
 324 | [aria-disabled] {
 325 |   cursor: default; }
 326 | 
 327 | [tabindex],
 328 | a,
 329 | area,
 330 | button,
 331 | input[type="submit"],
 332 | input,
 333 | label,
 334 | select,
 335 | textarea {
 336 |   -ms-touch-action: manipulation;
 337 |   touch-action: manipulation; }
 338 | 
 339 | [hidden][aria-hidden="false"] {
 340 |   clip: rect(0, 0, 0, 0);
 341 |   display: inherit;
 342 |   position: absolute; }
 343 | 
 344 | [hidden][aria-hidden="false"]:focus {
 345 |   clip: auto; }
 346 | 
 347 | * {
 348 |   margin: 0; }
 349 | 
 350 | * + * {
 351 |   margin-top: 1.5rem; }
 352 | 
 353 | a,
 354 | body,
 355 | br [column],
 356 | code,
 357 | dd,
 358 | div,
 359 | input,
 360 | kbd,
 361 | label,
 362 | li,
 363 | option,
 364 | select,
 365 | span,
 366 | textarea {
 367 |   margin-top: 0; }
 368 | 
 369 | h1 + p,
 370 | h2 + p,
 371 | h3 + p,
 372 | h4 + p,
 373 | h5 + p,
 374 | h6 + p {
 375 |   margin-top: 0; }
 376 | 
 377 | h1 {
 378 |   font-size: 2.0736rem; }
 379 | 
 380 | h2 {
 381 |   font-size: 1.728rem; }
 382 | 
 383 | h3 {
 384 |   font-size: 1.44rem; }
 385 | 
 386 | h4 {
 387 |   font-size: 1.2rem; }
 388 | 
 389 | h5 {
 390 |   font-size: 1rem; }
 391 | 
 392 | h6 {
 393 |   font-size: 0.83333rem; }
 394 | 
 395 | h1, h2, h3, h4, h5, h6 {
 396 |   color: #222;
 397 |   font-family: "Quicksand", "Arial", sans-serif;
 398 |   line-height: 1.3; }
 399 |   h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
 400 |     color: inherit;
 401 |     vertical-align: 0;
 402 |     font-size: 83.33333%; }
 403 | 
 404 | h1, h2, h3 {
 405 |   margin: 0.75rem 0 0.375rem; }
 406 |   h1 a, h2 a, h3 a {
 407 |     color: inherit; }
 408 |     h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus {
 409 |       color: #C65146;
 410 |       text-decoration: none; }
 411 | 
 412 | h4, h5, h6 {
 413 |   margin: 0.375rem 0; }
 414 | 
 415 | ul,
 416 | ol {
 417 |   padding-left: 1em; }
 418 |   ul ol,
 419 |   ul ul,
 420 |   ol ol,
 421 |   ol ul {
 422 |     padding-left: 1.5em; }
 423 | 
 424 | ol {
 425 |   padding-left: 0;
 426 |   counter-reset: item; }
 427 |   ol li {
 428 |     list-style: none; }
 429 |   ol li:before {
 430 |     content: counters(item, ".") ". ";
 431 |     counter-increment: item;
 432 |     margin-right: 0.2em; }
 433 | 
 434 | input:not([type="submit"]),
 435 | select,
 436 | textarea {
 437 |   width: 100%;
 438 |   font-size: 0.83333rem;
 439 |   min-height: 2.25rem; }
 440 |   input:not([type="submit"])[disabled],
 441 |   select[disabled],
 442 |   textarea[disabled] {
 443 |     background-color: #eee;
 444 |     cursor: not-allowed;
 445 |     border: 0; }
 446 | 
 447 | input:not([type="submit"]):not([type="range"]),
 448 | select,
 449 | textarea {
 450 |   border: 1px solid #DCDCDC;
 451 |   padding: 0 0.75em; }
 452 | 
 453 | input[type="checkbox"],
 454 | input[type="file"],
 455 | input[type="image"],
 456 | input[type="radio"] {
 457 |   height: auto;
 458 |   width: auto; }
 459 | 
 460 | input[type="checkbox"],
 461 | input[type="radio"] {
 462 |   line-height: normal;
 463 |   padding: 0;
 464 |   vertical-align: middle; }
 465 | 
 466 | input[type="file"] {
 467 |   border: none;
 468 |   line-height: 1.5rem;
 469 |   padding: 0; }
 470 | 
 471 | select {
 472 |   background-color: transparent;
 473 |   padding-left: 0.5em;
 474 |   width: auto;
 475 |   min-width: 10em;
 476 |   height: 2.25rem; }
 477 |   select[disabled] {
 478 |     color: #777; }
 479 |   select[multiple] {
 480 |     height: auto;
 481 |     width: 100%;
 482 |     padding: 0; }
 483 |   select::-ms-expand {
 484 |     display: none; }
 485 |   select::-ms-value {
 486 |     color: currentColor; }
 487 |   select option {
 488 |     padding: 0 0.75em; }
 489 | 
 490 | label {
 491 |   display: block;
 492 |   font-size: 0.83333rem;
 493 |   line-height: 2.25rem; }
 494 | 
 495 | input[type="checkbox"] + label,
 496 | input[type="radio"] + label {
 497 |   display: inline-block;
 498 |   margin-left: 0.5em; }
 499 | 
 500 | table {
 501 |   width: 100%; }
 502 |   @media (min-width: 480px) {
 503 |     table {
 504 |       width: auto; } }
 505 |   table thead,
 506 |   table tfoot {
 507 |     background-color: #f5f5f5;
 508 |     text-align: left; }
 509 |   table th,
 510 |   table td {
 511 |     line-height: 2.25rem;
 512 |     overflow: visible;
 513 |     padding: 0 1em; }
 514 |   table caption {
 515 |     font-size: 0.83333rem;
 516 |     font-style: italic;
 517 |     line-height: 3rem;
 518 |     text-align: center; }
 519 | 
 520 | [container] {
 521 |   margin-left: auto;
 522 |   margin-right: auto;
 523 |   max-width: 1200px;
 524 |   padding-left: 1rem;
 525 |   padding-right: 1rem;
 526 |   overflow: auto; }
 527 | 
 528 | @media (min-width: 480px) {
 529 |   [container~="solid"] {
 530 |     max-width: 480px; } }
 531 | 
 532 | @media (min-width: 768px) {
 533 |   [container~="solid"] {
 534 |     max-width: 768px; } }
 535 | 
 536 | @media (min-width: 960px) {
 537 |   [container~="solid"] {
 538 |     max-width: 960px; } }
 539 | 
 540 | @media (min-width: 1100px) {
 541 |   [container~="solid"] {
 542 |     max-width: 1200px; } }
 543 | 
 544 | [grid] {
 545 |   display: -webkit-box;
 546 |   display: -ms-flexbox;
 547 |   display: flex;
 548 |   margin-left: -1rem;
 549 |   margin-right: -1rem;
 550 |   -webkit-box-orient: vertical;
 551 |   -webkit-box-direction: normal;
 552 |       -ms-flex-direction: column;
 553 |           flex-direction: column; }
 554 |   @media (min-width: 480px) {
 555 |     [grid] {
 556 |       -webkit-box-orient: horizontal;
 557 |       -webkit-box-direction: normal;
 558 |           -ms-flex-direction: row;
 559 |               flex-direction: row; } }
 560 | 
 561 | [column] {
 562 |   -webkit-box-flex: 1;
 563 |       -ms-flex: 1;
 564 |           flex: 1;
 565 |   padding-left: 1rem;
 566 |   padding-right: 1rem; }
 567 | 
 568 | [grid~="no-gutters"] {
 569 |   margin-left: 0;
 570 |   margin-right: 0; }
 571 |   [grid~="no-gutters"] [column] {
 572 |     padding-left: 0;
 573 |     padding-right: 0; }
 574 | 
 575 | [grid~="no-collapse"] {
 576 |   -webkit-box-orient: horizontal;
 577 |   -webkit-box-direction: normal;
 578 |       -ms-flex-flow: row nowrap;
 579 |           flex-flow: row nowrap; }
 580 | 
 581 | [grid~="wrap"] {
 582 |   -ms-flex-wrap: wrap;
 583 |       flex-wrap: wrap; }
 584 | 
 585 | [grid~="no-wrap"] {
 586 |   -ms-flex-wrap: nowrap;
 587 |       flex-wrap: nowrap; }
 588 | 
 589 | [grid~="wrap-reverse"] {
 590 |   -ms-flex-wrap: wrap-reverse;
 591 |       flex-wrap: wrap-reverse; }
 592 | 
 593 | [grid~="row"] {
 594 |   -webkit-box-orient: horizontal;
 595 |   -webkit-box-direction: normal;
 596 |       -ms-flex-direction: row;
 597 |           flex-direction: row; }
 598 | 
 599 | [grid~="row-reverse"] {
 600 |   -webkit-box-orient: horizontal;
 601 |   -webkit-box-direction: reverse;
 602 |       -ms-flex-direction: row-reverse;
 603 |           flex-direction: row-reverse; }
 604 | 
 605 | [grid~="column"] {
 606 |   -webkit-box-orient: vertical;
 607 |   -webkit-box-direction: normal;
 608 |       -ms-flex-direction: column;
 609 |           flex-direction: column; }
 610 | 
 611 | [grid~="column-reverse"] {
 612 |   -webkit-box-orient: vertical;
 613 |   -webkit-box-direction: reverse;
 614 |       -ms-flex-direction: column-reverse;
 615 |           flex-direction: column-reverse; }
 616 | 
 617 | [grid~="justify-start"] {
 618 |   -webkit-box-pack: start;
 619 |       -ms-flex-pack: start;
 620 |           justify-content: flex-start; }
 621 | 
 622 | [grid~="justify-end"] {
 623 |   -webkit-box-pack: end;
 624 |       -ms-flex-pack: end;
 625 |           justify-content: flex-end; }
 626 | 
 627 | [grid~="justify-center"] {
 628 |   -webkit-box-pack: center;
 629 |       -ms-flex-pack: center;
 630 |           justify-content: center; }
 631 | 
 632 | [grid~="justify-between"] {
 633 |   -webkit-box-pack: justify;
 634 |       -ms-flex-pack: justify;
 635 |           justify-content: space-between; }
 636 | 
 637 | [grid~="justify-around"] {
 638 |   -ms-flex-pack: distribute;
 639 |       justify-content: space-around; }
 640 | 
 641 | [grid~="top"] {
 642 |   -webkit-box-align: start;
 643 |       -ms-flex-align: start;
 644 |           align-items: flex-start; }
 645 | 
 646 | [grid~="center"] {
 647 |   -webkit-box-align: center;
 648 |       -ms-flex-align: center;
 649 |           align-items: center; }
 650 | 
 651 | [grid~="bottom"] {
 652 |   -webkit-box-align: end;
 653 |       -ms-flex-align: end;
 654 |           align-items: flex-end; }
 655 | 
 656 | [grid~="baseline"] {
 657 |   -webkit-box-align: baseline;
 658 |       -ms-flex-align: baseline;
 659 |           align-items: baseline; }
 660 | 
 661 | [grid~="stretch"] {
 662 |   -webkit-box-align: stretch;
 663 |       -ms-flex-align: stretch;
 664 |           align-items: stretch; }
 665 | 
 666 | [column~="top"] {
 667 |   -ms-flex-item-align: start;
 668 |       align-self: flex-start; }
 669 | 
 670 | [column~="center"] {
 671 |   -ms-flex-item-align: center;
 672 |       -ms-grid-row-align: center;
 673 |       align-self: center; }
 674 | 
 675 | [column~="bottom"] {
 676 |   -ms-flex-item-align: end;
 677 |       align-self: flex-end; }
 678 | 
 679 | @media (min-width: 480px) {
 680 |   [column~="1"] {
 681 |     -webkit-box-flex: 0;
 682 |         -ms-flex: 0 1 8.33333%;
 683 |             flex: 0 1 8.33333%;
 684 |     max-width: 8.33333%; }
 685 |   [column~="2"] {
 686 |     -webkit-box-flex: 0;
 687 |         -ms-flex: 0 1 16.66667%;
 688 |             flex: 0 1 16.66667%;
 689 |     max-width: 16.66667%; }
 690 |   [column~="3"] {
 691 |     -webkit-box-flex: 0;
 692 |         -ms-flex: 0 1 25%;
 693 |             flex: 0 1 25%;
 694 |     max-width: 25%; }
 695 |   [column~="4"] {
 696 |     -webkit-box-flex: 0;
 697 |         -ms-flex: 0 1 33.33333%;
 698 |             flex: 0 1 33.33333%;
 699 |     max-width: 33.33333%; }
 700 |   [column~="5"] {
 701 |     -webkit-box-flex: 0;
 702 |         -ms-flex: 0 1 41.66667%;
 703 |             flex: 0 1 41.66667%;
 704 |     max-width: 41.66667%; }
 705 |   [column~="6"] {
 706 |     -webkit-box-flex: 0;
 707 |         -ms-flex: 0 1 50%;
 708 |             flex: 0 1 50%;
 709 |     max-width: 50%; }
 710 |   [column~="7"] {
 711 |     -webkit-box-flex: 0;
 712 |         -ms-flex: 0 1 58.33333%;
 713 |             flex: 0 1 58.33333%;
 714 |     max-width: 58.33333%; }
 715 |   [column~="8"] {
 716 |     -webkit-box-flex: 0;
 717 |         -ms-flex: 0 1 66.66667%;
 718 |             flex: 0 1 66.66667%;
 719 |     max-width: 66.66667%; }
 720 |   [column~="9"] {
 721 |     -webkit-box-flex: 0;
 722 |         -ms-flex: 0 1 75%;
 723 |             flex: 0 1 75%;
 724 |     max-width: 75%; }
 725 |   [column~="10"] {
 726 |     -webkit-box-flex: 0;
 727 |         -ms-flex: 0 1 83.33333%;
 728 |             flex: 0 1 83.33333%;
 729 |     max-width: 83.33333%; }
 730 |   [column~="11"] {
 731 |     -webkit-box-flex: 0;
 732 |         -ms-flex: 0 1 91.66667%;
 733 |             flex: 0 1 91.66667%;
 734 |     max-width: 91.66667%; }
 735 |   [column~="12"] {
 736 |     -webkit-box-flex: 0;
 737 |         -ms-flex: 0 1 100%;
 738 |             flex: 0 1 100%;
 739 |     max-width: 100%; }
 740 |   [column~="+1"] {
 741 |     margin-left: 8.33333%; }
 742 |   [column~="+2"] {
 743 |     margin-left: 16.66667%; }
 744 |   [column~="+3"] {
 745 |     margin-left: 25%; }
 746 |   [column~="+4"] {
 747 |     margin-left: 33.33333%; }
 748 |   [column~="+5"] {
 749 |     margin-left: 41.66667%; }
 750 |   [column~="+6"] {
 751 |     margin-left: 50%; }
 752 |   [column~="+7"] {
 753 |     margin-left: 58.33333%; }
 754 |   [column~="+8"] {
 755 |     margin-left: 66.66667%; }
 756 |   [column~="+9"] {
 757 |     margin-left: 75%; }
 758 |   [column~="+10"] {
 759 |     margin-left: 83.33333%; }
 760 |   [column~="+11"] {
 761 |     margin-left: 91.66667%; }
 762 |   [column~="+12"] {
 763 |     margin-left: 100%; } }
 764 | 
 765 | @media (max-width: 479px) {
 766 |   [column~="xs-1"] {
 767 |     -webkit-box-flex: 0;
 768 |         -ms-flex: 0 1 8.33333%;
 769 |             flex: 0 1 8.33333%;
 770 |     max-width: 8.33333%; }
 771 |   [column~="xs-2"] {
 772 |     -webkit-box-flex: 0;
 773 |         -ms-flex: 0 1 16.66667%;
 774 |             flex: 0 1 16.66667%;
 775 |     max-width: 16.66667%; }
 776 |   [column~="xs-3"] {
 777 |     -webkit-box-flex: 0;
 778 |         -ms-flex: 0 1 25%;
 779 |             flex: 0 1 25%;
 780 |     max-width: 25%; }
 781 |   [column~="xs-4"] {
 782 |     -webkit-box-flex: 0;
 783 |         -ms-flex: 0 1 33.33333%;
 784 |             flex: 0 1 33.33333%;
 785 |     max-width: 33.33333%; }
 786 |   [column~="xs-5"] {
 787 |     -webkit-box-flex: 0;
 788 |         -ms-flex: 0 1 41.66667%;
 789 |             flex: 0 1 41.66667%;
 790 |     max-width: 41.66667%; }
 791 |   [column~="xs-6"] {
 792 |     -webkit-box-flex: 0;
 793 |         -ms-flex: 0 1 50%;
 794 |             flex: 0 1 50%;
 795 |     max-width: 50%; }
 796 |   [column~="xs-7"] {
 797 |     -webkit-box-flex: 0;
 798 |         -ms-flex: 0 1 58.33333%;
 799 |             flex: 0 1 58.33333%;
 800 |     max-width: 58.33333%; }
 801 |   [column~="xs-8"] {
 802 |     -webkit-box-flex: 0;
 803 |         -ms-flex: 0 1 66.66667%;
 804 |             flex: 0 1 66.66667%;
 805 |     max-width: 66.66667%; }
 806 |   [column~="xs-9"] {
 807 |     -webkit-box-flex: 0;
 808 |         -ms-flex: 0 1 75%;
 809 |             flex: 0 1 75%;
 810 |     max-width: 75%; }
 811 |   [column~="xs-10"] {
 812 |     -webkit-box-flex: 0;
 813 |         -ms-flex: 0 1 83.33333%;
 814 |             flex: 0 1 83.33333%;
 815 |     max-width: 83.33333%; }
 816 |   [column~="xs-11"] {
 817 |     -webkit-box-flex: 0;
 818 |         -ms-flex: 0 1 91.66667%;
 819 |             flex: 0 1 91.66667%;
 820 |     max-width: 91.66667%; }
 821 |   [column~="xs-12"] {
 822 |     -webkit-box-flex: 0;
 823 |         -ms-flex: 0 1 100%;
 824 |             flex: 0 1 100%;
 825 |     max-width: 100%; }
 826 |   [column~="+xs-1"] {
 827 |     margin-left: 8.33333%; }
 828 |   [column~="+xs-2"] {
 829 |     margin-left: 16.66667%; }
 830 |   [column~="+xs-3"] {
 831 |     margin-left: 25%; }
 832 |   [column~="+xs-4"] {
 833 |     margin-left: 33.33333%; }
 834 |   [column~="+xs-5"] {
 835 |     margin-left: 41.66667%; }
 836 |   [column~="+xs-6"] {
 837 |     margin-left: 50%; }
 838 |   [column~="+xs-7"] {
 839 |     margin-left: 58.33333%; }
 840 |   [column~="+xs-8"] {
 841 |     margin-left: 66.66667%; }
 842 |   [column~="+xs-9"] {
 843 |     margin-left: 75%; }
 844 |   [column~="+xs-10"] {
 845 |     margin-left: 83.33333%; }
 846 |   [column~="+xs-11"] {
 847 |     margin-left: 91.66667%; }
 848 |   [column~="+xs-12"] {
 849 |     margin-left: 100%; } }
 850 | 
 851 | @media (min-width: 480px) {
 852 |   [column~="s-1"] {
 853 |     -webkit-box-flex: 0;
 854 |         -ms-flex: 0 1 8.33333%;
 855 |             flex: 0 1 8.33333%;
 856 |     max-width: 8.33333%; }
 857 |   [column~="s-2"] {
 858 |     -webkit-box-flex: 0;
 859 |         -ms-flex: 0 1 16.66667%;
 860 |             flex: 0 1 16.66667%;
 861 |     max-width: 16.66667%; }
 862 |   [column~="s-3"] {
 863 |     -webkit-box-flex: 0;
 864 |         -ms-flex: 0 1 25%;
 865 |             flex: 0 1 25%;
 866 |     max-width: 25%; }
 867 |   [column~="s-4"] {
 868 |     -webkit-box-flex: 0;
 869 |         -ms-flex: 0 1 33.33333%;
 870 |             flex: 0 1 33.33333%;
 871 |     max-width: 33.33333%; }
 872 |   [column~="s-5"] {
 873 |     -webkit-box-flex: 0;
 874 |         -ms-flex: 0 1 41.66667%;
 875 |             flex: 0 1 41.66667%;
 876 |     max-width: 41.66667%; }
 877 |   [column~="s-6"] {
 878 |     -webkit-box-flex: 0;
 879 |         -ms-flex: 0 1 50%;
 880 |             flex: 0 1 50%;
 881 |     max-width: 50%; }
 882 |   [column~="s-7"] {
 883 |     -webkit-box-flex: 0;
 884 |         -ms-flex: 0 1 58.33333%;
 885 |             flex: 0 1 58.33333%;
 886 |     max-width: 58.33333%; }
 887 |   [column~="s-8"] {
 888 |     -webkit-box-flex: 0;
 889 |         -ms-flex: 0 1 66.66667%;
 890 |             flex: 0 1 66.66667%;
 891 |     max-width: 66.66667%; }
 892 |   [column~="s-9"] {
 893 |     -webkit-box-flex: 0;
 894 |         -ms-flex: 0 1 75%;
 895 |             flex: 0 1 75%;
 896 |     max-width: 75%; }
 897 |   [column~="s-10"] {
 898 |     -webkit-box-flex: 0;
 899 |         -ms-flex: 0 1 83.33333%;
 900 |             flex: 0 1 83.33333%;
 901 |     max-width: 83.33333%; }
 902 |   [column~="s-11"] {
 903 |     -webkit-box-flex: 0;
 904 |         -ms-flex: 0 1 91.66667%;
 905 |             flex: 0 1 91.66667%;
 906 |     max-width: 91.66667%; }
 907 |   [column~="s-12"] {
 908 |     -webkit-box-flex: 0;
 909 |         -ms-flex: 0 1 100%;
 910 |             flex: 0 1 100%;
 911 |     max-width: 100%; }
 912 |   [column~="+s-1"] {
 913 |     margin-left: 8.33333%; }
 914 |   [column~="+s-2"] {
 915 |     margin-left: 16.66667%; }
 916 |   [column~="+s-3"] {
 917 |     margin-left: 25%; }
 918 |   [column~="+s-4"] {
 919 |     margin-left: 33.33333%; }
 920 |   [column~="+s-5"] {
 921 |     margin-left: 41.66667%; }
 922 |   [column~="+s-6"] {
 923 |     margin-left: 50%; }
 924 |   [column~="+s-7"] {
 925 |     margin-left: 58.33333%; }
 926 |   [column~="+s-8"] {
 927 |     margin-left: 66.66667%; }
 928 |   [column~="+s-9"] {
 929 |     margin-left: 75%; }
 930 |   [column~="+s-10"] {
 931 |     margin-left: 83.33333%; }
 932 |   [column~="+s-11"] {
 933 |     margin-left: 91.66667%; }
 934 |   [column~="+s-12"] {
 935 |     margin-left: 100%; } }
 936 | 
 937 | @media (min-width: 768px) {
 938 |   [column~="m-1"] {
 939 |     -webkit-box-flex: 0;
 940 |         -ms-flex: 0 1 8.33333%;
 941 |             flex: 0 1 8.33333%;
 942 |     max-width: 8.33333%; }
 943 |   [column~="m-2"] {
 944 |     -webkit-box-flex: 0;
 945 |         -ms-flex: 0 1 16.66667%;
 946 |             flex: 0 1 16.66667%;
 947 |     max-width: 16.66667%; }
 948 |   [column~="m-3"] {
 949 |     -webkit-box-flex: 0;
 950 |         -ms-flex: 0 1 25%;
 951 |             flex: 0 1 25%;
 952 |     max-width: 25%; }
 953 |   [column~="m-4"] {
 954 |     -webkit-box-flex: 0;
 955 |         -ms-flex: 0 1 33.33333%;
 956 |             flex: 0 1 33.33333%;
 957 |     max-width: 33.33333%; }
 958 |   [column~="m-5"] {
 959 |     -webkit-box-flex: 0;
 960 |         -ms-flex: 0 1 41.66667%;
 961 |             flex: 0 1 41.66667%;
 962 |     max-width: 41.66667%; }
 963 |   [column~="m-6"] {
 964 |     -webkit-box-flex: 0;
 965 |         -ms-flex: 0 1 50%;
 966 |             flex: 0 1 50%;
 967 |     max-width: 50%; }
 968 |   [column~="m-7"] {
 969 |     -webkit-box-flex: 0;
 970 |         -ms-flex: 0 1 58.33333%;
 971 |             flex: 0 1 58.33333%;
 972 |     max-width: 58.33333%; }
 973 |   [column~="m-8"] {
 974 |     -webkit-box-flex: 0;
 975 |         -ms-flex: 0 1 66.66667%;
 976 |             flex: 0 1 66.66667%;
 977 |     max-width: 66.66667%; }
 978 |   [column~="m-9"] {
 979 |     -webkit-box-flex: 0;
 980 |         -ms-flex: 0 1 75%;
 981 |             flex: 0 1 75%;
 982 |     max-width: 75%; }
 983 |   [column~="m-10"] {
 984 |     -webkit-box-flex: 0;
 985 |         -ms-flex: 0 1 83.33333%;
 986 |             flex: 0 1 83.33333%;
 987 |     max-width: 83.33333%; }
 988 |   [column~="m-11"] {
 989 |     -webkit-box-flex: 0;
 990 |         -ms-flex: 0 1 91.66667%;
 991 |             flex: 0 1 91.66667%;
 992 |     max-width: 91.66667%; }
 993 |   [column~="m-12"] {
 994 |     -webkit-box-flex: 0;
 995 |         -ms-flex: 0 1 100%;
 996 |             flex: 0 1 100%;
 997 |     max-width: 100%; }
 998 |   [column~="+m-1"] {
 999 |     margin-left: 8.33333%; }
1000 |   [column~="+m-2"] {
1001 |     margin-left: 16.66667%; }
1002 |   [column~="+m-3"] {
1003 |     margin-left: 25%; }
1004 |   [column~="+m-4"] {
1005 |     margin-left: 33.33333%; }
1006 |   [column~="+m-5"] {
1007 |     margin-left: 41.66667%; }
1008 |   [column~="+m-6"] {
1009 |     margin-left: 50%; }
1010 |   [column~="+m-7"] {
1011 |     margin-left: 58.33333%; }
1012 |   [column~="+m-8"] {
1013 |     margin-left: 66.66667%; }
1014 |   [column~="+m-9"] {
1015 |     margin-left: 75%; }
1016 |   [column~="+m-10"] {
1017 |     margin-left: 83.33333%; }
1018 |   [column~="+m-11"] {
1019 |     margin-left: 91.66667%; }
1020 |   [column~="+m-12"] {
1021 |     margin-left: 100%; } }
1022 | 
1023 | @media (min-width: 960px) {
1024 |   [column~="l-1"] {
1025 |     -webkit-box-flex: 0;
1026 |         -ms-flex: 0 1 8.33333%;
1027 |             flex: 0 1 8.33333%;
1028 |     max-width: 8.33333%; }
1029 |   [column~="l-2"] {
1030 |     -webkit-box-flex: 0;
1031 |         -ms-flex: 0 1 16.66667%;
1032 |             flex: 0 1 16.66667%;
1033 |     max-width: 16.66667%; }
1034 |   [column~="l-3"] {
1035 |     -webkit-box-flex: 0;
1036 |         -ms-flex: 0 1 25%;
1037 |             flex: 0 1 25%;
1038 |     max-width: 25%; }
1039 |   [column~="l-4"] {
1040 |     -webkit-box-flex: 0;
1041 |         -ms-flex: 0 1 33.33333%;
1042 |             flex: 0 1 33.33333%;
1043 |     max-width: 33.33333%; }
1044 |   [column~="l-5"] {
1045 |     -webkit-box-flex: 0;
1046 |         -ms-flex: 0 1 41.66667%;
1047 |             flex: 0 1 41.66667%;
1048 |     max-width: 41.66667%; }
1049 |   [column~="l-6"] {
1050 |     -webkit-box-flex: 0;
1051 |         -ms-flex: 0 1 50%;
1052 |             flex: 0 1 50%;
1053 |     max-width: 50%; }
1054 |   [column~="l-7"] {
1055 |     -webkit-box-flex: 0;
1056 |         -ms-flex: 0 1 58.33333%;
1057 |             flex: 0 1 58.33333%;
1058 |     max-width: 58.33333%; }
1059 |   [column~="l-8"] {
1060 |     -webkit-box-flex: 0;
1061 |         -ms-flex: 0 1 66.66667%;
1062 |             flex: 0 1 66.66667%;
1063 |     max-width: 66.66667%; }
1064 |   [column~="l-9"] {
1065 |     -webkit-box-flex: 0;
1066 |         -ms-flex: 0 1 75%;
1067 |             flex: 0 1 75%;
1068 |     max-width: 75%; }
1069 |   [column~="l-10"] {
1070 |     -webkit-box-flex: 0;
1071 |         -ms-flex: 0 1 83.33333%;
1072 |             flex: 0 1 83.33333%;
1073 |     max-width: 83.33333%; }
1074 |   [column~="l-11"] {
1075 |     -webkit-box-flex: 0;
1076 |         -ms-flex: 0 1 91.66667%;
1077 |             flex: 0 1 91.66667%;
1078 |     max-width: 91.66667%; }
1079 |   [column~="l-12"] {
1080 |     -webkit-box-flex: 0;
1081 |         -ms-flex: 0 1 100%;
1082 |             flex: 0 1 100%;
1083 |     max-width: 100%; }
1084 |   [column~="+l-1"] {
1085 |     margin-left: 8.33333%; }
1086 |   [column~="+l-2"] {
1087 |     margin-left: 16.66667%; }
1088 |   [column~="+l-3"] {
1089 |     margin-left: 25%; }
1090 |   [column~="+l-4"] {
1091 |     margin-left: 33.33333%; }
1092 |   [column~="+l-5"] {
1093 |     margin-left: 41.66667%; }
1094 |   [column~="+l-6"] {
1095 |     margin-left: 50%; }
1096 |   [column~="+l-7"] {
1097 |     margin-left: 58.33333%; }
1098 |   [column~="+l-8"] {
1099 |     margin-left: 66.66667%; }
1100 |   [column~="+l-9"] {
1101 |     margin-left: 75%; }
1102 |   [column~="+l-10"] {
1103 |     margin-left: 83.33333%; }
1104 |   [column~="+l-11"] {
1105 |     margin-left: 91.66667%; }
1106 |   [column~="+l-12"] {
1107 |     margin-left: 100%; } }
1108 | 
1109 | @media (min-width: 1100px) {
1110 |   [column~="xl-1"] {
1111 |     -webkit-box-flex: 0;
1112 |         -ms-flex: 0 1 8.33333%;
1113 |             flex: 0 1 8.33333%;
1114 |     max-width: 8.33333%; }
1115 |   [column~="xl-2"] {
1116 |     -webkit-box-flex: 0;
1117 |         -ms-flex: 0 1 16.66667%;
1118 |             flex: 0 1 16.66667%;
1119 |     max-width: 16.66667%; }
1120 |   [column~="xl-3"] {
1121 |     -webkit-box-flex: 0;
1122 |         -ms-flex: 0 1 25%;
1123 |             flex: 0 1 25%;
1124 |     max-width: 25%; }
1125 |   [column~="xl-4"] {
1126 |     -webkit-box-flex: 0;
1127 |         -ms-flex: 0 1 33.33333%;
1128 |             flex: 0 1 33.33333%;
1129 |     max-width: 33.33333%; }
1130 |   [column~="xl-5"] {
1131 |     -webkit-box-flex: 0;
1132 |         -ms-flex: 0 1 41.66667%;
1133 |             flex: 0 1 41.66667%;
1134 |     max-width: 41.66667%; }
1135 |   [column~="xl-6"] {
1136 |     -webkit-box-flex: 0;
1137 |         -ms-flex: 0 1 50%;
1138 |             flex: 0 1 50%;
1139 |     max-width: 50%; }
1140 |   [column~="xl-7"] {
1141 |     -webkit-box-flex: 0;
1142 |         -ms-flex: 0 1 58.33333%;
1143 |             flex: 0 1 58.33333%;
1144 |     max-width: 58.33333%; }
1145 |   [column~="xl-8"] {
1146 |     -webkit-box-flex: 0;
1147 |         -ms-flex: 0 1 66.66667%;
1148 |             flex: 0 1 66.66667%;
1149 |     max-width: 66.66667%; }
1150 |   [column~="xl-9"] {
1151 |     -webkit-box-flex: 0;
1152 |         -ms-flex: 0 1 75%;
1153 |             flex: 0 1 75%;
1154 |     max-width: 75%; }
1155 |   [column~="xl-10"] {
1156 |     -webkit-box-flex: 0;
1157 |         -ms-flex: 0 1 83.33333%;
1158 |             flex: 0 1 83.33333%;
1159 |     max-width: 83.33333%; }
1160 |   [column~="xl-11"] {
1161 |     -webkit-box-flex: 0;
1162 |         -ms-flex: 0 1 91.66667%;
1163 |             flex: 0 1 91.66667%;
1164 |     max-width: 91.66667%; }
1165 |   [column~="xl-12"] {
1166 |     -webkit-box-flex: 0;
1167 |         -ms-flex: 0 1 100%;
1168 |             flex: 0 1 100%;
1169 |     max-width: 100%; }
1170 |   [column~="+xl-1"] {
1171 |     margin-left: 8.33333%; }
1172 |   [column~="+xl-2"] {
1173 |     margin-left: 16.66667%; }
1174 |   [column~="+xl-3"] {
1175 |     margin-left: 25%; }
1176 |   [column~="+xl-4"] {
1177 |     margin-left: 33.33333%; }
1178 |   [column~="+xl-5"] {
1179 |     margin-left: 41.66667%; }
1180 |   [column~="+xl-6"] {
1181 |     margin-left: 50%; }
1182 |   [column~="+xl-7"] {
1183 |     margin-left: 58.33333%; }
1184 |   [column~="+xl-8"] {
1185 |     margin-left: 66.66667%; }
1186 |   [column~="+xl-9"] {
1187 |     margin-left: 75%; }
1188 |   [column~="+xl-10"] {
1189 |     margin-left: 83.33333%; }
1190 |   [column~="+xl-11"] {
1191 |     margin-left: 91.66667%; }
1192 |   [column~="+xl-12"] {
1193 |     margin-left: 100%; } }
1194 | 
1195 | @media print {
1196 |   @page {
1197 |     margin: 2cm; }
1198 |   *,
1199 |   *:before,
1200 |   *:after {
1201 |     background: transparent !important;
1202 |     color: black !important;
1203 |     -webkit-filter: none !important;
1204 |             filter: none !important;
1205 |     text-shadow: none !important; }
1206 |   :root {
1207 |     background-color: white;
1208 |     color: black;
1209 |     font: 12pt/1.4 "Georgia", "Times New Roman", "Times", serif; }
1210 |   body {
1211 |     width: 100% !important;
1212 |     margin: 0 !important;
1213 |     padding: 0 !important; }
1214 |   h1, h2, h3, h4, h5, h6 {
1215 |     page-break-after: avoid;
1216 |     font-family: "Georgia", "Times New Roman", "Times", serif; }
1217 |   h1 {
1218 |     font-size: 19pt; }
1219 |   h2 {
1220 |     font-size: 17pt; }
1221 |   h3 {
1222 |     font-size: 15pt; }
1223 |   h4, h5, h6 {
1224 |     font-size: 14pt; }
1225 |   img {
1226 |     max-width: 100% !important;
1227 |     page-break-after: avoid;
1228 |     page-break-inside: avoid; }
1229 |   video,
1230 |   audio,
1231 |   object,
1232 |   embed,
1233 |   nav,
1234 |   footer,
1235 |   a[href^="#"]:after {
1236 |     display: none;
1237 |     visibility: hidden; }
1238 |   p,
1239 |   h2, h3 {
1240 |     orphans: 3;
1241 |     widows: 3; }
1242 |   a,
1243 |   a:visited {
1244 |     color: black;
1245 |     font-size: .57em;
1246 |     text-decoration: underline;
1247 |     word-wrap: break-word; }
1248 |     a[href]:after,
1249 |     a:visited[href]:after {
1250 |       content: " (" attr(href) ")";
1251 |       font-size: smaller; }
1252 |   q:after {
1253 |     content: " (Source: " attr(cite) ")"; }
1254 |   abbr[title]:after {
1255 |     content: " (" attr(title) ")"; }
1256 |   a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
1257 |     content: ""; }
1258 |   pre,
1259 |   code {
1260 |     background-color: transparent;
1261 |     border: 1px solid #DCDCDC;
1262 |     page-break-inside: avoid; }
1263 |   blockquote {
1264 |     border: none;
1265 |     page-break-inside: avoid; }
1266 |   thead {
1267 |     display: table-header-group; }
1268 |   tr,
1269 |   img {
1270 |     page-break-inside: avoid; }
1271 |   ol {
1272 |     padding-left: 1.25em; }
1273 |   ul {
1274 |     padding-left: 0;
1275 |     list-style: none; }
1276 |     ul ul,
1277 |     ul ul ul {
1278 |       padding-left: 1.5em; }
1279 |   ul li,
1280 |   ol li {
1281 |     content: "&raquo; "; } }
1282 | 


--------------------------------------------------------------------------------
/docs/css/src/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }
428 | 


--------------------------------------------------------------------------------
/docs/css/styles.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
   3 | /**
   4 |  * 1. Set default font family to sans-serif.
   5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
   6 |  *    user zoom.
   7 |  */
   8 | html {
   9 |   font-family: sans-serif;
  10 |   /* 1 */
  11 |   -ms-text-size-adjust: 100%;
  12 |   /* 2 */
  13 |   -webkit-text-size-adjust: 100%;
  14 |   /* 2 */ }
  15 | 
  16 | /**
  17 |  * Remove default margin.
  18 |  */
  19 | body {
  20 |   margin: 0; }
  21 | 
  22 | /* HTML5 display definitions
  23 |    ========================================================================== */
  24 | /**
  25 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
  26 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
  27 |  * and Firefox.
  28 |  * Correct `block` display not defined for `main` in IE 11.
  29 |  */
  30 | article,
  31 | aside,
  32 | details,
  33 | figcaption,
  34 | figure,
  35 | footer,
  36 | header,
  37 | hgroup,
  38 | main,
  39 | menu,
  40 | nav,
  41 | section,
  42 | summary {
  43 |   display: block; }
  44 | 
  45 | /**
  46 |  * 1. Correct `inline-block` display not defined in IE 8/9.
  47 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  48 |  */
  49 | audio,
  50 | canvas,
  51 | progress,
  52 | video {
  53 |   display: inline-block;
  54 |   /* 1 */
  55 |   vertical-align: baseline;
  56 |   /* 2 */ }
  57 | 
  58 | /**
  59 |  * Prevent modern browsers from displaying `audio` without controls.
  60 |  * Remove excess height in iOS 5 devices.
  61 |  */
  62 | audio:not([controls]) {
  63 |   display: none;
  64 |   height: 0; }
  65 | 
  66 | /**
  67 |  * Address `[hidden]` styling not present in IE 8/9/10.
  68 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
  69 |  */
  70 | [hidden],
  71 | template {
  72 |   display: none; }
  73 | 
  74 | /* Links
  75 |    ========================================================================== */
  76 | /**
  77 |  * Remove the gray background color from active links in IE 10.
  78 |  */
  79 | a {
  80 |   background-color: transparent; }
  81 | 
  82 | /**
  83 |  * Improve readability when focused and also mouse hovered in all browsers.
  84 |  */
  85 | a:active,
  86 | a:hover {
  87 |   outline: 0; }
  88 | 
  89 | /* Text-level semantics
  90 |    ========================================================================== */
  91 | /**
  92 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  93 |  */
  94 | abbr[title] {
  95 |   border-bottom: 1px dotted; }
  96 | 
  97 | /**
  98 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  99 |  */
 100 | b,
 101 | strong {
 102 |   font-weight: bold; }
 103 | 
 104 | /**
 105 |  * Address styling not present in Safari and Chrome.
 106 |  */
 107 | dfn {
 108 |   font-style: italic; }
 109 | 
 110 | /**
 111 |  * Address variable `h1` font-size and margin within `section` and `article`
 112 |  * contexts in Firefox 4+, Safari, and Chrome.
 113 |  */
 114 | h1 {
 115 |   font-size: 2em;
 116 |   margin: 0.67em 0; }
 117 | 
 118 | /**
 119 |  * Address styling not present in IE 8/9.
 120 |  */
 121 | mark {
 122 |   background: #ff0;
 123 |   color: #000; }
 124 | 
 125 | /**
 126 |  * Address inconsistent and variable font size in all browsers.
 127 |  */
 128 | small {
 129 |   font-size: 80%; }
 130 | 
 131 | /**
 132 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 133 |  */
 134 | sub,
 135 | sup {
 136 |   font-size: 75%;
 137 |   line-height: 0;
 138 |   position: relative;
 139 |   vertical-align: baseline; }
 140 | 
 141 | sup {
 142 |   top: -0.5em; }
 143 | 
 144 | sub {
 145 |   bottom: -0.25em; }
 146 | 
 147 | /* Embedded content
 148 |    ========================================================================== */
 149 | /**
 150 |  * Remove border when inside `a` element in IE 8/9/10.
 151 |  */
 152 | img {
 153 |   border: 0; }
 154 | 
 155 | /**
 156 |  * Correct overflow not hidden in IE 9/10/11.
 157 |  */
 158 | svg:not(:root) {
 159 |   overflow: hidden; }
 160 | 
 161 | /* Grouping content
 162 |    ========================================================================== */
 163 | /**
 164 |  * Address margin not present in IE 8/9 and Safari.
 165 |  */
 166 | figure {
 167 |   margin: 1em 40px; }
 168 | 
 169 | /**
 170 |  * Address differences between Firefox and other browsers.
 171 |  */
 172 | hr {
 173 |   box-sizing: content-box;
 174 |   height: 0; }
 175 | 
 176 | /**
 177 |  * Contain overflow in all browsers.
 178 |  */
 179 | pre {
 180 |   overflow: auto; }
 181 | 
 182 | /**
 183 |  * Address odd `em`-unit font size rendering in all browsers.
 184 |  */
 185 | code,
 186 | kbd,
 187 | pre,
 188 | samp {
 189 |   font-family: monospace, monospace;
 190 |   font-size: 1em; }
 191 | 
 192 | /* Forms
 193 |    ========================================================================== */
 194 | /**
 195 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
 196 |  * styling of `select`, unless a `border` property is set.
 197 |  */
 198 | /**
 199 |  * 1. Correct color not being inherited.
 200 |  *    Known issue: affects color of disabled elements.
 201 |  * 2. Correct font properties not being inherited.
 202 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 203 |  */
 204 | button,
 205 | input,
 206 | optgroup,
 207 | select,
 208 | textarea {
 209 |   color: inherit;
 210 |   /* 1 */
 211 |   font: inherit;
 212 |   /* 2 */
 213 |   margin: 0;
 214 |   /* 3 */ }
 215 | 
 216 | /**
 217 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
 218 |  */
 219 | button {
 220 |   overflow: visible; }
 221 | 
 222 | /**
 223 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
 224 |  * All other form control elements do not inherit `text-transform` values.
 225 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 226 |  * Correct `select` style inheritance in Firefox.
 227 |  */
 228 | button,
 229 | select {
 230 |   text-transform: none; }
 231 | 
 232 | /**
 233 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 234 |  *    and `video` controls.
 235 |  * 2. Correct inability to style clickable `input` types in iOS.
 236 |  * 3. Improve usability and consistency of cursor style between image-type
 237 |  *    `input` and others.
 238 |  */
 239 | button,
 240 | html input[type="button"],
 241 | input[type="reset"],
 242 | input[type="submit"] {
 243 |   -webkit-appearance: button;
 244 |   /* 2 */
 245 |   cursor: pointer;
 246 |   /* 3 */ }
 247 | 
 248 | /**
 249 |  * Re-set default cursor for disabled elements.
 250 |  */
 251 | button[disabled],
 252 | html input[disabled] {
 253 |   cursor: default; }
 254 | 
 255 | /**
 256 |  * Remove inner padding and border in Firefox 4+.
 257 |  */
 258 | button::-moz-focus-inner,
 259 | input::-moz-focus-inner {
 260 |   border: 0;
 261 |   padding: 0; }
 262 | 
 263 | /**
 264 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 265 |  * the UA stylesheet.
 266 |  */
 267 | input {
 268 |   line-height: normal; }
 269 | 
 270 | /**
 271 |  * It's recommended that you don't attempt to style these elements.
 272 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
 273 |  *
 274 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
 275 |  * 2. Remove excess padding in IE 8/9/10.
 276 |  */
 277 | input[type="checkbox"],
 278 | input[type="radio"] {
 279 |   box-sizing: border-box;
 280 |   /* 1 */
 281 |   padding: 0;
 282 |   /* 2 */ }
 283 | 
 284 | /**
 285 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 286 |  * `font-size` values of the `input`, it causes the cursor style of the
 287 |  * decrement button to change from `default` to `text`.
 288 |  */
 289 | input[type="number"]::-webkit-inner-spin-button,
 290 | input[type="number"]::-webkit-outer-spin-button {
 291 |   height: auto; }
 292 | 
 293 | /**
 294 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 295 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 296 |  *    (include `-moz` to future-proof).
 297 |  */
 298 | input[type="search"] {
 299 |   -webkit-appearance: textfield;
 300 |   /* 1 */
 301 |   /* 2 */
 302 |   box-sizing: content-box; }
 303 | 
 304 | /**
 305 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 306 |  * Safari (but not Chrome) clips the cancel button when the search input has
 307 |  * padding (and `textfield` appearance).
 308 |  */
 309 | input[type="search"]::-webkit-search-cancel-button,
 310 | input[type="search"]::-webkit-search-decoration {
 311 |   -webkit-appearance: none; }
 312 | 
 313 | /**
 314 |  * Define consistent border, margin, and padding.
 315 |  */
 316 | fieldset {
 317 |   border: 1px solid #c0c0c0;
 318 |   margin: 0 2px;
 319 |   padding: 0.35em 0.625em 0.75em; }
 320 | 
 321 | /**
 322 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
 323 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 324 |  */
 325 | legend {
 326 |   border: 0;
 327 |   /* 1 */
 328 |   padding: 0;
 329 |   /* 2 */ }
 330 | 
 331 | /**
 332 |  * Remove default vertical scrollbar in IE 8/9/10/11.
 333 |  */
 334 | textarea {
 335 |   overflow: auto; }
 336 | 
 337 | /**
 338 |  * Don't inherit the `font-weight` (applied by a rule above).
 339 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 340 |  */
 341 | optgroup {
 342 |   font-weight: bold; }
 343 | 
 344 | /* Tables
 345 |    ========================================================================== */
 346 | /**
 347 |  * Remove most spacing between table cells.
 348 |  */
 349 | table {
 350 |   border-collapse: collapse;
 351 |   border-spacing: 0; }
 352 | 
 353 | td,
 354 | th {
 355 |   padding: 0; }
 356 | 
 357 | /**
 358 |  * ConciseCSS v4.1.2
 359 |  * https://github.com/ConciseCSS/concise.css
 360 |  *
 361 |  * Copyright 2016 James Kolce, Keenan Payne and ConciseCSS Contributors
 362 |  * Released under the MIT license
 363 |  * http://opensource.org/licenses/MIT
 364 |  */
 365 | @font-face {
 366 |   src: url("./font/Quicksand-Regular.otf");
 367 |   font-family: 'Quicksand'; }
 368 | 
 369 | article, aside, details,
 370 | figcaption, figure, footer, header, main,
 371 | menu,
 372 | nav,
 373 | section,
 374 | summary {
 375 |   display: block; }
 376 | 
 377 | audio,
 378 | canvas,
 379 | progress,
 380 | video {
 381 |   display: inline-block; }
 382 | 
 383 | audio:not([controls]) {
 384 |   display: none;
 385 |   height: 0; }
 386 | 
 387 | template,
 388 | [hidden] {
 389 |   display: none; }
 390 | 
 391 | *,
 392 | ::after,
 393 | ::before {
 394 |   background-repeat: no-repeat;
 395 |   box-sizing: inherit; }
 396 | 
 397 | ::after,
 398 | ::before {
 399 |   text-decoration: inherit;
 400 |   vertical-align: inherit; }
 401 | 
 402 | :root {
 403 |   box-sizing: border-box;
 404 |   font-family: "Quicksand", "Arial", sans-serif;
 405 |   line-height: 1.5;
 406 |   background-color: white;
 407 |   color: #444;
 408 |   -webkit-font-smoothing: antialiased;
 409 |   font-size: 16px; }
 410 | 
 411 | @media (min-width: 480px) {
 412 |   :root {
 413 |     font-size: 18px; } }
 414 | 
 415 | code,
 416 | kbd,
 417 | pre,
 418 | samp {
 419 |   font-family: "Consolas", monospace;
 420 |   font-size: 0.83333rem;
 421 |   background-color: #f5f5f5; }
 422 | 
 423 | code,
 424 | kbd {
 425 |   vertical-align: middle;
 426 |   display: inline-block;
 427 |   padding: 0 .4em; }
 428 | 
 429 | pre {
 430 |   padding: 0.75rem 1em; }
 431 | 
 432 | pre > code {
 433 |   white-space: pre; }
 434 | 
 435 | kbd {
 436 |   background-color: transparent;
 437 |   outline: 1px solid #DCDCDC; }
 438 | 
 439 | hr {
 440 |   background-color: #DCDCDC;
 441 |   height: 1px;
 442 |   overflow: visible;
 443 |   border: 0; }
 444 | 
 445 | nav ol,
 446 | nav ul {
 447 |   padding-left: 0; }
 448 | 
 449 | nav li {
 450 |   list-style: none; }
 451 | 
 452 | dt {
 453 |   font-weight: bold; }
 454 | 
 455 | blockquote {
 456 |   padding: 0 1em; }
 457 | 
 458 | blockquote cite,
 459 | blockquote footer {
 460 |   color: #777;
 461 |   font-size: 83.33333%;
 462 |   margin-top: 0.75rem; }
 463 | 
 464 | blockquote cite:before,
 465 | blockquote footer:before {
 466 |   content: "— "; }
 467 | 
 468 | abbr {
 469 |   -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
 470 |   font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
 471 |   text-transform: uppercase; }
 472 | 
 473 | abbr[title] {
 474 |   border-bottom: 1px solid #DCDCDC;
 475 |   cursor: help;
 476 |   text-decoration: none; }
 477 | 
 478 | b,
 479 | strong {
 480 |   font-weight: inherit; }
 481 | 
 482 | b,
 483 | strong {
 484 |   font-weight: bolder; }
 485 | 
 486 | dfn {
 487 |   font-style: italic; }
 488 | 
 489 | mark {
 490 |   background-color: #ffff00;
 491 |   color: #000000; }
 492 | 
 493 | progress {
 494 |   vertical-align: baseline; }
 495 | 
 496 | small {
 497 |   font-size: 83.33333%; }
 498 | 
 499 | sub,
 500 | sup {
 501 |   line-height: 0;
 502 |   position: relative;
 503 |   vertical-align: baseline;
 504 |   font-size: 83.33333%; }
 505 | 
 506 | sub {
 507 |   bottom: -0.25em;
 508 |   -webkit-font-feature-settings: "subs" 1;
 509 |   font-feature-settings: "subs" 1; }
 510 | 
 511 | sup {
 512 |   top: -0.25em;
 513 |   -webkit-font-feature-settings: "sups" 1;
 514 |   font-feature-settings: "sups" 1; }
 515 | 
 516 | ::-moz-selection {
 517 |   background-color: #EBE1D3;
 518 |   text-shadow: none; }
 519 | 
 520 | ::selection {
 521 |   background-color: #EBE1D3;
 522 |   text-shadow: none; }
 523 | 
 524 | audio,
 525 | canvas,
 526 | iframe,
 527 | img,
 528 | svg,
 529 | video {
 530 |   vertical-align: middle; }
 531 | 
 532 | img {
 533 |   border-style: none; }
 534 | 
 535 | svg {
 536 |   fill: currentColor; }
 537 | 
 538 | svg:not(:root) {
 539 |   overflow: hidden; }
 540 | 
 541 | a {
 542 |   background-color: transparent;
 543 |   -webkit-text-decoration-skip: objects;
 544 |   color: #C65146;
 545 |   text-decoration: none;
 546 |   -webkit-transition-duration: 150ms;
 547 |   transition-duration: 150ms; }
 548 | 
 549 | a:focus, a:hover {
 550 |   color: #7f2f27; }
 551 | 
 552 | a:hover {
 553 |   outline-width: 0; }
 554 | 
 555 | table {
 556 |   border-collapse: collapse;
 557 |   border-spacing: 0; }
 558 | 
 559 | input,
 560 | select,
 561 | textarea {
 562 |   background-color: transparent;
 563 |   border-style: none;
 564 |   color: inherit;
 565 |   font: inherit; }
 566 | 
 567 | input:focus,
 568 | select:focus,
 569 | textarea:focus {
 570 |   outline: 2px solid #2b90d9; }
 571 | 
 572 | button, input[type="submit"],
 573 | input {
 574 |   overflow: visible; }
 575 | 
 576 | button, input[type="submit"],
 577 | select {
 578 |   text-transform: none; }
 579 | 
 580 | button, input[type="submit"], html [type="button"],
 581 | [type="reset"],
 582 | [type="submit"] {
 583 |   -webkit-appearance: button;
 584 |   font: inherit; }
 585 | 
 586 | ::-moz-focus-inner {
 587 |   border-style: none;
 588 |   padding: 0; }
 589 | 
 590 | :-moz-focusring {
 591 |   outline: 1px dotted ButtonText; }
 592 | 
 593 | fieldset {
 594 |   border: 1px solid #DCDCDC;
 595 |   padding: 1.5rem 1em; }
 596 | 
 597 | legend {
 598 |   display: table;
 599 |   max-width: 100%;
 600 |   white-space: normal;
 601 |   padding: 0 .5em; }
 602 | 
 603 | textarea {
 604 |   overflow: auto;
 605 |   resize: vertical;
 606 |   height: auto;
 607 |   padding: 0.375rem .5em; }
 608 | 
 609 | [type="checkbox"],
 610 | [type="radio"] {
 611 |   padding: 0; }
 612 | 
 613 | ::-webkit-inner-spin-button,
 614 | ::-webkit-outer-spin-button {
 615 |   height: auto; }
 616 | 
 617 | [type="search"] {
 618 |   -webkit-appearance: textfield;
 619 |   outline-offset: -2px; }
 620 | 
 621 | ::-webkit-search-cancel-button,
 622 | ::-webkit-search-decoration {
 623 |   -webkit-appearance: none; }
 624 | 
 625 | ::-webkit-input-placeholder {
 626 |   color: inherit;
 627 |   opacity: .54; }
 628 | 
 629 | ::-webkit-file-upload-button {
 630 |   -webkit-appearance: button;
 631 |   /* 1 */
 632 |   font: inherit;
 633 |   /* 2 */ }
 634 | 
 635 | input[type="range"] {
 636 |   border: none;
 637 |   padding: 0;
 638 |   width: 100%;
 639 |   -webkit-appearance: none; }
 640 | 
 641 | input[type="range"]:focus {
 642 |   outline: none; }
 643 | 
 644 | input[type="range"]::-moz-range-track {
 645 |   background-color: #DCDCDC;
 646 |   border: none;
 647 |   height: 0.3rem; }
 648 | 
 649 | input[type="range"]::-ms-track {
 650 |   background-color: #DCDCDC;
 651 |   border: none;
 652 |   height: 0.3rem; }
 653 | 
 654 | input[type="range"]::-webkit-slider-runnable-track {
 655 |   background-color: #DCDCDC;
 656 |   border: none;
 657 |   height: 0.3rem; }
 658 | 
 659 | input[type="range"]::-moz-range-thumb {
 660 |   border: none;
 661 |   border-radius: 50%;
 662 |   background-color: #C65146;
 663 |   height: 0.75rem;
 664 |   margin-top: -0.225rem;
 665 |   width: 0.75rem; }
 666 | 
 667 | input[type="range"]::-ms-thumb {
 668 |   border: none;
 669 |   border-radius: 50%;
 670 |   background-color: #C65146;
 671 |   height: 0.75rem;
 672 |   margin-top: -0.225rem;
 673 |   width: 0.75rem; }
 674 | 
 675 | input[type="range"]::-webkit-slider-thumb {
 676 |   border: none;
 677 |   border-radius: 50%;
 678 |   background-color: #C65146;
 679 |   height: 0.75rem;
 680 |   margin-top: -0.225rem;
 681 |   width: 0.75rem; }
 682 | 
 683 | input[type="range"]::-webkit-slider-thumb {
 684 |   -webkit-appearance: none; }
 685 | 
 686 | [aria-busy="true"] {
 687 |   cursor: progress; }
 688 | 
 689 | [aria-controls] {
 690 |   cursor: pointer; }
 691 | 
 692 | [aria-disabled] {
 693 |   cursor: default; }
 694 | 
 695 | [tabindex],
 696 | a,
 697 | area,
 698 | button,
 699 | input[type="submit"],
 700 | input,
 701 | label,
 702 | select,
 703 | textarea {
 704 |   -ms-touch-action: manipulation;
 705 |   touch-action: manipulation; }
 706 | 
 707 | [hidden][aria-hidden="false"] {
 708 |   clip: rect(0, 0, 0, 0);
 709 |   display: inherit;
 710 |   position: absolute; }
 711 | 
 712 | [hidden][aria-hidden="false"]:focus {
 713 |   clip: auto; }
 714 | 
 715 | * {
 716 |   margin: 0; }
 717 | 
 718 | * + * {
 719 |   margin-top: 1.5rem; }
 720 | 
 721 | a,
 722 | body,
 723 | br [column],
 724 | code,
 725 | dd,
 726 | div,
 727 | input,
 728 | kbd,
 729 | label,
 730 | li,
 731 | option,
 732 | select,
 733 | span,
 734 | textarea {
 735 |   margin-top: 0; }
 736 | 
 737 | h1 + p,
 738 | h2 + p,
 739 | h3 + p,
 740 | h4 + p,
 741 | h5 + p,
 742 | h6 + p {
 743 |   margin-top: 0; }
 744 | 
 745 | h1 {
 746 |   font-size: 2.0736rem; }
 747 | 
 748 | h2 {
 749 |   font-size: 1.728rem; }
 750 | 
 751 | h3 {
 752 |   font-size: 1.44rem; }
 753 | 
 754 | h4 {
 755 |   font-size: 1.2rem; }
 756 | 
 757 | h5 {
 758 |   font-size: 1rem; }
 759 | 
 760 | h6 {
 761 |   font-size: 0.83333rem; }
 762 | 
 763 | h1, h2, h3, h4, h5, h6 {
 764 |   color: #222;
 765 |   font-family: "Quicksand", "Arial", sans-serif;
 766 |   line-height: 1.3; }
 767 | 
 768 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
 769 |   color: inherit;
 770 |   vertical-align: 0;
 771 |   font-size: 83.33333%; }
 772 | 
 773 | h1, h2, h3 {
 774 |   margin: 0.75rem 0 0.375rem; }
 775 | 
 776 | h1 a, h2 a, h3 a {
 777 |   color: inherit; }
 778 | 
 779 | h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus {
 780 |   color: #C65146;
 781 |   text-decoration: none; }
 782 | 
 783 | h4, h5, h6 {
 784 |   margin: 0.375rem 0; }
 785 | 
 786 | ul,
 787 | ol {
 788 |   padding-left: 1em; }
 789 | 
 790 | ul ol,
 791 | ul ul,
 792 | ol ol,
 793 | ol ul {
 794 |   padding-left: 1.5em; }
 795 | 
 796 | ol {
 797 |   padding-left: 0;
 798 |   counter-reset: item; }
 799 | 
 800 | ol li {
 801 |   list-style: none; }
 802 | 
 803 | ol li:before {
 804 |   content: counters(item, ".") ". ";
 805 |   counter-increment: item;
 806 |   margin-right: 0.2em; }
 807 | 
 808 | input:not([type="submit"]),
 809 | select,
 810 | textarea {
 811 |   width: 100%;
 812 |   font-size: 0.83333rem;
 813 |   min-height: 2.25rem; }
 814 | 
 815 | input:not([type="submit"])[disabled],
 816 | select[disabled],
 817 | textarea[disabled] {
 818 |   background-color: #eee;
 819 |   cursor: not-allowed;
 820 |   border: 0; }
 821 | 
 822 | input:not([type="submit"]):not([type="range"]),
 823 | select,
 824 | textarea {
 825 |   border: 1px solid #DCDCDC;
 826 |   padding: 0 0.75em; }
 827 | 
 828 | input[type="checkbox"],
 829 | input[type="file"],
 830 | input[type="image"],
 831 | input[type="radio"] {
 832 |   height: auto;
 833 |   width: auto; }
 834 | 
 835 | input[type="checkbox"],
 836 | input[type="radio"] {
 837 |   line-height: normal;
 838 |   padding: 0;
 839 |   vertical-align: middle; }
 840 | 
 841 | input[type="file"] {
 842 |   border: none;
 843 |   line-height: 1.5rem;
 844 |   padding: 0; }
 845 | 
 846 | select {
 847 |   background-color: transparent;
 848 |   padding-left: 0.5em;
 849 |   width: auto;
 850 |   min-width: 10em;
 851 |   height: 2.25rem; }
 852 | 
 853 | select[disabled] {
 854 |   color: #777; }
 855 | 
 856 | select[multiple] {
 857 |   height: auto;
 858 |   width: 100%;
 859 |   padding: 0; }
 860 | 
 861 | select::-ms-expand {
 862 |   display: none; }
 863 | 
 864 | select::-ms-value {
 865 |   color: currentColor; }
 866 | 
 867 | select option {
 868 |   padding: 0 0.75em; }
 869 | 
 870 | label {
 871 |   display: block;
 872 |   font-size: 0.83333rem;
 873 |   line-height: 2.25rem; }
 874 | 
 875 | input[type="checkbox"] + label,
 876 | input[type="radio"] + label {
 877 |   display: inline-block;
 878 |   margin-left: 0.5em; }
 879 | 
 880 | table {
 881 |   width: 100%; }
 882 | 
 883 | @media (min-width: 480px) {
 884 |   table {
 885 |     width: auto; } }
 886 | 
 887 | table thead,
 888 | table tfoot {
 889 |   background-color: #f5f5f5;
 890 |   text-align: left; }
 891 | 
 892 | table th,
 893 | table td {
 894 |   line-height: 2.25rem;
 895 |   overflow: visible;
 896 |   padding: 0 1em; }
 897 | 
 898 | table caption {
 899 |   font-size: 0.83333rem;
 900 |   font-style: italic;
 901 |   line-height: 3rem;
 902 |   text-align: center; }
 903 | 
 904 | [container] {
 905 |   margin-left: auto;
 906 |   margin-right: auto;
 907 |   max-width: 1200px;
 908 |   padding-left: 1rem;
 909 |   padding-right: 1rem;
 910 |   overflow: auto; }
 911 | 
 912 | @media (min-width: 480px) {
 913 |   [container~="solid"] {
 914 |     max-width: 480px; } }
 915 | 
 916 | @media (min-width: 768px) {
 917 |   [container~="solid"] {
 918 |     max-width: 768px; } }
 919 | 
 920 | @media (min-width: 960px) {
 921 |   [container~="solid"] {
 922 |     max-width: 960px; } }
 923 | 
 924 | @media (min-width: 1100px) {
 925 |   [container~="solid"] {
 926 |     max-width: 1200px; } }
 927 | 
 928 | [grid] {
 929 |   display: -webkit-box;
 930 |   display: -ms-flexbox;
 931 |   display: flex;
 932 |   margin-left: -1rem;
 933 |   margin-right: -1rem;
 934 |   -webkit-box-orient: vertical;
 935 |   -webkit-box-direction: normal;
 936 |   -ms-flex-direction: column;
 937 |   flex-direction: column; }
 938 | 
 939 | @media (min-width: 480px) {
 940 |   [grid] {
 941 |     -webkit-box-orient: horizontal;
 942 |     -webkit-box-direction: normal;
 943 |     -ms-flex-direction: row;
 944 |     flex-direction: row; } }
 945 | 
 946 | [column] {
 947 |   -webkit-box-flex: 1;
 948 |   -ms-flex: 1;
 949 |   flex: 1;
 950 |   padding-left: 1rem;
 951 |   padding-right: 1rem; }
 952 | 
 953 | [grid~="no-gutters"] {
 954 |   margin-left: 0;
 955 |   margin-right: 0; }
 956 | 
 957 | [grid~="no-gutters"] [column] {
 958 |   padding-left: 0;
 959 |   padding-right: 0; }
 960 | 
 961 | [grid~="no-collapse"] {
 962 |   -webkit-box-orient: horizontal;
 963 |   -webkit-box-direction: normal;
 964 |   -ms-flex-flow: row nowrap;
 965 |   flex-flow: row nowrap; }
 966 | 
 967 | [grid~="wrap"] {
 968 |   -ms-flex-wrap: wrap;
 969 |   flex-wrap: wrap; }
 970 | 
 971 | [grid~="no-wrap"] {
 972 |   -ms-flex-wrap: nowrap;
 973 |   flex-wrap: nowrap; }
 974 | 
 975 | [grid~="wrap-reverse"] {
 976 |   -ms-flex-wrap: wrap-reverse;
 977 |   flex-wrap: wrap-reverse; }
 978 | 
 979 | [grid~="row"] {
 980 |   -webkit-box-orient: horizontal;
 981 |   -webkit-box-direction: normal;
 982 |   -ms-flex-direction: row;
 983 |   flex-direction: row; }
 984 | 
 985 | [grid~="row-reverse"] {
 986 |   -webkit-box-orient: horizontal;
 987 |   -webkit-box-direction: reverse;
 988 |   -ms-flex-direction: row-reverse;
 989 |   flex-direction: row-reverse; }
 990 | 
 991 | [grid~="column"] {
 992 |   -webkit-box-orient: vertical;
 993 |   -webkit-box-direction: normal;
 994 |   -ms-flex-direction: column;
 995 |   flex-direction: column; }
 996 | 
 997 | [grid~="column-reverse"] {
 998 |   -webkit-box-orient: vertical;
 999 |   -webkit-box-direction: reverse;
1000 |   -ms-flex-direction: column-reverse;
1001 |   flex-direction: column-reverse; }
1002 | 
1003 | [grid~="justify-start"] {
1004 |   -webkit-box-pack: start;
1005 |   -ms-flex-pack: start;
1006 |   justify-content: flex-start; }
1007 | 
1008 | [grid~="justify-end"] {
1009 |   -webkit-box-pack: end;
1010 |   -ms-flex-pack: end;
1011 |   justify-content: flex-end; }
1012 | 
1013 | [grid~="justify-center"] {
1014 |   -webkit-box-pack: center;
1015 |   -ms-flex-pack: center;
1016 |   justify-content: center; }
1017 | 
1018 | [grid~="justify-between"] {
1019 |   -webkit-box-pack: justify;
1020 |   -ms-flex-pack: justify;
1021 |   justify-content: space-between; }
1022 | 
1023 | [grid~="justify-around"] {
1024 |   -ms-flex-pack: distribute;
1025 |   justify-content: space-around; }
1026 | 
1027 | [grid~="top"] {
1028 |   -webkit-box-align: start;
1029 |   -ms-flex-align: start;
1030 |   align-items: flex-start; }
1031 | 
1032 | [grid~="center"] {
1033 |   -webkit-box-align: center;
1034 |   -ms-flex-align: center;
1035 |   align-items: center; }
1036 | 
1037 | [grid~="bottom"] {
1038 |   -webkit-box-align: end;
1039 |   -ms-flex-align: end;
1040 |   align-items: flex-end; }
1041 | 
1042 | [grid~="baseline"] {
1043 |   -webkit-box-align: baseline;
1044 |   -ms-flex-align: baseline;
1045 |   align-items: baseline; }
1046 | 
1047 | [grid~="stretch"] {
1048 |   -webkit-box-align: stretch;
1049 |   -ms-flex-align: stretch;
1050 |   align-items: stretch; }
1051 | 
1052 | [column~="top"] {
1053 |   -ms-flex-item-align: start;
1054 |   align-self: flex-start; }
1055 | 
1056 | [column~="center"] {
1057 |   -ms-flex-item-align: center;
1058 |   -ms-grid-row-align: center;
1059 |   align-self: center; }
1060 | 
1061 | [column~="bottom"] {
1062 |   -ms-flex-item-align: end;
1063 |   align-self: flex-end; }
1064 | 
1065 | @media (min-width: 480px) {
1066 |   [column~="1"] {
1067 |     -webkit-box-flex: 0;
1068 |     -ms-flex: 0 1 8.33333%;
1069 |     flex: 0 1 8.33333%;
1070 |     max-width: 8.33333%; }
1071 |   [column~="2"] {
1072 |     -webkit-box-flex: 0;
1073 |     -ms-flex: 0 1 16.66667%;
1074 |     flex: 0 1 16.66667%;
1075 |     max-width: 16.66667%; }
1076 |   [column~="3"] {
1077 |     -webkit-box-flex: 0;
1078 |     -ms-flex: 0 1 25%;
1079 |     flex: 0 1 25%;
1080 |     max-width: 25%; }
1081 |   [column~="4"] {
1082 |     -webkit-box-flex: 0;
1083 |     -ms-flex: 0 1 33.33333%;
1084 |     flex: 0 1 33.33333%;
1085 |     max-width: 33.33333%; }
1086 |   [column~="5"] {
1087 |     -webkit-box-flex: 0;
1088 |     -ms-flex: 0 1 41.66667%;
1089 |     flex: 0 1 41.66667%;
1090 |     max-width: 41.66667%; }
1091 |   [column~="6"] {
1092 |     -webkit-box-flex: 0;
1093 |     -ms-flex: 0 1 50%;
1094 |     flex: 0 1 50%;
1095 |     max-width: 50%; }
1096 |   [column~="7"] {
1097 |     -webkit-box-flex: 0;
1098 |     -ms-flex: 0 1 58.33333%;
1099 |     flex: 0 1 58.33333%;
1100 |     max-width: 58.33333%; }
1101 |   [column~="8"] {
1102 |     -webkit-box-flex: 0;
1103 |     -ms-flex: 0 1 66.66667%;
1104 |     flex: 0 1 66.66667%;
1105 |     max-width: 66.66667%; }
1106 |   [column~="9"] {
1107 |     -webkit-box-flex: 0;
1108 |     -ms-flex: 0 1 75%;
1109 |     flex: 0 1 75%;
1110 |     max-width: 75%; }
1111 |   [column~="10"] {
1112 |     -webkit-box-flex: 0;
1113 |     -ms-flex: 0 1 83.33333%;
1114 |     flex: 0 1 83.33333%;
1115 |     max-width: 83.33333%; }
1116 |   [column~="11"] {
1117 |     -webkit-box-flex: 0;
1118 |     -ms-flex: 0 1 91.66667%;
1119 |     flex: 0 1 91.66667%;
1120 |     max-width: 91.66667%; }
1121 |   [column~="12"] {
1122 |     -webkit-box-flex: 0;
1123 |     -ms-flex: 0 1 100%;
1124 |     flex: 0 1 100%;
1125 |     max-width: 100%; }
1126 |   [column~="+1"] {
1127 |     margin-left: 8.33333%; }
1128 |   [column~="+2"] {
1129 |     margin-left: 16.66667%; }
1130 |   [column~="+3"] {
1131 |     margin-left: 25%; }
1132 |   [column~="+4"] {
1133 |     margin-left: 33.33333%; }
1134 |   [column~="+5"] {
1135 |     margin-left: 41.66667%; }
1136 |   [column~="+6"] {
1137 |     margin-left: 50%; }
1138 |   [column~="+7"] {
1139 |     margin-left: 58.33333%; }
1140 |   [column~="+8"] {
1141 |     margin-left: 66.66667%; }
1142 |   [column~="+9"] {
1143 |     margin-left: 75%; }
1144 |   [column~="+10"] {
1145 |     margin-left: 83.33333%; }
1146 |   [column~="+11"] {
1147 |     margin-left: 91.66667%; }
1148 |   [column~="+12"] {
1149 |     margin-left: 100%; } }
1150 | 
1151 | @media (max-width: 479px) {
1152 |   [column~="xs-1"] {
1153 |     -webkit-box-flex: 0;
1154 |     -ms-flex: 0 1 8.33333%;
1155 |     flex: 0 1 8.33333%;
1156 |     max-width: 8.33333%; }
1157 |   [column~="xs-2"] {
1158 |     -webkit-box-flex: 0;
1159 |     -ms-flex: 0 1 16.66667%;
1160 |     flex: 0 1 16.66667%;
1161 |     max-width: 16.66667%; }
1162 |   [column~="xs-3"] {
1163 |     -webkit-box-flex: 0;
1164 |     -ms-flex: 0 1 25%;
1165 |     flex: 0 1 25%;
1166 |     max-width: 25%; }
1167 |   [column~="xs-4"] {
1168 |     -webkit-box-flex: 0;
1169 |     -ms-flex: 0 1 33.33333%;
1170 |     flex: 0 1 33.33333%;
1171 |     max-width: 33.33333%; }
1172 |   [column~="xs-5"] {
1173 |     -webkit-box-flex: 0;
1174 |     -ms-flex: 0 1 41.66667%;
1175 |     flex: 0 1 41.66667%;
1176 |     max-width: 41.66667%; }
1177 |   [column~="xs-6"] {
1178 |     -webkit-box-flex: 0;
1179 |     -ms-flex: 0 1 50%;
1180 |     flex: 0 1 50%;
1181 |     max-width: 50%; }
1182 |   [column~="xs-7"] {
1183 |     -webkit-box-flex: 0;
1184 |     -ms-flex: 0 1 58.33333%;
1185 |     flex: 0 1 58.33333%;
1186 |     max-width: 58.33333%; }
1187 |   [column~="xs-8"] {
1188 |     -webkit-box-flex: 0;
1189 |     -ms-flex: 0 1 66.66667%;
1190 |     flex: 0 1 66.66667%;
1191 |     max-width: 66.66667%; }
1192 |   [column~="xs-9"] {
1193 |     -webkit-box-flex: 0;
1194 |     -ms-flex: 0 1 75%;
1195 |     flex: 0 1 75%;
1196 |     max-width: 75%; }
1197 |   [column~="xs-10"] {
1198 |     -webkit-box-flex: 0;
1199 |     -ms-flex: 0 1 83.33333%;
1200 |     flex: 0 1 83.33333%;
1201 |     max-width: 83.33333%; }
1202 |   [column~="xs-11"] {
1203 |     -webkit-box-flex: 0;
1204 |     -ms-flex: 0 1 91.66667%;
1205 |     flex: 0 1 91.66667%;
1206 |     max-width: 91.66667%; }
1207 |   [column~="xs-12"] {
1208 |     -webkit-box-flex: 0;
1209 |     -ms-flex: 0 1 100%;
1210 |     flex: 0 1 100%;
1211 |     max-width: 100%; }
1212 |   [column~="+xs-1"] {
1213 |     margin-left: 8.33333%; }
1214 |   [column~="+xs-2"] {
1215 |     margin-left: 16.66667%; }
1216 |   [column~="+xs-3"] {
1217 |     margin-left: 25%; }
1218 |   [column~="+xs-4"] {
1219 |     margin-left: 33.33333%; }
1220 |   [column~="+xs-5"] {
1221 |     margin-left: 41.66667%; }
1222 |   [column~="+xs-6"] {
1223 |     margin-left: 50%; }
1224 |   [column~="+xs-7"] {
1225 |     margin-left: 58.33333%; }
1226 |   [column~="+xs-8"] {
1227 |     margin-left: 66.66667%; }
1228 |   [column~="+xs-9"] {
1229 |     margin-left: 75%; }
1230 |   [column~="+xs-10"] {
1231 |     margin-left: 83.33333%; }
1232 |   [column~="+xs-11"] {
1233 |     margin-left: 91.66667%; }
1234 |   [column~="+xs-12"] {
1235 |     margin-left: 100%; } }
1236 | 
1237 | @media (min-width: 480px) {
1238 |   [column~="s-1"] {
1239 |     -webkit-box-flex: 0;
1240 |     -ms-flex: 0 1 8.33333%;
1241 |     flex: 0 1 8.33333%;
1242 |     max-width: 8.33333%; }
1243 |   [column~="s-2"] {
1244 |     -webkit-box-flex: 0;
1245 |     -ms-flex: 0 1 16.66667%;
1246 |     flex: 0 1 16.66667%;
1247 |     max-width: 16.66667%; }
1248 |   [column~="s-3"] {
1249 |     -webkit-box-flex: 0;
1250 |     -ms-flex: 0 1 25%;
1251 |     flex: 0 1 25%;
1252 |     max-width: 25%; }
1253 |   [column~="s-4"] {
1254 |     -webkit-box-flex: 0;
1255 |     -ms-flex: 0 1 33.33333%;
1256 |     flex: 0 1 33.33333%;
1257 |     max-width: 33.33333%; }
1258 |   [column~="s-5"] {
1259 |     -webkit-box-flex: 0;
1260 |     -ms-flex: 0 1 41.66667%;
1261 |     flex: 0 1 41.66667%;
1262 |     max-width: 41.66667%; }
1263 |   [column~="s-6"] {
1264 |     -webkit-box-flex: 0;
1265 |     -ms-flex: 0 1 50%;
1266 |     flex: 0 1 50%;
1267 |     max-width: 50%; }
1268 |   [column~="s-7"] {
1269 |     -webkit-box-flex: 0;
1270 |     -ms-flex: 0 1 58.33333%;
1271 |     flex: 0 1 58.33333%;
1272 |     max-width: 58.33333%; }
1273 |   [column~="s-8"] {
1274 |     -webkit-box-flex: 0;
1275 |     -ms-flex: 0 1 66.66667%;
1276 |     flex: 0 1 66.66667%;
1277 |     max-width: 66.66667%; }
1278 |   [column~="s-9"] {
1279 |     -webkit-box-flex: 0;
1280 |     -ms-flex: 0 1 75%;
1281 |     flex: 0 1 75%;
1282 |     max-width: 75%; }
1283 |   [column~="s-10"] {
1284 |     -webkit-box-flex: 0;
1285 |     -ms-flex: 0 1 83.33333%;
1286 |     flex: 0 1 83.33333%;
1287 |     max-width: 83.33333%; }
1288 |   [column~="s-11"] {
1289 |     -webkit-box-flex: 0;
1290 |     -ms-flex: 0 1 91.66667%;
1291 |     flex: 0 1 91.66667%;
1292 |     max-width: 91.66667%; }
1293 |   [column~="s-12"] {
1294 |     -webkit-box-flex: 0;
1295 |     -ms-flex: 0 1 100%;
1296 |     flex: 0 1 100%;
1297 |     max-width: 100%; }
1298 |   [column~="+s-1"] {
1299 |     margin-left: 8.33333%; }
1300 |   [column~="+s-2"] {
1301 |     margin-left: 16.66667%; }
1302 |   [column~="+s-3"] {
1303 |     margin-left: 25%; }
1304 |   [column~="+s-4"] {
1305 |     margin-left: 33.33333%; }
1306 |   [column~="+s-5"] {
1307 |     margin-left: 41.66667%; }
1308 |   [column~="+s-6"] {
1309 |     margin-left: 50%; }
1310 |   [column~="+s-7"] {
1311 |     margin-left: 58.33333%; }
1312 |   [column~="+s-8"] {
1313 |     margin-left: 66.66667%; }
1314 |   [column~="+s-9"] {
1315 |     margin-left: 75%; }
1316 |   [column~="+s-10"] {
1317 |     margin-left: 83.33333%; }
1318 |   [column~="+s-11"] {
1319 |     margin-left: 91.66667%; }
1320 |   [column~="+s-12"] {
1321 |     margin-left: 100%; } }
1322 | 
1323 | @media (min-width: 768px) {
1324 |   [column~="m-1"] {
1325 |     -webkit-box-flex: 0;
1326 |     -ms-flex: 0 1 8.33333%;
1327 |     flex: 0 1 8.33333%;
1328 |     max-width: 8.33333%; }
1329 |   [column~="m-2"] {
1330 |     -webkit-box-flex: 0;
1331 |     -ms-flex: 0 1 16.66667%;
1332 |     flex: 0 1 16.66667%;
1333 |     max-width: 16.66667%; }
1334 |   [column~="m-3"] {
1335 |     -webkit-box-flex: 0;
1336 |     -ms-flex: 0 1 25%;
1337 |     flex: 0 1 25%;
1338 |     max-width: 25%; }
1339 |   [column~="m-4"] {
1340 |     -webkit-box-flex: 0;
1341 |     -ms-flex: 0 1 33.33333%;
1342 |     flex: 0 1 33.33333%;
1343 |     max-width: 33.33333%; }
1344 |   [column~="m-5"] {
1345 |     -webkit-box-flex: 0;
1346 |     -ms-flex: 0 1 41.66667%;
1347 |     flex: 0 1 41.66667%;
1348 |     max-width: 41.66667%; }
1349 |   [column~="m-6"] {
1350 |     -webkit-box-flex: 0;
1351 |     -ms-flex: 0 1 50%;
1352 |     flex: 0 1 50%;
1353 |     max-width: 50%; }
1354 |   [column~="m-7"] {
1355 |     -webkit-box-flex: 0;
1356 |     -ms-flex: 0 1 58.33333%;
1357 |     flex: 0 1 58.33333%;
1358 |     max-width: 58.33333%; }
1359 |   [column~="m-8"] {
1360 |     -webkit-box-flex: 0;
1361 |     -ms-flex: 0 1 66.66667%;
1362 |     flex: 0 1 66.66667%;
1363 |     max-width: 66.66667%; }
1364 |   [column~="m-9"] {
1365 |     -webkit-box-flex: 0;
1366 |     -ms-flex: 0 1 75%;
1367 |     flex: 0 1 75%;
1368 |     max-width: 75%; }
1369 |   [column~="m-10"] {
1370 |     -webkit-box-flex: 0;
1371 |     -ms-flex: 0 1 83.33333%;
1372 |     flex: 0 1 83.33333%;
1373 |     max-width: 83.33333%; }
1374 |   [column~="m-11"] {
1375 |     -webkit-box-flex: 0;
1376 |     -ms-flex: 0 1 91.66667%;
1377 |     flex: 0 1 91.66667%;
1378 |     max-width: 91.66667%; }
1379 |   [column~="m-12"] {
1380 |     -webkit-box-flex: 0;
1381 |     -ms-flex: 0 1 100%;
1382 |     flex: 0 1 100%;
1383 |     max-width: 100%; }
1384 |   [column~="+m-1"] {
1385 |     margin-left: 8.33333%; }
1386 |   [column~="+m-2"] {
1387 |     margin-left: 16.66667%; }
1388 |   [column~="+m-3"] {
1389 |     margin-left: 25%; }
1390 |   [column~="+m-4"] {
1391 |     margin-left: 33.33333%; }
1392 |   [column~="+m-5"] {
1393 |     margin-left: 41.66667%; }
1394 |   [column~="+m-6"] {
1395 |     margin-left: 50%; }
1396 |   [column~="+m-7"] {
1397 |     margin-left: 58.33333%; }
1398 |   [column~="+m-8"] {
1399 |     margin-left: 66.66667%; }
1400 |   [column~="+m-9"] {
1401 |     margin-left: 75%; }
1402 |   [column~="+m-10"] {
1403 |     margin-left: 83.33333%; }
1404 |   [column~="+m-11"] {
1405 |     margin-left: 91.66667%; }
1406 |   [column~="+m-12"] {
1407 |     margin-left: 100%; } }
1408 | 
1409 | @media (min-width: 960px) {
1410 |   [column~="l-1"] {
1411 |     -webkit-box-flex: 0;
1412 |     -ms-flex: 0 1 8.33333%;
1413 |     flex: 0 1 8.33333%;
1414 |     max-width: 8.33333%; }
1415 |   [column~="l-2"] {
1416 |     -webkit-box-flex: 0;
1417 |     -ms-flex: 0 1 16.66667%;
1418 |     flex: 0 1 16.66667%;
1419 |     max-width: 16.66667%; }
1420 |   [column~="l-3"] {
1421 |     -webkit-box-flex: 0;
1422 |     -ms-flex: 0 1 25%;
1423 |     flex: 0 1 25%;
1424 |     max-width: 25%; }
1425 |   [column~="l-4"] {
1426 |     -webkit-box-flex: 0;
1427 |     -ms-flex: 0 1 33.33333%;
1428 |     flex: 0 1 33.33333%;
1429 |     max-width: 33.33333%; }
1430 |   [column~="l-5"] {
1431 |     -webkit-box-flex: 0;
1432 |     -ms-flex: 0 1 41.66667%;
1433 |     flex: 0 1 41.66667%;
1434 |     max-width: 41.66667%; }
1435 |   [column~="l-6"] {
1436 |     -webkit-box-flex: 0;
1437 |     -ms-flex: 0 1 50%;
1438 |     flex: 0 1 50%;
1439 |     max-width: 50%; }
1440 |   [column~="l-7"] {
1441 |     -webkit-box-flex: 0;
1442 |     -ms-flex: 0 1 58.33333%;
1443 |     flex: 0 1 58.33333%;
1444 |     max-width: 58.33333%; }
1445 |   [column~="l-8"] {
1446 |     -webkit-box-flex: 0;
1447 |     -ms-flex: 0 1 66.66667%;
1448 |     flex: 0 1 66.66667%;
1449 |     max-width: 66.66667%; }
1450 |   [column~="l-9"] {
1451 |     -webkit-box-flex: 0;
1452 |     -ms-flex: 0 1 75%;
1453 |     flex: 0 1 75%;
1454 |     max-width: 75%; }
1455 |   [column~="l-10"] {
1456 |     -webkit-box-flex: 0;
1457 |     -ms-flex: 0 1 83.33333%;
1458 |     flex: 0 1 83.33333%;
1459 |     max-width: 83.33333%; }
1460 |   [column~="l-11"] {
1461 |     -webkit-box-flex: 0;
1462 |     -ms-flex: 0 1 91.66667%;
1463 |     flex: 0 1 91.66667%;
1464 |     max-width: 91.66667%; }
1465 |   [column~="l-12"] {
1466 |     -webkit-box-flex: 0;
1467 |     -ms-flex: 0 1 100%;
1468 |     flex: 0 1 100%;
1469 |     max-width: 100%; }
1470 |   [column~="+l-1"] {
1471 |     margin-left: 8.33333%; }
1472 |   [column~="+l-2"] {
1473 |     margin-left: 16.66667%; }
1474 |   [column~="+l-3"] {
1475 |     margin-left: 25%; }
1476 |   [column~="+l-4"] {
1477 |     margin-left: 33.33333%; }
1478 |   [column~="+l-5"] {
1479 |     margin-left: 41.66667%; }
1480 |   [column~="+l-6"] {
1481 |     margin-left: 50%; }
1482 |   [column~="+l-7"] {
1483 |     margin-left: 58.33333%; }
1484 |   [column~="+l-8"] {
1485 |     margin-left: 66.66667%; }
1486 |   [column~="+l-9"] {
1487 |     margin-left: 75%; }
1488 |   [column~="+l-10"] {
1489 |     margin-left: 83.33333%; }
1490 |   [column~="+l-11"] {
1491 |     margin-left: 91.66667%; }
1492 |   [column~="+l-12"] {
1493 |     margin-left: 100%; } }
1494 | 
1495 | @media (min-width: 1100px) {
1496 |   [column~="xl-1"] {
1497 |     -webkit-box-flex: 0;
1498 |     -ms-flex: 0 1 8.33333%;
1499 |     flex: 0 1 8.33333%;
1500 |     max-width: 8.33333%; }
1501 |   [column~="xl-2"] {
1502 |     -webkit-box-flex: 0;
1503 |     -ms-flex: 0 1 16.66667%;
1504 |     flex: 0 1 16.66667%;
1505 |     max-width: 16.66667%; }
1506 |   [column~="xl-3"] {
1507 |     -webkit-box-flex: 0;
1508 |     -ms-flex: 0 1 25%;
1509 |     flex: 0 1 25%;
1510 |     max-width: 25%; }
1511 |   [column~="xl-4"] {
1512 |     -webkit-box-flex: 0;
1513 |     -ms-flex: 0 1 33.33333%;
1514 |     flex: 0 1 33.33333%;
1515 |     max-width: 33.33333%; }
1516 |   [column~="xl-5"] {
1517 |     -webkit-box-flex: 0;
1518 |     -ms-flex: 0 1 41.66667%;
1519 |     flex: 0 1 41.66667%;
1520 |     max-width: 41.66667%; }
1521 |   [column~="xl-6"] {
1522 |     -webkit-box-flex: 0;
1523 |     -ms-flex: 0 1 50%;
1524 |     flex: 0 1 50%;
1525 |     max-width: 50%; }
1526 |   [column~="xl-7"] {
1527 |     -webkit-box-flex: 0;
1528 |     -ms-flex: 0 1 58.33333%;
1529 |     flex: 0 1 58.33333%;
1530 |     max-width: 58.33333%; }
1531 |   [column~="xl-8"] {
1532 |     -webkit-box-flex: 0;
1533 |     -ms-flex: 0 1 66.66667%;
1534 |     flex: 0 1 66.66667%;
1535 |     max-width: 66.66667%; }
1536 |   [column~="xl-9"] {
1537 |     -webkit-box-flex: 0;
1538 |     -ms-flex: 0 1 75%;
1539 |     flex: 0 1 75%;
1540 |     max-width: 75%; }
1541 |   [column~="xl-10"] {
1542 |     -webkit-box-flex: 0;
1543 |     -ms-flex: 0 1 83.33333%;
1544 |     flex: 0 1 83.33333%;
1545 |     max-width: 83.33333%; }
1546 |   [column~="xl-11"] {
1547 |     -webkit-box-flex: 0;
1548 |     -ms-flex: 0 1 91.66667%;
1549 |     flex: 0 1 91.66667%;
1550 |     max-width: 91.66667%; }
1551 |   [column~="xl-12"] {
1552 |     -webkit-box-flex: 0;
1553 |     -ms-flex: 0 1 100%;
1554 |     flex: 0 1 100%;
1555 |     max-width: 100%; }
1556 |   [column~="+xl-1"] {
1557 |     margin-left: 8.33333%; }
1558 |   [column~="+xl-2"] {
1559 |     margin-left: 16.66667%; }
1560 |   [column~="+xl-3"] {
1561 |     margin-left: 25%; }
1562 |   [column~="+xl-4"] {
1563 |     margin-left: 33.33333%; }
1564 |   [column~="+xl-5"] {
1565 |     margin-left: 41.66667%; }
1566 |   [column~="+xl-6"] {
1567 |     margin-left: 50%; }
1568 |   [column~="+xl-7"] {
1569 |     margin-left: 58.33333%; }
1570 |   [column~="+xl-8"] {
1571 |     margin-left: 66.66667%; }
1572 |   [column~="+xl-9"] {
1573 |     margin-left: 75%; }
1574 |   [column~="+xl-10"] {
1575 |     margin-left: 83.33333%; }
1576 |   [column~="+xl-11"] {
1577 |     margin-left: 91.66667%; }
1578 |   [column~="+xl-12"] {
1579 |     margin-left: 100%; } }
1580 | 
1581 | @media print {
1582 |   @page {
1583 |     margin: 2cm; }
1584 |   *,
1585 |   *:before,
1586 |   *:after {
1587 |     background: transparent !important;
1588 |     color: black !important;
1589 |     -webkit-filter: none !important;
1590 |     filter: none !important;
1591 |     text-shadow: none !important; }
1592 |   :root {
1593 |     background-color: white;
1594 |     color: black;
1595 |     font: 12pt/1.4 "Georgia", "Times New Roman", "Times", serif; }
1596 |   body {
1597 |     width: 100% !important;
1598 |     margin: 0 !important;
1599 |     padding: 0 !important; }
1600 |   h1, h2, h3, h4, h5, h6 {
1601 |     page-break-after: avoid;
1602 |     font-family: "Georgia", "Times New Roman", "Times", serif; }
1603 |   h1 {
1604 |     font-size: 19pt; }
1605 |   h2 {
1606 |     font-size: 17pt; }
1607 |   h3 {
1608 |     font-size: 15pt; }
1609 |   h4, h5, h6 {
1610 |     font-size: 14pt; }
1611 |   img {
1612 |     max-width: 100% !important;
1613 |     page-break-after: avoid;
1614 |     page-break-inside: avoid; }
1615 |   video,
1616 |   audio,
1617 |   object,
1618 |   embed,
1619 |   nav,
1620 |   footer,
1621 |   a[href^="#"]:after {
1622 |     display: none;
1623 |     visibility: hidden; }
1624 |   p,
1625 |   h2, h3 {
1626 |     orphans: 3;
1627 |     widows: 3; }
1628 |   a,
1629 |   a:visited {
1630 |     color: black;
1631 |     font-size: .57em;
1632 |     text-decoration: underline;
1633 |     word-wrap: break-word; }
1634 |   a[href]:after,
1635 |   a:visited[href]:after {
1636 |     content: " (" attr(href) ")";
1637 |     font-size: smaller; }
1638 |   q:after {
1639 |     content: " (Source: " attr(cite) ")"; }
1640 |   abbr[title]:after {
1641 |     content: " (" attr(title) ")"; }
1642 |   a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
1643 |     content: ""; }
1644 |   pre,
1645 |   code {
1646 |     background-color: transparent;
1647 |     border: 1px solid #DCDCDC;
1648 |     page-break-inside: avoid; }
1649 |   blockquote {
1650 |     border: none;
1651 |     page-break-inside: avoid; }
1652 |   thead {
1653 |     display: table-header-group; }
1654 |   tr,
1655 |   img {
1656 |     page-break-inside: avoid; }
1657 |   ol {
1658 |     padding-left: 1.25em; }
1659 |   ul {
1660 |     padding-left: 0;
1661 |     list-style: none; }
1662 |   ul ul,
1663 |   ul ul ul {
1664 |     padding-left: 1.5em; }
1665 |   ul li,
1666 |   ol li {
1667 |     content: "&raquo; "; } }
1668 | 
1669 | /* Copyright 2017 Joshua Bartlett */
1670 | /* Available under MIT License */
1671 | .cascade-container * {
1672 |   display: inline-block;
1673 |   white-space: pre; }
1674 | 
1675 | .cascade {
1676 |   -webkit-animation-fill-mode: both;
1677 |   animation-fill-mode: both;
1678 |   -webkit-animation-duration: 1s;
1679 |   animation-duration: 1s; }
1680 | 
1681 | @-webkit-keyframes fadeUp {
1682 |   from {
1683 |     opacity: 0;
1684 |     -webkit-transform: translate3d(0, 100%, 0);
1685 |     transform: translate3d(0, 100%, 0); }
1686 |   to {
1687 |     opacity: 1;
1688 |     -webkit-transform: none;
1689 |     transform: none; } }
1690 | 
1691 | @keyframes fadeUp {
1692 |   from {
1693 |     opacity: 0;
1694 |     -webkit-transform: translate3d(0, 100%, 0);
1695 |     transform: translate3d(0, 100%, 0); }
1696 |   to {
1697 |     opacity: 1;
1698 |     -webkit-transform: none;
1699 |     transform: none; } }
1700 | 
1701 | .fadeUp {
1702 |   -webkit-animation-name: fadeUp;
1703 |   animation-name: fadeUp; }
1704 | 
1705 | @-webkit-keyframes fadeDown {
1706 |   from {
1707 |     opacity: 0;
1708 |     -webkit-transform: translate3d(0, -100%, 0);
1709 |     transform: translate3d(0, -100%, 0); }
1710 |   to {
1711 |     opacity: 1;
1712 |     -webkit-transform: none;
1713 |     transform: none; } }
1714 | 
1715 | @keyframes fadeDown {
1716 |   from {
1717 |     opacity: 0;
1718 |     -webkit-transform: translate3d(0, -100%, 0);
1719 |     transform: translate3d(0, -100%, 0); }
1720 |   to {
1721 |     opacity: 1;
1722 |     -webkit-transform: none;
1723 |     transform: none; } }
1724 | 
1725 | .fadeDown {
1726 |   -webkit-animation-name: fadeDown;
1727 |   animation-name: fadeDown; }
1728 | 
1729 | @-webkit-keyframes doTheWave {
1730 |   to {
1731 |     -webkit-transform: translateY(100px);
1732 |     transform: translateY(100px); } }
1733 | 
1734 | @keyframes doTheWave {
1735 |   to {
1736 |     -webkit-transform: translateY(100px);
1737 |     transform: translateY(100px); } }
1738 | 
1739 | .doTheWave {
1740 |   -webkit-animation-name: doTheWave;
1741 |   animation-name: doTheWave;
1742 |   -webkit-animation-timing-function: ease-in-out;
1743 |   animation-timing-function: ease-in-out;
1744 |   -webkit-animation-direction: alternate;
1745 |   animation-direction: alternate;
1746 |   -webkit-animation-iteration-count: infinite;
1747 |   animation-iteration-count: infinite; }
1748 | 
1749 | .hljs-comment,
1750 | .hljs-quote {
1751 |   color: #7d7a68; }
1752 | 
1753 | /* Light Purple */
1754 | .hljs-attribute,
1755 | .hljs-link,
1756 | .hljs-name,
1757 | .hljs-name,
1758 | .hljs-regexp,
1759 | .hljs-selector-class,
1760 | .hljs-selector-id,
1761 | .hljs-tag,
1762 | .hljs-template-variable,
1763 | .hljs-variable {
1764 |   color: rgba(149, 18, 178, 0.7); }
1765 | 
1766 | /* Orange */
1767 | .hljs-built_in,
1768 | .hljs-builtin-name,
1769 | .hljs-literal,
1770 | .hljs-meta,
1771 | .hljs-number,
1772 | .hljs-params,
1773 | .hljs-type {
1774 |   color: #ff8b5c; }
1775 | 
1776 | /* Blue */
1777 | .hljs-bullet,
1778 | .hljs-string,
1779 | .hljs-symbol {
1780 |   color: #009999; }
1781 | 
1782 | /* Atelier-Dune Blue */
1783 | .hljs-section,
1784 | .hljs-title {
1785 |   color: #6684e1; }
1786 | 
1787 | /* Atelier-Dune Purple */
1788 | .hljs-keyword,
1789 | .hljs-selector-tag {
1790 |   color: #b854d4; }
1791 | 
1792 | .hljs {
1793 |   display: block;
1794 |   overflow-x: auto;
1795 |   background: #fefbec;
1796 |   color: #6e6b5e;
1797 |   padding: .5em; }
1798 | 
1799 | .hljs-emphasis {
1800 |   font-style: italic; }
1801 | 
1802 | .hljs-strong {
1803 |   font-weight: bold; }
1804 | 
1805 | #sidebar {
1806 |   padding-left: .375rem;
1807 |   padding-top: 1.5rem;
1808 |   background: rgba(149, 18, 178, 0.3);
1809 |   position: absolute;
1810 |   top: 0;
1811 |   left: 0;
1812 |   height: 100vh; }
1813 |   @media (max-width: 768px) {
1814 |     #sidebar {
1815 |       display: none; } }
1816 |   #sidebar h2 {
1817 |     color: white;
1818 |     margin: 0; }
1819 |   #sidebar ul {
1820 |     margin-top: 0;
1821 |     list-style: none;
1822 |     padding-left: 0; }
1823 |     #sidebar ul li {
1824 |       padding: 8px 0; }
1825 |       #sidebar ul li a {
1826 |         color: white; }
1827 |       #sidebar ul li ul {
1828 |         padding-left: 15px; }
1829 |         #sidebar ul li ul li {
1830 |           padding: 8px 0;
1831 |           font-size: 14px; }
1832 | 
1833 | [underline] {
1834 |   position: relative; }
1835 |   [underline]:hover::after {
1836 |     width: 100%;
1837 |     background: rgba(149, 18, 178, 0.4); }
1838 |   [underline]::after {
1839 |     content: '';
1840 |     position: absolute;
1841 |     left: 0;
1842 |     bottom: -2px;
1843 |     height: 2px;
1844 |     width: 0;
1845 |     background: rgba(149, 18, 178, 0.001);
1846 |     -webkit-transition: all .2s;
1847 |     transition: all .2s; }
1848 | 
1849 | .code-example {
1850 |   border: 2px solid rgba(149, 18, 178, 0.3);
1851 |   border-radius: 3px;
1852 |   padding: .75rem; }
1853 |   .code-example h1 {
1854 |     font-size: 1.6rem; }
1855 |     @media (min-width: 768px) {
1856 |       .code-example h1 {
1857 |         font-size: 2rem; } }
1858 | 
1859 | header {
1860 |   height: 100vh;
1861 |   background: -webkit-linear-gradient(left, #00ffff, #9512b2);
1862 |   background: linear-gradient(to right, #00ffff, #9512b2);
1863 |   margin-left: 0 !important;
1864 |   margin-right: 0 !important;
1865 |   position: relative; }
1866 |   header div {
1867 |     margin: auto;
1868 |     display: -webkit-box;
1869 |     display: -ms-flexbox;
1870 |     display: flex;
1871 |     -webkit-box-orient: vertical;
1872 |     -webkit-box-direction: normal;
1873 |         -ms-flex-direction: column;
1874 |             flex-direction: column; }
1875 |   header h1,
1876 |   header h3 {
1877 |     margin: auto;
1878 |     color: white;
1879 |     text-align: center; }
1880 |   header h1 {
1881 |     font-size: 3.1rem; }
1882 |     @media (min-width: 600px) {
1883 |       header h1 {
1884 |         font-size: 5rem; } }
1885 | 
1886 | a {
1887 |   color: #9512b2; }
1888 |   a:hover {
1889 |     color: #6e0d84; }
1890 | 
1891 | font.code {
1892 |   font-family: "Consolas", monospace; }
1893 | 
1894 | main {
1895 |   margin: 0 !important;
1896 |   position: relative;
1897 |   min-height: 100vh; }
1898 |   main article h1:first-of-type {
1899 |     margin: 0; }
1900 | 
1901 | button {
1902 |   margin-top: .375rem;
1903 |   padding: 6px 12px;
1904 |   border-radius: 3px;
1905 |   background: rgba(149, 18, 178, 0.3);
1906 |   border: 1px solid rgba(149, 18, 178, 0.4);
1907 |   color: white; }
1908 |   button:focus {
1909 |     outline: none; }
1910 | 


--------------------------------------------------------------------------------
/docs/css/styles.scss:
--------------------------------------------------------------------------------
 1 | $blue: #00ffff;
 2 | $purple: #9512b2;
 3 | $orange: #ff8b5c;
 4 | @import 'src/normalize';
 5 | @import 'src/concise';
 6 | @import 'src/cascade';
 7 | @import 'src/syntax';
 8 | @import 'src/sidebar';
 9 | @import 'src/code_example';
10 | 
11 | header {
12 |   height      : 100vh;
13 |   background  : linear-gradient(to right, $blue, $purple);
14 |   margin-left : 0 !important;
15 |   margin-right: 0 !important;
16 |   position    : relative;
17 | 
18 |   div {
19 |     margin        : auto;
20 |     display       : flex;
21 |     flex-direction: column;
22 |   }
23 | 
24 |   h1,
25 |   h3 {
26 |     margin    : auto;
27 |     color     : white;
28 |     text-align: center;
29 |   }
30 | 
31 |   h1 {
32 |     font-size: 3.1rem;
33 |     @media(min-width: 600px) {
34 |       font-size: 5rem;
35 |     }
36 |   }
37 | }
38 | 
39 | a {
40 |   color: $purple;
41 | 
42 |   &:hover {
43 |     color: darken($purple, 10);
44 |   }
45 | }
46 | 
47 | font.code {
48 |   font-family: "Consolas", monospace;
49 | }
50 | 
51 | main {
52 |   margin    : 0 !important;
53 |   position  : relative;
54 |   min-height: 100vh;
55 | 
56 |   article {
57 |     h1:first-of-type {
58 |       margin: 0;
59 |     }
60 |   }
61 | }
62 | 
63 | button {
64 |   margin-top   : .375rem;
65 |   padding      : 6px 12px;
66 |   border-radius: 3px;
67 |   background   : transparentize($purple, .7);
68 |   border       : 1px solid transparentize($purple, .6);
69 |   color        : white;
70 | 
71 |   &:focus {
72 |     outline: none;
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html class="no-js" lang="">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 |         <title>CascadeJS</title>
  7 |         <meta name="description" content="">
  8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  9 | 
 10 |         <link rel="stylesheet" href="css/styles.css">
 11 |         <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/atelier-dune-light.min.css">-->
 12 |         <script src="js/cascade.js"></script>
 13 | 
 14 |         <!--[if lt IE 9]>
 15 |             <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
 16 |         <![endif]-->
 17 |     </head>
 18 |     <body>
 19 |       <header grid>
 20 |         <div column="m-10 +m-1" grid="column">
 21 |           <div>
 22 |             <h1>CascadeJS</h1>
 23 |             <h3>Create cascading effects with ease.</h3>
 24 |           </div>
 25 |         </div>
 26 |         <script>
 27 |           var element = document.getElementsByTagName('h1')[0];
 28 |           new Cascade(element).flow({
 29 |             effect: 'fadeDown'
 30 |           });
 31 |         </script>
 32 |       </header>
 33 |       <main container grid>
 34 |         <aside id="sidebar" column="m-3">
 35 |           <h2>CascadeJS</h2>
 36 |           <ul>
 37 |             <li>
 38 |               <a href="#installation" underline>Installation</a>
 39 |               <ul>
 40 |                 <li>
 41 |                   <a href="#quick-start" underline>Quick Start</a>
 42 |                 </li>
 43 |               </ul>
 44 |             </li>
 45 |             <li>
 46 |               <a href="#usage" underline>Usage</a>
 47 |               <ul>
 48 |                 <li>
 49 |                   <a href="#flow-usage" underline>Usage of Flow()</a>
 50 |                 </li>
 51 |                 <li>
 52 |                   <a href="#fragment-usage" underline>Usage of Fragment()</a>
 53 |                 </li>
 54 |               </ul>
 55 |             </li>
 56 |             <li>
 57 |               <a href="#examples" underline>Examples</a>
 58 |             </li>
 59 |           </ul>
 60 |         </aside>
 61 |         <article column="m-9 +m-3">
 62 |           <section>
 63 |             <h1>Introduction</h1>
 64 |             <p>
 65 |               CascadeJS makes it simple to add cascading animations to individual letters or elements, using only vanilla javascript.
 66 |             </p>
 67 |           </section>
 68 |           <section id="installation">
 69 |             <h1>Installation</h1>
 70 |             <p>
 71 |               Installation is easy, you have three options:
 72 |             </p>
 73 |             <pre>
 74 | <code>npm install cascadejs</code>
 75 | <code>bower install cascadejs</code></pre>
 76 |             <p>
 77 |               or just <a href="https://github.com/bartboy011/CascadeJS" underline>download from GitHub</a>. Then:
 78 |             </p>
 79 | 
 80 | <pre><code class="html">&lt;link href='stylesheet' type='text/css' href='cascade.min.css' /&gt;
 81 | &lt;script type='text/javascript' src='cascade.min.js' /&gt;</code></pre>
 82 |             <h3 id="quick-start">Quick start</h3>
 83 |             <p>
 84 |               CascadeJS comes with default settings, so as long as you've included both the JS and CSS files, it will work right out of the box. Here's an example usage:
 85 |             </p>
 86 |             <aside grid style="margin-left: 0;margin-right: 0;">
 87 |               <div class="code-example" id="example-1" column="m-10 +m-1">
 88 |                 <script>
 89 |                   function exampleOne() {
 90 |                     var exampleOne = document.getElementById('example-1');
 91 |                     if (exampleOne.getElementsByTagName('h1').length > 0) {
 92 |                       for(var i = 0; i < exampleOne.getElementsByTagName('h1').length; i++) {
 93 |                         var thisHeader = exampleOne.getElementsByTagName('h1')[i];
 94 |                         thisHeader.parentNode.removeChild(thisHeader);
 95 |                       }
 96 |                     }
 97 |                     var button = exampleOne.getElementsByTagName('button')[0];
 98 |                     var header = document.createElement('h1');
 99 |                     var text = document.createTextNode('Ooooohhhh fancy.');
100 |                     header.appendChild(text);
101 |                     exampleOne.insertBefore(header, button);
102 |                     new Cascade(header).flow({
103 |                       effect: 'fadeDown'
104 |                     });
105 |                   }
106 | 
107 |                   exampleOne();
108 |                 </script>
109 |                 <button onclick="exampleOne()">Run</button>
110 | 
111 | <pre><code class="html">&lt;link href='stylesheet' type='text/css' href='cascade.css' /&gt;
112 | &lt;script type='text/javascript' src='cascade.js' /&gt;
113 | 
114 | &lt;h1&gt;Ooooohhhh, fancy.&lt;/h1&gt;
115 | 
116 | &lt;script&gt;
117 |   var element = document.getElementsByTagName('h1')[0];
118 |   var cascade = new Cascade(element).flow();
119 | &lt;/script&gt;</code></pre>
120 | 
121 |               </div>
122 |             </aside>
123 |           </section>
124 |           <section id="usage">
125 |             <h1>Usage</h1>
126 |             <p>
127 |               CascadeJS works by reading a line of text, splitting that text into spans around each character, and then adding animations to each span (by default). The splitting is modeled after charming.js, a vanilla javascript version of Lettering.js. Cascade requires an element be passed in on initialization:
128 |             </p>
129 | 
130 | <pre><code class="javascript">var cascade = new Cascade(element);</code></pre>
131 | 
132 |             <p>
133 |               Cascade has two methods that can be called:
134 |             </p>
135 | 
136 | <pre><code class="javascript">var cascade = new Cascade(element);
137 | cascade.fragment();
138 | cascade.flow();</code></pre>
139 | 
140 |           <p>
141 |             Calling <font class="code">fragment()</font> will split the text without adding the animations, and must be called on an element with only a text node for a child. Calling <font class="code">flow()</font> will first fragment the text, and then animate all children elements in a cascade.
142 |           </p>
143 |           </section>
144 |           <section id="flow-usage">
145 |             <h3 id="flow-usage">Usage of <font class="code">flow()</font></h3>
146 | 
147 |             <p>
148 |               Initialize Cascade with an element:
149 |             </p>
150 | 
151 | <pre><code class="javascript">var cascade = new Cascade(element);</code></pre>
152 | 
153 |             <p>
154 |               Then call <font class='code'>flow()</font> with any or none of the following options:
155 |             </p>
156 | 
157 | <pre><code class="javascript">cascade.flow({
158 |   tagName: 'span',
159 |   classPrefix: 'cascade char',
160 |   effect: 'fadeUp',
161 |   totalTime: 0.5,
162 |   duration: 1,
163 |   shouldFragment: true,
164 |   shouldAppendTargetClass: true,
165 |   targetClass: 'cascade-container'
166 | });</code></pre>
167 | 
168 |             <p>
169 |               <font class='code'>tagName:</font> - The tag that will wrap each character, ie <font class='code'>&lt;span&gt;A&lt;/span&gt;</font>. Defaults to 'span'.
170 |             </p>
171 | 
172 |             <p>
173 |               <font class='code'>classPrefix:</font> - The class(es) to be added to the tags, with an increasing number appended at the end, ie <font class='code'>&lt;span class=&quot;cascade char1&quot;&gt;A&lt;/span&gt;</font>. Defaults to 'cascade char'.
174 |             </p>
175 | 
176 |             <p>
177 |               <font class='code'>effect:</font> - The class name that adds the animation. In this default, 'fadeUp' uses a keyframe animation to fade in text while utilizing translateY to slide it up. Defaults to 'fadeUp'.</br>
178 |             </p>
179 | 
180 |             <p>
181 |               <font class='code'>totalTime:</font> - The amount of time in seconds as a float/integer from the first letter beginning it's animation to the last letter beginning it's animation. Defaults to <font class='code'>0.5</font>.
182 |             </p>
183 | 
184 |             <p>
185 |               <font class='code'>duration:</font> - How long each letter's animation lasts. If you'd rather specify this in your CSS, just leave this option empty. Defaults to <font class='code'>null</font> and doesn't add this styling.
186 |             </p>
187 | 
188 |             <p>
189 |               <font class='code'>shouldFragment:</font> - If you've previously called <font class='code'>fragment()</font> on this node, set this option to false otherwise the fragmentation will run again and throw an error. Defaults to true.
190 |             </p>
191 | 
192 |             <p>
193 |               <font class='code'>shouldAppendTargetClass:</font> - Defaults to true, will append a class to the target element after fragmenting.
194 |             </p>
195 | 
196 |             <p>
197 |               <font class='code'>targetClass:</font> - The class to be appended to the target element. Defaults to 'cascade-container'. Note: if you've already added the class to the element that you'd like appended, CascadeJS will skip the appending. Example:
198 |             </p>
199 | 
200 | <pre><code class="html">&lt;!-- This element will have a class appended to it --&gt;
201 | &lt;h1 class='text-center'&gt;Hello!&lt;/h1&gt;
202 | 
203 | &lt;script&gt;
204 |   var element = document.getElementsByTagName('h1')[0];
205 |   var cascade = new Cascade(element);
206 |   cascade.flow({
207 |     targetClass: 'cascade-container'
208 |   });
209 | &lt;/script&gt;
210 | 
211 | &lt;!-- This element will NOT have a class appended --&gt;
212 | &lt;h1 class='text-center cascade-container'&gt;Hello!&lt;/h1&gt;
213 | 
214 | &lt;script&gt;
215 |   var element = document.getElementsByTagName('h1')[0];
216 |   var cascade = new Cascade(element);
217 |   cascade.flow({
218 |     targetClass: 'cascade-container'
219 |   });
220 | &lt;/script&gt;</code></pre>
221 |           </section>
222 | 
223 |           <section id="fragment-usage">
224 |             <h3 id="fragment-usage">Usage of <font class="code">fragment()</font></h3>
225 | 
226 |             <p>
227 |               <font class='code'>fragment()</font> will split and wrap your text, but not animate it. Just want to style each letter in an interesting way? Want a vanilla javascript replacement for lettering.js? This is it. <font class='code'>fragment()</font> accepts all the same options as <font class='code'>flow()</font> , but only the following will be applied, while the rest will be stored in the object for when <font class='code'>flow()</font> is called:
228 |             </p>
229 | 
230 | <pre><code class="javascript">var cascade = new Cascade(element).fragment({
231 |   tagName: 'span',
232 |   classPrefix: 'cascade char'
233 | });</code></pre>
234 | 
235 |             <p>
236 |               You can then call:
237 |             </p>
238 | 
239 | <pre><code class="javascript">cascade.flow({
240 |   shouldFragment: false
241 | });</code></pre>
242 | 
243 |             <p>
244 |               when you're ready for some cool animations.
245 |             </p>
246 |           </section>
247 | 
248 |           <section id="examples">
249 |             <h1>Examples</h1>
250 | <pre><code class="html">&lt;h1&gt;Hello!&lt;/h1&gt;
251 | 
252 | &lt;script&gt;
253 |   var element = document.getElementsByClassName('cascade-container')[0];
254 |   cascade = new Cascade(element).flow({
255 |     totalTime: 2,
256 |     duration: 1.5
257 |   })
258 | &lt;/script&gt;</code></pre>
259 | 
260 |             <p>
261 |               Produces:
262 |             </p>
263 | 
264 | <pre><code class="html">&lt;h1 class='cascade-container'&gt;
265 |   &lt;span class='cascade char1 fadeUp' style='animation-delay: 0s; animation-duration: 1.5s;'&gt;H&lt;/span&gt;
266 |   &lt;span class='cascade char2 fadeUp' style='animation-delay: 0.4s; animation-duration: 1.5s;'&gt;e&lt;/span&gt;
267 |   &lt;span class='cascade char3 fadeUp' style='animation-delay: 0.8s; animation-duration: 1.5s;'&gt;l&lt;/span&gt;
268 |   &lt;span class='cascade char4 fadeUp' style='animation-delay: 1.2s; animation-duration: 1.5s;'&gt;l&lt;/span&gt;
269 |   &lt;span class='cascade char5 fadeUp' style='animation-delay: 1.6s; animation-duration: 1.5s;'&gt;o&lt;/span&gt;
270 |   &lt;span class='cascade char6 fadeUp' style='animation-delay: 2s; animation-duration: 1.5s;'&gt;!&lt;/span&gt;
271 | &lt;/h1&gt;</code></pre>
272 | 
273 |             <p>
274 |               Use Animate.css? Try this:
275 |             </p>
276 | 
277 | <pre><code class="javascript">var element = document.getElementsByClassName('cascade-container')[0];
278 | var cascade = new Cascade(element).flow({
279 |   classPrefix: 'animated char',
280 |   effect: 'bounceInLeft'
281 | });</code></pre>
282 |           </section>
283 |         </article>
284 |       </main>
285 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
286 |       <script src="js/extras.js"></script>
287 |       <script>hljs.initHighlightingOnLoad();</script>
288 |     </body>
289 | </html>
290 | 


--------------------------------------------------------------------------------
/docs/js/cascade.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Copyright 2017 Joshua Bartlett
  3 |  * Available under MIT License
  4 |  */
  5 | 
  6 | function Cascade(element, options) {
  7 |   // set defaults
  8 |   this.targetElement = element; // element to segment and animate
  9 |   this.children = this.targetElement.childNodes; // pre-segment child nodes
 10 | 
 11 |   this.setDefaults = function (options) {
 12 |     var opts = options || {};
 13 |     this.classPrefix = opts.classPrefix || 'cascade char';
 14 |     this.tagName = opts.tagName || 'span';
 15 |     this.effect = opts.effect || 'fadeUp';
 16 |     this.totalTime = opts.totalTime || 0.5;
 17 |     this.duration = opts.duration;
 18 |     this.shouldFragment = opts.shouldFragment != null ? opts.shouldFragment : true;
 19 |     this.shouldAppendTargetClass = opts.shouldAppendTargetClass != null ? opts.shouldAppendTargetClass : true;
 20 |     this.targetClass = opts.targetClass != null ? opts.targetClass : ' cascade-container';
 21 |   }.bind(this);
 22 | 
 23 |   function appendTargetClass(target, targetClass) {
 24 |     var string = target.className,
 25 |         match = string.match(targetClass);
 26 | 
 27 |     if (match === null) {
 28 |       target.className += targetClass;
 29 |     }
 30 |   }
 31 | 
 32 |   // take a string inside an element, split it, wrap them
 33 |   // in their own tags, then inject the whole thing back
 34 |   // into the parent node
 35 |   function inject(element, tagName, classPrefix, shouldAppendTargetClass, targetClass) {
 36 |     var parent = element.parentNode,
 37 |         string = element.nodeValue,
 38 |         length = string.length,
 39 |         i = -1,
 40 |         count = 1;
 41 | 
 42 |     while (++i < length) {
 43 |       var newNode = document.createElement(tagName),
 44 |           newNodeText = document.createTextNode(string[i]);
 45 | 
 46 |       newNode.className = classPrefix + count;
 47 |       newNode.appendChild(newNodeText);
 48 | 
 49 |       parent.insertBefore(newNode, element);
 50 | 
 51 |       ++count;
 52 |     }
 53 | 
 54 |     parent.removeChild(element);
 55 | 
 56 |     this.targetElement = parent;
 57 |     this.children = parent.childNodes;
 58 | 
 59 |     parent.setAttribute('data-made-with', 'CascadeJS');
 60 | 
 61 |     if (shouldAppendTargetClass) {
 62 |       appendTargetClass(parent, targetClass);
 63 |     }
 64 |   }
 65 | 
 66 |   function animate(item, animationEffect, delay, duration) {
 67 |     item.style.animationDelay = delay + 's';
 68 | 
 69 |     // only add animation-duration to element if it was
 70 |     // specified in the options. Otherwise, let whatever is specified
 71 |     // in the CSS handle this.
 72 |     if (duration != null) {
 73 |       item.style.animationDuration = duration + 's';
 74 |     }
 75 | 
 76 |     item.className += ' ' + animationEffect;
 77 |   }
 78 | 
 79 |   this.flow = function (options) {
 80 |     // set defaults
 81 |     var opts = options || {};
 82 |     this.setDefaults(opts);
 83 | 
 84 |     // split the text into spans if segmentation
 85 |     // hasn't been performed yet
 86 |     if (this.shouldFragment) {
 87 |       this.fragment({}, false);
 88 |     }
 89 | 
 90 |     // iterate through spans and animate them
 91 |     var array = this.children,
 92 |         totalTime = this.totalTime,
 93 |         effect = this.effect,
 94 |         duration = this.duration,
 95 |         i = -1;
 96 |     while (i++ < array.length - 1) {
 97 |       var item = array[i],
 98 |           time = totalTime / (array.length - 1) * i;
 99 |       animate(item, effect, time, duration);
100 |     }
101 |   }.bind(this);
102 | 
103 |   this.fragment = function (options, setDefaults) {
104 |     // set defaults only if they are being passed in from an
105 |     // external call, ie new Cascade.fragment(options) to prevent
106 |     // overwriting defaults when called internally
107 |     var shouldSetDefaults = setDefaults != null ? setDefaults : true;
108 |     var opts = options || {};
109 | 
110 |     // set defaults only if
111 |     if (shouldSetDefaults) {
112 |       this.setDefaults(opts);
113 |     }
114 | 
115 |     var children = this.children;
116 | 
117 |     // throw some errors if elements are set up improperly
118 |     if (children.length > 1) {
119 |       console.error('CascadeJS Error - error in target element:\n Please limit the amount children of this element to 1 (population control and all that).');
120 |     } else if (children[0].nodeType !== Node.TEXT_NODE) {
121 |       console.error('CascadeJS Error - error in target element:\n Please ensure that the immediate child of this element is text node. If you would like to animate a collection of divs, please add the option shouldFragment: false when calling Cascade.flow().');
122 |     } else {
123 |       inject(children[0], this.tagName, this.classPrefix, this.shouldAppendTargetClass, this.targetClass);
124 |     }
125 |   }.bind(this);
126 | }


--------------------------------------------------------------------------------
/docs/js/extras.js:
--------------------------------------------------------------------------------
 1 | ;(function() {
 2 |   window.sideBarLocked = false;
 3 |   window.addEventListener('scroll', function() {
 4 |     if (!window.sideBarLocked && window.scrollY >= window.innerHeight) {
 5 |       document.getElementById('sidebar').style.position = 'fixed';
 6 |       window.sideBarLocked = true;
 7 |     } else if (window.sideBarLocked && window.scrollY < window.innerHeight) {
 8 |       document.getElementById('sidebar').style.position = 'absolute';
 9 |       window.sideBarLocked = false;
10 |     }
11 |   })
12 | }).call(this);
13 | 


--------------------------------------------------------------------------------
/docs/js/vendor/html5shiv.js:
--------------------------------------------------------------------------------
1 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
2 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
3 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
4 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
5 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
6 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | var gulp = require('gulp');
  2 | var sass = require('gulp-sass');
  3 | var concat = require('gulp-concat');
  4 | //var imagemin = require('gulp-imagemin');
  5 | var plumber = require('gulp-plumber');
  6 | var notify = require('gulp-notify');
  7 | var autoprefixer = require('gulp-autoprefixer');
  8 | var babel = require('gulp-babel');
  9 | var livereload = require('gulp-livereload');
 10 | var rename = require('gulp-rename');
 11 | var minify = require('gulp-minify');
 12 | 
 13 | var plumberErrorHandler = { errorHandler: notify.onError({
 14 |     title: 'Gulp',
 15 |     message: 'Error: <%= error.message %>'
 16 |   })
 17 | };
 18 | 
 19 | gulp.task('sass', function () {
 20 |     gulp.src('./src/css/cascade.scss')
 21 |       .pipe(plumber(plumberErrorHandler))
 22 |       .pipe(sass({
 23 |         outputStyle: 'compressed'
 24 |       }))
 25 |       .pipe(autoprefixer())
 26 |       .pipe(rename('cascade.min.css'))
 27 |       .pipe(gulp.dest('dist'))
 28 |       .pipe(livereload());
 29 | 
 30 |     gulp.src('./src/css/cascade.scss')
 31 |       .pipe(plumber(plumberErrorHandler))
 32 |       .pipe(sass())
 33 |       .pipe(autoprefixer())
 34 |       .pipe(gulp.dest('dist'))
 35 |       .pipe(livereload());
 36 | 
 37 |     gulp.src('./src/css/cascade.scss')
 38 |       .pipe(plumber(plumberErrorHandler))
 39 |       .pipe(sass())
 40 |       .pipe(autoprefixer())
 41 |       .pipe(gulp.dest('docs/css/src'))
 42 |       .pipe(livereload());
 43 | 
 44 |     gulp.src('./docs/css/styles.scss')
 45 |       .pipe(plumber(plumberErrorHandler))
 46 |       .pipe(sass())
 47 |       .pipe(autoprefixer())
 48 |       .pipe(gulp.dest('docs/css'))
 49 |       .pipe(livereload());
 50 | });
 51 | 
 52 | gulp.task('js', function () {
 53 |   gulp.src([
 54 |     'src/js/initializers/*.js',
 55 |     'src/js/cascade.js'
 56 |   ])
 57 |     .pipe(plumber(plumberErrorHandler))
 58 |     .pipe(babel({
 59 |       presets: [
 60 |         ["es2015", { "modules": false }]
 61 |       ]
 62 |     }))
 63 |     .pipe(concat('cascade.js'))
 64 |     .pipe(minify())
 65 |     .pipe(gulp.dest('dist'))
 66 |     .pipe(livereload());
 67 | 
 68 |   gulp.src([
 69 |     'src/js/initializers/*.js',
 70 |     'src/js/cascade.js'
 71 |   ])
 72 |     .pipe(plumber(plumberErrorHandler))
 73 |     .pipe(babel({
 74 |       presets: [
 75 |         ["es2015", { "modules": false }]
 76 |       ]
 77 |     }))
 78 |     .pipe(concat('cascade.js'))
 79 |     .pipe(gulp.dest('docs/js'))
 80 |     .pipe(livereload());
 81 | });
 82 | 
 83 | /*gulp.task('img', function() {
 84 |   gulp.src('src/img/*.{png,jpg,gif,svg}')
 85 |     .pipe(plumber(plumberErrorHandler))
 86 |     .pipe(imagemin({
 87 |       optimizationLevel: 7,
 88 |       progressive: true
 89 |     }))
 90 |     .pipe(gulp.dest('dist/img'))
 91 |     .pipe(livereload());
 92 | });*/
 93 | 
 94 | gulp.task('watch', function() {
 95 |   livereload.listen();
 96 |   gulp.watch('src/css/**/*.scss', ['sass']);
 97 |   gulp.watch('docs/css/**/*.scss', ['sass']);
 98 |   gulp.watch('src/js/**/*.js', ['js']);
 99 |   //gulp.watch('img/*.{png,jpg,gif,svg}', ['img']);
100 | });
101 | 
102 | gulp.task('default', ['sass', 'js', 'watch']);
103 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cascadejs",
 3 |   "version": "1.0.7",
 4 |   "description": "CascadeJS makes it simple to add cascading animations to individual letters in a text string, using only vanilla javascript, for dynamic typography.",
 5 |   "main": "cascade.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/bartboy011/CascadeJS.git"
12 |   },
13 |   "keywords": [
14 |     "javascript",
15 |     "npm",
16 |     "animation",
17 |     "cascading",
18 |     "typography",
19 |     "letters"
20 |   ],
21 |   "author": "Joshua Bartlett",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/bartboy011/CascadeJS/issues"
25 |   },
26 |   "homepage": "https://github.com/bartboy011/CascadeJS#readme",
27 |   "devDependencies": {
28 |     "babel-preset-es2015": "^6.22.0",
29 |     "gulp-autoprefixer": "^3.1.1",
30 |     "gulp-babel": "^6.1.2",
31 |     "gulp-concat": "^2.6.1",
32 |     "gulp-imagemin": "^3.1.1",
33 |     "gulp-livereload": "^3.8.1",
34 |     "gulp-minify": "0.0.15",
35 |     "gulp-notify": "^3.0.0",
36 |     "gulp-plumber": "^1.1.0",
37 |     "gulp-rename": "^1.2.2",
38 |     "gulp-sass": "^3.1.0"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/css/cascade.scss:
--------------------------------------------------------------------------------
 1 | /* Copyright 2017 Joshua Bartlett */
 2 | /* Available under MIT License */
 3 | 
 4 | .cascade-container * {
 5 |   display    : inline-block;
 6 |   white-space: pre;
 7 | }
 8 | 
 9 | .cascade {
10 |   animation-fill-mode: both;
11 |   animation-duration : 1s;
12 | }
13 | @keyframes fadeUp {
14 |   from {
15 |     opacity  : 0;
16 |     transform: translate3d(0, 100%, 0);
17 |   }
18 | 
19 |   to {
20 |     opacity  : 1;
21 |     transform: none;
22 |   }
23 | }
24 | 
25 | .fadeUp {
26 |   animation-name: fadeUp;
27 | }
28 | @keyframes fadeDown {
29 |   from {
30 |     opacity  : 0;
31 |     transform: translate3d(0, -100%, 0);
32 |   }
33 | 
34 |   to {
35 |     opacity  : 1;
36 |     transform: none;
37 |   }
38 | }
39 | 
40 | .fadeDown {
41 |   animation-name: fadeDown;
42 | }
43 | @keyframes doTheWave {
44 |   to {
45 |     transform: translateY(100px);
46 |   }
47 | }
48 | 
49 | .doTheWave {
50 |   animation-name           : doTheWave;
51 |   animation-timing-function: ease-in-out;
52 |   animation-direction      : alternate;
53 |   animation-iteration-count: infinite;
54 | }
55 | 


--------------------------------------------------------------------------------
/src/js/cascade.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Copyright 2017 Joshua Bartlett
  3 |  * Available under MIT License
  4 |  */
  5 | 
  6 | function Cascade(element, options) {
  7 |   // set defaults
  8 |   this.targetElement  = element; // element to segment and animate
  9 |   this.children = this.targetElement.childNodes; // pre-segment child nodes
 10 | 
 11 |   this.setDefaults = function(options) {
 12 |     var opts                        = options          || {};
 13 |     this.classPrefix                = opts.classPrefix || 'cascade char';
 14 |     this.tagName                    = opts.tagName     || 'span';
 15 |     this.effect                     = opts.effect      || 'fadeUp';
 16 |     this.totalTime                  = opts.totalTime   || 0.5;
 17 |     this.duration                   = opts.duration;
 18 |     this.shouldFragment             = opts.shouldFragment          != null ? opts.shouldFragment : true;
 19 |     this.shouldAppendTargetClass    = opts.shouldAppendTargetClass != null ? opts.shouldAppendTargetClass : true;
 20 |     this.targetClass                = opts.targetClass             != null ? opts.targetClass : ' cascade-container';
 21 |   }.bind(this);
 22 | 
 23 |   function appendTargetClass(target, targetClass) {
 24 |     let string = target.className,
 25 |       match    = string.match(targetClass);
 26 | 
 27 |     if (match === null) {
 28 |       target.className += targetClass;
 29 |     }
 30 |   }
 31 | 
 32 |   // take a string inside an element, split it, wrap them
 33 |   // in their own tags, then inject the whole thing back
 34 |   // into the parent node
 35 |   function inject(element, tagName, classPrefix, shouldAppendTargetClass, targetClass) {
 36 |     let parent = element.parentNode,
 37 |       string   = element.nodeValue,
 38 |       length   = string.length,
 39 |       i        = -1,
 40 |       count    = 1;
 41 | 
 42 |     while (++i < length) {
 43 |       let newNode   = document.createElement(tagName),
 44 |         newNodeText = document.createTextNode(string[i]);
 45 | 
 46 |       newNode.className = classPrefix + count;
 47 |       newNode.appendChild(newNodeText);
 48 | 
 49 |       parent.insertBefore(newNode, element);
 50 | 
 51 |       ++count;
 52 |     }
 53 | 
 54 |     parent.removeChild(element);
 55 | 
 56 |     this.targetElement = parent;
 57 |     this.children      = parent.childNodes;
 58 | 
 59 |     parent.setAttribute('data-made-with', 'CascadeJS');
 60 | 
 61 |     if (shouldAppendTargetClass) {
 62 |       appendTargetClass(parent, targetClass);
 63 |     }
 64 |   }
 65 | 
 66 |   function animate(item, animationEffect, delay, duration) {
 67 |     item.style.animationDelay = `${delay}s`;
 68 | 
 69 |     // only add animation-duration to element if it was
 70 |     // specified in the options. Otherwise, let whatever is specified
 71 |     // in the CSS handle this.
 72 |     if (duration != null) {
 73 |       item.style.animationDuration = `${duration}s`;
 74 |     }
 75 | 
 76 |     item.className += (` ${animationEffect}`);
 77 |   }
 78 | 
 79 |   this.flow = function(options) {
 80 |     // set defaults
 81 |     let opts = options || {};
 82 |     this.setDefaults(opts);
 83 | 
 84 |     // split the text into spans if segmentation
 85 |     // hasn't been performed yet
 86 |     if (this.shouldFragment) {
 87 |       this.fragment({}, false);
 88 |     }
 89 | 
 90 |     // iterate through spans and animate them
 91 |     let array   = this.children,
 92 |       totalTime = this.totalTime,
 93 |       effect    = this.effect,
 94 |       duration  = this.duration,
 95 |       i = -1;
 96 |     while (i++ < array.length - 1) {
 97 |       let item = array[i],
 98 |         time   = (totalTime / (array.length - 1)) * i;
 99 |       animate(item, effect, time, duration);
100 |     }
101 |   }.bind(this);
102 | 
103 |   this.fragment = function(options, setDefaults) {
104 |     // set defaults only if they are being passed in from an
105 |     // external call, ie new Cascade.fragment(options) to prevent
106 |     // overwriting defaults when called internally
107 |     let shouldSetDefaults = setDefaults != null ? setDefaults : true;
108 |     let opts              = options || {};
109 | 
110 |     // set defaults only if
111 |     if (shouldSetDefaults) {
112 |       this.setDefaults(opts);
113 |     }
114 | 
115 |     let children = this.children;
116 | 
117 |     // throw some errors if elements are set up improperly
118 |     if (children.length > 1) {
119 |       console.error('CascadeJS Error - error in target element:\n Please limit the amount children of this element to 1 (population control and all that).');
120 |     } else if (children[0].nodeType !== Node.TEXT_NODE) {
121 |       console.error('CascadeJS Error - error in target element:\n Please ensure that the immediate child of this element is text node. If you would like to animate a collection of divs, please add the option shouldFragment: false when calling Cascade.flow().');
122 |     } else {
123 |       inject(children[0], this.tagName, this.classPrefix, this.shouldAppendTargetClass, this.targetClass);
124 |     }
125 |   }.bind(this);
126 | }
127 | 


--------------------------------------------------------------------------------